fix(item): add disabled property and styles

packages/core/src/components.d.ts

@@ -1438,6 +1438,7 @@ declare global {
   namespace JSXElements {
     export interface IonItemAttributes extends HTMLAttributes {
       color?: string;
+      disabled?: boolean;
       href?: string;
       mode?: 'ios' | 'md';
       onclick?: (this: HTMLElement, ev: MouseEvent) => any;

packages/core/src/components/item/item.scss

@@ -105,3 +105,9 @@ ion-input.item {
 .item .button {
   @include margin(0);
 }
+
+.item-disabled {
+  cursor: default;
+  opacity: .4;
+  pointer-events: none;
+}

packages/core/src/components/item/item.tsx

@@ -31,6 +31,11 @@ export class Item {
    */
   @Prop() mode: 'ios' | 'md';
 
+  /**
+   * If true, the user cannot interact with the item. Defaults to `false`.
+   */
+  @Prop() disabled = false;
+
   /**
    * Contains a URL or a URL fragment that the hyperlink points to.
    * If this property is set, an anchor tag will be rendered.
@@ -95,7 +100,8 @@ export class Item {
       ...childStyles,
       ...createThemedClasses(this.mode, this.color, 'item'),
       ...getElementClassMap(this.el.classList),
-      'item-block': true
+      'item-block': true,
+      'item-disabled': this.disabled,
     };
 
     this.hasStyleChange = false;

packages/core/src/components/item/readme.md

@@ -16,6 +16,13 @@ Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"da
 For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
+#### disabled
+
+boolean
+
+If true, the user cannot interact with the item. Defaults to `false`.
+
+
 #### href
 
 string
@@ -60,6 +67,13 @@ Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"da
 For more information, see [Theming your App](/docs/theming/theming-your-app).
 
 
+#### disabled
+
+boolean
+
+If true, the user cannot interact with the item. Defaults to `false`.
+
+
 #### href
 
 string