feat(tile): add support for disabled state for radio and selectable tiles (#8058)

* feat(selectable-tile): add support for disabled state

* feat(radio-tile): add support for disabled state

* fix(tile): use disabled-02 for disabled outline and checkmark

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: janhassel

packages/components/src/components/tile/_tile.scss

@@ -187,10 +187,7 @@
     opacity: 1;
   }
 
-  .#{$prefix}--tile-input:checked
-    + .#{$prefix}--tile
-    > .#{$prefix}--tile__checkmark
-    svg {
+  .#{$prefix}--tile--is-selected .#{$prefix}--tile__checkmark svg {
     fill: $ui-05;
 
     // Windows, Firefox HCM Fix
@@ -213,6 +210,26 @@
   .#{$prefix}--tile-input:focus + .#{$prefix}--tile {
     @include focus-outline('outline');
   }
+
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable {
+    color: $disabled-02;
+    background-color: $ui-01;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--selectable.#{$prefix}--tile--light {
+    background-color: $ui-02;
+  }
+
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected {
+    outline-color: $disabled-02;
+  }
+
+  .#{$prefix}--tile--disabled.#{$prefix}--tile--is-selected
+    .#{$prefix}--tile__checkmark
+    svg {
+    fill: $disabled-02;
+  }
 }
 
 @include exports('tile') {

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -5740,6 +5740,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "disabled": Object {
+        "type": "bool",
+      },
       "handleClick": Object {
         "type": "func",
       },
@@ -5868,6 +5871,9 @@ Map {
       "defaultChecked": Object {
         "type": "bool",
       },
+      "disabled": Object {
+        "type": "bool",
+      },
       "iconDescription": [Function],
       "id": Object {
         "type": "string",

packages/react/src/components/RadioTile/RadioTile-test.js

@@ -145,4 +145,13 @@ describe('RadioButton', () => {
       expect(call[2].target).toBe(inputElement);
     });
   });
+
+  it('supports disabled state', () => {
+    const wrapper = render({
+      disabled: true,
+    });
+
+    const input = () => wrapper.find('input');
+    expect(input().props().disabled).toEqual(true);
+  });
 });

packages/react/src/components/RadioTile/RadioTile.js

@@ -19,6 +19,7 @@ const { prefix } = settings;
 function RadioTile({
   children,
   className,
+  disabled,
   // eslint-disable-next-line no-unused-vars
   iconDescription,
   light,
@@ -38,6 +39,7 @@ function RadioTile({
     {
       [`${prefix}--tile--is-selected`]: checked,
       [`${prefix}--tile--light`]: light,
+      [`${prefix}--tile--disabled`]: disabled,
     }
   );
 
@@ -58,12 +60,13 @@ function RadioTile({
         {...other}
         type="radio"
         checked={checked}
+        disabled={disabled}
         name={name}
         value={value}
         className={`${prefix}--tile-input`}
-        tabIndex={tabIndex}
-        onChange={handleOnChange}
-        onKeyDown={handleOnKeyDown}
+        tabIndex={!disabled ? tabIndex : null}
+        onChange={!disabled ? handleOnChange : null}
+        onKeyDown={!disabled ? handleOnKeyDown : null}
         id={inputId}
       />
       <label htmlFor={inputId} className={classes}>
@@ -97,6 +100,11 @@ RadioTile.propTypes = {
    */
   defaultChecked: PropTypes.bool,
 
+  /**
+   * Specify whether the RadioTile should be disabled
+   */
+  disabled: PropTypes.bool,
+
   /**
    * The description of the tile checkmark icon.
    */

packages/react/src/components/Tile/Tile-story.js

@@ -47,6 +47,7 @@ const props = {
     handleClick: action('handleClick'),
     handleKeyDown: action('handleKeyDown'),
     light: boolean('Light variant (light)', false),
+    disabled: boolean('Disabled (disabled)', false),
   }),
   group: () => ({
     name: text('Form item (name in <TileGroup>)', 'tile-group'),
@@ -61,6 +62,7 @@ const props = {
     name: text('Form item name (name in <RadioTile>)', 'tiles'),
     onChange: action('onChange'),
     light: boolean('Light variant (light)', false),
+    disabled: boolean('Disabled (disabled)', false),
   }),
   expandable: () => ({
     tabIndex: number('Tab index (tabIndex)', 0),

packages/react/src/components/Tile/Tile-test.js

@@ -220,6 +220,11 @@ describe('Tile', () => {
       content.simulate('click');
       expect(onChange).toHaveBeenCalledTimes(2);
     });
+
+    it('supports disabled state', () => {
+      wrapper.setProps({ disabled: true });
+      expect(wrapper.find('input').props().disabled).toEqual(true);
+    });
   });
 
   describe('Renders expandable tile as expected', () => {

packages/react/src/components/Tile/Tile.js

@@ -197,6 +197,11 @@ export class SelectableTile extends Component {
      */
     className: PropTypes.string,
 
+    /**
+     * Specify whether the SelectableTile should be disabled
+     */
+    disabled: PropTypes.bool,
+
     /**
      * Specify the function to run when the SelectableTile is clicked
      */
@@ -332,6 +337,7 @@ export class SelectableTile extends Component {
       // eslint-disable-next-line no-unused-vars
       onChange,
       light,
+      disabled,
       ...other
     } = this.props;
 
@@ -341,6 +347,7 @@ export class SelectableTile extends Component {
       {
         [`${prefix}--tile--is-selected`]: this.state.selected,
         [`${prefix}--tile--light`]: light,
+        [`${prefix}--tile--disabled`]: disabled,
       },
       className
     );
@@ -355,8 +362,9 @@ export class SelectableTile extends Component {
           id={id}
           className={`${prefix}--tile-input`}
           value={value}
-          onChange={this.handleOnChange}
+          onChange={!disabled ? this.handleOnChange : null}
           type="checkbox"
+          disabled={disabled}
           name={name}
           title={title}
           checked={this.state.selected}
@@ -365,10 +373,11 @@ export class SelectableTile extends Component {
         <label
           htmlFor={id}
           className={classes}
-          tabIndex={tabIndex}
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          tabIndex={!disabled ? tabIndex : null}
           {...other}
-          onClick={this.handleClick}
-          onKeyDown={this.handleKeyDown}>
+          onClick={!disabled ? this.handleClick : null}
+          onKeyDown={!disabled ? this.handleKeyDown : null}>
           <span className={`${prefix}--tile__checkmark`}>
             <CheckmarkFilled />
           </span>