From a54a0148ddd18c2b44ce4489e5e41b710724a0d0 Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Tue, 6 Aug 2024 19:18:07 +0100
Subject: [PATCH] refactor(progress): prefer percent in value text

---
 packages/react/CHANGELOG.md                                | 4 ++++
 .../react/src/components/progress/progress-value-text.tsx  | 2 +-
 .../react/src/components/progress/tests/progress.test.tsx  | 4 ++--
 packages/solid/CHANGELOG.md                                | 7 ++++++-
 .../solid/src/components/progress/progress-value-text.tsx  | 2 +-
 .../solid/src/components/progress/tests/progress.test.tsx  | 4 ++--
 packages/vue/CHANGELOG.md                                  | 7 ++++++-
 .../vue/src/components/progress/progress-value-text.vue    | 2 +-
 .../vue/src/components/progress/tests/progress.test.ts     | 4 ++--
 9 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index d657a608da..348ba866e3 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Changed
+
+- **Progress**: Update `Progress.ValueText` to render percentage as string.
+
 ## [3.6.2] - 2024-07-28
 
 ### Changed
diff --git a/packages/react/src/components/progress/progress-value-text.tsx b/packages/react/src/components/progress/progress-value-text.tsx
index 4ea0203779..edd9fb2ae1 100644
--- a/packages/react/src/components/progress/progress-value-text.tsx
+++ b/packages/react/src/components/progress/progress-value-text.tsx
@@ -14,7 +14,7 @@ export const ProgressValueText = forwardRef<HTMLSpanElement, ProgressValueTextPr
 
     return (
       <ark.span {...mergedProps} ref={ref}>
-        {children || progress.valueAsString}
+        {children || progress.percentAsString}
       </ark.span>
     )
   },
diff --git a/packages/react/src/components/progress/tests/progress.test.tsx b/packages/react/src/components/progress/tests/progress.test.tsx
index f27f6b5e61..12015db2a2 100644
--- a/packages/react/src/components/progress/tests/progress.test.tsx
+++ b/packages/react/src/components/progress/tests/progress.test.tsx
@@ -35,12 +35,12 @@ describe('Progress', () => {
   it('should render', async () => {
     render(<ComponentUnderTest value={7} />)
 
-    screen.getByText('7 percent')
+    screen.getByText('7%')
   })
 
   it('should handle custom max range', async () => {
     render(<ComponentUnderTest value={30} max={30} />)
 
-    screen.getByText('100 percent')
+    screen.getByText('100%')
   })
 })
diff --git a/packages/solid/CHANGELOG.md b/packages/solid/CHANGELOG.md
index 236e42f45d..52dd45eb3a 100644
--- a/packages/solid/CHANGELOG.md
+++ b/packages/solid/CHANGELOG.md
@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Changed
+
+- **Progress**: Update `Progress.ValueText` to render percentage as string.
+
 ## [3.6.2] - 2024-07-28
 
 ### Changed
@@ -15,7 +19,8 @@ description: All notable changes will be documented in this file.
 ### Fixed
 
 - **DatePicker**:
-  - Fixed issue where the selected date doesn't reflect in the input when clicking the trigger and then focusing the input.
+  - Fixed issue where the selected date doesn't reflect in the input when clicking the trigger and
+    then focusing the input.
   - Fixed SSR issue when using `getPresetTrigger`.
 - **Slider**: Fixed issue where `onValueChangeEnd` was called with an incorrect value.
 - Fixed an import issue with `@internationalized/date`.
diff --git a/packages/solid/src/components/progress/progress-value-text.tsx b/packages/solid/src/components/progress/progress-value-text.tsx
index 2956c1ec34..7b3f7a557b 100644
--- a/packages/solid/src/components/progress/progress-value-text.tsx
+++ b/packages/solid/src/components/progress/progress-value-text.tsx
@@ -9,5 +9,5 @@ export const ProgressValueText = (props: ProgressValueTextProps) => {
   const api = useProgressContext()
   const mergedProps = mergeProps(() => api().getValueTextProps(), props)
 
-  return <ark.span {...mergedProps}>{props.children || api().valueAsString}</ark.span>
+  return <ark.span {...mergedProps}>{props.children || api().percentAsString}</ark.span>
 }
diff --git a/packages/solid/src/components/progress/tests/progress.test.tsx b/packages/solid/src/components/progress/tests/progress.test.tsx
index ef99e19900..9a010caf32 100644
--- a/packages/solid/src/components/progress/tests/progress.test.tsx
+++ b/packages/solid/src/components/progress/tests/progress.test.tsx
@@ -17,12 +17,12 @@ describe('Progress', () => {
   it('should handle default value', async () => {
     render(() => <ComponentUnderTest value={7} />)
 
-    screen.getByText('7 percent')
+    screen.getByText('7%')
   })
 
   it('should handle custom max range', async () => {
     render(() => <ComponentUnderTest value={30} max={30} />)
 
-    screen.getByText('100 percent')
+    screen.getByText('100%')
   })
 })
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 5f081ae150..07d0bf0716 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -6,6 +6,10 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Changed
+
+- **Progress**: Update `Progress.ValueText` to render percentage as string.
+
 ## [3.7.2] - 2024-07-28
 
 ### Changed
@@ -15,7 +19,8 @@ description: All notable changes will be documented in this file.
 ### Fixed
 
 - **DatePicker**:
-  - Fixed issue where the selected date doesn't reflect in the input when clicking the trigger and then focusing the input.
+  - Fixed issue where the selected date doesn't reflect in the input when clicking the trigger and
+    then focusing the input.
   - Fixed SSR issue when using `getPresetTrigger`.
 - **Slider**: Fixed issue where `onValueChangeEnd` was called with an incorrect value.
 - Fixed an import issue with `@internationalized/date`.
diff --git a/packages/vue/src/components/progress/progress-value-text.vue b/packages/vue/src/components/progress/progress-value-text.vue
index c9f554765a..c9d8720d05 100644
--- a/packages/vue/src/components/progress/progress-value-text.vue
+++ b/packages/vue/src/components/progress/progress-value-text.vue
@@ -23,6 +23,6 @@ const slots = useSlots()
 
 <template>
   <ark.span v-bind="progress.getValueTextProps()" :as-child="asChild">
-    <slot>{{ slots.default?.() || progress.valueAsString }}</slot>
+    <slot>{{ slots.default?.() || progress.percentAsString }}</slot>
   </ark.span>
 </template>
diff --git a/packages/vue/src/components/progress/tests/progress.test.ts b/packages/vue/src/components/progress/tests/progress.test.ts
index d75f382d0d..140de565b9 100644
--- a/packages/vue/src/components/progress/tests/progress.test.ts
+++ b/packages/vue/src/components/progress/tests/progress.test.ts
@@ -21,7 +21,7 @@ describe('Progress', () => {
       },
     })
 
-    screen.getByText('7 percent')
+    screen.getByText('7%')
   })
 
   it('should handle custom max range', async () => {
@@ -32,6 +32,6 @@ describe('Progress', () => {
       },
     })
 
-    screen.getByText('100 percent')
+    screen.getByText('100%')
   })
 })