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 {
/>
-
+ {renderValueInside && value}
- {value && (
+ {value && !renderValueInside && (
{value}
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 {