gcds-components: v0.21.0
0.21.0 (2024-05-08)
Breaking changes
Transition to form-associated custom elements
We've undertaken significant efforts to migrate our components to form-associated custom elements. GC Design System form components will now use the shadow DOM (document object model). The shadow DOM provides improved encapsulation and control over styling and lets form components integrate with native browser features for validation and accessibility. This feature depends on HTMLElement API attachInternals which is supported in most browsers.
This change will require all form components to have the name attribute. Here's a list of the GC Design System components affected by the change:
- File uploader (
gcds-file-uploader) - Input (
gcds-input) - Select (
gcds-select) - Text area (
gcds-textarea)
Required changes for form components
- Add a
nameattribute - Your code should look similar to the following:
<gcds-file-uploader name="" uploader-id="" label=""></gcds-file-uploader>
<gcds-input name="" input-id="" label=""></gcds-input>
<gcds-select name="" select-id="" label=""></gcds-select>
<gcds-textarea name="" textarea-id="" label=""></gcds-textarea>Shadow-dom
The following components have been updated to now use the shadow DOM like other GC Design System components:
- Pagination (
gcds-pagination) - Search (
gcds-search) - Signature (
gcds-signature)
Radio group
As part of the transition, our gcds-radio component has been deprecated in favour of a new component gcds-radio-group. The radio group component allows for better (native HTML) form controls in a shadow DOM environment.
Old implementation
<gcds-radio
radio-id="radio-1"
name="radio-example"
label="Label 1"
value="label-1"
>
</gcds-radio>
<gcds-radio
radio-id="radio-2"
name="radio-example"
label="Label 2"
value="label-2"
>
</gcds-radio>New implementation
<gcds-radio-group
name="radio-example"
options="[{
'id': 'radio-1',
'label': 'Label 1',
'value': 'label-1'}, {
'id': 'radio-2',
'label': 'Label 2',
'value': 'label-2'}]"
>
</gcds-radio-group>