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

* 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 <[email protected]> Co-authored-by: WK Wong <[email protected]>
heroui-inc · Sep 8, 2024 · 6f44cd6 · 6f44cd6
1 parent deb1507
commit 6f44cd6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 22 deletions.
diff --git a/.changeset/serious-dolls-mix.md b/.changeset/serious-dolls-mix.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+Improved RTL support for the select component
diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
@@ -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",
     innerWrapper:
       "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",
-    spinner: "absolute right-3 rtl:left-3 rtl:right-[unset]",
+    selectorIcon: "absolute end-3 w-4 h-4",
+    spinner: "absolute end-3",
     value: ["text-foreground-500", "font-normal", "w-full", "text-left", "rtl:text-right"],
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
@@ -135,7 +135,7 @@ const select = tv({
       },
       "outside-left": {
         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: {
         label: "text-tiny cursor-pointer",
@@ -162,7 +162,7 @@ const select = tv({
     },
     isRequired: {
       true: {
-        label: "after:content-['*'] after:text-danger after:ml-0.5",
+        label: "after:content-['*'] after:text-danger after:ms-0.5",
       },
     },
     isMultiline: {
@@ -543,15 +543,7 @@ const select = tv({
       isMultiline: false,
       class: {
         base: "group relative justify-end",
-        label: [
-          "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]",
-        ],
+        label: ["pb-0", "z-20", "top-1/2", "-translate-y-1/2", "group-data-[filled=true]:start-0"],
       },
     },
     // labelPlacement=[inside]
@@ -676,9 +668,7 @@ const select = tv({
       isMultiline: false,
       class: {
         label: [
-          "left-2",
-          "rtl:right-2",
-          "rtl:left-[unset]",
+          "start-2",
           "text-tiny",
           "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
         ],
@@ -691,9 +681,7 @@ const select = tv({
       size: "md",
       class: {
         label: [
-          "left-3",
-          "rtl:right-3",
-          "rtl:left-[unset]",
+          "start-3",
           "text-small",
           "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
         ],
@@ -706,9 +694,7 @@ const select = tv({
       size: "lg",
       class: {
         label: [
-          "left-3",
-          "rtl:right-3",
-          "rtl:left-[unset]",
+          "start-3",
           "text-medium",
           "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
         ],