feat(ui5-progress-indicator): introduce "bar" CSS part (#8599)

Related to: #6140
SAP · Apr 2, 2024 · 831fad3 · 831fad3
1 parent 2072b2e
commit 831fad3
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/packages/main/src/ProgressIndicator.hbs b/packages/main/src/ProgressIndicator.hbs
@@ -7,7 +7,7 @@
      aria-disabled="{{_ariaDisabled}}"
      aria-label="{{accessibleName}}"
 >
-    <div class="ui5-progress-indicator-bar" style="{{styles.bar}}">
+    <div class="ui5-progress-indicator-bar" part="bar" style="{{styles.bar}}">
         {{#unless showValueInRemainingBar}}
            {{> valueLabel}}
         {{/unless}}

diff --git a/packages/main/src/ProgressIndicator.ts b/packages/main/src/ProgressIndicator.ts
@@ -35,6 +35,7 @@ import ProgressIndicatorCss from "./generated/themes/ProgressIndicator.css.js";
  * ### ES6 Module Import
  *
  * `import "@ui5/webcomponents/dist/ProgressIndicator.js";`
+ * @csspart bar - Used to style the main bar of the `ui5-progress-indicator`
  * @csspart remaining-bar - Used to style the remaining bar of the `ui5-progress-indicator`
  * @constructor
  * @extends UI5Element

diff --git a/packages/main/test/pages/ProgressIndicator.html b/packages/main/test/pages/ProgressIndicator.html
@@ -104,6 +104,10 @@
 	<br />
 	<ui5-progress-indicator value="25" class="progressindicator2auto"></ui5-progress-indicator>
 	<br />
+	Custom Color
+	<br />
+	<ui5-progress-indicator value="25" class="progressindicator3auto"></ui5-progress-indicator>
+	<br />
 	Test progress indicator
 	<br />
 	<ui5-progress-indicator id="test-progress-indicator"></ui5-progress-indicator>

diff --git a/packages/main/test/pages/styles/ProgressIndicator.css b/packages/main/test/pages/styles/ProgressIndicator.css
@@ -6,3 +6,12 @@
     height: 50px;
     width: 200px;
 }
+
+.progressindicator3auto::part(bar),
+.progressindicator3auto::part(remaining-bar)::after {
+    background-color: rgb(255, 0, 0);
+}
+
+.progressindicator3auto::part(remaining-bar) {
+    background-color: rgb(255, 225, 225);
+}