From 25ce57fd5a69a421eecfb972c861c81a74251e74 Mon Sep 17 00:00:00 2001 From: brunnerh Date: Sat, 22 Jan 2022 18:05:41 +0100 Subject: [PATCH] Add `required` prop to `RadioButton`. (#1035) Fixes #1034. --- COMPONENT_INDEX.md | 23 ++++++++++++----------- docs/src/COMPONENT_API.json | 15 +++++++++++++-- src/RadioButton/RadioButton.svelte | 8 ++++++-- types/RadioButton/RadioButton.svelte.d.ts | 10 ++++++++-- 4 files changed, 39 insertions(+), 17 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 34f48e38..a7c9b987 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3000,17 +3000,18 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| checked | let | Yes | boolean | false | Set to `true` to check the radio button | -| value | let | No | string | "" | Specify the value of the radio button | -| disabled | let | No | boolean | false | et to `true` to disable the radio button | -| labelPosition | let | No | "right" | "left" | "right" | Specify the label position | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the checkbox input | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| checked | let | Yes | boolean | false | Set to `true` to check the radio button | +| value | let | No | string | "" | Specify the value of the radio button | +| disabled | let | No | boolean | false | Set to `true` to disable the radio button | +| required | let | No | boolean | false | Set to `true` to mark the field as required | +| labelPosition | let | No | "right" | "left" | "right" | Specify the label position | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | "" | Specify a name attribute for the radio button input | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index c9e8d2fe..b6c5dc7b 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -8581,7 +8581,18 @@ { "name": "disabled", "kind": "let", - "description": "et to `true` to disable the radio button", + "description": "Set to `true` to disable the radio button", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, + { + "name": "required", + "kind": "let", + "description": "Set to `true` to mark the field as required", "type": "boolean", "value": "false", "isFunction": false, @@ -8636,7 +8647,7 @@ { "name": "name", "kind": "let", - "description": "Specify a name attribute for the checkbox input", + "description": "Specify a name attribute for the radio button input", "type": "string", "value": "\"\"", "isFunction": false, diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte index 75b5d4e8..cb6dd084 100644 --- a/src/RadioButton/RadioButton.svelte +++ b/src/RadioButton/RadioButton.svelte @@ -5,9 +5,12 @@ /** Set to `true` to check the radio button */ export let checked = false; - /** et to `true` to disable the radio button */ + /** Set to `true` to disable the radio button */ export let disabled = false; + /** Set to `true` to mark the field as required */ + export let required = false; + /** * Specify the label position * @type {"right" | "left"} @@ -23,7 +26,7 @@ /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); - /** Specify a name attribute for the checkbox input */ + /** Specify a name attribute for the radio button input */ export let name = ""; /** Obtain a reference to the input HTML element */ @@ -56,6 +59,7 @@ name="{name}" checked="{checked}" disabled="{disabled}" + required="{required}" value="{value}" class:bx--radio-button="{true}" on:change diff --git a/types/RadioButton/RadioButton.svelte.d.ts b/types/RadioButton/RadioButton.svelte.d.ts index aa284786..ef6fda53 100644 --- a/types/RadioButton/RadioButton.svelte.d.ts +++ b/types/RadioButton/RadioButton.svelte.d.ts @@ -16,11 +16,17 @@ export interface RadioButtonProps checked?: boolean; /** - * et to `true` to disable the radio button + * Set to `true` to disable the radio button * @default false */ disabled?: boolean; + /** + * Set to `true` to mark the field as required + * @default false + */ + required?: boolean; + /** * Specify the label position * @default "right" @@ -46,7 +52,7 @@ export interface RadioButtonProps id?: string; /** - * Specify a name attribute for the checkbox input + * Specify a name attribute for the radio button input * @default "" */ name?: string;