From e5d123eb4b995fa0322a387d7506b90f0e738fe2 Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Thu, 1 Apr 2021 14:27:44 -0700 Subject: [PATCH] feat(tile): support disabled state for SelectableTile, RadioTile Closes #539 --- COMPONENT_INDEX.md | 2 ++ docs/src/COMPONENT_API.json | 20 ++++++++++++++++++++ docs/src/pages/components/RadioTile.svx | 14 ++++++++++++++ docs/src/pages/components/SelectableTile.svx | 14 ++++++++++++++ src/Tile/RadioTile.svelte | 11 +++++++++-- src/Tile/SelectableTile.svelte | 13 ++++++++++--- types/Tile/RadioTile.d.ts | 6 ++++++ types/Tile/SelectableTile.d.ts | 6 ++++++ 8 files changed, 81 insertions(+), 5 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index bd4137bb..ac575641 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2946,6 +2946,7 @@ None. | :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- | | checked | let | Yes | boolean | false | Set to `true` to check the tile | | light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the tile | | value | let | No | string | "" | Specify the value of the radio input | | tabindex | let | No | string | "0" | Specify the tabindex | | iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon | @@ -3159,6 +3160,7 @@ None. | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | selected | let | Yes | boolean | false | Set to `true` to select the tile | | light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the tile | | title | let | No | string | "title" | Specify the title of the selectable tile | | value | let | No | string | "value" | Specify the value of the selectable tile | | tabindex | let | No | string | "0" | Specify the tabindex | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index cc69964c..73399002 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -7523,6 +7523,16 @@ "constant": false, "reactive": false }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "value", "kind": "let", @@ -8176,6 +8186,16 @@ "constant": false, "reactive": false }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "title", "kind": "let", diff --git a/docs/src/pages/components/RadioTile.svx b/docs/src/pages/components/RadioTile.svx index 263a8e23..1ec54f42 100644 --- a/docs/src/pages/components/RadioTile.svx +++ b/docs/src/pages/components/RadioTile.svx @@ -33,4 +33,18 @@ components: ["TileGroup", "RadioTile"] Plus plan + + +### Disabled state + + + + Lite plan + + + Standard plan + + + Plus plan + \ No newline at end of file diff --git a/docs/src/pages/components/SelectableTile.svx b/docs/src/pages/components/SelectableTile.svx index 01b41d16..40a7d8a7 100644 --- a/docs/src/pages/components/SelectableTile.svx +++ b/docs/src/pages/components/SelectableTile.svx @@ -33,4 +33,18 @@ components: ["SelectableTile"] Multi-select Tile + + +### Disabled state + +
+ + Multi-select Tile + + + Multi-select Tile + + + Multi-select Tile +
\ No newline at end of file diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte index 7e2fce40..606cf0c6 100644 --- a/src/Tile/RadioTile.svelte +++ b/src/Tile/RadioTile.svelte @@ -5,6 +5,9 @@ /** Set to `true` to enable the light variant */ export let light = false; + /** Set to `true` to disable the tile */ + export let disabled = false; + /** Specify the value of the radio input */ export let value = ""; @@ -21,7 +24,7 @@ export let name = ""; import { getContext } from "svelte"; - import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16"; + import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte"; const { add, update, selectedValue } = getContext("TileGroup"); @@ -36,14 +39,17 @@ name="{name}" value="{value}" checked="{checked}" - tabindex="{tabindex}" + tabindex="{disabled ? undefined : tabindex}" + disabled="{disabled}" class:bx--tile-input="{true}" on:change on:change="{() => { + if (disabled) return; update(value); }}" on:keydown on:keydown="{(e) => { + if (disabled) return; if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); update(value); @@ -56,6 +62,7 @@ class:bx--tile--selectable="{true}" class:bx--tile--is-selected="{checked}" class:bx--tile--light="{light}" + class:bx--tile--disabled="{disabled}" {...$$restProps} on:click on:mouseover diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte index 4c1d2a1c..af030a7c 100644 --- a/src/Tile/SelectableTile.svelte +++ b/src/Tile/SelectableTile.svelte @@ -5,6 +5,9 @@ /** Set to `true` to enable the light variant */ export let light = false; + /** Set to `true` to disable the tile */ + export let disabled = false; + /** Specify the title of the selectable tile */ export let title = "title"; @@ -30,11 +33,11 @@ export let ref = null; import { createEventDispatcher } from "svelte"; - import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16"; + import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte"; const dispatch = createEventDispatcher(); - $: dispatch(selected ? "select" : "deselect", id); + $: if (!disabled) dispatch(selected ? "select" : "deselect", id);