feat(shared-types,ui-progress): add customization options for progressbar

Author: balzss

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 = {

packages/ui-progress/src/ProgressBar/__new-tests__/ProgressBar.test.tsx

@@ -83,4 +83,36 @@ describe('<ProgressBar />', () => {
     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(
+      <ProgressBar
+        screenReaderLabel="Chapters read"
+        valueMax={100}
+        valueNow={valueNow}
+        renderValueInside={false}
+        renderValue={`${valueNow}%`}
+      />
+    )
+    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(
+      <ProgressBar
+        screenReaderLabel="Chapters read"
+        valueMax={100}
+        valueNow={valueNow}
+        renderValueInside
+        renderValue={`${valueNow}%`}
+      />
+    )
+    const progressMeter = container.querySelector('[class$="-progressBar__trackValue"]')
+
+    expect(progressMeter).toHaveTextContent('33%')
+  })
 })

packages/ui-progress/src/ProgressBar/index.tsx

@@ -95,6 +95,7 @@ class ProgressBar extends Component<ProgressBarProps> {
       size,
       color,
       meterColor,
+      renderValueInside,
       styles,
       ...props
     } = this.props
@@ -130,11 +131,11 @@ class ProgressBar extends Component<ProgressBarProps> {
           />
 
           <span css={styles?.track} role="presentation" aria-hidden="true">
-            <span css={styles?.trackValue}></span>
+            <span css={styles?.trackValue}>{renderValueInside && value}</span>
           </span>
         </span>
 
-        {value && (
+        {value && !renderValueInside && (
           <span css={styles?.value} aria-hidden="true">
             {value}
           </span>

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<PropKeys> = {
   shouldAnimate: PropTypes.bool,
   margin: ThemeablePropTypes.spacing,
   elementRef: PropTypes.func,
-  as: PropTypes.elementType
+  as: PropTypes.elementType,
+  renderValueInside: PropTypes.bool,
 }
 
 const allowedProps: AllowedPropKeys = [

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

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 {