From 97032afae2139dd8683bdb055a2878f09fdb2519 Mon Sep 17 00:00:00 2001 From: Waleed Asender Date: Sun, 23 Feb 2025 17:59:50 +0300 Subject: [PATCH 1/5] fix(progress): add RTL support to the progress component (#4908) --- packages/core/theme/src/components/progress.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/core/theme/src/components/progress.ts b/packages/core/theme/src/components/progress.ts index 03becc089a..c7f025a02c 100644 --- a/packages/core/theme/src/components/progress.ts +++ b/packages/core/theme/src/components/progress.ts @@ -27,8 +27,8 @@ const progress = tv( label: "", labelWrapper: "flex justify-between", value: "", - track: "z-0 relative bg-default-300/50 overflow-hidden", - indicator: "h-full", + track: "z-0 relative bg-default-300/50 overflow-hidden rtl:rotate-180", + indicator: "h-full rtl:origin-right ltr:origin-left", }, variants: { color: { @@ -97,7 +97,13 @@ const progress = tv( }, isIndeterminate: { true: { - indicator: ["absolute", "w-full", "origin-left", "animate-indeterminate-bar"], + indicator: [ + "absolute", + "w-full", + "rtl:origin-right", + "ltr:origin-left", + "animate-indeterminate-bar", + ], }, }, isDisabled: { From a29980166877bc1f02caacb292e03f90c33fc455 Mon Sep 17 00:00:00 2001 From: Waleed Asender Date: Sun, 23 Feb 2025 18:38:39 +0300 Subject: [PATCH 2/5] docs(progress): add changeset notes --- .changeset/happy-kangaroos-thank.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 .changeset/happy-kangaroos-thank.md diff --git a/.changeset/happy-kangaroos-thank.md b/.changeset/happy-kangaroos-thank.md new file mode 100644 index 0000000000..36139a86c4 --- /dev/null +++ b/.changeset/happy-kangaroos-thank.md @@ -0,0 +1,12 @@ +--- +"@heroui/progress": patch +--- + +These changes ensure that the progress bar behaves correctly in both LTR and RTL layouts, which is crucial for supporting languages that read from right to left (like Arabic, Hebrew, etc.). The transform origin points are particularly important for animations and transitions of the progress indicator. + +In the track class: +Added rtl:rotate-180 which rotates the track 180 degrees when in RTL mode, ensuring correct direction + +In the indicator class added RTL-aware origin points: +rtl:origin-right sets the transform origin to the right side in RTL mode. +ltr:origin-left sets the transform origin to the left side in LTR (Left-to-Right) mode. \ No newline at end of file From 461140e523595eec0037784ceaef7883d96d3f43 Mon Sep 17 00:00:00 2001 From: Waleed Asender Date: Fri, 7 Mar 2025 11:23:15 +0300 Subject: [PATCH 3/5] refactor: resolved code review notes --- .changeset/happy-kangaroos-thank.md | 9 +-------- packages/core/theme/src/components/progress.ts | 10 ++-------- 2 files changed, 3 insertions(+), 16 deletions(-) diff --git a/.changeset/happy-kangaroos-thank.md b/.changeset/happy-kangaroos-thank.md index 36139a86c4..90be19c566 100644 --- a/.changeset/happy-kangaroos-thank.md +++ b/.changeset/happy-kangaroos-thank.md @@ -2,11 +2,4 @@ "@heroui/progress": patch --- -These changes ensure that the progress bar behaves correctly in both LTR and RTL layouts, which is crucial for supporting languages that read from right to left (like Arabic, Hebrew, etc.). The transform origin points are particularly important for animations and transitions of the progress indicator. - -In the track class: -Added rtl:rotate-180 which rotates the track 180 degrees when in RTL mode, ensuring correct direction - -In the indicator class added RTL-aware origin points: -rtl:origin-right sets the transform origin to the right side in RTL mode. -ltr:origin-left sets the transform origin to the left side in LTR (Left-to-Right) mode. \ No newline at end of file +add RTL support to progress (#4908) \ No newline at end of file diff --git a/packages/core/theme/src/components/progress.ts b/packages/core/theme/src/components/progress.ts index c7f025a02c..c8fe41281e 100644 --- a/packages/core/theme/src/components/progress.ts +++ b/packages/core/theme/src/components/progress.ts @@ -28,7 +28,7 @@ const progress = tv( labelWrapper: "flex justify-between", value: "", track: "z-0 relative bg-default-300/50 overflow-hidden rtl:rotate-180", - indicator: "h-full rtl:origin-right ltr:origin-left", + indicator: "h-full", }, variants: { color: { @@ -97,13 +97,7 @@ const progress = tv( }, isIndeterminate: { true: { - indicator: [ - "absolute", - "w-full", - "rtl:origin-right", - "ltr:origin-left", - "animate-indeterminate-bar", - ], + indicator: ["absolute", "w-full", "rtl:origin-right", "animate-indeterminate-bar"], }, }, isDisabled: { From 2077c1afb7462d7945611faed1d4b96687dca848 Mon Sep 17 00:00:00 2001 From: Waleed Asender Date: Fri, 7 Mar 2025 11:32:19 +0300 Subject: [PATCH 4/5] refactor: removed unnecessary change --- packages/core/theme/src/components/progress.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/theme/src/components/progress.ts b/packages/core/theme/src/components/progress.ts index c8fe41281e..803f6cd345 100644 --- a/packages/core/theme/src/components/progress.ts +++ b/packages/core/theme/src/components/progress.ts @@ -97,7 +97,7 @@ const progress = tv( }, isIndeterminate: { true: { - indicator: ["absolute", "w-full", "rtl:origin-right", "animate-indeterminate-bar"], + indicator: ["absolute", "w-full", "animate-indeterminate-bar"], }, }, isDisabled: { From 60927462cdd0cc901457d0e64905d2e73541b476 Mon Sep 17 00:00:00 2001 From: Waleed Asender Date: Fri, 7 Mar 2025 11:35:59 +0300 Subject: [PATCH 5/5] refactor: undo unnecessary change --- packages/core/theme/src/components/progress.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/theme/src/components/progress.ts b/packages/core/theme/src/components/progress.ts index 803f6cd345..0003e09a4f 100644 --- a/packages/core/theme/src/components/progress.ts +++ b/packages/core/theme/src/components/progress.ts @@ -97,7 +97,7 @@ const progress = tv( }, isIndeterminate: { true: { - indicator: ["absolute", "w-full", "animate-indeterminate-bar"], + indicator: ["absolute", "w-full", "origin-left", "animate-indeterminate-bar"], }, }, isDisabled: {