From af3c4f706bb88eae02eee594a6db68cdd33bbe88 Mon Sep 17 00:00:00 2001 From: Maharshi Alpesh Date: Fri, 11 Oct 2024 14:20:50 +0530 Subject: [PATCH] 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 --- .changeset/giant-worms-hammer.md | 5 +++++ packages/core/theme/src/components/checkbox.ts | 6 +++--- packages/core/theme/src/components/date-input.ts | 4 ++-- packages/core/theme/src/components/input.ts | 8 +++----- packages/core/theme/src/components/modal.ts | 4 +--- packages/core/theme/src/components/radio.ts | 4 ++-- packages/core/theme/src/components/select.ts | 8 +++----- packages/core/theme/src/components/toggle.ts | 16 ++++++++-------- 8 files changed, 27 insertions(+), 28 deletions(-) create mode 100644 .changeset/giant-worms-hammer.md diff --git a/.changeset/giant-worms-hammer.md b/.changeset/giant-worms-hammer.md new file mode 100644 index 0000000000..f11a1ec96e --- /dev/null +++ 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 index 7ebf311c7d..3a9de2c9a0 100644 --- 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 index 1036491eec..62977f947f 100644 --- 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 index f5dad6fdf1..ab672df7f6 100644 --- 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 index b98f3d24f0..4aeeb471f1 100644 --- 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 index 30f0feeacb..a5161981fd 100644 --- 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 index 1e0a443f65..81c664c42c 100644 --- 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 index 8b70dcf2be..f8d32f7032 100644 --- 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",