feat(progress-bar): add styling for the ionic theme (#30185)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
ion-progress-bar does not currently have any custom styling for the
ionic theme.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
According to the design, the following styling changes were made:
- Added a new shape prop which controls the shape of the progress bar
- Changed the color of the unfilled part of the progress bar and the bar
height to design token values
- Adding a new testing page and screenshot tests

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Author: OS-pedrolourenco

core/api.txt

@@ -1661,6 +1661,7 @@ ion-progress-bar,prop,buffer,number,1,false,false
 ion-progress-bar,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-progress-bar,prop,mode,"ios" | "md",undefined,false,false
 ion-progress-bar,prop,reversed,boolean,false,false,false
+ion-progress-bar,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
 ion-progress-bar,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-progress-bar,prop,type,"determinate" | "indeterminate",'determinate',false,false
 ion-progress-bar,prop,value,number,0,false,false

core/src/components.d.ts

@@ -2609,6 +2609,10 @@ export namespace Components {
           * If true, reverse the progress bar direction.
          */
         "reversed": boolean;
+        /**
+          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -7959,6 +7963,10 @@ declare namespace LocalJSX {
           * If true, reverse the progress bar direction.
          */
         "reversed"?: boolean;
+        /**
+          * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"` for a progress bar without rounded corners.  Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+         */
+        "shape"?: 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */

core/src/components/progress-bar/progress-bar.ionic.scss

@@ -0,0 +1,22 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./progress-bar";
+
+// Ionic Progress bar
+// --------------------------------------------------
+
+:host {
+  --background: #{globals.$ion-bg-neutral-subtle-default};
+
+  height: globals.$ion-scale-100;
+}
+
+// Progress Bar Shapes
+// -------------------------------------------------------------------------------
+
+:host(.progress-bar-shape-round) {
+  @include globals.border-radius(globals.$ion-round-xs);
+}
+
+:host(.progress-bar-shape-rectangular) {
+  @include globals.border-radius(globals.$ion-rectangular-xs);
+}

core/src/components/progress-bar/progress-bar.tsx

@@ -21,7 +21,7 @@ import type { Color } from '../../interface';
   styleUrls: {
     ios: 'progress-bar.ios.scss',
     md: 'progress-bar.md.scss',
-    ionic: 'progress-bar.md.scss',
+    ionic: 'progress-bar.ionic.scss',
   },
   shadow: true,
 })
@@ -57,10 +57,35 @@ export class ProgressBar implements ComponentInterface {
    */
   @Prop({ reflect: true }) color?: Color;
 
+  /**
+   * Set to `"round"` for a progress bar with rounded corners, or `"rectangular"`
+   * for a progress bar without rounded corners.
+   *
+   * Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
+   */
+  @Prop() shape?: 'round' | 'rectangular';
+
+  private getShape(): string | undefined {
+    const theme = getIonTheme(this);
+    const { shape } = this;
+
+    // TODO(ROU-11638): Remove theme check when shapes are defined for all themes.
+    if (theme !== 'ionic') {
+      return undefined;
+    }
+
+    if (shape === undefined) {
+      return 'round';
+    }
+
+    return shape;
+  }
+
   render() {
     const { color, type, reversed, value, buffer } = this;
     const paused = config.getBoolean('_testing');
     const theme = getIonTheme(this);
+    const shape = this.getShape();
     // If the progress is displayed as a solid bar.
     const progressSolid = buffer === 1;
     return (
@@ -75,6 +100,7 @@ export class ProgressBar implements ComponentInterface {
           'progress-paused': paused,
           'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed,
           'progress-bar-solid': progressSolid,
+          [`progress-bar-shape-${shape}`]: shape !== undefined,
         })}
       >
         {type === 'indeterminate' ? renderIndeterminate() : renderProgress(value, buffer)}

core/src/components/progress-bar/test/basic/progress-bar.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('progress-bar: basic'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/progress-bar/test/basic', config);