From 24e2a8874f5d0c39f88761c3f118ba71aab27c1d Mon Sep 17 00:00:00 2001 From: brunnerh Date: Sun, 1 Oct 2023 19:14:53 +0200 Subject: [PATCH] fix(radio-button-group): add `name` and `required` props (#1037) Fixes #1036 --- COMPONENT_INDEX.md | 24 +++++++------- docs/src/COMPONENT_API.json | 25 +++++++++++++-- src/ComboBox/ComboBox.svelte | 6 ++-- src/MultiSelect/MultiSelect.svelte | 6 ++-- src/RadioButton/RadioButton.svelte | 32 +++++++++++-------- src/RadioButtonGroup/RadioButtonGroup.svelte | 21 +++++++++++- src/UIShell/Header.svelte | 5 +-- types/RadioButton/RadioButton.svelte.d.ts | 2 +- .../RadioButtonGroup.svelte.d.ts | 12 +++++++ types/UIShell/Header.svelte.d.ts | 1 + 10 files changed, 98 insertions(+), 36 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index f00828c06e..4f6900260c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1580,7 +1580,7 @@ None. | expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default | | uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header | | href | No | let | No | string | undefined | Specify the `href` attribute | -| company | No | let | No | string | undefined | Specify the company name.
Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | +| company | No | let | No | string | undefined | Specify the company name.

Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | | platformName | No | let | No | string | "" | Specify the platform name.
Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) | | persistentHamburgerMenu | No | let | No | boolean | false | Set to `true` to persist the hamburger menu | | expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | @@ -2944,7 +2944,7 @@ None. | labelText | No | let | No | string | "" | Specify the label text | | hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | | 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 radio button input | +| name | No | let | No | string | undefined | Specify a name attribute for the radio button input | ### Slots @@ -2962,15 +2962,17 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------- | -| selected | No | let | Yes | string | undefined | Set the selected radio button value | -| disabled | No | let | No | boolean | false | Set to `true` to disable the radio buttons | -| legendText | No | let | No | string | "" | Specify the legend text | -| hideLegend | No | let | No | boolean | false | Set to `true` to visually hide the legend | -| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position | -| orientation | No | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons | -| id | No | let | No | string | undefined | Set an id for the container div element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------------------- | +| selected | No | let | Yes | string | undefined | Set the selected radio button value | +| disabled | No | let | No | boolean | false | Set to `true` to disable the radio buttons | +| 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 | +| legendText | No | let | No | string | "" | Specify the legend text | +| hideLegend | No | let | No | boolean | false | Set to `true` to visually hide the legend | +| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position | +| orientation | No | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons | +| id | No | let | No | string | undefined | Set an id for the container div element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 2ee1d7e52b..b65ce5a5dd 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -4788,7 +4788,7 @@ { "name": "company", "kind": "let", - "description": "Specify the company name. \nAlternatively, use the named slot \"company\" (e.g., `...`)", + "description": "Specify the company name.\n\nAlternatively, use the named slot \"company\" (e.g., `...`)", "type": "string", "isFunction": false, "isFunctionDeclaration": false, @@ -9463,7 +9463,6 @@ "kind": "let", "description": "Specify a name attribute for the radio button input", "type": "string", - "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -9523,6 +9522,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": "legendText", "kind": "let", diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index 16008edc4f..0aee1350bb 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -224,9 +224,9 @@ class:bx--label="{true}" class:bx--label--disabled="{disabled}" > - - {titleText} - + + {titleText} + {/if} - - {titleText} - + + {titleText} + {/if} diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte index 60b4fbb1eb..7ae8a4552a 100644 --- a/src/RadioButtonGroup/RadioButtonGroup.svelte +++ b/src/RadioButtonGroup/RadioButtonGroup.svelte @@ -8,6 +8,18 @@ /** Set to `true` to disable the radio buttons */ 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 legendText = ""; @@ -38,13 +50,17 @@ onMount, setContext, } from "svelte"; - import { writable } from "svelte/store"; + import { readonly, writable } from "svelte/store"; const dispatch = createEventDispatcher(); const selectedValue = writable(selected); + const groupName = writable(name); + const groupRequired = writable(required); setContext("RadioButtonGroup", { selectedValue, + groupName: readonly(groupName), + groupRequired: readonly(groupRequired), add: ({ checked, value }) => { if (checked) { selectedValue.set(value); @@ -67,6 +83,9 @@ selected = value; dispatch("change", value); }); + + $: $groupName = name; + $: $groupRequired = required; diff --git a/src/UIShell/Header.svelte b/src/UIShell/Header.svelte index 4dd361aa05..3574f01ebd 100644 --- a/src/UIShell/Header.svelte +++ b/src/UIShell/Header.svelte @@ -17,8 +17,9 @@ */ export let href = undefined; - /** - * Specify the company name. + /** + * Specify the company name. + * * Alternatively, use the named slot "company" (e.g., `...`) * @type {string} */ diff --git a/types/RadioButton/RadioButton.svelte.d.ts b/types/RadioButton/RadioButton.svelte.d.ts index 5413720e49..f7916428cd 100644 --- a/types/RadioButton/RadioButton.svelte.d.ts +++ b/types/RadioButton/RadioButton.svelte.d.ts @@ -54,7 +54,7 @@ export interface RadioButtonProps extends RestProps { /** * Specify a name attribute for the radio button input - * @default "" + * @default undefined */ name?: string; diff --git a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts index 779ade4153..0e259fde43 100644 --- a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts +++ b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts @@ -16,6 +16,18 @@ export interface RadioButtonGroupProps 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 "" diff --git a/types/UIShell/Header.svelte.d.ts b/types/UIShell/Header.svelte.d.ts index a4a71ae17a..f16a286280 100644 --- a/types/UIShell/Header.svelte.d.ts +++ b/types/UIShell/Header.svelte.d.ts @@ -30,6 +30,7 @@ export interface HeaderProps extends RestProps { /** * Specify the company name. + * * Alternatively, use the named slot "company" (e.g., `...`) * @default undefined */