refactor(progress): prefer percent in value text

Author: segunadebayo

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

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>
     )
   },

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%')
   })
 })

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`.

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>
 }

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%')
   })
 })

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`.

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>

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%')
   })
 })