Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(radio-button-group): add name and required props #1037

Merged
merged 3 commits into from
Oct 1, 2023
Merged

fix(radio-button-group): add name and required props #1037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
00cab46
Add `name` and `required` to `RadioButtonGroup`.
brunnerh Jan 22, 2022
7be9e4c
Lint fixes.
brunnerh Sep 30, 2023
a81328f
- RadioButtonGroup values for `name`/`required` override those of `Ra…
brunnerh Sep 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions COMPONENT_INDEX.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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