Add --track-height to <wa-progress-bar> (#1159)

* add `--track-height` to `<wa-progress-bar>`

* fix custom `<wa-progress-bar>` height instances

* add changelog

Author: lindsaym-fa

packages/webawesome/docs/docs/components/progress-bar.md

@@ -21,10 +21,10 @@ Use the `label` attribute to label the progress bar and tell assistive devices h
 
 ### Custom Height
 
-Use the `height` CSS property to set the progress bar's height.
+Use the `--track-height` custom property to set the progress bar's height.
 
 ```html {.example}
-<wa-progress-bar value="50" style="height: 6px;"></wa-progress-bar>
+<wa-progress-bar value="50" style="--track-height: 6px;"></wa-progress-bar>
 ```
 
 ### Showing Values

packages/webawesome/docs/docs/resources/changelog.md

@@ -10,6 +10,10 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
+### New Features {data-no-outline}
+- Added `--track-height` custom property to `<wa-progress-bar>` [pr:1154]
+- Added `--pulse-color` custom property to `<wa-badge>` [pr:1173]
+
 ### Bug Fixes and Improvements {data-no-outline}
 
 - Fixed a bug in `<wa-badge>` where `appearance="pulse"` was not working as expected [pr:1173]

packages/webawesome/docs/examples/themes/showcase.njk

@@ -616,8 +616,8 @@ layout: false
         }
       }
 
-      wa-progress-bar::part(base) {
-        height: 0.5em;
+      wa-progress-bar {
+        --track-height: 0.5em;
       }
     </style>
   </body>

packages/webawesome/src/components/progress-bar/progress-bar.css

@@ -1,4 +1,5 @@
 :host {
+  --track-height: 1rem;
   --track-color: var(--wa-color-neutral-fill-normal);
   --indicator-color: var(--wa-color-brand-fill-loud);
 
@@ -10,10 +11,11 @@
   display: flex;
   position: relative;
   overflow: hidden;
-  height: 1rem;
+  height: var(--track-height);
   border-radius: var(--wa-border-radius-pill);
   background-color: var(--track-color);
   color: var(--wa-color-brand-on-loud);
+  font-size: var(--wa-font-size-s);
 }
 
 .indicator {

packages/webawesome/src/components/progress-bar/progress-bar.ts

@@ -19,8 +19,9 @@ import styles from './progress-bar.css';
  * @csspart indicator - The progress bar's indicator.
  * @csspart label - The progress bar's label.
  *
- * @cssproperty --track-color - The color of the track.
- * @cssproperty --indicator-color - The color of the indicator.
+ * @cssproperty [--track-height=1rem] - The color of the track.
+ * @cssproperty [--track-color=var(--wa-color-neutral-fill-normal)] - The color of the track.
+ * @cssproperty [--indicator-color=var(--wa-color-brand-fill-loud)] - The color of the indicator.
  */
 @customElement('wa-progress-bar')
 export default class WaProgressBar extends WebAwesomeElement {

packages/webawesome/src/styles/themes/shoelace.css

@@ -466,11 +466,6 @@
       }
     }
 
-    wa-progress-bar::part(base),
-    progress {
-      height: 1em;
-    }
-
     wa-tab {
       font-size: var(--wa-font-size-smaller);
     }