Add shape prop to Chip

core/src/components.d.ts

@@ -750,6 +750,10 @@ export namespace Components {
           * Display an outline style button.
          */
         "outline": boolean;
+        /**
+          * Set to 'rectangular' for a chip with sharp corners.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5978,6 +5982,10 @@ declare namespace LocalJSX {
           * Display an outline style button.
          */
         "outline"?: boolean;
+        /**
+          * Set to 'rectangular' for a chip with sharp corners.
+         */
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */

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

@@ -9,13 +9,14 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
 :host {
   --background: #{tokens.$ionic-color-neutral-10};
   --border-color: transparent;
+  --border-radius: #{tokens.$ionic-border-radius-rounded-large};
   --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;
 
@@ -75,3 +76,16 @@ $ionic-states-focus-primary: #9ec4fd; // TODO(ROU-4870): there is no token yet f
   opacity: 0.6;
   pointer-events: none;
 }
+
+// Chip Shapes
+// ---------------------------------------------
+
+:host(.chip-soft) {
+  --border-radius: #{tokens.$ionic-border-radius-rounded-small};
+}
+:host(.chip-round) {
+  --border-radius: #{tokens.$ionic-border-radius-rounded-large};
+}
+:host(.chip-rectangular) {
+  --border-radius: #{tokens.$ionic-border-radius-square};
+}

core/src/components/chip/chip.tsx

@@ -36,7 +36,13 @@ export class Chip implements ComponentInterface {
    */
   @Prop() disabled = false;
 
+  /**
+   * Set to 'rectangular' for a chip with sharp corners.
+   */
+  @Prop({ reflect: true }) shape?: 'soft' | 'round' | 'rectangular';
+
   render() {
+    const { shape } = this;
     const theme = getIonTheme(this);
 
     return (
@@ -44,6 +50,7 @@ export class Chip implements ComponentInterface {
         aria-disabled={this.disabled ? 'true' : null}
         class={createColorClasses(this.color, {
           [theme]: true,
+          [`chip-${shape}`]: shape !== undefined,
           'chip-outline': this.outline,
           'chip-disabled': this.disabled,
           'ion-activatable': true,

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

@@ -50,6 +50,19 @@
             <ion-label>Focus</ion-label>
           </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>
       </ion-content>
     </ion-app>