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

fix(tile-group): add name and required props

Browse source
This commit is contained in:
Eric Liu 2023-10-03 07:47:14 -07:00 • committed by metonym
commit ea19db92f3
7 changed files with 103 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

15
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
@ -4234,11 +4235,13 @@ 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 |
| legend | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
| 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",

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