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

WIP: SelectableTileGroup

Browse source
This commit is contained in:
Richard O'flynn 2020-11-30 20:22:11 +00:00
commit fe5c571b13
17 changed files with 33036 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

72
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 155 components exported from carbon-components-svelte@0.25.1.
> 157 components exported from carbon-components-svelte@0.25.1.
## Components
@ -97,6 +97,7 @@
- [`RadioButtonGroup`](#radiobuttongroup)
- [`RadioButtonSkeleton`](#radiobuttonskeleton)
- [`RadioTile`](#radiotile)
- [`RadioTileGroup`](#radiotilegroup)
- [`Row`](#row)
- [`Search`](#search)
- [`SearchSkeleton`](#searchskeleton)
@ -105,6 +106,7 @@
- [`SelectItemGroup`](#selectitemgroup)
- [`SelectSkeleton`](#selectskeleton)
- [`SelectableTile`](#selectabletile)
- [`SelectableTileGroup`](#selectabletilegroup)
- [`SideNav`](#sidenav)
- [`SideNavItems`](#sidenavitems)
- [`SideNavLink`](#sidenavlink)
@ -2692,15 +2694,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
@ -2719,6 +2723,29 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
## `RadioTileGroup`
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| selectedValue | <code>let</code> | Yes | <code>string</code> | -- | Specify the selected tile value |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| legend | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| select | dispatched | -- |
## `Row`
### Props
@ -2904,8 +2931,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 |
@ -2929,6 +2956,29 @@ None.
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
## `SelectableTileGroup`
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| selectedValues | <code>let</code> | Yes | <code>string</code> | <code>[]</code> | Specify the selected tile's |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| legend | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| select | dispatched | -- |
## `SideNav`
### Props

125
docs/src/COMPONENT_API.json
View file

@ -1,5 +1,5 @@
{
"total": 155,
"total": 157,
"components": [
{
"moduleName": "SkeletonText",
@ -8534,7 +8534,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "title",
@ -8640,7 +8640,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "value",
@ -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",
@ -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": "{}" }],
@ -8744,6 +8764,105 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "fieldset" }
},
{
"moduleName": "RadioTileGroup",
"filePath": "/src/Tile/RadioTileGroup.svelte",
"props": [
{
"name": "selectedValue",
"kind": "let",
"description": "Specify the selected tile value",
"type": "string",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the tile group",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "light",
"kind": "let",
"description": "Set to `true` to enable the light variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "legend",
"kind": "let",
"description": "Specify the legend text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [{ "type": "dispatched", "name": "select" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "fieldset" }
},
{
"moduleName": "SelectableTileGroup",
"filePath": "/src/Tile/SelectableTileGroup.svelte",
"props": [
{
"name": "selectedValues",
"kind": "let",
"description": "Specify the selected tile's",
"type": "string",
"value": "[]",
"isFunction": false,
"constant": false,
"reactive": true
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the tile group",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "light",
"kind": "let",
"description": "Set to `true` to enable the light variant",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "legend",
"kind": "let",
"description": "Specify the legend text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [{ "type": "dispatched", "name": "select" }],
"typedefs": [],
"rest_props": { "type": "Element", "name": "fieldset" }
},
{
"moduleName": "TimePicker",
"filePath": "/src/TimePicker/TimePicker.svelte",

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

@ -1,29 +1,35 @@
---
components: ["TileGroup", "RadioTile"]
components: ["RadioTileGroup", "RadioTile"]
---
<script>
import { TileGroup, RadioTile } from "carbon-components-svelte";
import { RadioTileGroup, RadioTile, InlineNotification } 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>

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

@ -1,36 +1,42 @@
---
components: ["SelectableTile"]
components: ["SelectableTile", "SelectableTileGroup"]
---
<script>
import { SelectableTile } from "carbon-components-svelte";
import { SelectableTile, SelectableTileGroup } 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 light selected>
Multi-select Tile
<SelectableTile title="Option 2" selected>
Option 2
</SelectableTile>
<SelectableTile light>
Multi-select Tile
<SelectableTile title="Option 3£>
Option 3
</SelectableTile>
<SelectableTile title="Option 4£>
Option 4
</SelectableTile>
</div>

4136
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

28525
palimpsest/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

15
src/Tile/RadioTile.svelte
View file

@ -8,6 +8,9 @@
/** Specify the value of the radio input */
export let value = "";
/** Specify the title of the selectable tile */
export let title = "title";
/** Specify the tabindex */
export let tabindex = "0";
@ -20,10 +23,15 @@
/** Specify a name attribute for the input */
export let name = "";
/** Obtain a reference to the input HTML element */
export let ref = null;
import { getContext } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
const { add, update, selectedValue } = getContext("TileGroup");
const { _light, add, update, selectedValue } = getContext("RadioTileGroup");
light = light || _light;
add({ value, checked });
@ -31,13 +39,15 @@
</script>
<input
bind:this="{ref}"
type="radio"
id="{id}"
name="{name}"
value="{value}"
checked="{checked}"
tabindex="{tabindex}"
tabindex="-1"
class:bx--tile-input="{true}"
title="{title}"
on:change
on:change="{() => {
update(value);
@ -52,6 +62,7 @@
/>
<label
for="{id}"
tabindex="{tabindex}"
class:bx--tile="{true}"
class:bx--tile--selectable="{true}"
class:bx--tile--is-selected="{checked}"

47
src/Tile/RadioTileGroup.svelte Normal file
View file

@ -0,0 +1,47 @@
<script>
/**
* Specify the selected tile value
* @type {string}
*/
export let selectedValue = undefined;
/** Set to `true` to disable the tile group */
export let disabled = false;
/** Set to `true` to enable the light variant */
export let light = false;
/** Specify the legend text */
export let legend = "";
import { createEventDispatcher, setContext } from "svelte";
import { writable } from "svelte/store";
const dispatch = createEventDispatcher();
const _selectedValue = writable(selectedValue);
setContext("RadioTileGroup", {
_light: light,
selectedValue: _selectedValue,
add: ({ checked, value }) => {
if (checked) {
_selectedValue.set(value);
}
},
update: (value) => {
_selectedValue.set(value);
},
});
$: selectedValue = $_selectedValue;
$: dispatch("select", $_selectedValue);
</script>
<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
{#if legend}
<legend class:bx--label="{true}">{legend}</legend>
{/if}
<div>
<slot />
</div>
</fieldset>

16
src/Tile/SelectableTile.svelte
View file

@ -29,12 +29,16 @@
/** Obtain a reference to the input HTML element */
export let ref = null;
import { createEventDispatcher } from "svelte";
import { getContext } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
const dispatch = createEventDispatcher();
const { _light, update, selectedValues } = getContext("SelectableTileGroup");
$: dispatch(selected ? "select" : "deselect", id);
light = light || _light;
update({ value, selected });
$: selected = $selectedValues.indexOf(value) > -1;
</script>
<input
@ -57,9 +61,7 @@
class:bx--tile--light="{light}"
{...$$restProps}
on:click
on:click|preventDefault="{() => {
selected = !selected;
}}"
on:click|preventDefault="{() => update(value, !selected)}"
on:mouseover
on:mouseenter
on:mouseleave
@ -67,7 +69,7 @@
on:keydown="{(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
selected = !selected;
update(value, !selected);
}
}}"
>

52
src/Tile/SelectableTileGroup.svelte Normal file
View file

@ -0,0 +1,52 @@
<script>
/**
* Specify the selected tile's
* @type {string}
*/
export let selectedValues = [];
/** Set to `true` to disable the tile group */
export let disabled = false;
/** Set to `true` to enable the light variant */
export let light = false;
/** Specify the legend text */
export let legend = "";
import { createEventDispatcher, setContext } from "svelte";
import { writable } from "svelte/store";
const dispatch = createEventDispatcher();
const _selectedValues = writable(selectedValues);
function newArray(value, selected) {
let a = $_selectedValues;
const i = a.indexOf(value);
if (selected && i === -1) {
a = a.concat([value]);
} else if (!selected && i > -1) {
a = a.splice(index, 1);
}
return a;
}
setContext("SelectableTileGroup", {
_light: light,
selectedValues: _selectedValues,
update: ({ selected, value }) =>
_selectedValues.set(newArray(value, selected)),
});
$: selectedValues = $_selectedValues;
$: dispatch("select", $_selectedValues);
</script>
<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
{#if legend}
<legend class:bx--label="{true}">{legend}</legend>
{/if}
<div>
<slot />
</div>
</fieldset>

2
src/Tile/TileGroup.svelte
View file

@ -17,7 +17,7 @@
const dispatch = createEventDispatcher();
const selectedValue = writable(selected);
setContext("TileGroup", {
setContext("RadioTileGroup", {
selectedValue,
add: ({ checked, value }) => {
if (checked) {

2
src/Tile/index.js
View file

@ -4,3 +4,5 @@ export { default as ExpandableTile } from "./ExpandableTile.svelte";
export { default as SelectableTile } from "./SelectableTile.svelte";
export { default as RadioTile } from "./RadioTile.svelte";
export { default as TileGroup } from "./TileGroup.svelte";
export { default as RadioTileGroup } from "./RadioTileGroup.svelte";
export { default as SelectableTileGroup } from "./SelectableTileGroup.svelte";

2
src/index.js
View file

@ -107,6 +107,8 @@ export {
SelectableTile,
RadioTile,
TileGroup,
RadioTileGroup,
SelectableTileGroup,
} from "./Tile";
export { TimePicker, TimePickerSelect } from "./TimePicker";
export { Toggle, ToggleSkeleton } from "./Toggle";

10
tests/RadioTile.test.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts">
import { TileGroup, RadioTile } from "../types";
import { RadioTileGroup, RadioTile } from "../types";
</script>
<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>
</TileGroup>
</RadioTileGroup>
<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>
</TileGroup>
</RadioTileGroup>

22
tests/SelectableTile.test.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts">
import { SelectableTile } from "../types";
import { SelectableTileGroup, SelectableTile } from "../types";
</script>
<SelectableTile selected>Multi-select Tile</SelectableTile>
<SelectableTileGroup legend="Service pricing tiers">
<SelectableTile value="0" checked>Lite plan</SelectableTile>
<SelectableTile value="1">Standard plan</SelectableTile>
<SelectableTile light value="2">Plus plan</SelectableTile>
</SelectableTileGroup>
<SelectableTile selected>Multi-select Tile</SelectableTile>
<SelectableTile>Multi-select Tile</SelectableTile>
<SelectableTile light selected>Multi-select Tile</SelectableTile>
<SelectableTile light selected>Multi-select Tile</SelectableTile>
<SelectableTile light>Multi-select Tile</SelectableTile>
<SelectableTileGroup light legend="Service pricing tiers">
<SelectableTile value="0" checked>Lite plan</SelectableTile>
<SelectableTile value="1">Standard plan</SelectableTile>
<SelectableTile value="2">Plus plan</SelectableTile>
</SelectableTileGroup>

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

@ -19,6 +19,12 @@ export interface RadioTileProps extends svelte.JSX.HTMLAttributes<HTMLElementTag
*/
value?: string;
/**
* Specify the title of the selectable tile
* @default "title"
*/
title?: string;
/**
* Specify the tabindex
* @default "0"
@ -42,6 +48,12 @@ export interface RadioTileProps extends svelte.JSX.HTMLAttributes<HTMLElementTag
* @default ""
*/
name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
ref?: null | HTMLInputElement;
}
export default class RadioTile {

2
types/index.d.ts vendored
View file

@ -123,6 +123,8 @@ export { default as ExpandableTile } from "./Tile/ExpandableTile";
export { default as SelectableTile } from "./Tile/SelectableTile";
export { default as RadioTile } from "./Tile/RadioTile";
export { default as TileGroup } from "./Tile/TileGroup";
export { default as RadioTileGroup } from "./Tile/RadioTileGroup";
export { default as SelectableTileGroup } from "./Tile/SelectableTileGroup";
export { default as TimePicker } from "./TimePicker/TimePicker";
export { default as TimePickerSelect } from "./TimePicker/TimePickerSelect";
export { default as Toggle } from "./Toggle/Toggle";