archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(components): improve RTL support for select component (#2041)

Browse Source 
* fix(components): improve RTL support for select component

* fix(theme): rtl styles for select

* chore(changeset): remove unchanged package

* chore(theme): remove ps-2

---------

Co-authored-by: amirhhashemi <87268103+amirhhashemi@users.noreply.github>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>
This commit is contained in:
Amir Hossein Hashemi 2024-09-08 16:32:25 +03:30 committed by GitHub
parent deb15078cc
commit 6f44cd6a98
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/serious-dolls-mix.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/theme": patch
---
Improved RTL support for the select component

30
packages/core/theme/src/components/select.ts
View File

@ -22,8 +22,8 @@ const select = tv({
"relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-sm outline-none tap-highlight-transparent", "relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-sm outline-none tap-highlight-transparent",
innerWrapper: innerWrapper:
"inline-flex h-full w-[calc(100%_-_theme(spacing.6))] min-h-4 items-center gap-1.5 box-border", "inline-flex h-full w-[calc(100%_-_theme(spacing.6))] min-h-4 items-center gap-1.5 box-border",
selectorIcon: "absolute right-3 rtl:left-3 rtl:right-[unset] w-4 h-4", selectorIcon: "absolute end-3 w-4 h-4",
spinner: "absolute right-3 rtl:left-3 rtl:right-[unset]", spinner: "absolute end-3",
value: ["text-foreground-500", "font-normal", "w-full", "text-left", "rtl:text-right"], value: ["text-foreground-500", "font-normal", "w-full", "text-left", "rtl:text-right"],
listboxWrapper: "scroll-py-6 max-h-64 w-full", listboxWrapper: "scroll-py-6 max-h-64 w-full",
listbox: "", listbox: "",
@ -135,7 +135,7 @@ const select = tv({
}, },
"outside-left": { "outside-left": {
base: "flex-row items-center flex-nowrap items-start", base: "flex-row items-center flex-nowrap items-start",
label: "relative pr-2 rtl:pl-2 rtl:pr-[unset] text-foreground", label: "relative pe-2 text-foreground",
}, },
inside: { inside: {
label: "text-tiny cursor-pointer", label: "text-tiny cursor-pointer",
@ -162,7 +162,7 @@ const select = tv({
}, },
isRequired: { isRequired: {
true: { true: {
label: "after:content-['*'] after:text-danger after:ml-0.5", label: "after:content-['*'] after:text-danger after:ms-0.5",
}, },
}, },
isMultiline: { isMultiline: {
@ -543,15 +543,7 @@ const select = tv({
isMultiline: false, isMultiline: false,
class: { class: {
base: "group relative justify-end", base: "group relative justify-end",
label: [ label: ["pb-0", "z-20", "top-1/2", "-translate-y-1/2", "group-data-[filled=true]:start-0"],
"pb-0",
"z-20",
"top-1/2",
"-translate-y-1/2",
"group-data-[filled=true]:left-0",
"rtl:group-data-[filled=true]:right-0",
"rtl:group-data-[filled=true]:left-[unset]",
],
}, },
}, },
// labelPlacement=[inside] // labelPlacement=[inside]
@ -676,9 +668,7 @@ const select = tv({
isMultiline: false, isMultiline: false,
class: { class: {
label: [ label: [
"left-2", "start-2",
"rtl:right-2",
"rtl:left-[unset]",
"text-tiny", "text-tiny",
"group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]", "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
], ],
@ -691,9 +681,7 @@ const select = tv({
size: "md", size: "md",
class: { class: {
label: [ label: [
"left-3", "start-3",
"rtl:right-3",
"rtl:left-[unset]",
"text-small", "text-small",
"group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]", "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
], ],
@ -706,9 +694,7 @@ const select = tv({
size: "lg", size: "lg",
class: { class: {
label: [ label: [
"left-3", "start-3",
"rtl:right-3",
"rtl:left-[unset]",
"text-medium", "text-medium",
"group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]", "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
], ],