refactor(theme): replace the use of RTL-specific styles with logical …

…properties (#3868) * chore(rtl): remove the usages of rtl * chore(changeset): adding the changeset * chore(changeset): update changeset message --------- Co-authored-by: WK Wong <[email protected]>
nextui-org · Oct 11, 2024 · af3c4f7 · af3c4f7
1 parent 88c97f6
commit af3c4f7
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 28 deletions.
diff --git a/.changeset/giant-worms-hammer.md b/.changeset/giant-worms-hammer.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+replace the use of RTL-specific styles with logical properties.
diff --git a/packages/core/theme/src/components/checkbox.ts b/packages/core/theme/src/components/checkbox.ts
@@ -78,7 +78,7 @@ const checkbox = tv({
     size: {
       sm: {
         wrapper: [
-          "w-4 h-4 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "w-4 h-4 me-2",
           "rounded-[calc(theme(borderRadius.medium)*0.5)]",
           "before:rounded-[calc(theme(borderRadius.medium)*0.5)]",
           "after:rounded-[calc(theme(borderRadius.medium)*0.5)]",
@@ -88,7 +88,7 @@ const checkbox = tv({
       },
       md: {
         wrapper: [
-          "w-5 h-5 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "w-5 h-5 me-2",
           "rounded-[calc(theme(borderRadius.medium)*0.6)]",
           "before:rounded-[calc(theme(borderRadius.medium)*0.6)]",
           "after:rounded-[calc(theme(borderRadius.medium)*0.6)]",
@@ -98,7 +98,7 @@ const checkbox = tv({
       },
       lg: {
         wrapper: [
-          "w-6 h-6 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "w-6 h-6 me-2",
           "rounded-[calc(theme(borderRadius.medium)*0.7)]",
           "before:rounded-[calc(theme(borderRadius.medium)*0.7)]",
           "after:rounded-[calc(theme(borderRadius.medium)*0.7)]",

diff --git a/packages/core/theme/src/components/date-input.ts b/packages/core/theme/src/components/date-input.ts
@@ -166,13 +166,13 @@ const dateInput = tv({
       outside: {
         base: "flex flex-col data-[has-helper=true]:pb-[calc(theme(fontSize.tiny)_+8px)] gap-y-1.5",
         label: "w-full text-foreground",
-        helperWrapper: "absolute top-[calc(100%_+_2px)] left-0 rtl:right-0",
+        helperWrapper: "absolute top-[calc(100%_+_2px)] start-0",
       },
       "outside-left": {
         base: "flex-row items-center data-[has-helper=true]:pb-[calc(theme(fontSize.tiny)_+_8px)] gap-x-2 flex-nowrap",
         label: "relative text-foreground",
         inputWrapper: "relative flex-1",
-        helperWrapper: "absolute top-[calc(100%_+_2px)] left-0 rtl:right-0",
+        helperWrapper: "absolute top-[calc(100%_+_2px)] start-0",
       },
       inside: {
         label: "w-full text-tiny cursor-text",

diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
@@ -28,8 +28,7 @@ const input = tv({
       "absolute",
       "z-10",
       "pointer-events-none",
-      "origin-top-left",
-      "rtl:origin-top-right",
+      "origin-top-start",
       "subpixel-antialiased",
       "block",
       "text-small",
@@ -189,7 +188,7 @@ const input = tv({
     },
     isClearable: {
       true: {
-        input: "peer pr-6 rtl:pr-0 rtl:pl-6",
+        input: "peer pe-6",
         clearButton: "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block",
       },
     },
@@ -208,8 +207,7 @@ const input = tv({
     },
     isRequired: {
       true: {
-        label:
-          "after:content-['*'] after:text-danger after:ml-0.5 rtl:after:ml-[unset] rtl:after:mr-0.5",
+        label: "after:content-['*'] after:text-danger after:ms-0.5",
       },
     },
     isMultiline: {

diff --git a/packages/core/theme/src/components/modal.ts b/packages/core/theme/src/components/modal.ts
@@ -59,9 +59,7 @@ const modal = tv({
       "outline-none",
       "select-none",
       "top-1",
-      "right-1",
-      "rtl:left-1",
-      "rtl:right-[unset]",
+      "end-1",
       "p-2",
       "text-foreground-500",
       "rounded-full",

diff --git a/packages/core/theme/src/components/radio.ts b/packages/core/theme/src/components/radio.ts
@@ -97,14 +97,14 @@ const radio = tv({
       md: {
         wrapper: "w-5 h-5",
         control: "w-2 h-2",
-        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
+        labelWrapper: "ms-2",
         label: "text-medium",
         description: "text-small",
       },
       lg: {
         wrapper: "w-6 h-6",
         control: "w-2.5 h-2.5",
-        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
+        labelWrapper: "ms-2",
         label: "text-large",
         description: "text-medium",
       },

diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
@@ -10,8 +10,7 @@ const select = tv({
       "block",
       "absolute",
       "z-10",
-      "origin-top-left",
-      "rtl:origin-top-right",
+      "origin-top-start",
       "subpixel-antialiased",
       "text-small",
       "text-foreground-500",
@@ -24,7 +23,7 @@ const select = tv({
       "inline-flex h-full w-[calc(100%_-_theme(spacing.6))] min-h-4 items-center gap-1.5 box-border",
     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"],
+    value: ["text-foreground-500", "font-normal", "w-full", "text-start"],
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
@@ -188,8 +187,7 @@ const select = tv({
         base: "transition-background motion-reduce:transition-none !duration-150",
         label: [
           "will-change-auto",
-          "origin-top-left",
-          "rtl:origin-top-right",
+          "origin-top-start",
           "!duration-200",
           "!ease-out",
           "transition-[transform,color,left,opacity]",

diff --git a/packages/core/theme/src/components/toggle.ts b/packages/core/theme/src/components/toggle.ts
@@ -54,8 +54,8 @@ const toggle = tv({
       "rounded-full",
       "origin-right",
     ],
-    startContent: "z-0 absolute left-1.5 rtl:right-1.5 rtl:left-[unset] text-current",
-    endContent: "z-0 absolute right-1.5 rtl:left-1.5 rtl:right-[unset] text-default-600",
+    startContent: "z-0 absolute start-1.5 text-current",
+    endContent: "z-0 absolute end-1.5 text-default-600",
     thumbIcon: "text-black",
     label: "relative text-foreground select-none",
   },
@@ -100,33 +100,33 @@ const toggle = tv({
     },
     size: {
       sm: {
-        wrapper: "w-10 h-6 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-10 h-6 me-2",
         thumb: [
           "w-4 h-4 text-tiny",
           //selected
-          "group-data-[selected=true]:ml-4 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-4",
+          "group-data-[selected=true]:ms-4",
         ],
         endContent: "text-tiny",
         startContent: "text-tiny",
         label: "text-small",
       },
       md: {
-        wrapper: "w-12 h-7 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-12 h-7 me-2",
         thumb: [
           "w-5 h-5 text-small",
           //selected
-          "group-data-[selected=true]:ml-5 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-5",
+          "group-data-[selected=true]:ms-5",
         ],
         endContent: "text-small",
         startContent: "text-small",
         label: "text-medium",
       },
       lg: {
-        wrapper: "w-14 h-8 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-14 h-8 me-2",
         thumb: [
           "w-6 h-6 text-medium",
           //selected
-          "group-data-[selected=true]:ml-6 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-6",
+          "group-data-[selected=true]:ms-6",
         ],
         endContent: "text-medium",
         startContent: "text-medium",