mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(tile): support disabled state for SelectableTile, RadioTile

Browse source 
Closes #539
This commit is contained in:
Eric Y Liu 2021-04-01 14:27:44 -07:00
commit e5d123eb4b
8 changed files with 81 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -2946,6 +2946,7 @@ None.
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the tile |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile |
| value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio input |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Tile checkmark"</code> | Specify the ARIA label for the radio tile checkmark icon |
@ -3159,6 +3160,7 @@ None.
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to select the tile |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile |
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the selectable tile |
| value | <code>let</code> | No | <code>string</code> | <code>"value"</code> | Specify the value of the selectable tile |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |

20
docs/src/COMPONENT_API.json
View file

@ -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",

14
docs/src/pages/components/RadioTile.svx
View file

@ -34,3 +34,17 @@ components: ["TileGroup", "RadioTile"]
Plus plan
</RadioTile>
</TileGroup>
### Disabled state
<TileGroup legend="Service pricing tiers">
<RadioTile value="0" checked>
Lite plan
</RadioTile>
<RadioTile value="1" disabled>
Standard plan
</RadioTile>
<RadioTile value="2" disabled>
Plus plan
</RadioTile>
</TileGroup>

14
docs/src/pages/components/SelectableTile.svx
View file

@ -34,3 +34,17 @@ components: ["SelectableTile"]
Multi-select Tile
</SelectableTile>
</div>
### Disabled state
<div role="group" aria-label="selectable tiles">
<SelectableTile selected>
Multi-select Tile
</SelectableTile>
<SelectableTile disabled>
Multi-select Tile
</SelectableTile>
<SelectableTile disabled>
Multi-select Tile
</SelectableTile>
</div>

11
src/Tile/RadioTile.svelte
View file

@ -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

13
src/Tile/SelectableTile.svelte
View file

@ -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);
</script>
<input
@ -47,17 +50,20 @@
value="{value}"
name="{name}"
title="{title}"
disabled="{disabled}"
/>
<label
for="{id}"
tabindex="{tabindex}"
tabindex="{disabled ? undefined : tabindex}"
class:bx--tile="{true}"
class:bx--tile--selectable="{true}"
class:bx--tile--is-selected="{selected}"
class:bx--tile--light="{light}"
class:bx--tile--disabled="{disabled}"
{...$$restProps}
on:click
on:click|preventDefault="{() => {
if (disabled) return;
selected = !selected;
}}"
on:mouseover
@ -65,6 +71,7 @@
on:mouseleave
on:keydown
on:keydown="{(e) => {
if (disabled) return;
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
selected = !selected;

6
types/Tile/RadioTile.d.ts vendored
View file

@ -15,6 +15,12 @@ export interface RadioTileProps
*/
light?: boolean;
/**
* Set to `true` to disable the tile
* @default false
*/
disabled?: boolean;
/**
* Specify the value of the radio input
* @default ""

6
types/Tile/SelectableTile.d.ts vendored
View file

@ -15,6 +15,12 @@ export interface SelectableTileProps
*/
light?: boolean;
/**
* Set to `true` to disable the tile
* @default false
*/
disabled?: boolean;
/**
* Specify the title of the selectable tile
* @default "title"