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

feat(radio-button): add legendText prop to RadioButtonGroup

Browse source
This commit is contained in:
Eric Y Liu 2021-03-05 14:38:00 -08:00
commit 621fea5f42
7 changed files with 123 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,19 +3,43 @@ components: ["RadioButtonGroup", "RadioButton", "RadioButtonSkeleton"]
---
<script>
import { FormGroup, RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "carbon-components-svelte";
import { RadioButton, RadioButtonSkeleton, RadioButtonGroup, Tooltip } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### With legend text
<RadioButtonGroup legendText="Storage tier (disk)" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Legend text slot
Use the named "legendText" slot to customize the legend text.
<RadioButtonGroup selected="standard">
<div slot="legendText" style="display: flex">
Storage tier (disk)
<Tooltip tooltipBodyId="tooltip-body">
<p id="tooltip-body">
Storage tiers may vary based on geolocation.
</p>
</Tooltip>
</div>
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Programmatic usage
@ -25,40 +49,32 @@ Bind the selected value using the `selected` prop.
### Label text aligned left
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup labelPosition="left" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup labelPosition="left" legendText="Storage tier (disk)" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Vertical orientation
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup orientation="vertical" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)" selected="standard">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
### Skeleton
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup>
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup legendText="Storage tier (disk)">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
### Skeleton (vertical orientation)
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup orientation="vertical">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>

17
docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
View file

@ -2,7 +2,6 @@
import {
ButtonSet,
Button,
FormGroup,
RadioButtonGroup,
RadioButton,
} from "carbon-components-svelte";
@ -10,17 +9,17 @@
let plan = "standard";
</script>
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup bind:selected="{plan}">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup legendText="Storage tier (disk)" bind:selected="{plan}">
<RadioButton labelText="Free (1 GB)" value="free" />
<RadioButton labelText="Standard (10 GB)" value="standard" />
<RadioButton labelText="Pro (128 GB)" value="pro" />
</RadioButtonGroup>
<ButtonSet>
<ButtonSet style="margin-top: var(--cds-layout-03)">
{#each ["free", "standard", "pro"] as value}
<Button
disabled="{plan === value}"
kind="secondary"
on:click="{() => {
plan = value;
}}"