mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36: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

8
COMPONENT_INDEX.md
View file

@ -2695,15 +2695,17 @@ None.
| :------------ | :--------------- | :------- | :------------------------------------------ | ------------------------- | -------------------------------------------- |
| selected | <code>let</code> | Yes | <code>string</code> | -- | Set the selected radio button value |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio buttons |
| legendText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
| labelPosition | <code>let</code> | No | <code>"right" &#124; "left"</code> | <code>"right"</code> | Specify the label position |
| orientation | <code>let</code> | No | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
| id | <code>let</code> | No | <code>string</code> | -- | Set an id for the container div element |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| Slot name | Default | Props | Fallback |
| :--------- | :------ | :---- | :------------------------ |
| -- | Yes | -- | -- |
| legendText | No | -- | <code>{legendText}</code> |
### Events

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

15
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -8,6 +8,9 @@
/** Set to `true` to disable the radio buttons */
export let disabled = false;
/** Specify the legend text */
export let legendText = "";
/**
* Specify the label position
* @type {"right" | "left"}
@ -72,12 +75,18 @@
on:mouseenter
on:mouseleave
>
<div
<fieldset
class:bx--radio-button-group="{true}"
class:bx--radio-button-group--vertical="{orientation === 'vertical'}"
class="{labelPosition && `bx--radio-button-group--label-${labelPosition}`}"
class:bx--radio-button-group--label-left="{labelPosition === 'left'}"
class:bx--radio-button-group--label-right="{labelPosition === 'right'}"
disabled="{disabled}"
>
{#if legendText || $$slots.legendText}
<legend class:bx--label="{true}">
<slot name="legendText">{legendText}</slot>
</legend>
{/if}
<slot />
</div>
</fieldset>
</div>

63
tests/RadioButton.test.svelte
View file

@ -1,48 +1,25 @@
<script lang="ts">
import {
FormGroup,
RadioButton,
RadioButtonSkeleton,
RadioButtonGroup,
} from "../types";
import { RadioButton, RadioButtonSkeleton, RadioButtonGroup } from "../types";
</script>
<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 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>
<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
legendText="Storage tier (disk)"
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 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>
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup>
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
</FormGroup>
<FormGroup legendText="Storage tier (disk)">
<RadioButtonGroup orientation="vertical">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>
</FormGroup>
<RadioButtonGroup orientation="vertical" legendText="Storage tier (disk)">
<RadioButtonSkeleton />
<RadioButtonSkeleton />
<RadioButtonSkeleton />
</RadioButtonGroup>

8
types/RadioButtonGroup/RadioButtonGroup.d.ts vendored
View file

@ -14,6 +14,12 @@ export interface RadioButtonGroupProps
*/
disabled?: boolean;
/**
* Specify the legend text
* @default ""
*/
legendText?: string;
/**
* Specify the label position
* @default "right"
@ -41,5 +47,5 @@ export default class RadioButtonGroup extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"];
change: CustomEvent<any>;
},
{ default: {} }
{ default: {}; legendText: {} }
> {}