From c7a14f58e1c4051655832ae708250c8444a02dce Mon Sep 17 00:00:00 2001
From: Adam_Mikulas <miku.adam@gmail.com>
Date: Mon, 2 Dec 2024 11:58:34 +0100
Subject: [PATCH] feat(ui-progress): add isRounded to ProgressBar

---
 .../ui-progress/src/ProgressBar/README.md     | 39 +++++++++++++++++++
 packages/ui-progress/src/ProgressBar/props.ts |  7 ++++
 .../ui-progress/src/ProgressBar/styles.ts     |  7 +++-
 3 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/packages/ui-progress/src/ProgressBar/README.md b/packages/ui-progress/src/ProgressBar/README.md
index 3a9dca4eb5..6827a851c3 100644
--- a/packages/ui-progress/src/ProgressBar/README.md
+++ b/packages/ui-progress/src/ProgressBar/README.md
@@ -134,6 +134,45 @@ type: example
 > `<ProgressBar />` defaults to setting the meter color to `success` when
 > complete.
 
+### `isRounded`
+
+Rounded variant of the progress bar is available via the `isRounded` prop
+
+```js
+---
+type: example
+---
+<div>
+  <ProgressBar
+    size="x-small"
+    screenReaderLabel="Loading completion"
+    valueNow={40}
+    valueMax={60}
+    margin="0 0 small"
+  />
+  <ProgressBar
+    size="small"
+    screenReaderLabel="Loading completion"
+    valueNow={40}
+    valueMax={60}
+    margin="0 0 small"
+  />
+  <ProgressBar
+    screenReaderLabel="Loading completion"
+    valueNow={40}
+    valueMax={60}
+    margin="0 0 small"
+  />
+  <ProgressBar
+    size="large"
+    screenReaderLabel="Loading completion"
+    valueNow={60}
+    valueMax={60}
+    isRounded
+  />
+</div>
+```
+
 ### `renderValue` / `formatScreenReaderValue`
 
 Via the `renderValue` prop, developers can use `valueMax` and `valueNow` props to format the
diff --git a/packages/ui-progress/src/ProgressBar/props.ts b/packages/ui-progress/src/ProgressBar/props.ts
index b5bf6f7677..929c1d9092 100644
--- a/packages/ui-progress/src/ProgressBar/props.ts
+++ b/packages/ui-progress/src/ProgressBar/props.ts
@@ -105,6 +105,11 @@ type ProgressBarOwnProps = {
    */
   margin?: Spacing
 
+  /**
+   * Control the border-radius of the progress meter.
+   */
+  isRounded?: boolean
+
   /**
    * Provides a reference to the component's root HTML element
    */
@@ -147,6 +152,7 @@ const propTypes: PropValidators<PropKeys> = {
   ]),
   shouldAnimate: PropTypes.bool,
   margin: ThemeablePropTypes.spacing,
+  isRounded: PropTypes.bool,
   elementRef: PropTypes.func,
   as: PropTypes.elementType
 }
@@ -162,6 +168,7 @@ const allowedProps: AllowedPropKeys = [
   'meterColor',
   'shouldAnimate',
   'margin',
+  'isRounded',
   'elementRef',
   'as'
 ]
diff --git a/packages/ui-progress/src/ProgressBar/styles.ts b/packages/ui-progress/src/ProgressBar/styles.ts
index 46d9e10e64..f542548966 100644
--- a/packages/ui-progress/src/ProgressBar/styles.ts
+++ b/packages/ui-progress/src/ProgressBar/styles.ts
@@ -45,7 +45,8 @@ const generateStyle = (
     size,
     color,
     meterColor,
-    shouldAnimate
+    shouldAnimate,
+    isRounded
   } = props
 
   const meterColorClassName =
@@ -58,6 +59,8 @@ const generateStyle = (
 
   const currentValuePercent = `${(currentValue / valueMax) * 100}%`
 
+  const borderRadius = isRounded ? '20px' : 0
+
   const sizeVariants = {
     'x-small': {
       track: { height: componentTheme.xSmallHeight },
@@ -138,6 +141,7 @@ const generateStyle = (
       borderBottomWidth: componentTheme.trackBottomBorderWidth,
       borderBottomStyle: 'solid',
       background: 'transparent',
+      borderRadius,
 
       ...sizeVariants[size!].track,
       ...colorVariants[color!].trackBorder
@@ -150,6 +154,7 @@ const generateStyle = (
       height: '100%',
       width: currentValuePercent,
       maxWidth: '100%',
+      borderRadius,
 
       ...(shouldAnimate && { transition: 'all 0.5s' }),
       ...(meterColorClassName &&