@cdssnc/gcds-components-angular - npm Package Versions

0.21.0

Released on: 2024-05-08

:rotating_light: 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 name attribute
• 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 will be 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 will be 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>

:rocket: New Features

• add tag prop to gcds-sr-only component (#484) (dfb7285)
• Component rewrites (form-associated, gcds-radio-group, CSS rewrites) (#486) (ae05841)

:bug: :wrench: Bug Fixes

• Update utility functions for more usability (#495) (a0e8fbb)

0.20.0

Released on: 2024-03-14

:rocket: New Features

• set allowed values for grid tag property to limit misuse (#470) (a686d09)

:bug: :wrench: Bug Fixes

• React package: invalid path for types (#471) (f859d43)

0.19.1

Released on: 2024-02-22

:bug: :wrench: Bug Fixes

• Fixes identified in OCADU report (a11y and usability) (#446) (09095a5)

v0.19.0

:rotating_light: Breaking changes

• button component - remove button-style prop (#450) (f7d4ce4)

:bug: :wrench: Bug Fixes

• move toggle navigation focusout logic form top-nav to nav-group (#387) (a72f91f)

:arrows_counterclockwise: Code Refactoring

• replace gcds-button skip-to-href in gcds-header with gcds-link component (#451) (f3a052b)
• button component css rewrite (#450) (f7d4ce4)

v0.18.1

:bug: :wrench: Bug Fixes

• https://github.com/cds-snc/gcds-components/pull/368 - 7774a88 - Export ContentValues from gcds-grid to fix angular package build

v0.17.1

:jigsaw: Patch

• https://github.com/cds-snc/gcds-components/pull/346 - 16732e5 - Update stencil build configuration for better integration with multiple frameworks (Nextjs and create-react-app)

• https://github.com/cds-snc/gcds-components/pull/350 - 2f41435 - fix: change slot styles to initial

• https://github.com/cds-snc/gcds-components/pull/351 - d03c792 - Update demo content

v0.17.0

:rocket: New features

• https://github.com/cds-snc/gcds-components/pull/305 - 2ffc292 - New gcds-link component to allow users to navigate to a new page, website or section on the current page.

:jigsaw: Patch

• https://github.com/cds-snc/gcds-components/pull/333 - 5da32e0 - Add default value for margin top + bottom for text component
• https://github.com/cds-snc/gcds-components/pull/338 - 96e4787 - Improve storybook a11y for live demos.

v0.16.0

:rocket: New features

• https://github.com/cds-snc/gcds-components/pull/306 - c972bef - New gcds-heading to render headings in GCDS styles

:jigsaw: Patch

• https://github.com/cds-snc/gcds-components/pull/325 - 3ec8925 - Fix slot CSS in gcds-breadcrumbs-item to display text underline

v0.15.0

:rocket: New features

• https://github.com/cds-snc/gcds-components/pull/311 - 39c2135 - New gcds-text component to render text content in GCDS style
• https://github.com/cds-snc/gcds-components/pull/315 - 8117534 - New gcds-sr-only component to hide text content only available to assistive technologies

:jigsaw: Patch

• https://github.com/cds-snc/gcds-components/pull/272 - c48d92f - Update media query in gcds-pagination
• https://github.com/cds-snc/gcds-components/pull/291 - d4d6f9f - Remove nav landmark label to prevent confusion in gcds-header
• https://github.com/cds-snc/gcds-components/pull/294 - e6a550a - Set default property values in gcds-signature
• https://github.com/cds-snc/gcds-components/pull/317 - ac5d6e7 - Add box-shadow on focus to components for consistent focus state
• https://github.com/cds-snc/gcds-components/pull/318 - 2bf8fde - Add slot styles to help :jigsaw: patch Chrome accessibility issues to components that use text based slots

v0.14.0

:rocket: New features

• https://github.com/cds-snc/gcds-components/pull/223 - c8f0aa1 - New gcds-topic-menu component for canada.ca compliance

:jigsaw: Patch

• https://github.com/cds-snc/gcds-components/pull/231 - 1be42c4 - Update mobile view and French text in gcds-pagination
• https://github.com/cds-snc/gcds-components/pull/236 - 994aa7c - Set columns property to required in gcds-grid
• https://github.com/cds-snc/gcds-components/pull/237 - e2030bf - Accessibility fix for gcds-details
• https://github.com/cds-snc/gcds-components/pull/247 - d3440d7 - Accessibility fix for gcds-nav-group