feat: add additional custom properties to mux-uploader progress bar (#1069)

- `--progress-bar-background-color` (I know it's technically configuring
`background`, but, following the example of `--progress-bar-fill-color`,
I called it `background-color`)
- `--progress-bar-border-radius`
- `--progress-bar-box-shadow` (I don't even know what this property
does, but it felt like it should be configurable, like the others)

Also:
- Demo new props in mux-uploader-modal example
- Added missing `--progress-radial-fill-color` on React style props

Author: decepulis

examples/vanilla-ts-esm/public/mux-uploader-modal.html

@@ -46,7 +46,9 @@
       mux-uploader-progress {
         display: contents;
         --progress-bar-fill-color: #46a6de;
+        --progress-bar-background-color: #4e46de;
         --progress-bar-height: 8px;
+        --progress-bar-border-radius: 0px;
       }
     </style>
   </head>

packages/mux-uploader-react/src/mux-uploader-progress.tsx

@@ -15,6 +15,10 @@ export type MuxUploaderProgressProps = {
   style?: CSSProperties & {
     ['--progress-bar-height']?: CSSProperties['height'];
     ['--progress-bar-fill-color']?: CSSProperties['fill'];
+    ['--progress-bar-background-color']?: CSSProperties['background'];
+    ['--progress-bar-box-shadow']?: CSSProperties['boxShadow'];
+    ['--progress-bar-border-radius']?: CSSProperties['borderRadius'];
+    ['--progress-radial-fill-color']?: CSSProperties['stroke'];
     ['--progress-percentage-display']?: CSSProperties['display'];
   };
 } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'ref'>;

packages/mux-uploader/REFERENCE.md

@@ -95,7 +95,10 @@ customization:
 | Name | CSS Property | Default Value | Description |
 | ---- | ------------ | ------------- | ----------- |
 | `--progress-bar-fill-color` | `background` | `black` | Background "fill" color for progress bar, which visually indicates progress |
+| `--progress-bar-background-color` | `background` | `#e6e6e6` | The background on which the progress bar is rendered. |
+| `--progress-bar-box-shadow` | `box-shadow` | `0 10px 40px -10px #fff` | Box shadow behind the progress bar. |
 | `--progress-bar-height` | `height` | `4px` | Height for the progress bar. |
+| `--progress-bar-border-radius` | `border-radius` | `100px` | Border radius for the progress bar. |
 | `--progress-radial-fill-color` | `stroke` | `black` | Stroke color for `radial` progress `type` (_Experimental_) |
 | `--progress-percentage-display` | `display` | `block` | Display value for percentage progress. Set to `none` to hide. |
 
@@ -294,7 +297,10 @@ customization:
 | Name | CSS Property | Default Value | Description |
 | ---- | ------------ | ------------- | ----------- |
 | `--progress-bar-fill-color` | `background` | `black` | Background "fill" color for progress bar, which visually indicates progress |
+| `--progress-bar-background-color` | `background` | `#e6e6e6` | The background on which the progress bar is rendered. |
+| `--progress-bar-box-shadow` | `box-shadow` | `0 10px 40px -10px #fff` | Box shadow behind the progress bar. |
 | `--progress-bar-height` | `height` | `4px` | Height for the progress bar. |
+| `--progress-bar-border-radius` | `border-radius` | `100px` | Border radius for the progress bar. |
 | `--progress-radial-fill-color` | `stroke` | `black` | Stroke color for `radial` progress `type` (_Experimental_) |
 | `--progress-percentage-display` | `display` | `block` | Display value for percentage progress. Set to `none` to hide. |
 

packages/mux-uploader/src/mux-uploader-progress.ts

@@ -17,8 +17,8 @@ template.innerHTML = /*html*/ `
   }
 
   .bar-type {
-    background: #e6e6e6;
-    border-radius: 100px;
+    background: var(--progress-bar-background-color, #e6e6e6);
+    border-radius: var(--progress-bar-border-radius, 100px);
     height: var(--progress-bar-height, 4px);
     width: 100%;
   }
@@ -44,8 +44,8 @@ template.innerHTML = /*html*/ `
   }
 
   .progress-bar {
-    box-shadow: 0 10px 40px -10px #fff;
-    border-radius: 100px;
+    box-shadow: var(--progress-bar-box-shadow, 0 10px 40px -10px #fff);
+    border-radius: var(--progress-bar-border-radius, 100px);
     background: var(--progress-bar-fill-color, #000000);
     height: var(--progress-bar-height, 4px);
     width: 0%;