diff --git a/.changeset/four-buses-sin.md b/.changeset/four-buses-sin.md new file mode 100644 index 0000000000..7dd437df05 --- /dev/null +++ b/.changeset/four-buses-sin.md @@ -0,0 +1,5 @@ +--- +'@baloise/design-system-components': patch +--- + +The radio and checkbox group component now updates its children when there are changes in the disabled or invalid status. diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 729f8e8e93..81b0b71e8a 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -595,6 +595,10 @@ export namespace Components { * Defines the layout of the checkbox button */ "interface"?: BalProps.BalCheckboxGroupInterface; + /** + * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants. + */ + "invalid"?: boolean; /** * The name of the control, which is submitted with the form data. */ @@ -5645,6 +5649,10 @@ declare namespace LocalJSX { * Defines the layout of the checkbox button */ "interface"?: BalProps.BalCheckboxGroupInterface; + /** + * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants. + */ + "invalid"?: boolean; /** * The name of the control, which is submitted with the form data. */ diff --git a/packages/components/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx b/packages/components/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx index c4f8e6c68a..ccd8d6fca3 100644 --- a/packages/components/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx +++ b/packages/components/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx @@ -91,6 +91,25 @@ export class CheckboxGroup */ @Prop() expanded = false + /** + * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants. + */ + @Prop() invalid?: boolean = undefined + + @Watch('invalid') + invalidChanged(value: boolean | undefined) { + if (this.control) { + if (value !== undefined) { + this.getCheckboxes().forEach(child => { + child.invalid = value + }) + this.getCheckboxButtons().forEach(child => { + child.invalid = value + }) + } + } + } + /** * If `true`, the user cannot interact with the checkboxes. */ @@ -103,6 +122,9 @@ export class CheckboxGroup this.getCheckboxes().forEach(child => { child.disabled = value }) + this.getCheckboxButtons().forEach(child => { + child.disabled = value + }) } } } @@ -119,6 +141,9 @@ export class CheckboxGroup this.getCheckboxes().forEach(child => { child.readonly = value }) + this.getCheckboxButtons().forEach(child => { + child.readonly = value + }) } } } diff --git a/packages/components/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx b/packages/components/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx index 0a94a6ddbf..d1e6c103e9 100644 --- a/packages/components/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx +++ b/packages/components/src/components/bal-radio/bal-radio-group/bal-radio-group.tsx @@ -110,6 +110,9 @@ export class RadioGroup this.getRadios().forEach(radio => { radio.invalid = value }) + this.getRadioButtons().forEach(radio => { + radio.invalid = value + }) } } @@ -124,6 +127,9 @@ export class RadioGroup this.getRadios().forEach(radio => { radio.disabled = value }) + this.getRadioButtons().forEach(radio => { + radio.disabled = value + }) } } @@ -138,6 +144,9 @@ export class RadioGroup this.getRadios().forEach(radio => { radio.readonly = value }) + this.getRadioButtons().forEach(radio => { + radio.readonly = value + }) } }