fix(chip): remove reflect & optimize screenshots

Co-authored-by: Brandy Carney <brandyscarney@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,13 +11,14 @@ $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;
 
@@ -82,6 +83,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,6 +50,8 @@ 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,

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>

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'
 ]);