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

…sbar
instructure · Dec 3, 2024 · b45639c · b45639c
1 parent ce86cdb
commit b45639c
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git 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/index.tsx b/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>

diff --git 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

diff --git 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
@@ -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: 0
   }
 
   return {