CHANGELOG.md

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

💡 All changes in Deprecated will be removed on next major version

Unreleased

Added

for new features.

Changed

for changes in existing functionality.

Deprecated

for soon-to-be removed features.

Removed

for now removed features.

Fixed

for any bug fixes.

Security

in case of vulnerabilities.

[7.7.0] - 2026-07-01

Added

• button: add endIcon and startIcon properties to allow adding an icon at the start or the end of the button text
• mat-icon: add css variables for sizes of icons
• select: add a trigger property to the wcsFilterChange event detail to indicate what caused the filter change (user input or option selection)
• doc:
  • clarify the getting started documentation for Angular regarding the assets folder and paths to static assets
  • add ux guidance for asynchronous options in wcs-select, to indicate to use info wcs-select-option during loading
• message: add new wcs-message component

Changed

• chip: try focus on previous chip if no next chip

Fixed

• Angular: set compilationMode to partial for wcs-angular and wcs-formly libraries to fix AsyncPipe import issues in consuming applications
• alert-service: fix clear method which did not clear alerts
• dropdown: popover was sized to the button width and wraps content instead of widening to fit its content
• grid-pagination:
  • show 0/0 on page indicator if data is not set or is empty
  • now use p instead of span to display the total element to improve accessibility
• select: remove unnecessary label to improve accessibility

[7.6.0] - 2026-04-14

Added

• select: add selectedOptions property to the wcsChange event detail to provide the selected option(s) when the select value changes
• grid-pagination: add elements-per-page-text and items-count-text slots to allow customizing the text after page size selector and items count. Useful for i18n or to match specific wording in your project. See documentation for more information.

Changed

• doc
  • card: clarify the use of wcs-card-content vs wcs-card-body for rich content
  • formly: update documentation for Angular Formly integration with Angular standalone
  • formly: indicates that wcs-formly is not yet compatible with Formly 7.x and that version 6.x.x should be used for now
  • bolder text is now visually bolder to improve readability
• loadash-es: update to 4.18.1 to address security vulnerabilities in previous versions. See CVE-2026-4800 for more details. IMPORTANT: WCS is not vulnerable to this CVE as it only uses lodash-es in the select and grid components, which are not using parts of the library affected by this vulnerability

Fixed

• label: fix alignment of required marker and last word of the label
• dropdown: fix a behavior where tabbing to a dropdown inside a scrollable container could cause the window to scroll unexpectedly. The window scroll position is now preserved.
• grid: fix a behavior where tabbing to the single-selection radio or clicking on it, inside a grid in a scrollable container, could cause the window to scroll unexpectedly. The window scroll position is now preserved.
• radio: fix a behavior where clicking on a radio button inside a scrollable container would cause the window to scroll to the bottom of the page. Now, the window scroll position is preserved when clicking on a radio button.
• radio-group: fix a11y issues with the hierarchy announcement of radio options by screen readers
• input: remove aria-labelledby attribute setting to avoid conflicts with wcs-form-field label association
• editable-field:
  • fix value not being synced internally when changed externally, causing the slotted component (input, textarea, select) to display old values when entering edit mode
  • with wcs-select keep formatFn(value) based on the raw value and otherwise align display mode with the select displayed text

[7.5.1] - 2026-02-26

Fixed

• label: fix line-height to revert the possibility to have multi-line label

[7.5.0] - 2026-02-10

Added

• accordion: add multiExpandable property to allow multiple panels to be expanded at the same time

Fixed

• • Angular Formly:
  • wcs-checkbox: inherit all passed attributes from formly config props attribute level to the component
  • wcs-counter: inherit all passed attributes from formly config props attribute level to the component
  • wcs-native-select: inherit all passed attributes from formly config props attribute level to the component
  • wcs-select: inherit all passed attributes from formly config props attribute level to the component
  • wcs-switch: inherit all passed attributes from formly config props attribute level to the component
• button: when setting ripple to false, the ripple effect is now correctly disabled

[7.4.1] - 2026-02-09

Fixed

• core: fix missing exports in wcs-core package for bundle and composite-elements output targets
• accordion: ensure dynamically added accordion panels are recognized by the parent accordion for proper open/close behavior

[7.4.0] - 2026-01-28

Added

• horizontal-stepper: add ariaLabel property to HorizontalStepConfig, allows providing a descriptive label for each step to improve accessibility
• Angular Formly: add two new formly props to WcsFormlyInputProps => maxDate and minDate for date input type
• core: add bundle and composite-elements output targets in wcs-core package with documentation and examples
• com-nav: default style for slotted app name anchor link

Changed

• storybook: upgrade to storybook v10
• doc: improve components overview

Fixed

• label: fix extra-height and gap when using label with text and icon together
• doc: apply selected theme on MDX docs pages
• grid: default sort on a wcs-grid-column with grid pagination did not worked well
• modal: actions was not re-render after setting hide-action attribute
• select:
  • filtering in autocomplete server mode was no longer possible
  • reselecting the current option or blurring the select did not reset value in the autocomplete field

[7.3.0] - 2025-09-15

Added

• checkbox: add required prop
• doc: add browser support information in introduction
• chip: add new Chip component with two interaction modes: selectable for filtering and choosing elements, and dismissible for removing tags or filters

Changed

• mat-icon:
  • update Material Icon link in storybook documentation

Fixed

• checkbox: default alignment center if label-alignment prop's is set to undefined or null
• alert-service: setConfig was not applied at initialization
• accordion: nested accordions no longer close their parent when panel are toggled

[7.2.2] - 2025-07-11

Fixed

• select: prevent auto-open on programmatic autocomplete value changes

[7.2.1] - 2025-06-12

Fixed

• alert: is now declared in wcs-angular module
• alert-drawer: is now declared in wcs-angular module
• card-header: is now declared in wcs-angular module
• card-content: is now declared in wcs-angular module
• card-footer: is now declared in wcs-angular module
• card-media: is now declared in wcs-angular module

[7.2.0] - 2025-06-10

Added

• header:
  • add center slot to put a search bar inside
  • new story to show how to add a clickable logo / title
• tabs: introduce mobile mode for small screens accessibility
• nav: add scrollbar for small-height screens to handle overflow
• Angular Formly: add missing props for all formly field components
• card-header: new component to put in wcs-card-body
• card-content: new component to put in wcs-card-body
• card-footer: new component to put in wcs-card-body
• card-media: new component to put in wcs-card-body
• card:
  • new structure to be more consistent with the design system. It is backward compatible with the previous structure 🎉
  • add orientation property to choose between vertical and horizontal orientation. It has to be used in the conjunction of the new structure
• alert: add a new alert component to handle notifications
• alert-drawer: provide a default implementation to group multiple alerts in a container. Includes an Angular API for seamless integration in Angular projects.

Changed

• add a size fallback for the following components : badge, button, counter, dropdown, editable-field, input, modal, native-select
• attributes: some specific boolean attributes are now reflected with its component prop. e.g : disabled for wcs-input, wcs-textarea, wcs-switch, and more.
• mat-icon:
  • update Material Icon link in documentation

Removed

• Angular Formly: remove value from type WcsFormlyCounterProps => still works because Angular already does it for you

Fixed

• select:
  • autocomplete filter is now updated when an option is selected
  • display a red outline when the select autocomplete is in error state
  • "no result" is now vocalized by screen readers
• tabs: tabs can be dynamically removed
• grid-pagination: improve accessibility
• horizontal-stepper: progress-bar animation timing
• modal: correctly set attribute aria-modal="true"
• doc: bad design tokens in the v6-v7 migration guide.
• form-field: announce error messages to screen readers when the error message is displayed

[7.1.0] - 2025-03-05

Added

• footer: add <footer role="contentinfo"> inside the component for accessibility
• design-tokens: add root-scoped CSS file generation for themes
• list-item: add accessibility documentation

Changed

• attributes: some specific boolean attributes are now reflected with its component prop. e.g : disabled for wcs-input, wcs-textarea, wcs-switch, and more.

Fixed

• com-nav-item: for mobile, the focus ring is now visible on the com-nav-item when it is focused (regression introduced with design tokens)
• galactic-menu: accessibility issue with the contrast of overlay
• counter: fix focus style for Firefox
• form-field:
  • fix prefix/suffix slot behaviors. See "Form Field > Prefix Suffix Group" documentation.
  • move hint and error message in aria-label instead of aria-description
  • label concatenation with switch and checkbox components. Form-field label is now correctly concatenated with the switch/checkbox label instead of overwriting it
  • radio-group: set label on radio-group from form-field
• input: show/hide password button is now focusable and well accessible
• select: required attribute was not reflected on focusable element
• nav: handle letting put button inside wcs-nav-item for modal opening use cases from a wcs-nav-item
• tooltip:
  • set aria-expanded on wcs-button only when tooltip is on interactive mode
  • accessibility issue with the contrast of focus and text colors
  • update documentation for the content property
• editable-field: improve accessibility :
  • fix keyboard navigation
  • handle focus correctly and add focused style
  • handle label despite cross-root ARIA limitations
  • handle error message for screen readers
• grid: sort-arrow not correctly resizing in grid-columns
• badge: set inline-size to avoid badge stretching with flex layouts
• Angular Formly:
  • fix required prop condition for wcs-input, wcs-radio and wcs-textarea formly components
  • chips can now be used with wcs-select formly component

[7.0.0] - 2025-02-04

Added

• fonts: add Avenir Heavy font (weight 800)
• tooltip: add new theme light
• doc
  • galactic: improve doc to give some accessibility advices
• modal:
  • add props to conditional when focus is set to modal opening (see proposal)
  • add props to change on which element the focus will be on modal opening

Changed

• accordion: 'Ouvrez/Fermez' text is now hidden by default (hideActionText = true). If you want to show it, set hideActionText to false
• card: default mode is now flat instead of raised
• dropdown: items click event is now mouseup instead of mousedown
• grid: sort header icon changed from chevron to arrow
• tooltip: rename default theme from wcs to dark
• badge: lighter badge use an alternative color palette instead of opacity

Deprecated

• accordion : groupContentWithHeader attribute is deprecated. With the new design, the content is always grouped with the header.

Removed

CSS

• Global variables: remove a lot of CSS global variables due to token migration. See migration guide for further details.
• button: remove --wcs-button-height. Use instead:
  • use instead --wcs-button-height-s
  • use instead --wcs-button-height-m
  • use instead --wcs-button-height-l
• input: remove --wcs-input-icon-color css variable. Use --wcs-input-icon-color-default, --wcs-input-icon-color-focus, --wcs-input-icon-color-disabled instead.
• textarea: remove --wcs-textarea-icon-color css variable. Use --wcs-textarea-icon-color-default, --wcs-textarea-icon-color-focus, --wcs-textarea-icon-color-disabled instead.
• select
  • remove --wcs-select-background-color css variable.
    • To edit background color of the control, use --wcs-select-control-background-color instead
    • To edit background color of the control, use --wcs-select-overlay-background-color instead
  • remove --wcs-select-border-color css variable. Use --wcs-select-control-border-color-default, --wcs-select-control-border-color-active, --wcs-select-control-border-color-focus and --wcs-select-control-border-color-error instead
  • remove --wcs-select-outline-color, use --wcs-select-control-border-color-focus instead
  • remove --wcs-select-option-height on select, you have to edit --wcs-select-option-height on wcs-select-option directly
  • remove --wcs-select-border-width. You have to use --wcs-select-overlay-border-width for overlay and --wcs-select-control-border-width, --wcs-select-control-border-width-active, --wcs-select-control-border-width-focus instead
  • remove --wcs-select-border-radius.
    • You have to use --wcs-select-control-border-radius instead to edit the border radius of the control
    • You have to use --wcs-select-overlay-border-radius instead to edit the border radius of the overlay
• native-select
  • all existing --wcs-select-native-* variables have been renamed to --wcs-native-select-* to match the component name
  • remove --wcs-select-native-outline-color css property. Instead, use --wcs-native-select-border-color-default, --wcs-native-select-border-color-focus, --wcs-native-select-border-color-error
• switch
  • remove --wcs-switch-bullet-color-initial and --wcs-switch-bullet-color-final. Instead, use --wcs-switch-dot-color-initial and --wcs-switch-dot-color-final
  • remove --wcs-switch-text-color. Instead, use --wcs-switch-text-color-default, --wcs-switch-text-color-selected, --wcs-switch-text-color-hover, --wcs-switch-text-color-disabled
• counter
  • remove --wcs-input-icon-color. This variable was not used.
• form-field
  • remove --wcs-form-field-border-radius-left and --wcs-form-field-border-radius-right. These variables were not used.
• badge
  • remove --wcs-badge-ligther-percentage
• header
  • With design token migration, new wcs-header is no longer dark. Make sure your action button doesn't have class wcs-light that can cause contrast issues.
• grid
  • remove --wcs-grid-header-sort-arrow-color. Instead, use --wcs-grid-header-sort-arrow-color-default and --wcs-grid-header-sort-arrow-color-hover
• tabs
  • remove the following css variables, see doc for replacement :
    • --wcs-tabs-width
    • --wcs-tabs-padding-horizontal
    • --wcs-tabs-padding-vertical

Fixed

• checkbox: click events are now fired from the host checkbox instead of the native input inside
• switch:
  • fix display bug when resizing the window
  • click events are now fired from the host checkbox instead of the native input inside
• native-select: fix opacity of the native select when disabled
• formly field: select, input, counter: set default size 'm' in formly => no more warn in client console
• grid:
  • fix this.columns undefined in server mode with a sorted columns
  • row-id-path now works with nested objects
  • fix server-mode and selection mode "multiple" not working when clicking on the checkbox in the header
• select:
  • the autocomplete input is now fully disabled when the select is disabled
  • autocomplete filter is now cleared when the select value is set to a falsy value
  • focus last selected option on select opening after setting value in JS
  • handle async option loading with an initial value (the label is now refreshed when the options are loaded)
• tooltip: tooltip and wcs-button is now more accessible (aria-expanded well managed)
• galactic-menu: change semantic to make it accessible
• galactic: edit label of logo SNCF to make it pertinent

[6.0.0] - 2024-10-15

⚠ This version contains breaking changes in following packages :

• wcs-core
• wcs-angular
• wcs-react

To migrate, please refer to the storybook documentation (v5 to v6).

Added

• accessibility: 💡 All components now inherit aria-attributes into their shadow DOM and exposes a setAriaAttribute method. See new documentation "Accessibility" on Storybook for more info.
• select: add server-mode for select autocomplete (read documentation)
• select-option: add a documentation about handling large text in options
• grid:
  • add support for row styling with css parts
  • introduce new css variables for customization
• radio-group: add onTouched support for Angular
• radio:
  • add style for checked AND disabled radios
  • emit wcsFocus and wcsBlur events
• nav-item: add a visual indicator for the current active item
• breadcrumb: add new breadcrumb and breadcrumb-item components
• doc: add version switch for WCS archives in Storybook toolbar

Changed

• radio: properties name and mode and no longer needed and should only be placed on wcs-radio-group from now on
• editable-field: rename errorhandler to errorHandler
• select: rename SelectFilerChangeEventDetail to SelectFilterChangeEventDetail
• nav-item: anchor elements are now slotted. See v5 → v6 migration for more info.

Removed

• radio: remove checked property. See v5 → v6 migration for more info.
• nav-item: remove href and text properties. See v5 → v6 migration for more info.
• input:
  • remove previously deprecated setFocus method
  • remove clearOnEdit and clearInput properties. See v5 → v6 migration for more info.
• textarea:
  • remove previously deprecated setFocus method
  • remove clearOnEdit property. See v5 → v6 migration for more info.

Fixed

• input: fix placeholder style for Firefox
• textarea: fix placeholder style for Firefox
• grid: an error was thrown in console when change current page (grid pagination)
• grid-column: (accessibility) use button instead of div inside sortable columns for accessibility reasons
• form-field:
  • fix prefix suffix group style for native select
  • fix width of the native select when it is in a form-field (fill now 100% of the available place)
• select: on autocomplete mode, disable default autocomplete suggestion of user-agents
• dropdown: improve accessibility
• stepper: (accessibility) use aria-current="true" instead of tab pattern (does not work with Voice Over)
• modal: focusable elements were not updated during the opening lifecycle
• select:
  • fix autocomplete server-mode problem that was clearing the filter unintentionally
  • improve autocomplete server-mode documentation
• com-nav: close mobile menu when click on a link (wcs-com-nav-item)
• native-select: no label/description/error + required propagation from form-field

[5.1.0] - 2024-06-26

Added

• select:
  • add a red outline when the wcs-form-field is in error
  • emit wcsFocus and wcsBlur events
  • add onTouched support for Angular
• native-select: add a red outline when the wcs-form-field is in error
• checkbox:
  • add wcsFocus and wcsBlur events
  • add onTouched support for Angular
• switch:
  • add wcsFocus and wcsBlur events
  • add onTouched support for Angular
• grid:
  • add wcsFocus and wcsBlur events
  • add onTouched support for Angular

Fixed

• galactic-menu: (accessibility) add keyboard navigation and missing aria attributes
• editable-field: fix the display of textarea when there is a multiline
• switch: change focus style to surround the input + the label
• list-item: update style to fix unnecessary padding-left on a single wcs-list-item-property
• accordion: fix the font-family not rendering properly
• doc: improve wcs-form-field, wcs-hint, wcs-label, wcs-error, wcs-editable-field, wcs-textarea and wcs-input documentation
• textarea: fix debounce behavior by using wcsInput event instead of wcsChange
• input: fix debounce behavior by using wcsInput event instead of wcsChange
• counter: improve keyboard focus style
• header: (accessibility) add missing aria attributes
• progress-bar: improve accessibility
• progress-radial: improve accessibility
• tooltip: accessibility problems
  • Hide tooltip when press escape key.
• horizontal-stepper: (accessibility) add missing aria attributes and keyboard navigation
• nav, nav-item : improve business nav accessibility (missing aria and semantics)

[5.0.0] - 2024-05-02

⚠ This version contains breaking changes in following packages :

• wcs-core
• wcs-angular
• wcs-react

To migrate, please refer to the storybook documentation (v4 to v5).

Added

• select: (IMPORTANT FEATURE 💡) add autocomplete mode to filter your results
• textarea: add two css variables to set padding right and padding left
• modal: add the css variable --wcs-modal-overflow-y to control the overflow-y of the modal content
• progress-bar: add the size attribute with available values m (default), s
• dropdown: add the size attribute with available values l, m (default), s
• badge: add the size attribute with available values l, m (default), s
• counter: add the disabled property
• grid: add support of specific angular control value accessor to simplify the use of handling selected rows

Changed

• select rename these slots for brevity :
  • wcs-select-option => options
  • wcs-select-filter-noresult => filter-no-result
• css variables: change global color --wcs-blue used by --wcs-primary for accessibility reasons (contrasts) from #0088ce to #0074af.
• grid:
  • the model detail data of wcsGridSelectionChange event has changed. See migration guide for more information.
  • the wcsGridSelectionChange event is now emitted when the "all checkbox" is clicked.
• modal: warn in console if modal-trigger-controls-id passed to modal is invalid

Removed

• progress-bar : boolean attribute small removed. Use size='s' instead.

Fixed

• select:
  • internal value was not changed when the select is closed and when we used keyboard nav on it (key up, key down... to change the current selected option).
  • the wcsChange event is no longer triggered when the value is updated programmatically.
  • change focus style to match the design system appearance
• native-select: change focus style to match the design system appearance
• radio: change focus style to match the design system appearance
• doc:
  • improve wcs-select, wcs-select-options, wcs-input and wcs-dropdown documentation
  • fix accessibility problem for form-field radio group story => add name to each wcs-radio
• modal: (accessibility)
  • focus modal controls which served to open the modal on closure
  • modal title is now a h1 instead of a h5 for better semantic structure
• dropdown: display empty container when no items with fixed width
• progress-radial: fix component computed size, documentation and aria attributes
• input:
  • rework input events to be more consistent with native events (wcsInput, wcsChange)
  • inherit aria-attributes from host to the wrapped native input
• textarea:
  • rework textarea events to be more consistent with native events (wcsInput, wcsChange)
  • inherit aria-attributes from host to the wrapped native textarea
• radio-group:
  • we not remove tabIndex=0 on option which are not selected in the group when a click is received inside the group => when re-tab to the group, it caused the focus on not last selected option
  • add role radiogroup to the host => we can now add aria-label directly on the host
  • rework wcsChange event to be thrown only when the user click on an option (not programmatically)
• form-field: fix accessibility issue with label, description, error message and form control association
• mat-icon: fix accessibility with aria-hidden on <i> element.
• grid:
  • (accessibility) add keyboard navigation and missing aria attributes
  • fix a bug where the row selection single was not kept when sorting the column

[4.2.0] - 2023-12-15

Added

• stackblitz : create 3 StackBlitz templates for testing. See README.md or CONTRIBUTING.md for more information
• doc: add StackBlitz links to the Framework integrations documentation
• doc: component methods are now displayed in their story control table
• doc: props & methods deprecation are now displayed in their story control table

Changed

• radio : update style to match the design system appearance
• grid: (selection single) use the new updated radio style

Deprecated

• input : method setFocus() deprecated : use native js focus() method instead.
• textarea : method setFocus() deprecated : use native js focus() method instead.

Fixed

• Update project README.md and CONTRIBUTING.md
• dropdown, checkbox, counter, textarea: focus called on host element now delegate focus to the first focusable element in shadow-dom
• modal:
  • don't emit wcsDialogClosed if the modal is closed and the Escape key is pressed
  • handle accessibility (aria and trap focus inside when the modal is opened)
• tabs:
  • apply ARIA tabs design pattern to make tabs accessible to screen reader
  • instead of directly updating styles, which can potentially violate CSP rules, we now apply styles in response to certain attribute changes
• grid: fix single selection keyboard behavior, only one radio can be selected
• radio: update style to remove margin when there is no label on radio (useful for grids)
• radio-group: add keyboard navigation support
• native-select: add a way to update the styles of the native select when it's reset and automatically update styles when there is a class change on the component (mainly for Angular)

[4.1.0] - 2023-10-30

Added

• react: create react bindings for WCS components
• doc: deploy documentation on Azure static web app (https://wcs.dev.sncf)
• doc: add Formly integration documentation
• skeleton: add new components skeleton-text, skeleton-rectangle, skeleton-circle

Changed

• doc: update react integration documentation
• doc: update grid and grid subcomponents documentation
• doc: migrate documentation to Azure static web app (https://wcs.dev.sncf). The gitlab pages environment now redirects to the new documentation domain (both for develop and master branches).

Fixed

• native-select: add a gap between the value/placeholder and select arrow to avoid the value to be hidden by the arrow
• com-nav: open/close mobile menu on space or enter key press on the "hamburger" button
• bundle size: migrate to lodash-es to reduce bundle size (used in select and grid components)
• counter: fix weird behavior when the value is programmatically set in javascript

[4.0.2] - 2023-09-18

Fixed

• native-select: the base color of the select is now primary and not blue

[4.0.1] - 2023-09-14

Fixed

• native-select: the formly component now displays the label correctly in options

[4.0.0] - 2023-09-04

⚠ This version contains breaking changes in following packages :

• wcs-core

To migrate, please refer to the storybook documentation (v3 to v4).

Added

• button: add target ("_blank" | "_self", null by default) to choose where to open links when using href
• button: add the following sizes : l, m (default), s
• input: add the following sizes : l, m (default), s (for grids)
• select: add the following sizes : l, m (default)
• editable-field: add the following sizes : l, m (default)
• doc: add documentation on how to initialize an application with the business or communication design systems
• ci: add the ability to deploy any branch on a dedicated environment
• textarea: add the property resize with the folowing options : none, both, horizontal, vertical
• textarea: the max-height style property is now defined by the --wcs-textarea-max-height css-variable
• counter: add new Counter component (for small countable number values)
• native-select: add new Native Select component (for unique selection)

Changed

• select:
  • Migrate overlay positioning to PopperJS
  • Implements the new overlay design
• docs: Create a story per subcomponent (eg. grid-column) while waiting for storybook to provide a solution to replace the subcomponent functionality.
• annotates some private attributes explicitly so that they are not present in the documentation. Removed some unnecessary attributes in components.
• docs: Angular Framework integration : update doc about icons and fonts usage
• styles: Set WCS global variable "base size" to 8px. Has no impact to previous styles.
• types: Create and set index as root file for types export (generated & custom types)
• types: Create a new shared-types file for custom types, containing WcsSize
• button: add the size attribute with available values l, m (default), s
• input: add the size attribute with available values l, m (default), s
• textarea: the min-height style property is now define by the var(--wcs-size-m) css-variable

Removed

• button: remove the shape="small" attribute. (Replace it with size="s").

Fixed

• select:
  • only one select will remain expanded at a time, even when multiple selects are present on the page. Previously, when multiple instances of the select were present on a page, they could both be expanded simultaneously, which was not intended behavior.
  • add keyboard navigation and aria to respect listbox pattern
• doc: add the SNCF font icon in the stylesheet on the integration doc for angular.
• doc: the events are shown back in the Actions tab.
• doc: storybook controls improvements for stories + attributes now displayed in table
• radio: wcs-radio is now exposed to screen readers

[3.0.0] - 2023-02-24

⚠ This version contains breaking changes in following packages :

• wcs-core
• wcs-angular
• wcs-formly

To migrate, please refer to the storybook documentation (v2 to v3).

Added

• input: add focus-visible to show which if an input is focused via keyboard
• button: add loading (false by default) to display spinner if the property is equals to true
• radio: add focus-visible to show which if a radio is focused via keyboard
• select: add focus-visible to show which if a select is focused via keyboard
• switch: add focus-visible to show which if a switch is focused via keyboard
• tabs: add focus-visible to show which if a tab is focused via keyboard
• textarea: add focus-visible to show which if a textarea is focused via keyboard
• textarea: add missing properties for Formly templateOptions: autofocus, maxLength, spellcheck...
• input: add focus delegation on the wrapped native input
• nav-item: add focus-visible to show which if a nav-item is focused via keyboard

Changed

• stencil: upgrade to v2.19
• wcs-angular: migrate to angular v13
• wcs-formly: migrate to Formly v6 (see: https://github.com/ngx-formly/ngx-formly/blob/main/UPGRADE-6.0.md)
• accessibility : change cursor to not-allowed while hovering the following disabled elements :
  • button
  • checkbox
  • input
  • radio
  • switch
  • select
  • select-option
  • textarea
• footer: change the behaviour in responsive mode. Now end-left and end-right parts of the footer are organized on column if they have not enough space
• input, textarea, editable-field: change hover border style and width (dashed, 2px). Components keep their previous height
• mat-icon: add the ability to change the URI from which the material icons fonts are loaded by not including them automatically. Your project now need to add the font-face declarations in the global stylesheet of your project. Please refer to the migration guide (v2 to v3)
• input: the setFocus() method in now deprecated in favor of the native focus method
• stenciljs: upgrade to stencil v3
• storybook: upgrade to storybook v7

Fixed

• grid: (front side pagination) when we reload less data than current data, we have to reset current page if it is greater than total of pages
• grid: check if columns are defined before use it
• tooltip: check if tippy instance is defined to avoid exception if not
• tabs: tab index now start at 1 instead of 0 in tab groups. It allow to navigate on the first tab at first instead of the second one
• spinner: stroke size of rotating circle is now equal to dashed fixed circle stroke
• com-nav: accessibility: make com-nav-submenu and com-nav-category focusable and add keyboard navigation to it.
• com-nav, form-field, select, tooltip: fix console error in the disconnectedCallback method (method call on undefined object)
• accessibility: enable to select item with 'Enter' from numeric pad (#84)
  • wcs-radio
  • wcs-com-nav
  • wcs-dropdown
• form-field: suffixed select has always border radius top left and bottom left while it should not have a border-radius on them #56
• nav-item: Added support for keyboard navigation when using routerLink in Angular. Pressing the "enter" key now performs the same action as clicking the item with a mouse.

[2.17.0] - 2022-10-18

Added

• formly-field-tooltip: add interactive in templateOptions
• formly-field-tooltip: add dynamicContent in templateOptions. This will allow to update the tooltip content dynamically (using expressionProperties for instance). Use the default content templateOptions if the tooltip content is static.

Changed

• accordion-header: aligns the header text to the left

Fixed

• dropdown: if the user presses an arrow (up or down) on the keyboard, the browser is prevented from scrolling
• docs: made some corrections on the Framework integration documentation
• checkbox: label does not overlap anymore on very narrow containers
• tooltip: fix tooltip appearance when it is contained into a fullscreen element
• label: changed selector and disposition to inline-block for several lines field label

[2.16.0] - 2022-09-27

Added

• input: add css part for prefix and suffix elements

Fixed

• dropdown: add keyboard navigation support
• button: passes the call of the focus() method on the web component to the inner native button.
• grid: fix pagination to never have a negative current page
• tabs: an error was raised when the component tried to access the tabs if the list of slotted tab was empty (for example when the component is not yet rendered).

[2.15.0] - 2022-09-08

Added

• doc: Add select stories
• formly-field-tooltip: Add possibility to customize the tooltip : content, icon, color, size.

Changed

• grid: add refresh sort when data changes
• doc: migrate angular integration tutorial to storybook
• formly-field-tooltip: please use the new formly templateOptions for tooltip : tooltip: { content: 'string' } instead of tooltip: 'string'

Fixed

• com-nav: close mobile menu overlay if user click on a top level link item
• accordion: Accessibility fixes for keyboard usage, screenreaders (#40)
• select: keeps the select options overlay open if user click on the scrollbar when the overlay is folded up

[2.14.0] - 2022-07-22

Added

• accordion-panel:
  • add hideActionText (false by default, to hide or show the open/close text)
  • add highlight (false by default, to highlight with the primary color when panel is open)
  • add groupContentWithHeader (false by default, to group the content of panel with the header)
• accordion:
  • add hideActionText (false by default, to hide or show all the open/close text in accordion-panel)
  • add highlight (false by default, to highlight with the primary color the current open panel for all accordion-panel)
  • add groupContentWithHeader (false by default, to group the content of panel with the header for all accordion-panel)
• documentation: Framework integrations documentation for React (without bindings for now) and Angular

Changed

• spinner: Change border-mode spinner design to match recent progress bar design updates
• spinner tweaked the animation timing for "growing" spinners
• input password add icon : it is now possible to toggle text visibility from password to text by cliking on eye icon

Fixed

• doc: change the size of the SNCF logo in the navbar demo story
• input: the input prefix icon was not centered vertically
• com-nav: add inner spacing to prevent app name from hugging the left side of the screen on smaller displays
• com-nav: automatically close the mobile menu overlay when user click on a navigation item
• tooltip: add line break if a word exceeds the width of the tooltip
• editable-field: enlarge the spinner to match its previous size

[2.13.0] - 2022-05-24

Added

• wcs-formly: add support for min, max, minlength, maxlength, spellcheck, autofocus, autocorrect, autocomplete, autocapitalize, pattern and inputmode attribute in formly input template options

Changed

• doc: reorganize storybook documentation: split of examples and textual documentation
• button: the inner button or a element now takes the size of the wcs-button (don't forget to check your wcs-button width after update)
• badge: shape attribute wasn't handled by the component. The default shape is no longer rounded, if you want a rounded shape on your badges you must now assign the 'rounded' value on the attribute

Fixed

• tabs: the color of the underline for active tab did not use the --primary css variable
• doc: the custom-elements.json file was no longer used to generate the storybook documentation. Many properties, events and methods were not documented anymore.
• com-nav: the menu overlay on mobile was open by default
• wcs-formly: the formly input was always disabled
• label: the tooltip icon was not well positioned

[2.12.1] - 2022-04-13

Added

• wcs-angular: Add missing proxies for WcsAccordion, WcsAccordionContent, WcsAccordionHeader, WcsAccordionPanel, WcsDropdownDivider, WcsDropdownHeader and WcsGridCustomCell web components

Changed

• ci: Parallelization of publish jobs for npm to be able to restart them in case of error
• ci: Build and publish angular libraries with production configuration

[2.12.0] - 2022-04-12

Added

• input: Add support for file type

Changed

• com-nav: Add mobile styles for communication nav bar.
• core: Remove tslint and migrate to eslint

[2.11.0] - 2022-03-22

Added

• accordion: Add components related to accordions (wcs-accordion, wcs-accordion-panel, wcs-accordion-header , wcs-accordion-content)
• tooltip: Add the "content" property to make integration easier with non-immutable APIs
• modal: Add hideActions property which is false by default (useful when you want to hide the action slot and the associated margin)
• button: Add css variables --wcs-button-min-width and --wcs-button-min-height that can be used to specify any width or height for buttons
• modal: Add css variable --wcs-modal-max-height that can be used to specify a max-height for the modal (default is 80%)

Changed

• versioning: migrate Angular dependencies to superior or equals selector and fix peerDependencies of angular-formly package

Fixed

• modal: Use wcs-mat-icon component instead of material class for button close
• horizontal-stepper: Add a check to ignore a function if the component is not initialized
• docs: add current-step property binding to horizontal-stepper story
• dropdown: fix error in console when noArrow flag is true
• mat-icon: fix icon to be verticaly centered in mat-icon (especially when a wcs-mat-icon is in a wcs-button)
• modal: update css and template to set a max-height and a scroll bar when the modal content takes too much space

[2.10.0] - 2022-02-04

Added

• formly: add styling support for form-field child elements

Fixed

• form-field: fix random infinite loop when wcs-label is considered as form field input

[2.9.0] - 2022-02-03

Added

• modal: add size param

Changed

• radio-group: change radio group height to 40px to fit button size when attribute mode="option"
• formly: change formlySelectOptions pipe to wcsFormlyOptions pipe in select and radio formly component in order to add any options in templateOptions. In this case we add the class option to add css class for select option and radio.

Fixed

• grid-column: event wcsSortChange was trigger twice
• stenciljs: upgrade compiler version to 2.13.0

[2.8.0] - 2022-01-27

Added

• radio-group: add horizontal mode
• wcs-formly: add the tooltip property in templateOptions, it adds a tooltip to the corresponding field's label
• form-field: add a tooltip example in documentation using wcs-mat-icon and wcs-tooltip

Changed

• tooltip: redesign of the tooltip and migrate to tippy.js library. the API of the previous versions remain compatible with the new API which has only added new attributes / methods.
• ⚠ modal: change backdrop property in withoutBackdrop which is false by default (inversion of the condition)

[2.7.0] - 2021-12-14

Added

• dropdown: add overlay placement attribute
• dropdown: add no-arrow attribute to hide the arrow in dropdown button
• angular/formly: add disabled attribute support for field template options
• switch: add disabled attribute
• input: add prefixLabel and suffixLabel attributes

Changed

• dropdown: use PopperJS for dropdown overlay positioning
• form-field: change display: inline-flex to display: flex

Fixed

• dropdown: Fix disabled attribute that did not work
• dropdown: Dropdown overlay closes when click on another dropdown instance
• grid: initial sort order attribute
• input: add disabled styles
• switch: display label if present
• radio checkbox: fix disabled attribute

[2.6.0] - 2021-11-24

Added

• grid: add support for custom cell rendering with slot (wcs-grid-custom-cell)
• grid: add support to hide columns
• doc: migrate existing documentation to storybook

Changed

• stencil: migrate to v2.10.x

Fixed

• Communication Navbar: close navbar when user click on a link (a) slotted element in submenu and category

Removed

• angular schematics: remove Angular schematics support (ng add wcs is no longer supported)

[2.5.1]

Fixed

• wcs-angular: update component proxies to support angular v12 strict template (stenciljs/output-targets#155)

[2.5.0]

Added

• action-bar: add support for tabs
• wcs-angular: add automatic generation of proxy components

Changed

• tabs: match SNCF Design System specifications and add support for headers only mode, add support for gutter

Fixed

• textarea: rename component class to match component selector

[2.4.0]

Added

• horizontal-stepper: Add horizontal stepper component
• progress-bar: Add a CSS variable to change the duration of animations and the border radius
• galactic: Add galactic navigation bar
• galactic-menu: Add menu component for the galactic navigation bar
• com-nav : Add communication navbar and subcomponents (submenu, category)
• footer: Add footer component

Fixed

-mat-icon: change display block to flex for host element

[2.3.0]

Added

• select: Added method to compare options with selected options (by default : deep comparison between object)

Fixed

• editable-field: fix the display of null values, array values (for multiple select) and error states on input and textarea

[2.2.0]

Added

• wcs-select: Added support for the chips attribute to display multi selected values in chips mode
• textarea: Added a method to force the textarea to adopt the content size

Fixed

• editable-field: Fix bad display in fields with several lines of text.
• editable-field: Fix textarea autogrow behaviour
• wcs-tooltip: Id starting by a number is not a valid CCS selector (it has to be escaped). It's a problem if an application use a tooltip on an element with an id starting by a number. We fix this without using CSS selector to find the element.

[2.1.0]

Added

• wcs-editable-field: Added support for the readonly attribute

[2.0.1]

Fixed

• wcs-form-field: Following the update of the form field, an error was thrown if the slotted component was not in a fixed list of supported components. This was a problem for some applications that wrapped the components or created components on their side. This error has been removed, and a warning has been added.

[2.0.0]

Breaking changes

• if you use form-field, the native components "input" and "textarea" are no longer supported. You have to migrate to the new components wcs-input and wcs-textarea (they share the same API as the native ones).
• wcs-field-header component has been renamed to wcs-field-label.

Added

• wcs-editable-field : new component for inline data editing. for the moment the component supports the following components
  • wcs-input
  • wcs-text-area
  • wcs-select
• wcs-input
• wcs-textarea

[0.0.3 - 0.0.6]

Fixed

• Compatibility for firefox < 63
  • Tab
  • Select

[0.0.2]

Changed

• Upgraded to stencil 1.0

[0.0.1]

Added

• Components
  • App shell
    • Header
    • Sidebar
  • Badge
  • Button
  • Card
    • Card body
  • Checkbox
  • Icon
  • Progress bar
  • Progress radial
  • Select
  • Tabs
  • Tooltip
• Styling
  • A few CSS variables
• Examples
  • Angular
  • React (Not yet working)
  • Vue

Changelog template

Added

for new features.

Changed

for changes in existing functionality.

Deprecated

for soon-to-be removed features.

Removed

for now removed features.

Fixed

for any bug fixes.

Security

in case of vulnerabilities.