(Français)
Released on 2024-10-10
- gcds-error-summary: focusing gcds element from manual error-links list (#666) (290e271)
- **gcds-select:**Update available options in select if changed (#655) (e7a16cb)
Released on 2024-09-25
- Fix typos in tokens (#646) (4c8d850)
- gcds-sr-only: Align with WCAG technique C7 (#642) (3cbe8bc)
- Update tokens to fix FIP red and date-input legend font weight (#650) (3c602da)
- Update tokens to inherit fixes for FIP red and legend font weight (3c602da)
Released on: 2024-09-16
Released on: 2024-09-12
Released on: 2024-08-22
- Build to allow new tokens to be imported in react-ssr package (#624) (88790c7)
- Margin and spacing issues in gcds-card (#617) (2d39bdc)
Released on: 2024-08-19
The Card and Stepper components have been redesigned and will have some changes in their API structure.
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.
<gcds-card
type="link"
card-title=""
href=""
title-element=""
description=""
tag=""
img-src=""
img-alt=""
>
<slot name=”footer”></slot>
</gcds-card>
<gcds-card
card-title=""
href=""
card-title-tag="a"
description=""
badge=""
img-src=""
img-alt=""
>
<slot></slot>
</gcds-card>
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.
<gcds-stepper
current-step=""
total-steps=""
></gcds-stepper>
<gcds-stepper
current-step=""
total-steps=""
tag=""
>
<slot></slot>
</gcds-stepper>
- 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)
Released on: 2024-08-13
Released on: 2024-08-01
Released on: 2024-07-31
Released on: 2024-07-29
Released on: 2024-07-29
Released on: 2024-07-10
- 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)
Released on: 2024-05-27
Released on: 2024-05-21
- Add/create @cdssnc/gcds-components-vue package (#516) (3933498)ß
- Add @Outputs to angular wrapper components (#529) (0660093)
- Add dist-hydrate-app output (#524) (c448c59)
Released on: 2024-05-08
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
)
- 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>
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
)
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.
<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>
<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>
- add tag prop to gcds-sr-only component (#484) (dfb7285)
- Component rewrites (form-associated, gcds-radio-group, CSS rewrites) (#486) (ae05841)
Released on: 2024-03-14
Released on: 2024-02-22
- replace gcds-button skip-to-href in gcds-header with gcds-link component (#451) (f3a052b)
- button component css rewrite (#450) (f7d4ce4)
-
Grid functionality
- Ability to add individually sized grid columns to grids as well as allowing to set equal height rows.
- #363 - ab0e404 - Link variant property name fix
- #364 - ee16326 - File uploader validation fix
- #362 - ac2ea8c - Updated Header slots in storybook
- #357 - 5a0bd5c - Fixed storybook resources link
- #353 - e9624f0 - Updated instructions for font awesome in README
-
#346 - 16732e5 - Update stencil build configuration for better integration with multiple frameworks (Nextjs and create-react-app)
- #305 - 2ffc292 - New
gcds-link
component to allow users to navigate to a new page, website or section on the current page.
- #333 - 5da32e0 - Add default value for margin top + bottom for text component
- #338 - 96e4787 - Improve storybook a11y for live demos.
- #311 - 39c2135 - New
gcds-text
component to render text content in GCDS style - #315 - 8117534 - New
gcds-sr-only
component to hide text content only available to assistive technologies
- #272 - c48d92f - Update media query in
gcds-pagination
- #291 - d4d6f9f - Remove nav landmark label to prevent confusion in
gcds-header
- #294 - e6a550a - Set default property values in
gcds-signature
- #317 - ac5d6e7 - Add box-shadow on focus to components for consistent focus state
- #318 - 2bf8fde - Add slot styles to help 🧩 patch Chrome accessibility issues to components that use text based slots
- #231 - 1be42c4 - Update mobile view and French text in
gcds-pagination
- #236 - 994aa7c - Set
columns
property to required ingcds-grid
- #237 - e2030bf - Accessibility fix for
gcds-details
- #247 - d3440d7 - Accessibility fix for
gcds-nav-group
- #219 - bfb7a58 - Update
gcds-top-nav
component style to match design files - #221 - fd82057 - Update hover styles for
gcds-file-uploader
andgcds-pagination
- #225 - 2bc48f9 - Update text in
gcds-file-uploader
button toChoose file
- #227 - 0effdc8 - Remove icon from
gcds-file-uploader
button label
- #201 - a922e5f - Add
gcds-top-nav
,gcds-side-nav
,gcds-nav-group
andgcds-nav-link
components to library - #203 - 2f0915e - Add
type
prop togcds-date-modified
to display "Version" number if needed
-
Site menu component (
gcds-site-menu
)gcds-site-menu
has been removed from the component library, replaced withgcds-top-nav
-
#203 - 2f0915e -
sub-heading
prop has been removed from thegcds-error-summary
component
- #205 - 51b30a8 - Add
experimentalImportInjection
to build to help integration of components with bundlers like Vite - #205 - 51b30a8 - Fix
onChange
event forgcds-checkbox
- #203 - 2f0915e - Update form error styling
- Container component (
gcds-container
)container
property has been renamedsize
- #188 - 41cc32e - Add margin + padding props to
gcds-container
- #191 - e7a12e4 - Add border prop to
gcds-container
- #195 - 7fc63d7 - Update
requiredFileInput
validator to useFileList
instead ofvalue
- #196 - ae460f3 - Update
requiredFileInput
validator to useFileList
instead ofvalue
- #181 - 2d7d2bc - Change alert title from h5 tag to p + strong tag
- #181 - 9035579 - change pagination border to be more consistent with text and background colour
- #167 - fc5ee8e - Add value to error summary links in storybook story to display error summary instead of blank screen
- #167 - 597f224 - Update french text for error summary default heading
- #167 - 4b0fe7f - Update demo with new UF name + add gcds-container
- #144 - d88d5f2 - New
gcds-error-summary
component for form validation on submit. - #149 - a531b14 - Update
@cdssnc/gcds-components-angular
to use Angular v15. Package will no longer work with Angular v14.
- #145 - dde9f87 - Add missing "About this site" heading to gcds-footer
- #150 - 6e828bc - States and styles of
gcds-lang-toggle
andgcds-button
have been updated to be consistent with Figma library - #153 - 68aab03 - Fix display issue showing an extra chevron when using hide-canada-link attribute in gcds-breadcrumbs
- #154 - dcbd5ab - Change gcds-fieldset to no longer use shadowDom to match other form components
Tout changement important à ce projet sera consigné dans le présent fichier.
Version publiée le : 2024-08-22
- Créé afin de permettre les nouvelles unités de style à être importées dans le paquet react-ssr (#624) (88790c7)
- Problèmes de marge et d'espacement dans gcds-card (#617) (2d39bdc)
Version publiée le : 2024-08-19
Le composants Carte et Indicateur d'étape ont eu une refonte et des changements à la structure de leur API.
La propriété type
sera enlevée et le composant supporte maintenant les lien d'interactions seulement. Veuillez noter que l'utilisation de type=action
ne sera pas supporté dans cette version.
La propriété tag
sera remplacée par la nouvelle propriété badge
.
La propriété title-element
sera remplacée par la nouvelle propriété card-title-tag
.
Arrêt du support pour (slot="footer"
) car nous n'avons pas observé d'utilité pour cet élément.
Nouveau: Nous ajoutons un slot
afin de supporter l'affichage du formattage de texte HTML dans le composant Carte. Vous pouvez toujours utiliser la propriété description
avec une valeur de text simple seulement.
<gcds-card
type="link"
card-title=""
href=""
title-element=""
description=""
tag=""
img-src=""
img-alt=""
>
<slot name=”footer”></slot>
</gcds-card>
<gcds-card
card-title=""
href=""
card-title-tag="a"
description=""
badge=""
img-src=""
img-alt=""
>
<slot></slot>
</gcds-card>
Nouveau: Une nouvelle propriété tag
sera disponible afin de donner au développeur l'option de choisir la bonne en-tête pour générer l'élément.
Nouveau (obligatoire): Le composant requiert maintenant du texte ou un élément dans le slot
afin d'afficher l'élément d'en-tête. C'est une propriété obligatoire et le composant ne sera pas généré sans elle.
Si vous avez des problèmes avec le changement, contactez-nous.
<gcds-stepper
current-step=""
total-steps=""
></gcds-stepper>
<gcds-stepper
current-step=""
total-steps=""
tag=""
>
<slot></slot>
</gcds-stepper>
- Ajout du composant gcds-date-input (#607) (ce0b4cc)
- Ajout d'une nouvelle propriété
main-container
au conteneur (#613) (4eef9b3) - Mise à jour de gcds-card (changement de ruptures de code) (#578) (4a72105)
- Mises à jour au composant Indicateur d'étape (changement de ruptures de code + nouvel attribut tag) (#573) (0f8bd2f)
Version publiée le : 2024-08-13
Version publiée le : 2024-08-01
Version publiée le : 2024-07-31
Version publiée le : 2024-07-29
Version publiée le : 2024-07-29
Version publiée le : 2024-07-10
- Problèmes d'accessibilité sur Safari avec les liens et le focus du groupe de navigation (#583) (d7c3fb9)
- Retrait des événements rxjs afin d'éviter la duplication des évènements personnalisés dans @cdssnc/gcds-component-angular (#566) (9bf46ac)
Version publiée le : 2024-05-27
- Mise à jour du composant Champ de saisie afin d'augmenter le calcul de la largeur du champ (#536) (d6204f3)
Version publiée le : 2024-05-21
- Ajout/création du paquet @cdssnc/gcds-components-vue (#516) (3933498)ß
- Ajout de @Outputs au composants pour Angular (#529) (0660093)
- Ajout de
dist-hydrate-app
. (#524) (c448c59)
Version publiée le : 2024-05-08
Nous avons mis des efforts substentiels afin de migrer nos composants au éléments personnalisés associés au formulaire. Les composants du Sytème de design GC vont maintenant utiliser le shadow DOM (document object model). Le shadow DOM améliore le contrôle et l'encapsulation de la stylisation et permet aux composants de formulaire d'être intégré aux fonctionnalités natives du navigateur pour la validation et l'accessibilité.
Ce changement requiert que tous les composants aient l'attribut name
. Voici une liste des composants du Système de design GC visés par ce changement:
- Téléverseur de fichiers (
gcds-file-uploader
) - Champ de saisie (
gcds-input
) - Sélection (
gcds-select
) - Zone de texte (
gcds-textarea
)
- Ajoutez un attribut
name
- Votre code devrait ressembler à ceci:
<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>
Les composants qui suivent seront mis à jour pour utiliser le shadow DOM comme les autres composants du Système de design GC:
- Pagination (
gcds-pagination
) - Recherche (
gcds-search
) - Signature (
gcds-signature
)
Inclus dans cette transition, le composant gcds-radio
sera abandonné en faveur du nouveau composant gcds-radio-group
. Le composant Groupe de boutons radio permet un meilleur contrôle sur les composants natif HTML de formulaire dans un environnement shadow DOM.
<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>
<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>
- Ajout de la propriété
tag
au composant gcds-sr-only (#484) (dfb7285) - Réécriture de composants (associés au fomulaire, gcds-radio-group, réécriture CSS) (#486) (ae05841)
Version publiée le : 2024-03-14
- définir les valeurs permises pour la propriété d'étiquette de la grille afin de limiter les mauvaises utilisations (#470) (a686d09)
Version publiée le : 2024-02-22
- Correctifs identifiés dans le rapport d'accessibilité (accessibilité et utilisabililté) (#446) (09095a5)
- changement de la logistique de la sortie de focus de la bascule de langue de
top-nav
ànav-group
(#387) (a72f91f)
- remplacer le
skip-to-href
dugcds-button
dansgcds-header
avec le composantgcds-link
(#451) (f3a052b) - réécriture du CSS du composant Bouton (#450) (f7d4ce4)
- #368 - 7774a88 — Exportation de ContentValues à partir de gcds-grid pour corriger la version du paquet Angular
-
Fonctionnalité pour le composant grille
- Possibilité d’ajouter des colonnes de grille dont la taille est individuellement définie et de définir des lignes de hauteur égale.
-
#358 - 34b392d — Ajout de la variante Light au composant lien
- #363 - ab0e404 — Correction du nom de propriété pour les variantes du composant lien
- #364 - ee16326 — Correction de la validation pour le téléverseur de fichiers
- #362 - ac2ea8c — Mise à jour des emplacements (slots) du composant en-tête dans Storybook
- #357 - 5a0bd5c — Correction du lien Ressources dans Storybook
- #353 - e9624f0 — Mise à jour des instructions pour Font Awesome dans le README
-
#346 - 16732e5 - Mise à jour de la configuration de la génération de gabarits pour une meilleure intégration avec plusieurs infrastructures (Nextjs et create-react-app)
-
#350 - 2F41435 - Correctif : réinitialisation des styles d’emplacement
- #305 - 2ffc292 - Nouveau composant
gcds-link
permettant la navigation vers une nouvelle page, un site web our une section à l`intérieur de la page courante.
- #333 - 5da32e0 - Ajout de valeur par défaut pour la marge du haut et du bas du composant texte
- #338 - 96e4787 - Amélioration de l
accessibilité de
storybook` pour la section démos
- #311 - 39c2135 - Nouveau composant
gcds-text
pour générer du contenu texte dans les styles du SDGC - #315 - 8117534 - Nouveau composant
gcds-sr-only
pour cacher le contenu du texte disponible seulement avec des technologies d`assistance
- #272 - c48d92f - Mise à jour de
media query
dansgcds-pagination
- #291 - d4d6f9f - Étiquette
nav langdmark
supprimée pour prévenir la confusion dansgcds-header
- #294 - e6a550a - Déterminer les valeurs par défaut des propriétés dans
gcds-signature
- #317 - ac5d6e7 - L
option
box-shadowajouté au focus pour les composants afin d
avoir une constance dufocus state
- #318 - 2bf8fde - Ajout de styles pour la balise
slot
pour régler des problèmes d`accessibilité dans Chrome pour les composants qui utilisent cette balise avec du texte
- #231 - 1be42c4 - Affichage mobile et texte français mis à jour pour le composant
gcds-pagination
- #236 - 994aa7c - Propriété
columns
(colonnes) définit comme obligatoire pour le composantgcds-grid
- #237 - e2030bf - Correctif d’accessibilité appliqué pour le composant
gcds-details
- #247 - d3440d7 - Correctif d’accessibilité appliqué pour le composant
gcds-nav-group
- #219 - bfb7a58 - Styles d’éléments en survol pour le composant
gcds-top-nav
mis à jour afin d’être conformes au fichier de design - #221 - fd82057 - Styles d’éléments en survol pour les composants
gcds-file-uploader
etgcds-pagination
mis à jour - #225 - 2bc48f9 - Texte de bouton du composant
gcds-file-uploader
modifié àParcourir
- #227 - 0effdc8 - Icône retirée de l’étiquette de bouton pour le composant
gcds-file-uploader
- #208 - 5668c65 - Correctifs d’accessibilité appliqués pour les composants
gcds-file-uploader
et navigation
- #201 - a922e5f - Composants
gcds-top-nav
,gcds-side-nav
,gcds-nav-group
etgcds-nav-link
ajoutés à la bibliothèque - #203 - 2f0915e - Propriété
type
ajoutée au composantgcds-date-modified
afin d’afficher le numéro de version au besoin
-
Composant menu de navigation globale (
gcds-site-menu
)- Composant
gcds-site-menu
retiré de la bibliothèque de composant et remplacé pargcds-top-nav
- Composant
-
#203 - 2f0915e - Propriété
sub-heading
(sous-titre) supprimée du composantgcds-error-summary
- #205 - 51b30a8 -
experimentalImportInjection
ajouté à la version afin d’aider l’intégration de composants nécessitant des installations regroupées comme Vite - #205 - 51b30a8 - Évènement
onChange
corrigé pour le composantgcds-checkbox
- #203 - 2f0915e - Styles des erreurs de formulaire mis à jour
- #183 - b64db5d - Nouveau composant
gcds-card
permettant d’afficher une série de renseignements connexes dans un seul élément
- Composant boîte (
gcds-container
)- Propriété
container
(boîte) renommée àsize
(taille)
- Propriété
- #188 - 41cc32e - Propriétés margin et padding (marge et marge intérieure) ajoutées au composant
gcds-container
- #191 - e7a12e4 - Propriété border (bordure) ajoutée au composant
gcds-container
- #195 - 7fc63d7 - Validateur
requiredFileInput
mis à jour pour qu’il utilise l’élémentFileList
plutôt que l’élémentvalue
- #196 - ae460f3 - Validateur
requiredFileInput
mis à jour pour qu’il utilise l’élémentFileList
plutôt que l’élémentvalue
- #181 - 2d7d2bc - Titre de l’alerte modifiée d’une balise h5 à une balise p + strong
- #181 - 9035579 - Bordure du composant pagination modifiée pour agencer avec le texte et la couleur de fond
- #167 - fc5ee8e - Valeur ajoutée aux liens du résumé des erreurs dans storybook afin d’afficher le résumé des erreurs plutôt qu’un écran vide
- #167 - 597f224 - Texte français mis à jour dans l’en-tête par défaut du résumé des erreurs
- #167 - 4b0fe7f - Nouveau nom UF et composant gcds-container ajoutés à la démonstration
- #144 - d88d5f2 - Nouveau composant
gcds-error-summary
permettant la validation de formulaires avant la soumission - #149 - a531b14 - Le dépôt
@cdssnc/gcds-components-angular
a été mis à jour vers Angular v15. Le package ne fonctionnera plus avec Angular v14.
- #145 - dde9f87 - En-tête manquant « À propos de ce site » ajouté au composant gcds-footer
- #150 - 6e828bc - États et styles des composants
gcds-lang-toggle
etgcds-button
mis à jour afin d’être conformes à la bibliothèque Figma - #153 - 68aab03 - Problème d’affichage résolu. Le chevron de trop qui s’affichait lorsqu’on utilisait l’attribut hide-canada-link dans le composant gcds-breadcrumbs a été supprimé.
- #154 - dcbd5ab - Composant gcds-fieldset modifié pour ne plus utiliser shadowDom, conformément aux autres composants de formulaire