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

fix(tile-group): add name and required props (#1818)

Browse source
This commit is contained in:
Eric Liu 2023-10-03 11:20:16 -07:00 • committed by GitHub
commit 836b360b9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 127 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

10
docs/src/pages/components/RadioButton.svx
View file

@ -23,7 +23,7 @@ It's recommended that you provide a legend for accessibility.
Use `hideLegend` to visually hide the legend text.
<RadioButtonGroup hideLegend legendText="Storage tier (disk)" selected="standard">
<RadioButtonGroup hideLegend legendText="Storage tier (disk)" name="plan-legend" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
@ -33,7 +33,7 @@ Use `hideLegend` to visually hide the legend text.
Use the named "legendText" slot to customize the legend text.
<RadioButtonGroup name="plan" selected="standard">
<RadioButtonGroup name="plan-legend-slot" selected="standard">
<div slot="legendText" style:display="flex">
Storage tier (disk)
<Tooltip>
@ -55,7 +55,7 @@ Use the `selected` prop to bind and update the selected value.
## Left-aligned label text
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan" selected="standard">
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-left-aligned" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
@ -63,7 +63,7 @@ Use the `selected` prop to bind and update the selected value.
## Disabled buttons
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan" selected="standard">
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" name="plan-disabled" selected="standard">
<RadioButton disabled labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton disabled labelText="Pro (128 GB)" value="pro" />
@ -71,7 +71,7 @@ Use the `selected` prop to bind and update the selected value.
## Vertical orientation
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="plan" selected="standard">
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" name="plan-vertical" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />

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

@ -9,14 +9,14 @@ components: ["TileGroup", "RadioTile"]
## Default
<TileGroup legend="Service pricing tiers">
<RadioTile value="0" checked>
<TileGroup legend="Service pricing tiers" name="plan" selected="standard">
<RadioTile value="lite">
Lite plan
</RadioTile>
<RadioTile value="1">
<RadioTile value="standard">
Standard plan
</RadioTile>
<RadioTile value="2">
<RadioTile value="plus">
Plus plan
</RadioTile>
</TileGroup>
@ -33,28 +33,28 @@ Binding to the `selected` prop is a more concise approach to managing state.
## Light variant
<TileGroup legend="Service pricing tiers">
<RadioTile light value="0" checked>
<TileGroup legend="Service pricing tiers" name="plan-light" selected="standard">
<RadioTile light value="lite">
Lite plan
</RadioTile>
<RadioTile light value="1">
<RadioTile light value="standard">
Standard plan
</RadioTile>
<RadioTile light value="2">
<RadioTile light value="plus">
Plus plan
</RadioTile>
</TileGroup>
## Disabled state
<TileGroup legend="Service pricing tiers">
<RadioTile value="0" checked>
<TileGroup legend="Service pricing tiers" name="plan-disabled" selected="standard">
<RadioTile value="lite" disabled>
Lite plan
</RadioTile>
<RadioTile value="1" disabled>
<RadioTile value="standard">
Standard plan
</RadioTile>
<RadioTile value="2" disabled>
<RadioTile value="plus" disabled>
Plus plan
</RadioTile>
</TileGroup>

4
docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
View file

@ -3,10 +3,10 @@
const values = ["Lite plan", "Standard plan", "Plus plan"];
let selected = values[0];
let selected = values[1];
</script>
<TileGroup legend="Service pricing tiers" bind:selected>
<TileGroup legend="Service pricing tiers" name="plan" bind:selected>
{#each values as value}
<RadioTile value="{value}">{value}</RadioTile>
{/each}

8
docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
View file

@ -3,16 +3,18 @@
const values = ["Lite plan", "Standard plan", "Plus plan"];
let selected = values[0];
let selected = values[1];
</script>
<TileGroup
legend="Service pricing tiers"
name="plan"
on:select="{({ detail }) => (selected = detail)}"
>
{#each values as value}
<RadioTile value="{value}" checked="{selected === value}">{value}</RadioTile
>
<RadioTile value="{value}" checked="{selected === value}">
{value}
</RadioTile>
{/each}
</TileGroup>