feat(progress-bar): add shape constant

Author: thetaPC

core/src/components/progress-bar/progress-bar.interfaces.ts

@@ -103,4 +103,5 @@ export type IonProgressBarConfig = {
   shape?: IonProgressBarShape;
 };
 
-export type IonProgressBarShape = 'round' | 'rectangular';
+export const ION_PROGRESS_BAR_SHAPES = ['round', 'rectangular'] as const;
+export type IonProgressBarShape = (typeof ION_PROGRESS_BAR_SHAPES)[number];

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

@@ -10,7 +10,7 @@ import type { IonProgressBarShape } from './progress-bar.interfaces';
 
 /**
  * * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * 
+ *
  * @part progress - The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`.
  * @part stream - The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`.
  * @part track - The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the

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

@@ -1,39 +1,17 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
+import { ION_PROGRESS_BAR_SHAPES } from '../../progress-bar.interfaces';
+
 /**
  * This behavior does not vary across directions
  */
 configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('progress-bar: shape'), () => {
-    test('round - should not have visual regressions', async ({ page }) => {
-      await page.setContent(
-        `
-          <style>
-            .ionic {
-              --ion-background-color: #ccc7c7;
-            }
-
-            .container {
-              padding: 10px;
-            }
-          </style>
-
-          <div class="container">
-            <ion-progress-bar value="0.50" shape="round"></ion-progress-bar>
-          </div>
-        `,
-        config
-      );
-
-      const container = page.locator('.container');
-
-      await expect(container).toHaveScreenshot(screenshot(`progress-bar-shape-round`));
-    });
-
-    test('rectangular - should not have visual regressions', async ({ page }) => {
-      await page.setContent(
-        `
+    ION_PROGRESS_BAR_SHAPES.forEach((shape) => {
+      test(`${shape} - should not have visual regressions`, async ({ page }) => {
+        await page.setContent(
+          `
           <style>
             .ionic {
               --ion-background-color: #ccc7c7;
@@ -45,15 +23,16 @@ configs({ directions: ['ltr'], modes: ['ios', 'md', 'ionic-md'] }).forEach(({ ti
           </style>
 
           <div class="container">
-            <ion-progress-bar value="0.50" shape="rectangular"></ion-progress-bar>
+            <ion-progress-bar value="0.50" shape="${shape}"></ion-progress-bar>
           </div>
         `,
-        config
-      );
+          config
+        );
 
-      const container = page.locator('.container');
+        const container = page.locator('.container');
 
-      await expect(container).toHaveScreenshot(screenshot(`progress-bar-shape-rectangular`));
+        await expect(container).toHaveScreenshot(screenshot(`progress-bar-shape-${shape}`));
+      });
     });
   });
 });