Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(components): improve RTL support #2433

Merged
merged 24 commits into from
Oct 28, 2024
Merged

feat(components): improve RTL support #2433

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
3006b9b
feat(Switch): handle`switch` in RTL mode
Malik-Jouda Oct 21, 2024
5b34c3c
feat(Input): handle `Input` in RTL mode
Malik-Jouda Oct 21, 2024
c4846db
Merge branch 'v3' into improve-rtl-support
Malik-Jouda Oct 23, 2024
5e1f9ea
feat(Modal): handle`modal` in RTL mode
Malik-Jouda Oct 23, 2024
4c8a8a0
fix(Slideover): handle `slideover` in RTL mode
Malik-Jouda Oct 23, 2024
da5bdd8
up
Malik-Jouda Oct 23, 2024
57f511b
Merge branch 'v3' into improve-rtl-support
Malik-Jouda Oct 23, 2024
b5edeb3
fix(CommandPalette): handle `CommandPalette` in RTL mode
Malik-Jouda Oct 24, 2024
9e0b818
Merge branch 'v3' into improve-rtl-support
benjamincanac Oct 24, 2024
f85c23d
Merge branch 'v3' into improve-rtl-support
benjamincanac Oct 24, 2024
576d543
feat(Input): remove the ! important marks
Malik-Jouda Oct 25, 2024
fdd8a35
fix(NavigationMenu): handle `NavigationMenu` in RTL mode
Malik-Jouda Oct 25, 2024
8d74090
fix(Tabs): handle `Tabs` in RTL mode
Malik-Jouda Oct 25, 2024
5ba374d
fix(Tooltip): handle `Tooltip` in RTL mode
Malik-Jouda Oct 25, 2024
c6e1632
up
Malik-Jouda Oct 25, 2024
88d8e92
fix(Carousel): handle `carousel` in RTL mode
Malik-Jouda Oct 25, 2024
51f3018
up
Malik-Jouda Oct 25, 2024
8e2d061
fix(Table): handle `Table` in RTL mode
Malik-Jouda Oct 25, 2024
c349ce2
fix(Accordion) handle `Accordion` in RTL mode
Malik-Jouda Oct 25, 2024
e1e6706
Merge branch 'v3' into improve-rtl-support
Malik-Jouda Oct 25, 2024
bab3eb3
test: update vue snapshots
benjamincanac Oct 25, 2024
55aaa61
playground: RTL support
Malik-Jouda Oct 25, 2024
c6b0ffd
Merge branch 'v3' into improve-rtl-support
Malik-Jouda Oct 28, 2024
f5c6d1f
Merge branch 'v3' into improve-rtl-support
Malik-Jouda Oct 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions src/theme/input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,40 +17,40 @@ export default (options: Required<ModuleOptions>) => ({
size: {
xs: {
base: 'px-2 py-1 text-xs gap-1',
leading: 'pl-2',
trailing: 'pr-2',
leading: '!ps-2',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why add ! important class here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen.Recording.2024-10-22.at.2.16.53.PM.mov

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing the class in the chrome devtools won't work, the ps-9 class doesn't exist since it isn't defined anywhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

screen-recording-2024-10-23-at-92255-am_npHC5fsW.mp4

Copy link
Contributor Author

@Malik-Jouda Malik-Jouda Oct 23, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in version 4.0.0-alpha.28, the ps-10 is not applied as expected because px-5 takes precedence, while in version 3.4.13, ps-10 works correctly.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an issue with Tailwind then, can't merge this with important values it will prevent override.

Copy link
Contributor Author

@Malik-Jouda Malik-Jouda Oct 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This issue has been solved : tailwindlabs/tailwindcss#14772

tailwindlabs/tailwindcss#14777

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Let's wait for the new release then :) Thanks for taking care of the issue on tailwindcss!

trailing: '!pe-2',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
sm: {
base: 'px-2.5 py-1.5 text-xs gap-1.5',
leading: 'pl-2.5',
trailing: 'pr-2.5',
leading: '!ps-2.5',
trailing: '!pe-2.5',
leadingIcon: 'size-4',
leadingAvatarSize: '3xs',
trailingIcon: 'size-4'
},
md: {
base: 'px-2.5 py-1.5 text-sm gap-1.5',
leading: 'pl-2.5',
trailing: 'pr-2.5',
leading: '!ps-2.5',
trailing: '!pe-2.5',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
lg: {
base: 'px-3 py-2 text-sm gap-2',
leading: 'pl-3',
trailing: 'pr-3',
leading: '!ps-3',
trailing: '!pe-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs',
trailingIcon: 'size-5'
},
xl: {
base: 'px-3 py-2 text-base gap-2',
leading: 'pl-3',
trailing: 'pr-3',
leading: '!ps-3',
trailing: '!pe-3',
leadingIcon: 'size-6',
leadingAvatarSize: 'xs',
trailingIcon: 'size-6'
Expand Down Expand Up @@ -80,7 +80,7 @@ export default (options: Required<ModuleOptions>) => ({
true: ''
},
type: {
file: 'file:mr-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none'
file: 'file:me-1.5 file:font-medium file:text-[var(--ui-text-muted)] file:outline-none'
}
},
compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
Expand All @@ -102,43 +102,43 @@ export default (options: Required<ModuleOptions>) => ({
}, {
leading: true,
size: 'xs',
class: 'pl-7'
class: '!ps-7'
}, {
leading: true,
size: 'sm',
class: 'pl-8'
class: '!ps-8'
}, {
leading: true,
size: 'md',
class: 'pl-9'
class: '!ps-9'
}, {
leading: true,
size: 'lg',
class: 'pl-10'
class: '!ps-10'
}, {
leading: true,
size: 'xl',
class: 'pl-11'
class: '!ps-11'
}, {
trailing: true,
size: 'xs',
class: 'pr-7'
class: '!pe-7'
}, {
trailing: true,
size: 'sm',
class: 'pr-8'
class: '!pe-8'
}, {
trailing: true,
size: 'md',
class: 'pr-9'
class: '!pe-9'
}, {
trailing: true,
size: 'lg',
class: 'pr-10'
class: '!pe-10'
}, {
trailing: true,
size: 'xl',
class: 'pr-11'
class: '!pe-11'
}, {
loading: true,
leading: true,
Expand Down
12 changes: 6 additions & 6 deletions src/theme/switch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
root: 'relative flex items-start',
base: ['inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-bg)] data-[state=unchecked]:bg-[var(--ui-bg-accented)]', options.theme.transitions && 'transition-colors duration-200'],
container: 'flex items-center',
thumb: 'group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
thumb: 'group pointer-events-none block rounded-full bg-[var(--ui-bg)] shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0 flex items-center justify-center',
icon: ['absolute shrink-0 group-data-[state=unchecked]:text-[var(--ui-text-dimmed)] opacity-0 size-10/12', options.theme.transitions && 'transition-[color,opacity] duration-200'],
wrapper: 'ms-2',
label: 'block font-medium text-[var(--ui-text)]',
Expand All @@ -26,31 +26,31 @@ export default (options: Required<ModuleOptions>) => ({
xs: {
base: 'w-7',
container: 'h-4',
thumb: 'size-3 data-[state=checked]:translate-x-3',
thumb: 'size-3 data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3',
wrapper: 'text-xs'
},
sm: {
base: 'w-8',
container: 'h-4',
thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
thumb: 'size-3.5 data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5',
wrapper: 'text-xs'
},
md: {
base: 'w-9',
container: 'h-5',
thumb: 'size-4 data-[state=checked]:translate-x-4',
thumb: 'size-4 data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
wrapper: 'text-sm'
},
lg: {
base: 'w-10',
container: 'h-5',
thumb: 'size-4.5 data-[state=checked]:translate-x-4.5',
thumb: 'size-4.5 data-[state=checked]:translate-x-4.5 data-[state=checked]:rtl:-translate-x-4.5',
wrapper: 'text-sm'
},
xl: {
base: 'w-11',
container: 'h-6',
thumb: 'size-5 data-[state=checked]:translate-x-5',
thumb: 'size-5 data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5',
wrapper: 'text-base'
}
},
Expand Down
Loading