Web Components

Migration vers la 1.0.0

Développeurs

  1. Installer les nouveaux packages commençant par @ds-autonomie/
  2. Assurez-vous de bien lier les ressources statiques

a. Les feuilles de styles (dsa-theme et dsa-wc-theme)

b.Le dossier d'icônes venant du package @ds-autonomie/assets

  1. Renommez tous les imports

a. @cnsa-fr/design-system -> @ds-autonomie/web-components

b. @cnsa-fr/design-assets -> @ds-autonomie/assets

  1. Renommer les noms des composants et évènements

a. eg. <cnsa-button> -> <dsa-button>

b. eg. CNSAFocus -> DSAFocus

  1. Enlever les références et usages lié au mot clé cnsa

v0.10 (22 Août 2023)

Figma (url)

Web (Custom Elements)

v0.10.0
Button
Correction de bug pour le button disabled secondary dont la hauteur était en fixe plutot que hug

Textarea
Correction de la taille de l’icône info pour la taille small

Link
Création d’un composant lien

Checkbox / Checkbox button / Checkbox group / Input / Select / Radio button / Radio group / Text area
Correctif des espacements

@cnsa-fr/design-assets@0.10.0 (url)
Minor Changes
.cnsa-link: stylisation des liens et ajout du visited
Patch Changes
checkbox-button: renommer locked en readonly
@cnsa-fr/design-system@0.10.0
Minor Changes
Ajout d'une class .no-animations pour désactiver les animations
radio-button, radio-group: implémentation technique du statut selectionné et readonly
.cnsa-link: stylisation des liens et ajout du visited
Patch Changes
input-mask: documentation
dialog, drawer: ajustement de l'opacité de l'overlay
select : correction des options du multiselect qui ne revenait pas a la ligne
dropdown: documentation technique
checkbox-button: renommer locked en readonly
Les traductions françaises sont maintenant enregistrées automatiquement
button: documentation
les astériques sont maintenant des éléments réels et non pas des pseudo-éléments
mise à jour des dépendances du projet
textarea: documentation
card: alt de l'image controllable dans storybook

v0.9 (8 Août 2023)

Figma (url)

Web (Custom Elements)

v 0.9.0


Tokens
Ajout :
Primitive neutre 650
Tokens de stepper
Tokens des nouveaux états de toggle button

Modification de la valeur du token
input-text field-on base-placeholder
input-text field-on layer-placeholder
text-secondary

Checkbox button
Ajout de nouveaux états.

Input
Application du token Input/icon/error/on base sur les icônes en état erreur
Application du token input/border/on base/locked sur les variantes en état vérrouillé.

Menu item / Menu
Correctif sur le composant checkbox point vers un ancien composant.

Radio button
Ajout de nouveaux états.

Radio group
Ajout du mode horizontal.

Stepper VERSION ALPHA
Création du composant. Celui ci n’est disponible qu’actuellement dans figma et ne sera développé qu’apres la release 1.0.0 du systeme de design.

Tree item
Correctif sur le composant checkbox point vers un ancien composant.

Tab group
Ajout d’un divider.

Tabs
Changement du nom de la propriété “text” --> “Label”

Tag
Ajout de variant spécifiques au composant tree item
“Reset to default” sur les icon buttons et réajustement des paddings
Correction des tailles d’icônes sur small et large

@cnsa-fr/design-assets@0.9.0
Minor Changes


checkbox-button: mise à disposition du composant
Patch Changes
input, input-mask, input-tel: ajustement de la couleur de placeholder
@cnsa-fr/design-system@0.9.0(url)
Minor Changes
badge: implémentation graphique


checkbox-group: mise à disposition du composant


input: mise à jour de storybook


input-mask: fix de l'affichage en mode readonly


checkbox-button: mise à disposition du composant


avatar,avatar-group: mise à disposition des composants


spinner: implémentation graphique


button-group: le composant est maintenant privé et interne


radio-group: affichage correct et wrapper avec des radio-button


Patch Changes
dialog, drawer: mise à jour de la documentation pour ajouter un button trigger


input, input-mask, input-tel: ajustement de la couleur de placeholder


input: la largeur intrinsèque du composant est respecté dans un flex conteneur


checkbox-group,input,select,radio-group,textarea,input-mask,input-phone: ajout d'exemple d'usage avec infobulle sur storybook
menu-item: mise en place du focus


input: focus visible sur les boutons d'actions


focus: correction d'implémentation d'a11y et de style


radio-group: deselectionnable avec le clavier


radio-button: réparation du bouton non selectionnable sur firefox et edge


tag: contour sur la croix de suppression


breadcrumb,breadcrumb-item: mise en conformité d'accessibilité

v0.8 (25 Juillet 2023)

Figma (url)

Web (Custom Elements)

 

@cnsa-fr/design-assets@0.8.1
Aucun changements

@cnsa-fr/design-system@0.8.1 (url)
Patch Changes
select: ajout de la propriété "no-sync-width" permettant a la popup de ne pas se synchroniser avec la taille de son ancre ; la propriété "placement" accepte maintenant les variantes "-start" et "-end" pour top et bottom
input-mask: le charactère '_' peut être utilisé pour définir le mask dans le placeholder
input-phone: implémentation du composant (BETA)
select: ajustement de la marge du prefix-icon et ajout de la propriété boolean 'display-value' qui affiche la valeur et non son label

v0.8.0

Tokens
Modifications des tokens :
button-on base-navigation-hover
button-on base-navigation-active
Création des tokens :
input-background-on base-autocomplete
input-background-on layer-autocomplete

Button
Changement de nomenclature. Enabled -> Default

Breadcrumb
Modifications suite aux retours d'accessibilité (modification de l'état default et hover)

Checkbox button
Suppression du mode horizontal

Icon button
Changement de nomenclature. Enabled -> Default

Input
Modification pour tenter de réparer le probleme de composant fantôme sur le fichier SI APA

Radio button
Suppression du mode horizontal

@cnsa-fr/design-assets@0.8.0
Minor Changes
input, input-mask: passe graphique lorsque le champ est autocomplete

@cnsa-fr/design-system@0.8.0 (url)
Minor Changes
input: mise en conformité d'accessibilité
button: mise en conformité d'accessibilité
storybook: reconfiguration des attributs
tag: mise en conformité d'accessibilité
input, input-mask: passe graphique lorsque le champ est autocomplete
alert: mise en conformité d'accessibilité
textarea: mise en conformité d'accessibilité
checkbox: mise en conformité d'accessibilité
dialog, drawer: mise en conformité d'accessibilité
radio-group: mise en conformité d'accessibilité
card: mise en conformité d'accessibilité
input-mask: mise en conformité d'accessibilité
icon,icon-button: mise en conformité d'accessibilité
divider: mise en conformité d'accessibilité
Patch Changes
icon: mise à jour de la documentation pour expliciter l'usage des Material Icons et non pas les Material Symbols

v0.7 (11 Juillet 2023)

 

Figma (url)

Web (Custom Elements)

v0.7.0

Lien d’accès rapide
Création du composant

Alerte
Ajout d’un slot “action-button” pour accueillir un groupe de boutons dans le header
Ajout d’un composant “bouton” dans le header

Dropdown
Changement de la direction de la flèche sur le l’état “ouvert”

Radio button
Ajoute de la fonctionnalité “wrap” suite à la dernière mise à jour de Figma

Checkbox button
Ajoute de la fonctionnalité “wrap” suite à la dernière mise à jour de Figma
Correction de l’autolayout des labels en mode “fill container”

Input
Ajout d’une info-bulle
Ajout des variants “mask” suivant : Numéro de téléphone , BIC, IBAN, NIR

Select
Ajout d’une info-bulle

Accordéon
Correction de bug:
Problème lors du redimensionnement la flèche est désormais ferrée à droite
Le texte du header est désormais en “fill container”
Changement de nomenclature de propriété : “Count” --> “Items”

Radio button
Changement de nomenclature de la propriété “Selected” sur le composant “_Radio button - Option”
avant: Default, après: None

Spinner
Changement de nomenclature : “neutre” --> “Neutral”

Text area
Correction du bug de taille en propriété “small”
Changement de l’ordre des valeurs de la propriété taille
Changement du token “hover” appliqué sur les “field default on layer”
Changement du token “hover” appliqué sur les “field disabled on layer”
Ajout d’une info-bulle

Autre
Ajout d'une primitive exclusive et d'un token de couleur pour le "focus ring"

@cnsa-fr/design-assets@0.7.0
Aucun changements

@cnsa-fr/design-system@0.7.0 (url)
Minor Changes
input-mask: mise à jour de la configuration NIR
accordion: implementation graphique
progress-ring: implémentation graphique et la taille "large" à été enlevé
input, input-mask: Les champs ont une 'width' de 100%
input,input-mask,textarea,select: l'utilisation des composants sans label est possible si la propriété title est définie
drawer: implementation graphique
dialog: mise a jour de la doc pour inclure le header-actions slot
progess-bar: implémentation graphique du composant

v0.6 (27 Juin 2023)

Figma (url)

Web (Custom Elements)

v0.6.0
Token
La scrollbar (prends la couleur et le style du navigateur)
Maj de la primitive error 500
Ajout des tokens “toggle button”
Le token “checkbox” a été renommé en “toggle item”

Dialog
Ajout d’une zone de slot dans le header pour venir y des composants tels que des boutons

Tab group
Ajout de flèches permettant de faire défiler les différents onglets

Select
Ajout de la possibilité à travers le champ liste déroulante d’effectuer des sélections multiples
L’ancien sélect est toujours disponible pour ne pas casser les instances dans les fichier produits mais n’est plus disponible dans la librairie.

Layout
Création des grilles pour desktop / tablette / mobile

Autre
Création de locales variables suite à la nouvelle mise à jour de Figma. Les composants seront mis à jours au fur et à mesure. (Non publié pour le moment)

@cnsa-fr/design-assets@0.6.0
Minor Changes


tag: stylisation du composant
tree, tree-item: refonte graphique
tokens: mise à jour pour le composant tree et tree-item
select: stylisation des tags dans le cas du multiselect
tokens: mise à jour du rouge, ajout des variables pour le tag du multiselect
tokens: ajout d'une version minifié, ajout des tokens pour les composants radio-group, radio-button, checkbox et radio.
button-group: documentation storybook
radio-group: stylisation pour le button-group et ajout de la propriété deselectable
radio-button: mise à disposition du composant
theme: mise à jour des références
@cnsa-fr/design-system@0.6.0
Minor Changes
input: mise a jour des tokens du composant. La propriété filled à été remplacé par la propriété variant.
breadcrumb et breadcrumb-item: implementation graphique
tooltip: mise à disposition du composant
tag: stylisation du composant
tree, tree-item: refonte graphique
tokens: mise à jour pour le composant tree et tree-item
skeleton: mise a disposition du composant
dropdown: implémentation graphique
input-mask: impleméntation du composant
select: stylisation des tags dans le cas du multiselect
tokens: mise à jour du rouge, ajout des variables pour le tag du multiselect
tokens: ajout d'une version minifié, ajout des tokens pour les composants radio-group, radio-button, checkbox et radio.
button-group: documentation storybook
radio-group: stylisation pour le button-group et ajout de la propriété deselectable
radio-button: mise à disposition du composant
theme: mise à jour des références
alert: implémentation du composantt

v0.5 (13 Juin 2023)

Figma (url)

Web (Custom Elements)

v0.5.0
Badge
Simplification du composant + ajouts de nouvelles possibilités :
↳ Impact et maj des composants : Button

Boutons
Mise à jour des tokens

Dropdown
Correctif pour gérer l’espacement entre le menu et le bouton

Icon button
Mise à jour du composant pour passer la taille en taille de font.
↳ Impact et maj des composants : Card / Dialog / Drawer

Input
Mise à jour des espacements
Mise à jour des tokens

Menu item
Mise à jour des espacements
↳ Impact et maj des composants : Menu / Menu label

Option
Mise à jour des espacements

Radio
Mise à jour de la nomenclature

Radio group
Mise à jour des espacements

Spinner
Mise à jour des tokens

Text-area
Ajout des versions on base/on layer
Déclinaison des tailles
Ajout du scroll lors de la complétion d’un texte plus long que le champs de complétion.
Ajout des états : disabled / error / locked

 

@cnsa-fr/design-assets@0.5.0
Minor Changes
tokens, mise à jour des design tokens
Patch Changes
tokens: traduction des tokens du spinner en français
tokens: mise à jour du spinner et des couleurs de badge
tokens, les tailles de polices sont en rem et non plus en px
@cnsa-fr/design-system@0.5.0
Minor Changes
menu, menu-item et menu-label: implementation graphique
accordion: revue fonctionelle du composant accordion précédement appellé details
badge: revue fonctionnelle et mise à jour des stories.
drawer: revue fonctionelle du composant
progress-ring: revue fonctionelle du composant
dropdown: revue fonctionelle du composant
select: implémentation graphique
icon-button: revue graphique du composant
textarea: revue graphique du composant
transverse, les events sont maintenant préfixé par cnsa-
option: implémentation graphique
error-text : ajout du composant error-text et ajustement des apis des composants inputtextareaselect , checkbox, radio, radio-group et option pour afficher l'états erreur
radio-group, renommage de la prop part pour l'input pour qu'il diffère de celui du label
divider, revue fonctionnelle et mise à jour des stories. breadcrumb-item, bugfix de la story
Patch Changes
tooltipmenu-item: bugfix sur le contenu d'une tooltip qui ne revenais pas a la ligne, bugfix du contenu d'un menu-item qui ne prennais pas toute la place

v0.4 (6 Juin 2023)

Figma (url)

Web (Custom Elements)

v0.4.1
Checkbox button :
Ajout du composant (audit accessibilité non réalisé)

Radio button :
Ajout du composant (audit accessibilité non réalisé)

 

 

@cnsa-fr/design-assets@0.4.0
Aucun changements

@cnsa-fr/design-system@0.4.0
Minor Changes
tree, tree item : api fonctionnel
select: api fonctionnel
icon button: api fonctionnel
breadcrumb, breadcrumb-item: api fonctionnel
option: api fonctionnel; icons: mise à jour des story
button: api fonctionnel
textarea: api fonctionnel
tag: api fonctionnel
menu, menu-item, menu-label: api fonctionnel