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

0.34.1

Released on: 2025-04-16

:bug: :wrench: Bug Fixes

• hotfix: Icon font face URL not resolving properly in the global gcds.css file (#813) (86464ff)

0.34.0

Released on: 2025-04-14

:rotating_light: Breaking changes

Icon component updates

The GC Design System team has designed and copyrighted a custom-built set of icons for the Government of Canada. The Icon component now uses the custom GCDS Icon font for improved consistency and guidance, replacing the previously used icons from FontAwesome.

• replace Font Awesome with GCDS icons font (#757) (b747bfc)
• remove icon props icon-style and fixed-width (#761) (2b91787)

Benefits

This change brings several important benefits:

• We have removed the dependency on the third-party FontAwesome package. The new icon font will be integrated into the components package, eliminating the need to maintain the FontAwesome CDN link.
• Increased visual consistency for a more unified appearance across Government of Canada services to foster trust and accessibility.

Property changes

The fixed-width and icon-style properties have been removed. Icons are now properly sized by default and adopt a unified style for enhanced consistency across GC services. If your code utilizes these properties, please remove them to ensure compatibility with the new font and avoid tech debt.

Only update your code if you use these properties, otherwise, the new default values will be applied automatically.

• gcds-icon
  • fixed-width
  • icon-style

Updated Icon names

With this update, Icon names have been updated to align with the custom GCDS Icons font. Existing icon names have changed, requiring updates to your code. Please revise any usage of old icon names to reflect these changes. You can find an overview of all available names in the gcds-icon readme.

Remove existing FontAwesome dependencies

You will be able to remove any existing FontAwesome dependencies (such as CDN links, npm packages, etc.) if you choose to exclusively use the GC Design System icon component going forward.

:bug: :wrench: Bug Fixes

• gcds-file-uploader: ability to drag and drop files onto file input (#801) (159f347)
• improve layout shift for components (#798) (00c0bbb)
• update spacing between links and small typo in footer sub band (#805) (a4e1c2a)

0.33.1 (2025-04-02)

:bug: :wrench: Bug Fixes

• GC signature cut off on mobile devices (#796) (1603172)
• mandatory elements issues (#793) (3fbd544)
• Mobile top-nav menu closing in Safari (#785) (913eb3c)

0.33.0

Released on 2025-03-18

:rocket: New Features

• gcds-button: Add start button role (#775) (1b519b4)

:art: Styles

• update header spacing and border colour + width (#776) (bfc184e)

0.32.0

Released on: 2025-02-19

:bug: :wrench: Bug Fixes

• Navigation components (gcds-top-nav, gcds-nav-group) display and interaction issues (#748) (0169b14)
• Remove gcds-fieldset dependancy from gcds-date-input (#746) (3e103ee)

:pencil: Documentation

• We've updated the property descriptions of card-title-tag for <gcds-card> and notice-title-tag for <gcds-notice> to provide a better and clearer explanation of how it works (#745) (96341ed)

:art: Styles

We've done some work to align our styles with Canada.ca:

• Updated the paddings for <gcds-footer> (#755) (890c216)
• Updated <gcds-footer> styles (#754) (1cf8a6f)
• Updated <gcds-breadcrumb-item> font size (#742) (adf4260)
• Updated <date-modified> font size (#751) (a403b7d)
• Updated <gcds-lang-toggle> font size (#741) (c7b7c21)
• Updated <gcds-search> styles (#743) (3697498)

0.31.0

Released on: 2025-01-22

:rocket: New Features

• add grid gap property for more flexibility (#732) (2af7915)
• update installation instructions to match documentation site (#718) (e5c3bee)

:bug: :wrench: Bug Fixes

• gcds-button: Prevent gcdsClick event if button is disabled (#724) (1cd508a)
• gcds-link: Display property to allow normal link wrap behaviour (#731) (b0f357c)
• gcds-notice: Add accessible labels to identify notice type (#721) (450d182)
• gcds-pagination: Add tabindex="0" to <a> tags to function in webkit browsers (#723) (7256590)
• gcds-textarea: Properly set value in shadow-root textarea (#730) (c3f18e6)
• input size property description (#728) (f6fa41b)

:arrows_counterclockwise: Code Refactoring

• remove mobile stacking from breadcrumbs (#729) (cf70cf6)
• update component spacing + pagination arrows (#726) (a00e60d)

0.30.0

Released on: 2024-12-17

:rocket: New Features

• angular: Update angular dependencies to v19 (#709) (ab1c12b)

:art: Styles

• improve print design for details component (#711) (e68a3bf)

:arrows_counterclockwise: Code Refactoring

• adjust form element spacing (#707) (4393412)

0.29.1

Released on: 2024-12-11

:bug: :wrench: Bug Fixes

• breadcrumbs item arrow display (#706) (f455e4d)

0.29.0

Released on: 2024-12-11

:rocket: New Features

• New gcds-notice component (#627) (bb98233)

:arrows_counterclockwise: Code Refactoring

• adjust breadcrumbs margin (#701) (9ea1447)

0.28.0

Released on 2024-12-05

:rotating_light: Breaking changes

• update components with new typography + spacing tokens (#695) (105cd4b)

We've made small adjustments to all typography and spacing sizes across the design system. GC Design System components are now closer in appearance to their counterparts on Canada.ca.

These updates were introduced with the latest release of our design tokens.

If you are using this package Upgrade your version number to this release version to receive the changes in font sizes, line heights and spacing values.

Spacing changes

The valid variables used for the properties in the following components have been updated. While some options remain unchanged, the underlying values they contain (in pixels) have been modified. Check the spacing section of our tokens release for the updated pixel values.

Example: If you were previously using 400 for the margin property on gcds-container, it will be updated to 32px. If you want to keep its previous size of 24px, you need to change your code to use 300 instead. Here is a visual mapping guide to help you identify the values you need to use.

Only update your code if you use these properties, otherwise the new default values will be applied automatically.

• gcds-container
  • margin
  • padding
• gcds-heading
  • margin-top
  • margin-bottom
• gcds-icon
  • margin-left
  • margin-right
• gcds-text
  • margin-top
  • margin-bottom

Typography changes

Only update if you use the caption value for the size property in the following components.

• gcds-icon
  • Change caption to text-small
• gcds-text
  • Change caption to text-small