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

Issue number: internal

---------

## What is the current behavior?
The `shape` property defaults to `undefined` which evaluates to the
"Soft" shape for the `ionic` theme and the "Round" shape for the
`ios`/`md` themes.

| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------ | ----------- | ----------- |
| `undefined`     | `4px`  | `16px`      | `16px`      |
| `"round"`       | `999px` | unsupported | unsupported |
| `"rectangular"` | `0px`  | unsupported | unsupported |

## What is the new behavior?
| Property Value | CSS Value (`ionic`) | CSS Value (`ios`) | CSS Value
(`md`) |
| --------------- | ------- | ------ | -------- |
| `"soft"`        | `4px`   | `10px`   | `8px`   |
| `"round"`       | `999px` | `999px` | `999px` |
| `"rectangular"` | `0px`   | `0px`   | `0px`   |

- Sets the default `shape` property to `"soft"` for `ios` and `md`
themes and `"round"` for the ionic theme.
- Updates the `border-radius` to apply to the shape classes instead of
`:host`
- Updates the `ios` theme to use `10px` for `"soft"` as this was taken
from the App Store:

![ios-app-store](https://github.com/ionic-team/ionic-framework/assets/6577830/14008de2-a953-4b27-81da-13dd481c5e39)
- Updates the `md` theme to use `8px` for `"soft"` as this is taken from
the [Material Design 3
guidelines](https://m3.material.io/components/chips/specs#590903f7-2bf5-46ab-9810-d052173f41f1)
& the previous value of `16px` is the equivalent of the `999px` round
shape due to the height being `32px`
- Adds support for the `"round"` and `"rectangular"` shapes in `ios` and
`md` themes

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

BREAKING CHANGE:

The `border-radius` of the `ios` and `md` chip now defaults to `10px`
and `8px`, respectively, instead of `16px` in accordance with the iOS
and Material Design 3 guidelines. To revert to the previous appearance,
set the `shape` to `"round"`, or override the `--border-radius` CSS
variable to specify a different value.

---------

Co-authored-by: ionitron <hi@ionicframework.com>

BREAKING.md

@@ -16,9 +16,14 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 - [Components](#version-9x-components)
   - [Card](#version-9x-card)
+  - [Chip](#version-9x-chip)
 
 <h2 id="version-9x-components">Components</h2>
 
 <h4 id="version-9x-card">Card</h4>
 
 - The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
+
+<h4 id="version-9x-chip">Chip</h4>
+
+- The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.

core/api.txt

@@ -350,9 +350,10 @@ ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second
 ion-chip,prop,disabled,boolean,false,false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
-ion-chip,prop,shape,"rectangular" | "round" | undefined,undefined,false,false
+ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-chip,css-prop,--background
+ion-chip,css-prop,--border-radius
 ion-chip,css-prop,--color
 
 ion-col,shadow

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. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
          */
-        "shape"?: 'round' | 'rectangular';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -6023,9 +6023,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. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
          */
-        "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.ios.scss

@@ -9,3 +9,18 @@
    */
   font-size: clamp(13px, $chip-base-font-size-rem, 22px);
 }
+
+// Chip Shapes
+// ---------------------------------------------
+
+:host(.chip-soft) {
+  --border-radius: 10px;
+}
+
+:host(.chip-round) {
+  --border-radius: 999px;
+}
+
+:host(.chip-rectangular) {
+  --border-radius: 0px;
+}

core/src/components/chip/chip.md.scss

@@ -4,3 +4,18 @@
 :host {
   font-size: $chip-base-font-size-rem;
 }
+
+// Chip Shapes
+// ---------------------------------------------
+
+:host(.chip-soft) {
+  --border-radius: 8px;
+}
+
+:host(.chip-round) {
+  --border-radius: 999px;
+}
+
+:host(.chip-rectangular) {
+  --border-radius: 0px;
+}

core/src/components/chip/chip.scss

@@ -5,11 +5,12 @@
   /**
    * @prop --background: Background of the chip
    * @prop --color: Color of the chip
+   * @prop --border-radius: Border radius of the chip
    */
   --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);

core/src/components/chip/chip.tsx

@@ -37,21 +37,37 @@ 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.
+   * Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
    */
-  @Prop() shape?: 'round' | 'rectangular';
+  @Prop() shape?: 'soft' | 'round' | 'rectangular';
+
+  /**
+   * Set the shape based on the theme
+   */
+  private getShape(): string {
+    const theme = getIonTheme(this);
+    const { shape } = this;
+
+    if (shape === undefined) {
+      return theme === 'ionic' ? 'round' : 'soft';
+    }
+
+    return shape;
+  }
 
   render() {
-    const { shape } = this;
     const theme = getIonTheme(this);
 
+    const shape = this.getShape();
+
     return (
       <Host
         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}`]: true,
           '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

@@ -12,11 +12,23 @@
     <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>
+      /*
+       * 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>
   </head>
 
   <body>
     <ion-app>
-      <ion-content>
+      <ion-content class="ion-padding">
         <h2>Chip - Shape</h2>
 
         <h3>Shapes</h3>
@@ -24,6 +36,9 @@
           <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>
@@ -33,24 +48,5 @@
         </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>
   </body>
 </html>