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

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 tab-button with rounded corners, or `"rectangular"` for a tab-button 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 tab-button with rounded corners, or `"rectangular"` for a tab-button 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,31 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@import "./progress-bar";
+
+// iOS Progress bar
+// --------------------------------------------------
+
+:host {
+  height: globals.$ion-scale-100;
+}
+
+:host(.progress-bar-solid) {
+  /**
+   * On the ionic theme the unfilled portion of the progress
+   * bar is always a consistent background color. We
+   * only apply this style when the progress bar is
+   * solid (with a buffer value of 1). This maintains
+   * the custom Ionic appearance for a buffered progress bar.
+   */
+  --background: #{globals.$ion-primitives-neutral-100};
+}
+
+// Progress Bar Shapes
+// -------------------------------------------------------------------------------
+
+:host(.progress-bar-shape-round) {
+  @include globals.border-radius(globals.$ion-border-radius-full);
+}
+
+:host(.progress-bar-shape-rectangular) {
+  @include globals.border-radius(globals.$ion-border-radius-0);
+}

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 tab-button with rounded corners, or `"rectangular"`
+   * for a tab-button 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-11436): 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/shape/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Progress Bar - Shape</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      ion-content::part(scroll) {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+
+      ion-content ion-progress-bar {
+        margin: 10px 0;
+        width: 70%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Progress Bar - Shape</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="outer-content">
+        <ion-label> Default </ion-label>
+        <ion-progress-bar value="0.50"></ion-progress-bar>
+
+        <ion-label> Round </ion-label>
+        <ion-progress-bar value="0.50" shape="round"></ion-progress-bar>
+
+        <ion-label> Default </ion-label>
+        <ion-progress-bar value="0.50" shape="rectangular"></ion-progress-bar>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

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

@@ -0,0 +1,56 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('progress-bar: shape'), () => {
+    test('should render a round progress bar', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            :root {
+              background: #ccc7c7;
+            }
+
+            .container {
+              padding: 10px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-progress-bar value="0.50" shape="round"></ion-progress-bar>
+          </div>
+        `,
+        config
+      );
+
+      const tabBar = page.locator('.container');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`progress-bar-shape-round`));
+    });
+
+    test('should render a rectangular progress bar', async ({ page }) => {
+      await page.setContent(
+        `
+          <style>
+            :root {
+              background: #ccc7c7;
+            }
+
+            .container {
+              padding: 10px;
+            }
+          </style>
+
+          <div class="container">
+            <ion-progress-bar value="0.50" shape="rectangular"></ion-progress-bar>
+          </div>
+        `,
+        config
+      );
+
+      const tabBar = page.locator('.container');
+
+      await expect(tabBar).toHaveScreenshot(screenshot(`progress-bar-shape-rectangular`));
+    });
+  });
+});

packages/angular/src/directives/proxies.ts

@@ -1589,14 +1589,14 @@ Shorthand for ionPickerDidDismiss.
 
 
 @ProxyCmp({
-  inputs: ['buffer', 'color', 'mode', 'reversed', 'theme', 'type', 'value']
+  inputs: ['buffer', 'color', 'mode', 'reversed', 'shape', 'theme', 'type', 'value']
 })
 @Component({
   selector: 'ion-progress-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['buffer', 'color', 'mode', 'reversed', 'theme', 'type', 'value'],
+  inputs: ['buffer', 'color', 'mode', 'reversed', 'shape', 'theme', 'type', 'value'],
 })
 export class IonProgressBar {
   protected el: HTMLElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -1593,14 +1593,14 @@ Shorthand for ionPickerDidDismiss.
 
 @ProxyCmp({
   defineCustomElementFn: defineIonProgressBar,
-  inputs: ['buffer', 'color', 'mode', 'reversed', 'theme', 'type', 'value']
+  inputs: ['buffer', 'color', 'mode', 'reversed', 'shape', 'theme', 'type', 'value']
 })
 @Component({
   selector: 'ion-progress-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['buffer', 'color', 'mode', 'reversed', 'theme', 'type', 'value'],
+  inputs: ['buffer', 'color', 'mode', 'reversed', 'shape', 'theme', 'type', 'value'],
   standalone: true
 })
 export class IonProgressBar {

packages/vue/src/proxies.ts

@@ -619,7 +619,8 @@ export const IonProgressBar = /*@__PURE__*/ defineContainer<JSX.IonProgressBar>(
   'reversed',
   'value',
   'buffer',
-  'color'
+  'color',
+  'shape'
 ]);