feat(chip): set default shape to soft for ios and md theme and round for ionic theme

core/src/components.d.ts

@@ -763,9 +763,9 @@ export namespace Components {
          */
         "outline": boolean;
         /**
-          * Define the Chip corner shape, when using the Ionic Theme.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -6015,9 +6015,9 @@ declare namespace LocalJSX {
          */
         "outline"?: boolean;
         /**
-          * Define the Chip corner shape, when using the Ionic Theme.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */

core/src/components/chip/chip.ionic.scss

@@ -10,7 +10,6 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
 :host {
   --background: #{globals.$ionic-color-neutral-10};
   --border-color: transparent;
-  --border-radius: #{globals.$ionic-border-radius-rounded-small};
   --color: #{globals.$ionic-color-neutral-900};
   --focus-ring-color: #{$ionic-states-focus-primary};
   --focus-ring-width: #{globals.$ionic-border-size-medium};
@@ -89,6 +88,10 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
 // Chip Shapes
 // ---------------------------------------------
 
+:host(.chip-soft) {
+  --border-radius: #{globals.$ionic-border-radius-rounded-small};
+}
+
 :host(.chip-round) {
   --border-radius: #{globals.$ionic-border-radius-rounded-large};
 }

core/src/components/chip/chip.scss

@@ -9,7 +9,7 @@
   --background: #{rgba($text-color-rgb, 0.12)};
   --color: #{rgba($text-color-rgb, 0.87)};
 
-  @include border-radius(16px);
+  @include border-radius(var(--border-radius));
   @include font-smoothing();
   @include margin(4px);
   @include padding(6px, 12px);
@@ -120,6 +120,21 @@
   @include margin(-4px, -8px, -4px, 8px);
 }
 
+// Chip Shapes
+// ---------------------------------------------
+
+:host(.chip-soft) {
+  --border-radius: 8px;
+}
+
+:host(.chip-round) {
+  --border-radius: 999px;
+}
+
+:host(.chip-rectangular) {
+  --border-radius: 0px;
+}
+
 // Chip: Focus
 // ---------------------------------------------
 

core/src/components/chip/chip.tsx

@@ -37,9 +37,10 @@ export class Chip implements ComponentInterface {
   @Prop() disabled = false;
 
   /**
-   * Define the Chip corner shape, when using the Ionic Theme.
+   * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully
+   * rounded corners, or `"rectangular"` for a chip without rounded corners.
    */
-  @Prop() shape?: 'round' | 'rectangular';
+  @Prop() shape?: 'soft' | 'round' | 'rectangular' = 'soft';
 
   render() {
     const { shape } = this;
@@ -50,8 +51,7 @@ export class Chip implements ComponentInterface {
         aria-disabled={this.disabled ? 'true' : null}
         class={createColorClasses(this.color, {
           [theme]: true,
-          // TODO(FW-6120): remove the theme==='ionic' when we add support for the `ios` and `md` modes.
-          [`chip-${shape}`]: theme === 'ionic' && shape !== undefined,
+          [`chip-${shape}`]: shape !== undefined,
           'chip-outline': this.outline,
           'chip-disabled': this.disabled,
           'ion-activatable': true,

core/src/components/chip/test/shape/chip.e2e.ts

@@ -1,11 +1,10 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  /**
-   * This behavior only applies to Ionic Theme.
-   * TODO(FW-6120): add the `ios` and `md` modes when shape support is added.
-   */
+/**
+ * This behavior does not vary across directions
+ */
+configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('chip: shape'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto(`/src/components/chip/test/shape`, config);
@@ -19,6 +18,14 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
       });
     });
 
+    test.describe('soft', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const container = page.locator('#soft');
+
+        await expect(container).toHaveScreenshot(screenshot(`chip-soft`));
+      });
+    });
+
     test.describe('round', () => {
       test('should not have visual regressions', async ({ page }) => {
         const container = page.locator('#round');

core/src/components/chip/test/shape/index.html

@@ -16,14 +16,17 @@
 
   <body>
     <ion-app>
-      <ion-content>
+      <ion-content class="ion-padding">
         <h2>Chip - Shape</h2>
 
         <h3>Shapes</h3>
         <p>
           <ion-chip id="default">
             <ion-label>Default</ion-label>
           </ion-chip>
+          <ion-chip id="soft" shape="soft">
+            <ion-label>Soft</ion-label>
+          </ion-chip>
           <ion-chip id="round" shape="round">
             <ion-label>Round</ion-label>
           </ion-chip>
@@ -32,25 +35,18 @@ <h3>Shapes</h3>
           </ion-chip>
         </p>
       </ion-content>
-    </ion-app>
-
-    <style>
-      ion-content {
-        --background: #222;
-      }
-      h2,
-      h3 {
-        color: #fff;
-        padding-left: 16px;
-      }
 
-      p {
-        padding-left: 8px;
-      }
-
-      ion-chip + ion-chip {
-        margin-inline-start: 16px;
-      }
-    </style>
+      <style>
+        /*
+         * This style is applied to make the shape stand out more
+         * in the e2e tests, but it shouldn't be applied to the ios or
+         * md themes as those use an rgb value for the chip background
+         */
+        .ionic ion-content {
+          --background: #222;
+          --color: #fff;
+        }
+      </style>
+    </ion-app>
   </body>
 </html>