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

0.25.0

Released on: 2024-08-19

:rotating_light: Breaking changes

The Card and Stepper components have been redesigned and will have some changes in their API structure.

Updates to the Card component

The property type will be removed as the component will now only support link interactions. If you’re using type=action, note that this will be unsupported in this release.

The tag property will be replaced by a new property named badge.

The property title-element will be replaced by a new property named card-title-tag.

We’re dropping support for the footer slot (slot="footer"). We’re removing it as we haven’t observed any use of the slot.

New: We’ve introduced a slot to support the display of HTML text formatting within the Card component. You can still use the description property for this purpose with a simple string value (text) only.

Old implementation

<gcds-card
  type="link"
  card-title=""
  href=""
  title-element=""
  description=""
  tag=""
  img-src=""
  img-alt=""
>
 <slot name=”footer”></slot>
</gcds-card>

New implementation

<gcds-card
  card-title=""
  href=""
  card-title-tag="a"
  description=""
  badge=""
  img-src=""
  img-alt=""
>
 <slot></slot>
</gcds-card>

Updates to the Stepper component

New: A new tag property will be available to allow the developer to choose the right heading to render the element.

New (required): The stepper will now require text or an element passed into the slot to display the heading element. It’s a required property and the component will not render without it.

If you experience issues with the change, ‌‌contact us.

Old implementation

<gcds-stepper
  current-step=""
  total-steps=""
></gcds-stepper>

New implementation

<gcds-stepper
  current-step=""
  total-steps=""
  tag=""
>
  <slot></slot>
</gcds-stepper>

:rocket: New Features

• Add gcds-date-input component (#607) (ce0b4cc)
• add new main-container prop to container (#613) (4eef9b3)
• update gcds-card (breaking change) (#578) (4a72105)
• updates to stepper component (breaking change + new tag attribute) (#573) (0f8bd2f)

:arrows_counterclockwise: Code Refactoring

• change fieldset legend required to span (#612) (ca5108f)

0.24.1

Released on: 2024-08-13

:bug: :wrench: Bug Fixes

• update small design misalignments in various components (#608) (9bcb4ae)

0.24.0

Released on: 2024-08-01

:rocket: New Features

• add visited state to link component (#602) (da4e524)

0.23.0

Released on: 2024-07-31

:rocket: New Features

• add react ssr package (canary version) (#587) (bf3fd1e)

0.22.4

Released on: 2024-07-29

:bug: :wrench: Bug Fixes

• roll back changes to the angular build process (#597) (0b62c3a)

0.22.3

Released on: 2024-07-29

:arrows_counterclockwise: Code Refactoring

• update error message design (#592) (5f1b94e)

0.22.2

Released on: 2024-07-10

:bug: :wrench: Bug Fixes

• Safari a11y issues with links and nav group focus (#583) (d7c3fb9)
• Remove rxjs events to avoid duplicate custom events in @cdssnc/gcds-component-angular (#566) (9bf46ac)

0.22.1

Released on: 2024-05-27

:bug: :wrench: Bug Fixes

• misaligned of FR theme and topic menu button (bug) (#541) (c524215)

:arrows_counterclockwise: Code Refactoring

• update input component to increase input width calculation (#536) (d6204f3)

0.22.0

Released on: 2024-05-21

:rocket: New Features

• Add/create @cdssnc/gcds-components-vue package (#516) (3933498)ß
• Add @Outputs to angular wrapper components (#529) (0660093)
• Add dist-hydrate-app output (#524) (c448c59)

:bug: :wrench: Bug Fixes

• Emit change event from form components (#523) (d956370)

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)