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

7
COMPONENT_INDEX.md
View file

@ -3019,11 +3019,12 @@ None.
| checked | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the tile |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile |
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
| value | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio input |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Tile checkmark"</code> | Specify the ARIA label for the radio tile checkmark icon |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the radio tile input |
### Slots
@ -4235,9 +4236,11 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------- |
| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | -------------------------------------------------------- |
| selected | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the selected tile value |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
| required | No | <code>let</code> | No | <code>boolean</code> | <code>undefined</code> | Set to `true` to require the selection of a radio button |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the radio button inputs |
| legend | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
### Slots

37
docs/src/COMPONENT_API.json
View file

@ -9679,6 +9679,18 @@
"constant": false,
"reactive": false
},
{
"name": "required",
"kind": "let",
"description": "Set to `true` to mark the field as required",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "value",
"kind": "let",
@ -9730,9 +9742,8 @@
{
"name": "name",
"kind": "let",
"description": "Specify a name attribute for the input",
"description": "Specify a name attribute for the radio tile input",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -13110,6 +13121,28 @@
"constant": false,
"reactive": false
},
{
"name": "required",
"kind": "let",
"description": "Set to `true` to require the selection of a radio button",
"type": "boolean",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "name",
"kind": "let",
"description": "Specify a name attribute for the radio button inputs",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "legend",
"kind": "let",

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>

22
src/Tile/RadioTile.svelte
View file

@ -8,6 +8,9 @@
/** Set to `true` to disable the tile */
export let disabled = false;
/** Set to `true` to mark the field as required */
export let required = false;
/** Specify the value of the radio input */
export let value = "";
@ -20,13 +23,23 @@
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/** Specify a name attribute for the input */
export let name = "";
/**
* Specify a name attribute for the radio tile input
* @type {string}
*/
export let name = undefined;
import { getContext } from "svelte";
import { readable } from "svelte/store";
import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
const { add, update, selectedValue } = getContext("TileGroup");
const { add, update, selectedValue, groupName, groupRequired } = getContext(
"TileGroup"
) ?? {
groupName: readable(undefined),
groupRequired: readable(undefined),
selectedValue: readable(checked ? value : undefined),
};
add({ value, checked });
@ -36,11 +49,12 @@
<input
type="radio"
id="{id}"
name="{name}"
name="{$groupName ?? name}"
value="{value}"
checked="{checked}"
tabindex="{disabled ? undefined : tabindex}"
disabled="{disabled}"
required="{$groupRequired ?? required}"
class:bx--tile-input="{true}"
on:change
on:change="{() => {

20
src/Tile/TileGroup.svelte
View file

@ -8,17 +8,33 @@
/** Set to `true` to disable the tile group */
export let disabled = false;
/**
* Set to `true` to require the selection of a radio button
* @type {boolean}
*/
export let required = undefined;
/**
* Specify a name attribute for the radio button inputs
* @type {string}
*/
export let name = undefined;
/** Specify the legend text */
export let legend = "";
import { createEventDispatcher, setContext } from "svelte";
import { writable } from "svelte/store";
import { writable, readonly } from "svelte/store";
const dispatch = createEventDispatcher();
const selectedValue = writable(selected);
const groupName = writable(name);
const groupRequired = writable(required);
setContext("TileGroup", {
selectedValue,
groupName: readonly(groupName),
groupRequired: readonly(groupRequired),
add: ({ checked, value }) => {
if (checked) {
selectedValue.set(value);
@ -32,6 +48,8 @@
$: selected = $selectedValue;
$: selectedValue.set(selected);
$: $groupName = name;
$: $groupRequired = required;
</script>
<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>

10
tests/RadioTile.test.svelte
View file

@ -2,14 +2,8 @@
import { TileGroup, RadioTile } from "../types";
</script>
<TileGroup legend="Service pricing tiers">
<RadioTile value="0" checked>Lite plan</RadioTile>
<TileGroup name="plan" required legend="Service pricing tiers">
<RadioTile light value="0" checked>Lite plan</RadioTile>
<RadioTile value="1">Standard plan</RadioTile>
<RadioTile value="2">Plus plan</RadioTile>
</TileGroup>
<TileGroup legend="Service pricing tiers">
<RadioTile light value="0" checked>Lite plan</RadioTile>
<RadioTile light value="1">Standard plan</RadioTile>
<RadioTile light value="2">Plus plan</RadioTile>
</TileGroup>

10
types/Tile/RadioTile.svelte.d.ts vendored
View file

@ -22,6 +22,12 @@ export interface RadioTileProps extends RestProps {
*/
disabled?: boolean;
/**
* Set to `true` to mark the field as required
* @default false
*/
required?: boolean;
/**
* Specify the value of the radio input
* @default ""
@ -47,8 +53,8 @@ export interface RadioTileProps extends RestProps {
id?: string;
/**
* Specify a name attribute for the input
* @default ""
* Specify a name attribute for the radio tile input
* @default undefined
*/
name?: string;

12
types/Tile/TileGroup.svelte.d.ts vendored
View file

@ -16,6 +16,18 @@ export interface TileGroupProps extends RestProps {
*/
disabled?: boolean;
/**
* Set to `true` to require the selection of a radio button
* @default undefined
*/
required?: boolean;
/**
* Specify a name attribute for the radio button inputs
* @default undefined
*/
name?: string;
/**
* Specify the legend text
* @default ""