@@ -44,4 +69,4 @@ describe('Progress', () => {
expect(progress).toHaveAttribute('aria-valuetext', '64 percent complete')
expect(screen.queryByText('64%')).not.toBeInTheDocument()
})
-})
+})
\ No newline at end of file
diff --git a/packages/ui/src/components/data/Progress/Progress.tsx b/packages/ui/src/components/data/Progress/Progress.tsx
index 5d8fd08..d678777 100644
--- a/packages/ui/src/components/data/Progress/Progress.tsx
+++ b/packages/ui/src/components/data/Progress/Progress.tsx
@@ -1,10 +1,11 @@
-import { forwardRef, type HTMLAttributes } from 'react'
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
import { cn } from '../../../utils/cn'
export interface ProgressProps extends HTMLAttributes
{
percent: number
status?: 'normal' | 'success' | 'exception'
showInfo?: boolean
+ format?: (percent: number) => ReactNode
}
export const Progress = forwardRef(function Progress(
@@ -13,6 +14,7 @@ export const Progress = forwardRef(function Progr
percent,
status = 'normal',
showInfo = true,
+ format,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
'aria-valuetext': ariaValueText,
@@ -22,6 +24,9 @@ export const Progress = forwardRef(function Progr
) {
const safePercent = Math.max(0, Math.min(100, percent))
const accessibleLabel = ariaLabel ?? (ariaLabelledBy ? undefined : 'Progress')
+ const info = format ? format(safePercent) : `${safePercent}%`
+ const formattedValueText =
+ typeof info === 'string' || typeof info === 'number' ? String(info) : `${safePercent}%`
return (
(function Progr
aria-valuemin={0}
aria-valuemax={100}
aria-valuenow={safePercent}
- aria-valuetext={ariaValueText ?? `${safePercent}%`}
+ aria-valuetext={ariaValueText ?? formattedValueText}
>
(function Progr
style={{ width: `${safePercent}%` }}
/>
- {showInfo ? (
-
{safePercent}%
- ) : null}
+ {showInfo ?
{info}
: null}
)
-})
+})
\ No newline at end of file