feat(chip): add shape to ionic theme (#29303)

Issue number: None

---------

<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added new prop `shape`, only supported on Ionic Theme.
- Added scss for the different shapes.
- Added missing scss for font-weight and line-height.
- Added missing tests for focus state and new tests for shape.
- Added new font weight and line-height design tokens. This change
uncovered an issue on the IOnic Typography tests that resulted on
snapshots differences.
- Added & updated new snapshot baselines.

## 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.
-->

---------

Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>

core/api.txt

@@ -347,6 +347,7 @@ 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,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-chip,css-prop,--background
 ion-chip,css-prop,--color

core/src/components.d.ts

@@ -754,6 +754,10 @@ export namespace Components {
           * Display an outline style button.
          */
         "outline": boolean;
+        /**
+          * Define the Chip corner shape, when using the Ionic Theme.
+         */
+        "shape"?: 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5994,6 +5998,10 @@ declare namespace LocalJSX {
           * Display an outline style button.
          */
         "outline"?: boolean;
+        /**
+          * Define the Chip corner shape, when using the Ionic Theme.
+         */
+        "shape"?: 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */

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

@@ -1,7 +1,7 @@
 @use "../../themes/ionic.mixins" as mixins;
 @use "../../foundations/ionic.vars.scss" as tokens;
 
-// Chip
+// Ionic Chip
 // --------------------------------------------------
 
 // TODO(ROU-4870): there is no token yet for these ones, but it should be created in the future, once UX team has figma tokens done
@@ -11,19 +11,21 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
 :host {
   --background: #{tokens.$ionic-color-neutral-10};
   --border-color: transparent;
+  --border-radius: #{tokens.$ionic-border-radius-rounded-small};
   --color: #{tokens.$ionic-color-neutral-900};
   --focus-ring-color: #{$ionic-states-focus-primary};
   --focus-ring-width: #{tokens.$ionic-border-size-medium};
 
   @include mixins.font-smoothing;
   @include mixins.padding(tokens.$ionic-space-xs, tokens.$ionic-space-xxs);
-  @include mixins.border-radius(tokens.$ionic-border-radius-rounded-large);
+  @include mixins.border-radius(var(--border-radius));
 
   display: inline-flex;
 
   position: relative;
 
   align-items: center;
+  justify-content: center;
 
   gap: tokens.$ionic-space-xxxs;
 
@@ -39,6 +41,9 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
 
   font-family: tokens.$ionic-font-family;
   font-size: tokens.$ionic-font-size-m;
+  font-weight: tokens.$ionic-font-weight-medium;
+
+  line-height: tokens.$ionic-font-line-height-full;
 
   cursor: pointer;
 
@@ -82,6 +87,17 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
   pointer-events: none;
 }
 
+// Chip Shapes
+// ---------------------------------------------
+
+:host(.chip-round) {
+  --border-radius: #{tokens.$ionic-border-radius-rounded-large};
+}
+
+:host(.chip-rectangular) {
+  --border-radius: #{tokens.$ionic-border-radius-square};
+}
+
 // Chip Icon
 // ---------------------------------------------
 ::slotted(ion-icon) {

core/src/components/chip/chip.tsx

@@ -36,7 +36,13 @@ export class Chip implements ComponentInterface {
    */
   @Prop() disabled = false;
 
+  /**
+   * Define the Chip corner shape, when using the Ionic Theme.
+   */
+  @Prop() shape?: 'round' | 'rectangular';
+
   render() {
+    const { shape } = this;
     const theme = getIonTheme(this);
 
     return (
@@ -44,10 +50,12 @@ 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-outline': this.outline,
           'chip-disabled': this.disabled,
           'ion-activatable': true,
-          'ion-focusable': true,
+          'ion-focusable': !this.disabled,
         })}
       >
         <slot></slot>

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

@@ -0,0 +1,38 @@
+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.
+   */
+  test.describe(title('chip: shape'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/chip/test/shape`, config);
+    });
+
+    test.describe('default', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const container = page.locator('#default');
+
+        await expect(container).toHaveScreenshot(screenshot(`chip-default`));
+      });
+    });
+
+    test.describe('round', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const container = page.locator('#round');
+
+        await expect(container).toHaveScreenshot(screenshot(`chip-round`));
+      });
+    });
+
+    test.describe('rectangular', () => {
+      test('should not have visual regressions', async ({ page }) => {
+        const container = page.locator('#rectangular');
+
+        await expect(container).toHaveScreenshot(screenshot(`chip-rectangular`));
+      });
+    });
+  });
+});

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

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Chip - 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>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <h2>Chip - Shape</h2>
+
+        <h3>Shapes</h3>
+        <p>
+          <ion-chip id="default">
+            <ion-label>Default</ion-label>
+          </ion-chip>
+          <ion-chip id="round" shape="round">
+            <ion-label>Round</ion-label>
+          </ion-chip>
+          <ion-chip id="rectangular" shape="rectangular">
+            <ion-label>Rectangular</ion-label>
+          </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>
+  </body>
+</html>

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

@@ -41,3 +41,25 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * This behavior only applies to Ionic Theme.
+   */
+  test.describe(title('chip: focus state'), () => {
+    test('should render focus state', async ({ page }) => {
+      await page.setContent(
+        `<div id="container" class="ion-padding">
+          <ion-chip class="ion-focused">
+            <ion-label>Focused</ion-label>
+          </ion-chip>
+        </div>`,
+        config
+      );
+
+      const chip = page.locator('#container');
+
+      await expect(chip).toHaveScreenshot(screenshot(`chip-focused`));
+    });
+  });
+});

core/src/components/chip/test/theme-ionic/index.html

@@ -51,6 +51,19 @@
           </ion-chip>
         </p>
 
+        <h3>Shapes</h3>
+        <p>
+          <ion-chip shape="soft">
+            <ion-label>Soft</ion-label>
+          </ion-chip>
+          <ion-chip shape="round">
+            <ion-label>Round</ion-label>
+          </ion-chip>
+          <ion-chip shape="rectangular">
+            <ion-label>Rectangular</ion-label>
+          </ion-chip>
+        </p>
+
         <h3>With Icon</h3>
         <p>
           <ion-chip>

core/src/foundations/_design-tokens.json

@@ -273,6 +273,9 @@
       },
       "display-m": {
         "$value": "48px"
+      },
+      "full": {
+        "$value": "100%"
       }
     },
     "size": {
@@ -317,6 +320,9 @@
       "regular": {
         "$value": "400"
       },
+      "medium": {
+        "$value": "500"
+      },
       "semi-bold": {
         "$value": "600"
       },

core/src/foundations/ionic.root.scss

@@ -89,6 +89,7 @@
   --ionic-font-line-height-xxl: 36px;
   --ionic-font-line-height-display-s: 44px;
   --ionic-font-line-height-display-m: 48px;
+  --ionic-font-line-height-full: 100%;
   --ionic-font-size-h1: 28px;
   --ionic-font-size-h2: 32px;
   --ionic-font-size-h3: 24px;
@@ -102,6 +103,7 @@
   --ionic-font-size-l: 16px;
   --ionic-font-weight-light: 300;
   --ionic-font-weight-regular: 400;
+  --ionic-font-weight-medium: 500;
   --ionic-font-weight-semi-bold: 600;
   --ionic-font-weight-bold: 700;
   --ionic-space-none: 0;

core/src/foundations/ionic.utility.scss

@@ -478,6 +478,9 @@
 .ionic-font-line-height-display-m {
   line-height: $ionic-font-line-height-display-m;
 }
+.ionic-font-line-height-full {
+  line-height: $ionic-font-line-height-full;
+}
 .ionic-font-size-h1 {
   font-size: $ionic-font-size-h1;
 }
@@ -517,6 +520,9 @@
 .ionic-font-weight-regular {
   font-weight: $ionic-font-weight-regular;
 }
+.ionic-font-weight-medium {
+  font-weight: $ionic-font-weight-medium;
+}
 .ionic-font-weight-semi-bold {
   font-weight: $ionic-font-weight-semi-bold;
 }

core/src/foundations/ionic.vars.scss

@@ -88,6 +88,7 @@ $ionic-font-line-height-xl: var(--ionic-font-line-height-xl, 32px);
 $ionic-font-line-height-xxl: var(--ionic-font-line-height-xxl, 36px);
 $ionic-font-line-height-display-s: var(--ionic-font-line-height-display-s, 44px);
 $ionic-font-line-height-display-m: var(--ionic-font-line-height-display-m, 48px);
+$ionic-font-line-height-full: var(--ionic-font-line-height-full, 100%);
 $ionic-font-size-h1: var(--ionic-font-size-h1, 28px);
 $ionic-font-size-h2: var(--ionic-font-size-h2, 32px);
 $ionic-font-size-h3: var(--ionic-font-size-h3, 24px);
@@ -101,6 +102,7 @@ $ionic-font-size-m: var(--ionic-font-size-m, 14px);
 $ionic-font-size-l: var(--ionic-font-size-l, 16px);
 $ionic-font-weight-light: var(--ionic-font-weight-light, 300);
 $ionic-font-weight-regular: var(--ionic-font-weight-regular, 400);
+$ionic-font-weight-medium: var(--ionic-font-weight-medium, 500);
 $ionic-font-weight-semi-bold: var(--ionic-font-weight-semi-bold, 600);
 $ionic-font-weight-bold: var(--ionic-font-weight-bold, 700);
 $ionic-space-none: var(--ionic-space-none, 0);

packages/angular/src/directives/proxies.ts

@@ -550,14 +550,14 @@ setting the checked property.
 
 
 @ProxyCmp({
-  inputs: ['color', 'disabled', 'mode', 'outline', 'theme']
+  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme']
 })
 @Component({
   selector: 'ion-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'mode', 'outline', 'theme'],
+  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'],
 })
 export class IonChip {
   protected el: HTMLElement;

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

@@ -613,14 +613,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonChip,
-  inputs: ['color', 'disabled', 'mode', 'outline', 'theme']
+  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme']
 })
 @Component({
   selector: 'ion-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'mode', 'outline', 'theme'],
+  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'],
   standalone: true
 })
 export class IonChip {

packages/vue/src/proxies.ts

@@ -228,7 +228,8 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
 export const IonChip = /*@__PURE__*/ defineContainer<JSX.IonChip>('ion-chip', defineIonChip, [
   'color',
   'outline',
-  'disabled'
+  'disabled',
+  'shape'
 ]);