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(radio-button-group): add name and required props (#1037)

Browse source 
Fixes #1036
This commit is contained in:
brunnerh 2023-10-01 19:14:53 +02:00 • committed by GitHub
commit 24e2a8874f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 98 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

24
COMPONENT_INDEX.md
View file

@ -1580,7 +1580,7 @@ None.
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default | | expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header | | uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute | | href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name. <br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`) | | company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`) |
| platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `&lt;span slot="platform"&gt;...&lt;/span&gt;`) | | platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `&lt;span slot="platform"&gt;...&lt;/span&gt;`) |
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu | | persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 | | expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 |
@ -2944,7 +2944,7 @@ None.
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | 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 radio button input | | name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the radio button input |
### Slots ### Slots
@ -2962,15 +2962,17 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------- | | :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------------------- |
| selected | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Set the selected radio button value | | selected | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Set the selected radio button value |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio buttons | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio buttons |
| legendText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text | | required | No | <code>let</code> | No | <code>boolean</code> | <code>undefined</code> | Set to `true` to require the selection of a radio button |
| hideLegend | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the legend | | name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the radio button inputs |
| labelPosition | No | <code>let</code> | No | <code>"right" &#124; "left"</code> | <code>"right"</code> | Specify the label position | | legendText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
| orientation | No | <code>let</code> | No | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons | | hideLegend | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the legend |
| id | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set an id for the container div element | | labelPosition | No | <code>let</code> | No | <code>"right" &#124; "left"</code> | <code>"right"</code> | Specify the label position |
| orientation | No | <code>let</code> | No | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
| id | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set an id for the container div element |
### Slots ### Slots

25
docs/src/COMPONENT_API.json
View file

@ -4788,7 +4788,7 @@
{ {
"name": "company", "name": "company",
"kind": "let", "kind": "let",
"description": "Specify the company name. \nAlternatively, use the named slot \"company\" (e.g., `<span slot=\"company\">...</span>`)", "description": "Specify the company name.\n\nAlternatively, use the named slot \"company\" (e.g., `<span slot=\"company\">...</span>`)",
"type": "string", "type": "string",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -9463,7 +9463,6 @@
"kind": "let", "kind": "let",
"description": "Specify a name attribute for the radio button input", "description": "Specify a name attribute for the radio button input",
"type": "string", "type": "string",
"value": "\"\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -9523,6 +9522,28 @@
"constant": false, "constant": false,
"reactive": 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", "name": "legendText",
"kind": "let", "kind": "let",

6
src/ComboBox/ComboBox.svelte
View file

@ -224,9 +224,9 @@
class:bx--label="{true}" class:bx--label="{true}"
class:bx--label--disabled="{disabled}" class:bx--label--disabled="{disabled}"
> >
<slot name="titleText"> <slot name="titleText">
{titleText} {titleText}
</slot> </slot>
</label> </label>
{/if} {/if}
<ListBox <ListBox

6
src/MultiSelect/MultiSelect.svelte
View file

@ -300,9 +300,9 @@
class:bx--label--disabled="{disabled}" class:bx--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}" class:bx--visually-hidden="{hideLabel}"
> >
<slot name="titleText"> <slot name="titleText">
{titleText} {titleText}
</slot> </slot>
</label> </label>
{/if} {/if}
<ListBox <ListBox

32
src/RadioButton/RadioButton.svelte
View file

@ -26,22 +26,28 @@
/** Set an id for the input element */ /** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
/** Specify a name attribute for the radio button input */ /**
export let name = ""; * Specify a name attribute for the radio button input
* @type {string}
*/
export let name = undefined;
/** Obtain a reference to the input HTML element */ /** Obtain a reference to the input HTML element */
export let ref = null; export let ref = null;
import { getContext } from "svelte"; import { getContext } from "svelte";
import { writable } from "svelte/store"; import { readable } from "svelte/store";
const ctx = getContext("RadioButtonGroup"); const { add, update, selectedValue, groupName, groupRequired } = getContext(
const selectedValue = ctx "RadioButtonGroup"
? ctx.selectedValue ) ?? {
: writable(checked ? value : undefined); groupName: readable(undefined),
groupRequired: readable(undefined),
selectedValue: readable(checked ? value : undefined),
};
if (ctx) { if (add) {
ctx.add({ id, checked, disabled, value }); add({ id, checked, disabled, value });
} }
$: checked = $selectedValue === value; $: checked = $selectedValue === value;
@ -56,16 +62,16 @@
bind:this="{ref}" bind:this="{ref}"
type="radio" type="radio"
id="{id}" id="{id}"
name="{name}" name="{$groupName ?? name}"
checked="{checked}" checked="{checked}"
disabled="{disabled}" disabled="{disabled}"
required="{required}" required="{$groupRequired ?? required}"
value="{value}" value="{value}"
class:bx--radio-button="{true}" class:bx--radio-button="{true}"
on:change on:change
on:change="{() => { on:change="{() => {
if (ctx) { if (update) {
ctx.update(value); update(value);
} }
}}" }}"
/> />

21
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -8,6 +8,18 @@
/** Set to `true` to disable the radio buttons */ /** Set to `true` to disable the radio buttons */
export let disabled = false; 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 */ /** Specify the legend text */
export let legendText = ""; export let legendText = "";
@ -38,13 +50,17 @@
onMount, onMount,
setContext, setContext,
} from "svelte"; } from "svelte";
import { writable } from "svelte/store"; import { readonly, writable } from "svelte/store";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const selectedValue = writable(selected); const selectedValue = writable(selected);
const groupName = writable(name);
const groupRequired = writable(required);
setContext("RadioButtonGroup", { setContext("RadioButtonGroup", {
selectedValue, selectedValue,
groupName: readonly(groupName),
groupRequired: readonly(groupRequired),
add: ({ checked, value }) => { add: ({ checked, value }) => {
if (checked) { if (checked) {
selectedValue.set(value); selectedValue.set(value);
@ -67,6 +83,9 @@
selected = value; selected = value;
dispatch("change", value); dispatch("change", value);
}); });
$: $groupName = name;
$: $groupRequired = required;
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->

5
src/UIShell/Header.svelte
View file

@ -17,8 +17,9 @@
*/ */
export let href = undefined; export let href = undefined;
/** /**
* Specify the company name. * Specify the company name.
*
* Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) * Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
* @type {string} * @type {string}
*/ */

2
types/RadioButton/RadioButton.svelte.d.ts vendored
View file

@ -54,7 +54,7 @@ export interface RadioButtonProps extends RestProps {
/** /**
* Specify a name attribute for the radio button input * Specify a name attribute for the radio button input
* @default "" * @default undefined
*/ */
name?: string; name?: string;

12
types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts vendored
View file

@ -16,6 +16,18 @@ export interface RadioButtonGroupProps extends RestProps {
*/ */
disabled?: boolean; 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 * Specify the legend text
* @default "" * @default ""

1
types/UIShell/Header.svelte.d.ts vendored
View file

@ -30,6 +30,7 @@ export interface HeaderProps extends RestProps {
/** /**
* Specify the company name. * Specify the company name.
*
* Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) * Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
* @default undefined * @default undefined
*/ */