Skip to content

Commit

Permalink
WIP: SelectableTileGroup
Browse files Browse the repository at this point in the history
  • Loading branch information
@ispyinternet
ispyinternet committed Nov 30, 2020
1 parent 626fd99 commit 361d2df
Show file tree
Hide file tree
Showing 14 changed files with 32,878 additions and 59 deletions.
22 changes: 12 additions & 10 deletions COMPONENT_INDEX.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2692,15 +2692,17 @@ None.

### Props

| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
| 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 |
| 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 |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| light | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the tile |
| value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio input |
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the selectable tile |
| 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 |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |

### Slots

Expand Down Expand Up @@ -2904,8 +2906,8 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| light | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| 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 |
| 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 |
Expand Down
24 changes: 22 additions & 2 deletions docs/src/COMPONENT_API.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8534,7 +8534,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "title",
Expand Down Expand Up @@ -8640,7 +8640,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "value",
Expand All @@ -8652,6 +8652,16 @@
"constant": false,
"reactive": false
},
{
"name": "title",
"kind": "let",
"description": "Specify the title of the selectable tile",
"type": "string",
"value": "\"title\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "tabindex",
"kind": "let",
Expand Down Expand Up @@ -8691,6 +8701,16 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the input HTML element",
"type": "null | HTMLInputElement",
"value": "null",
"isFunction": false,
"constant": false,
"reactive": true
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
Expand Down
18 changes: 12 additions & 6 deletions docs/src/pages/components/RadioTile.svx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
---
components: ["TileGroup", "RadioTile"]
components: ["RadioTileGroup", "RadioTile"]
---

<script>
import { TileGroup, RadioTile } from "carbon-components-svelte";
import { RadioTileGroup, RadioTile } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>

<InlineNotification svx-ignore title="Deprecation warning:" kind="warning" hideCloseButton>
<div>
The TileGroup component will be removed in favour of the RadioTileGroup component in the next major release.
</div>
</InlineNotification>

### Default

<TileGroup legend="Service pricing tiers">
<RadioTileGroup legend="Service pricing tiers">
<RadioTile value="0" checked>
Lite plan
</RadioTile>
<RadioTile value="1">
Standard plan
</RadioTile>
<RadioTile value="2">
Plus plan
<RadioTile light value="2">
Plus plan (light variant)
</RadioTile>
</TileGroup>

### Light variant

<TileGroup legend="Service pricing tiers">
<RadioTileGroup light legend="Service pricing tiers">
<RadioTile value="0" checked>
Lite plan
</RadioTile>
Expand Down
42 changes: 24 additions & 18 deletions docs/src/pages/components/SelectableTile.svx
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,42 @@
---
components: ["SelectableTile"]
components: ["SelectableTile", "SelectableTileGroup"]
---

<script>
import { SelectableTile } from "carbon-components-svelte";
import { SelectableTile, RadioTileGroup } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>

### Multi-selectable tiles

<div role="group" aria-label="selectable tiles">
<SelectableTile selected>
Multi-select Tile
<SelectableTileGroup legend="Select the options you require" light>
<SelectableTile title="Option 1" selected>
Option 1
</SelectableTile>
<SelectableTile selected>
Multi-select Tile
<SelectableTile title="Option 2" selected>
Option 2
</SelectableTile>
<SelectableTile>
Multi-select Tile
<SelectableTile title="Option 3£>
Option 3
</SelectableTile>
<SelectableTile light title="Option 4£>
Option 4 (light variant)
</SelectableTile>
</div>

### Light variant
### Multi-selectable tiles with light variant

<div role="group" aria-label="selectable tiles">
<SelectableTile light selected>
Multi-select Tile
<SelectableTileGroup light legend="Select the options you require" light>
<SelectableTile title="Option 1" selected>
Option 1
</SelectableTile>
<SelectableTile title="Option 2" selected>
Option 2
</SelectableTile>
<SelectableTile light selected>
Multi-select Tile
<SelectableTile title="Option 3£>
Option 3
</SelectableTile>
<SelectableTile light>
Multi-select Tile
<SelectableTile title="Option 4£>
Option 4
</SelectableTile>
</div>
</div>
Loading

0 comments on commit 361d2df

Please sign in to comment.