mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-19 03:49:34 +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

20
docs/src/COMPONENT_API.json
View file

@ -6960,6 +6960,16 @@
"constant": false,
"reactive": false
},
{
"name": "legendText",
"kind": "let",
"description": "Specify the legend text",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "labelPosition",
"kind": "let",
@ -6990,7 +7000,15 @@
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "legendText",
"default": false,
"fallback": "{legendText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },

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;
}}"