diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 46ab0b78..4b3eccc7 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3019,11 +3019,12 @@ None. | checked | No | let | Yes | boolean | false | Set to `true` to check the tile | | light | No | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | No | let | No | boolean | false | Set to `true` to disable the tile | +| required | No | let | No | boolean | false | Set to `true` to mark the field as required | | value | No | let | No | string | "" | Specify the value of the radio input | | tabindex | No | let | No | string | "0" | Specify the tabindex | | iconDescription | No | let | No | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | No | let | No | string | "" | Specify a name attribute for the input | +| name | No | let | No | string | undefined | Specify a name attribute for the radio tile input | ### Slots @@ -4234,11 +4235,13 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------- | -| selected | No | let | Yes | string | undefined | Specify the selected tile value | -| disabled | No | let | No | boolean | false | Set to `true` to disable the tile group | -| legend | No | let | No | string | "" | Specify the legend text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | -------------------------------------------------------- | +| selected | No | let | Yes | string | undefined | Specify the selected tile value | +| disabled | No | let | No | boolean | false | Set to `true` to disable the tile group | +| required | No | let | No | boolean | undefined | Set to `true` to require the selection of a radio button | +| name | No | let | No | string | undefined | Specify a name attribute for the radio button inputs | +| legend | No | let | No | string | "" | Specify the legend text | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index a2407cbb..84e1e4e0 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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", diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx index 3fabb586..6bf8a9cb 100644 --- a/docs/src/pages/components/RadioButton.svx +++ b/docs/src/pages/components/RadioButton.svx @@ -23,7 +23,7 @@ It's recommended that you provide a legend for accessibility. Use `hideLegend` to visually hide the legend text. - + @@ -33,7 +33,7 @@ Use `hideLegend` to visually hide the legend text. Use the named "legendText" slot to customize the legend text. - +
Storage tier (disk) @@ -55,7 +55,7 @@ Use the `selected` prop to bind and update the selected value. ## Left-aligned label text - + @@ -63,7 +63,7 @@ Use the `selected` prop to bind and update the selected value. ## Disabled buttons - + @@ -71,7 +71,7 @@ Use the `selected` prop to bind and update the selected value. ## Vertical orientation - + diff --git a/docs/src/pages/components/RadioTile.svx b/docs/src/pages/components/RadioTile.svx index 8e2e69fa..ff2d0c68 100644 --- a/docs/src/pages/components/RadioTile.svx +++ b/docs/src/pages/components/RadioTile.svx @@ -9,14 +9,14 @@ components: ["TileGroup", "RadioTile"] ## Default - - + + Lite plan - + Standard plan - + Plus plan @@ -33,28 +33,28 @@ Binding to the `selected` prop is a more concise approach to managing state. ## Light variant - - + + Lite plan - + Standard plan - + Plus plan ## Disabled state - - + + Lite plan - + Standard plan - + Plus plan \ No newline at end of file diff --git a/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte index 51c07468..839a9e8e 100644 --- a/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte +++ b/docs/src/pages/framed/RadioTile/RadioTileReactive.svelte @@ -3,10 +3,10 @@ const values = ["Lite plan", "Standard plan", "Plus plan"]; - let selected = values[0]; + let selected = values[1]; - + {#each values as value} {value} {/each} diff --git a/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte b/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte index d2b3997a..727ae996 100644 --- a/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte +++ b/docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte @@ -3,16 +3,18 @@ const values = ["Lite plan", "Standard plan", "Plus plan"]; - let selected = values[0]; + let selected = values[1]; {#each values as value} - {value} + + {value} + {/each} diff --git a/src/Tile/RadioTile.svelte b/src/Tile/RadioTile.svelte index a8726832..2d1e741b 100644 --- a/src/Tile/RadioTile.svelte +++ b/src/Tile/RadioTile.svelte @@ -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 @@ { if (checked) { selectedValue.set(value); @@ -32,6 +48,8 @@ $: selected = $selectedValue; $: selectedValue.set(selected); + $: $groupName = name; + $: $groupRequired = required;
diff --git a/tests/RadioTile.test.svelte b/tests/RadioTile.test.svelte index d22a7b65..f31edd8d 100644 --- a/tests/RadioTile.test.svelte +++ b/tests/RadioTile.test.svelte @@ -2,14 +2,8 @@ import { TileGroup, RadioTile } from "../types"; - - Lite plan + + Lite plan Standard plan Plus plan - - - Lite plan - Standard plan - Plus plan - diff --git a/types/Tile/RadioTile.svelte.d.ts b/types/Tile/RadioTile.svelte.d.ts index 7e980833..22ba06ec 100644 --- a/types/Tile/RadioTile.svelte.d.ts +++ b/types/Tile/RadioTile.svelte.d.ts @@ -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; diff --git a/types/Tile/TileGroup.svelte.d.ts b/types/Tile/TileGroup.svelte.d.ts index 66c1da47..98326c92 100644 --- a/types/Tile/TileGroup.svelte.d.ts +++ b/types/Tile/TileGroup.svelte.d.ts @@ -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 ""