feat(chip): add disabled property (#20658)

resolves #19510
ionic-team · Nov 5, 2020 · 0a0cbd8 · 0a0cbd8
1 parent 639314a
commit 0a0cbd8
Show file tree

Hide file tree

Showing 12 changed files with 132 additions and 15 deletions.
diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts
@@ -156,8 +156,8 @@ export class IonCheckbox {
 }
 export declare interface IonChip extends Components.IonChip {
 }
-@ProxyCmp({ inputs: ["color", "mode", "outline"] })
-@Component({ selector: "ion-chip", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["color", "mode", "outline"] })
+@ProxyCmp({ inputs: ["color", "disabled", "mode", "outline"] })
+@Component({ selector: "ion-chip", changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", inputs: ["color", "disabled", "mode", "outline"] })
 export class IonChip {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {

diff --git a/core/api.txt b/core/api.txt
@@ -248,6 +248,7 @@ ion-checkbox,part,mark
 
 ion-chip,shadow
 ion-chip,prop,color,string | undefined,undefined,false,false
+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,css-prop,--background

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -403,6 +403,10 @@ export namespace Components {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the chip.
+         */
+        "disabled": boolean;
         /**
           * The mode determines which platform styles to use.
          */
@@ -3726,6 +3730,10 @@ declare namespace LocalJSX {
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
          */
         "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the chip.
+         */
+        "disabled"?: boolean;
         /**
           * The mode determines which platform styles to use.
          */

diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.scss
@@ -37,6 +37,11 @@
   box-sizing: border-box;
 }
 
+:host(.chip-disabled) {
+  cursor: default;
+  opacity: .4;
+  pointer-events: none;
+}
 
 // Chip Colors
 // ---------------------------------------------

diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
@@ -28,14 +28,21 @@ export class Chip implements ComponentInterface {
    */
   @Prop() outline = false;
 
+  /**
+   * If `true`, the user cannot interact with the chip.
+   */
+  @Prop() disabled = false;
+
   render() {
     const mode = getIonMode(this);
 
     return (
       <Host
+        aria-disabled={this.disabled ? 'true' : null}
         class={createColorClasses(this.color, {
           [mode]: true,
           'chip-outline': this.outline,
+          'chip-disabled': this.disabled,
           'ion-activatable': true,
         })}
       >

diff --git a/core/src/components/chip/readme.md b/core/src/components/chip/readme.md
@@ -7,7 +7,7 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
 
 ## Usage
 
-### Angular / javascript
+### Angular
 
 ```html
 <ion-chip>
@@ -22,6 +22,60 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
   <ion-label color="dark">Secondary w/ Dark label</ion-label>
 </ion-chip>
 
+<ion-chip [disabled]="true">
+  <ion-label>Disabled Chip</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin"></ion-icon>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="heart" color="dark"></ion-icon>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-label>Button Chip</ion-label>
+  <ion-icon name="close-circle"></ion-icon>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin" color="primary"></ion-icon>
+  <ion-label>Icon Chip</ion-label>
+  <ion-icon name="close"></ion-icon>
+</ion-chip>
+
+<ion-chip>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Avatar Chip</ion-label>
+  <ion-icon name="close-circle"></ion-icon>
+</ion-chip>
+```
+
+
+### Javascript
+
+```html
+<ion-chip>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-label color="secondary">Secondary Label</ion-label>
+</ion-chip>
+
+<ion-chip color="secondary">
+  <ion-label color="dark">Secondary w/ Dark label</ion-label>
+</ion-chip>
+
+<ion-chip disabled="true">
+  <ion-label>Disabled Chip</ion-label>
+</ion-chip>
+
 <ion-chip>
   <ion-icon name="pin"></ion-icon>
   <ion-label>Default</ion-label>
@@ -81,6 +135,10 @@ export const ChipExamples: React.FC = () => {
           <IonLabel color="dark">Secondary w/ Dark label</IonLabel>
         </IonChip>
 
+        <IonChip disabled={true}>
+          <IonLabel>Disabled Chip</IonLabel>
+        </IonChip>
+
         <IonChip>
           <IonIcon icon={pin} />
           <IonLabel>Default</IonLabel>
@@ -191,6 +249,10 @@ export class ChipExample {
     <ion-label color="dark">Secondary w/ Dark label</ion-label>
   </ion-chip>
 
+  <ion-chip :disabled="true">
+    <ion-label>Disabled Chip</ion-label>
+  </ion-chip>
+
   <ion-chip>
     <ion-icon :icon="pin"></ion-icon>
     <ion-label>Default</ion-label>
@@ -240,11 +302,12 @@ export default defineComponent({
 
 ## Properties
 
-| Property  | Attribute | Description                                                                                                                                                                                                                                                            | Type                  | Default     |
-| --------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
-| `color`   | `color`   | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
-| `mode`    | `mode`    | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`       | `undefined` |
-| `outline` | `outline` | Display an outline style button.                                                                                                                                                                                                                                       | `boolean`             | `false`     |
+| Property   | Attribute  | Description                                                                                                                                                                                                                                                            | Type                  | Default     |
+| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
+| `color`    | `color`    | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
+| `disabled` | `disabled` | If `true`, the user cannot interact with the chip.                                                                                                                                                                                                                     | `boolean`             | `false`     |
+| `mode`     | `mode`     | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`       | `undefined` |
+| `outline`  | `outline`  | Display an outline style button.                                                                                                                                                                                                                                       | `boolean`             | `false`     |
 
 
 ## CSS Custom Properties

diff --git a/core/src/components/chip/test/states/index.html b/core/src/components/chip/test/states/index.html
@@ -17,6 +17,7 @@
   <ion-app>
     <ion-content>
       <h3>Default</h3>
+
       <p>
         <ion-chip>
           <ion-label>Default</ion-label>
@@ -195,6 +196,26 @@ <h3>Outline</h3>
         </ion-chip>
       </p>
 
+      <h3>Disabled</h3>
+
+      <p>
+        <ion-chip disabled>
+          <ion-label>Disabled</ion-label>
+        </ion-chip>
+        <ion-chip outline color="danger" class="ion-focused" disabled>
+          <ion-label>Disabled Outline</ion-label>
+        </ion-chip>
+        <ion-chip color="secondary" class="ion-focused" disabled>
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Disabled Secondary with Icon</ion-label>
+        </ion-chip>
+        <ion-chip outline class="ion-focused" disabled>
+          <ion-icon name="git-pull-request"></ion-icon>
+          <ion-label>Disabled Outline with Icon and Avatar</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>
+      </p>
+
       <h3>Custom</h3>
 
       <!-- Custom Font -->
@@ -246,11 +267,6 @@ <h3>Custom</h3>
       padding-left: 8px;
     }
 
-    ion-chip {
-      display: inline-block !important;
-      vertical-align: middle;
-    }
-
     .wide {
       --background: #d1f3ff;
       --background-hover: #add8e6;

diff --git a/core/src/components/chip/usage/angular.md b/core/src/components/chip/usage/angular.md
@@ -11,6 +11,10 @@
   <ion-label color="dark">Secondary w/ Dark label</ion-label>
 </ion-chip>
 
+<ion-chip [disabled]="true">
+  <ion-label>Disabled Chip</ion-label>
+</ion-chip>
+
 <ion-chip>
   <ion-icon name="pin"></ion-icon>
   <ion-label>Default</ion-label>

diff --git a/core/src/components/chip/usage/javascript.md b/core/src/components/chip/usage/javascript.md
@@ -11,6 +11,10 @@
   <ion-label color="dark">Secondary w/ Dark label</ion-label>
 </ion-chip>
 
+<ion-chip disabled="true">
+  <ion-label>Disabled Chip</ion-label>
+</ion-chip>
+
 <ion-chip>
   <ion-icon name="pin"></ion-icon>
   <ion-label>Default</ion-label>

diff --git a/core/src/components/chip/usage/react.md b/core/src/components/chip/usage/react.md
@@ -24,6 +24,10 @@ export const ChipExamples: React.FC = () => {
           <IonLabel color="dark">Secondary w/ Dark label</IonLabel>
         </IonChip>
 
+        <IonChip disabled={true}>
+          <IonLabel>Disabled Chip</IonLabel>
+        </IonChip>
+
         <IonChip>
           <IonIcon icon={pin} />
           <IonLabel>Default</IonLabel>
@@ -57,4 +61,4 @@ export const ChipExamples: React.FC = () => {
   );
 };
 
-```
+```
diff --git a/core/src/components/chip/usage/vue.md b/core/src/components/chip/usage/vue.md
@@ -12,6 +12,10 @@
     <ion-label color="dark">Secondary w/ Dark label</ion-label>
   </ion-chip>
 
+  <ion-chip :disabled="true">
+    <ion-label>Disabled Chip</ion-label>
+  </ion-chip>
+
   <ion-chip>
     <ion-icon :icon="pin"></ion-icon>
     <ion-label>Default</ion-label>

diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
@@ -109,7 +109,8 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox>('ion-c
 
 export const IonChip = /*@__PURE__*/ defineContainer<JSX.IonChip>('ion-chip', [
   'color',
-  'outline'
+  'outline',
+  'disabled'
 ]);