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

8
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 |
| 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 |
| 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;`) |
| 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 |
@ -2944,7 +2944,7 @@ None.
| 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 |
| 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
@ -2963,9 +2963,11 @@ None.
### Props
| 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 |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the radio buttons |
| 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 |
| legendText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
| hideLegend | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the legend |
| labelPosition | No | <code>let</code> | No | <code>"right" &#124; "left"</code> | <code>"right"</code> | Specify the label position |

25
docs/src/COMPONENT_API.json
View file

@ -4788,7 +4788,7 @@
{
"name": "company",
"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",
"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",

32
src/RadioButton/RadioButton.svelte
View file

@ -26,22 +26,28 @@
/** Set an id for the input element */
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 */
export let ref = null;
import { getContext } from "svelte";
import { writable } from "svelte/store";
import { readable } from "svelte/store";
const ctx = getContext("RadioButtonGroup");
const selectedValue = ctx
? ctx.selectedValue
: writable(checked ? value : undefined);
const { add, update, selectedValue, groupName, groupRequired } = getContext(
"RadioButtonGroup"
) ?? {
groupName: readable(undefined),
groupRequired: readable(undefined),
selectedValue: readable(checked ? value : undefined),
};
if (ctx) {
ctx.add({ id, checked, disabled, value });
if (add) {
add({ id, checked, disabled, value });
}
$: checked = $selectedValue === value;
@ -56,16 +62,16 @@
bind:this="{ref}"
type="radio"
id="{id}"
name="{name}"
name="{$groupName ?? name}"
checked="{checked}"
disabled="{disabled}"
required="{required}"
required="{$groupRequired ?? required}"
value="{value}"
class:bx--radio-button="{true}"
on:change
on:change="{() => {
if (ctx) {
ctx.update(value);
if (update) {
update(value);
}
}}"
/>

21
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -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;
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->

1
src/UIShell/Header.svelte
View file

@ -19,6 +19,7 @@
/**
* Specify the company name.
*
* Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
* @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
* @default ""
* @default undefined
*/
name?: string;

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

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

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

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