diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts index 3a9f07ae4e..6c81308bba 100644 --- a/packages/shared-types/src/ComponentThemeVariables.ts +++ b/packages/shared-types/src/ComponentThemeVariables.ts @@ -1014,6 +1014,7 @@ export type ProgressBarTheme = { trackBottomBorderWidth: Border['widthSmall'] trackBottomBorderColor: Colors['contrasts']['grey1214'] trackBottomBorderColorInverse: Colors['contrasts']['white1010'] + borderRadius: string } export type ProgressCircleTheme = { diff --git a/packages/ui-progress/src/ProgressBar/__new-tests__/ProgressBar.test.tsx b/packages/ui-progress/src/ProgressBar/__new-tests__/ProgressBar.test.tsx index 1ea95cd2c3..86a88c0948 100644 --- a/packages/ui-progress/src/ProgressBar/__new-tests__/ProgressBar.test.tsx +++ b/packages/ui-progress/src/ProgressBar/__new-tests__/ProgressBar.test.tsx @@ -83,4 +83,36 @@ describe('', () => { const axeCheck = await runAxeCheck(container) expect(axeCheck).toBe(true) }) + + it('should not render the value inside when the prop is set to false', () => { + const valueNow = 33 + const { container } = render( + + ) + const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]') + + expect(progressMeter).not.toHaveTextContent('33%') + }) + + it('should render the value inside when the prop is set', () => { + const valueNow = 33 + const { container } = render( + + ) + const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]') + + expect(progressMeter).toHaveTextContent('33%') + }) }) diff --git a/packages/ui-progress/src/ProgressBar/index.tsx b/packages/ui-progress/src/ProgressBar/index.tsx index 6ad581746b..440b01d2e4 100644 --- a/packages/ui-progress/src/ProgressBar/index.tsx +++ b/packages/ui-progress/src/ProgressBar/index.tsx @@ -95,6 +95,7 @@ class ProgressBar extends Component { size, color, meterColor, + renderValueInside, styles, ...props } = this.props @@ -130,11 +131,11 @@ class ProgressBar extends Component { /> - {value && ( + {value && !renderValueInside && ( diff --git a/packages/ui-progress/src/ProgressBar/props.ts b/packages/ui-progress/src/ProgressBar/props.ts index b5bf6f7677..df26770f06 100644 --- a/packages/ui-progress/src/ProgressBar/props.ts +++ b/packages/ui-progress/src/ProgressBar/props.ts @@ -114,6 +114,14 @@ type ProgressBarOwnProps = { * Set the element type of the component's root */ as?: AsElementType + + /** + * If true, displays the `renderValue` inside the progress meter for customization. + * + * Note: This should not be used in most cases. When enabled, ensure `renderValue` is styled for proper + * legibility and alignment across themes and sizes. + */ + renderValueInside?: boolean } type PropKeys = keyof ProgressBarOwnProps @@ -148,7 +156,8 @@ const propTypes: PropValidators = { shouldAnimate: PropTypes.bool, margin: ThemeablePropTypes.spacing, elementRef: PropTypes.func, - as: PropTypes.elementType + as: PropTypes.elementType, + renderValueInside: PropTypes.bool, } const allowedProps: AllowedPropKeys = [ diff --git a/packages/ui-progress/src/ProgressBar/styles.ts b/packages/ui-progress/src/ProgressBar/styles.ts index 46d9e10e64..b6932cf157 100644 --- a/packages/ui-progress/src/ProgressBar/styles.ts +++ b/packages/ui-progress/src/ProgressBar/styles.ts @@ -119,13 +119,15 @@ const generateStyle = ( fontFamily: componentTheme.fontFamily, fontWeight: componentTheme.fontWeight, lineHeight: componentTheme.lineHeight, - fontSize: componentTheme.fontSize + fontSize: componentTheme.fontSize, + borderRadius: componentTheme.borderRadius }, trackLayout: { label: 'progressBar__trackLayout', position: 'relative', flex: 1, + borderRadius: 'inherit', ...colorVariants[color!].trackLayout }, @@ -138,6 +140,7 @@ const generateStyle = ( borderBottomWidth: componentTheme.trackBottomBorderWidth, borderBottomStyle: 'solid', background: 'transparent', + borderRadius: 'inherit', ...sizeVariants[size!].track, ...colorVariants[color!].trackBorder @@ -150,6 +153,7 @@ const generateStyle = ( height: '100%', width: currentValuePercent, maxWidth: '100%', + borderRadius: 'inherit', ...(shouldAnimate && { transition: 'all 0.5s' }), ...(meterColorClassName && diff --git a/packages/ui-progress/src/ProgressBar/theme.ts b/packages/ui-progress/src/ProgressBar/theme.ts index 42e82fc9d4..2589c7367c 100644 --- a/packages/ui-progress/src/ProgressBar/theme.ts +++ b/packages/ui-progress/src/ProgressBar/theme.ts @@ -94,7 +94,9 @@ const generateComponentTheme = (theme: Theme): ProgressBarTheme => { trackColorInverse: 'transparent', trackBottomBorderWidth: borders?.widthSmall, trackBottomBorderColor: colors?.contrasts?.grey3045, - trackBottomBorderColorInverse: colors?.contrasts?.white1010 + trackBottomBorderColorInverse: colors?.contrasts?.white1010, + + borderRadius: '0px' } return {