Skip to content

Commit

Permalink
fix(radio-button-group): add name and required props (#1037)
Browse files Browse the repository at this point in the history 
Fixes #1036
  • Loading branch information
@brunnerh
brunnerh authored Oct 1, 2023
1 parent 108eb52 commit 24e2a88
Show file tree
Hide file tree
Showing 10 changed files with 98 additions and 36 deletions.
24 changes: 13 additions & 11 deletions COMPONENT_INDEX.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down Expand Up @@ -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

Expand All @@ -2962,15 +2962,17 @@ 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 |
| 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 |
| 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 |
| 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 |
| 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

Expand Down
25 changes: 23 additions & 2 deletions docs/src/COMPONENT_API.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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",
Expand Down
6 changes: 3 additions & 3 deletions src/ComboBox/ComboBox.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,9 +224,9 @@
class:bx--label="{true}"
class:bx--label--disabled="{disabled}"
>
<slot name="titleText">
{titleText}
</slot>
<slot name="titleText">
{titleText}
</slot>
</label>
{/if}
<ListBox
Expand Down
6 changes: 3 additions & 3 deletions src/MultiSelect/MultiSelect.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -300,9 +300,9 @@
class:bx--label--disabled="{disabled}"
class:bx--visually-hidden="{hideLabel}"
>
<slot name="titleText">
{titleText}
</slot>
<slot name="titleText">
{titleText}
</slot>
</label>
{/if}
<ListBox
Expand Down
32 changes: 19 additions & 13 deletions src/RadioButton/RadioButton.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
}
}}"
/>
Expand Down
21 changes: 20 additions & 1 deletion src/RadioButtonGroup/RadioButtonGroup.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = "";
Expand Down Expand Up @@ -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);
Expand All @@ -67,6 +83,9 @@
selected = value;
dispatch("change", value);
});
$: $groupName = name;
$: $groupRequired = required;
</script>

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
Expand Down
5 changes: 3 additions & 2 deletions src/UIShell/Header.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,9 @@
*/
export let href = undefined;
/**
* Specify the company name.
/**
* Specify the company name.
*
* Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`)
* @type {string}
*/
Expand Down
2 changes: 1 addition & 1 deletion types/RadioButton/RadioButton.svelte.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export interface RadioButtonProps extends RestProps {

/**
* Specify a name attribute for the radio button input
* @default ""
* @default undefined
*/
name?: string;

Expand Down
12 changes: 12 additions & 0 deletions types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ""
Expand Down
1 change: 1 addition & 0 deletions types/UIShell/Header.svelte.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down

0 comments on commit 24e2a88

Please sign in to comment.