warning
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
v2.0.0-beta.17 (2025-12-14)
@qtm/angular
🐛 Bug Fixes
- fix(slider): check if
leadprop is defined before creating the slider lead<div> - fix(slider): check handles number before rendering iteration
- fix(textarea): use
valueprop instead of child value - fix(checkbox): properly handle indeterminate status dynamically
- fix(typography): avoid injecting classes in
font*andcomponentproperties - fix(datatable): remove useless
color="neutral"from DatatableNoData inner Typography - fix: let Breadcrumb Item handle the keyboard focus behavior
- fix(multiselect): handle invalid
valueproperty - fix(modal): use new
.qtm-modal-overlay-hiddenclass instead of Tailwind.opacity-0within Modal component logic - fix: avoid events to bubble outside the Dropdown Select and Multiselect components
📝 Documentation
- docs(storybook): use 'settings' icon in icon story instead of 'home'
- docs(storybook): use
ngModelin stories for components usingControlValueAccessor - docs(storybook): link the alert's close button event to the actions tab
- docs(modal): used the outlined info icon for modals header in documentation and Storybook as examples. Make sure this icon is not associated with text utilities to change its color, as it was mistakenly suggested in previous documentation.
🚀 Features
- feat: Dropdown Select and Multiselect have a new
visibleprop - feat: DropdownSelect and Multiselect map their
placementanddisabledprop to their Dropdown props - feat(modal): add
role="dialog"for a11y - feat(dropdown): drop
disabledprop of DropdownTrigger - feat(tag): change inner Tag Button DOM to use
<button> - feat(tooltip): add
role="tooltip"to tooltip container - feat(menu): set MenuItemList's
enableAutoActivetotrueby default - feat(split-button): enhance SplitButton and SplitButtonOption icons to accept more flexible types
- feat(alert): allow Alert action buttons icon to be defined also by an IconProps object
- feat(breadcrumb): apply
.qtm-separator-slashexplicitly - feat(breadcrumb): add
aria-label="breadcrumb"for screen readers - feat(icon): rename
IconTypeintoIconProps - feat(dropdown-select): rename
DropdownSelectOptioninterface toDropdownSelectItemto avoid naming conflicts - feat(slider): set default
valueandanchorPointto theminvalue - feat(deps-dev): bump Stencil from 4.36.3 to 4.37.1
- feat(multiselect): ability to disable individual options
- feat(textarea): rename
TextArea*occurrences toTextarea* - feat(menu-item): rename
MenuItemItemTypetoMenuItemType - feat(deps-dev): bump Stencil from 4.19.1 to 4.36.2
📦 Other
TextArea→TextareaTextAreaSeverity→TextareaSeverityTextAreaSize→TextareaSize
@qtm/css
🐛 Bug Fixes
- fix(dropdown): adapt Dropdown height for React (native) DOM
- fix(progress-bar): apply the correct colors for Firefox
- fix(drawer): remove unused empty
.qtm-drawer-bodyrule - fix(modal): use new
.qtm-modal-overlay-hiddenclass instead of Tailwind.opacity-0within Modal component logic - fix(progress-bar): make indeterminate animation work for Firefox
- fix(icons): correctly render two-tone Material Icons in dark mode
- fix(icon): add specific CSS selector to target React (native) Material icon default size
- fix(ProgressBar): ensure root element uses
display: blockfor consistency across all packages
🚀 Features
- feat(tag): handle Stencil implementation of Tag Button with inner
<button> - feat: synchronized Tabs
@qtm/tokenswith Figma Tokens 1.5.0 and adapted content to the Tabs component. While these changes do not introduce breaking changes, the "medium vertical" variant has been fixed with larger icons, that could impact the rendering of your project.
📦 Other
- For Quantum components library maintainers for other stacks, see how we've integrated this change in
tds-web
@qtm/react
🐛 Bug Fixes
- fix(slider): check if
leadprop is defined before creating the slider lead<div> - fix(slider): check handles number before rendering iteration
- fix(textarea): use
valueprop instead of child value - fix(checkbox): properly handle indeterminate status dynamically
- fix(typography): avoid injecting classes in
font*andcomponentproperties - fix(datatable): remove useless
color="neutral"from DatatableNoData inner Typography - fix: let Breadcrumb Item handle the keyboard focus behavior
- fix(multiselect): handle invalid
valueproperty - fix(modal): use new
.qtm-modal-overlay-hiddenclass instead of Tailwind.opacity-0within Modal component logic - fix: avoid events to bubble outside the Dropdown Select and Multiselect components
📝 Documentation
- docs(storybook): use 'settings' icon in icon story instead of 'home'
- docs(storybook): make placeholder work for text input in Controls panel
- docs(storybook): link the alert's close button event to the actions tab
- docs(modal): used the outlined info icon for modals header in documentation and Storybook as examples. Make sure this icon is not associated with text utilities to change its color, as it was mistakenly suggested in previous documentation.
🚀 Features
- feat: Dropdown Select and Multiselect have a new
visibleprop - feat: DropdownSelect and Multiselect map their
placementanddisabledprop to their Dropdown props - feat(modal): add
role="dialog"for a11y - feat(dropdown): drop
disabledprop of DropdownTrigger - feat(tag): change inner Tag Button DOM to use
<button> - feat(tooltip): add
role="tooltip"to tooltip container - feat(menu): set MenuItemList's
enableAutoActivetotrueby default - feat(split-button): enhance SplitButton and SplitButtonOption icons to accept more flexible types
- feat(alert): allow Alert action buttons icon to be defined also by an IconProps object
- feat(breadcrumb): apply
.qtm-separator-slashexplicitly - feat(breadcrumb): add
aria-label="breadcrumb"for screen readers - feat(icon): rename
IconTypeintoIconProps - feat(dropdown-select): rename
DropdownSelectOptioninterface toDropdownSelectItemto avoid naming conflicts - feat(slider): set default
valueandanchorPointto theminvalue - feat(deps-dev): bump Stencil from 4.36.3 to 4.37.1
- feat(multiselect): ability to disable individual options
- feat(textarea): rename
TextArea*occurrences toTextarea* - feat(menu-item): rename
MenuItemItemTypetoMenuItemType - feat(deps-dev): bump Stencil from 4.19.1 to 4.36.2
📦 Other
TextArea→TextareaTextAreaSeverity→TextareaSeverityTextAreaSize→TextareaSize
@qtm/react2
🐛 Bug Fixes
- fix(menu): add tests in MenuItemList's MenuItem definition for consistency with Stencil implementation
- fix(radio-group): remove
role="radiogroup" - fix(checkbox): remove
<span>surrounding the label - fix(checkbox): properly handle indeterminate status dynamically
- fix(toggle-switch): use a
<span>for the toggle slider instead of<div> - fix(toggle-switch): remove
role="switch" - fix(menu): drop
roles in allMenu*andSubmenu*components - fix(icon): remove
role="img" - fix(grid): remove bad
role="grid" - fix(modal): remove bad
role="separator"onModalDivider - fix(modal): use child
<Icon>for ModalHeader close icon instead ofleftIconButton prop - fix(progress-bar): do not handle non-existing
.qtm-loadingclass - fix(progress-bar): do not handle non-existing
.qtm-loopclass - fix(progress-bar): remove incorrect
aria-labelledbyand inneridfrom Progress Bar label - fix(tab): remove
role="tablist"from Tabs androle="tab"from Tab - fix(tabs): not apply non-existing
.qtm-tab-horizontalclass - fix(tag): remove useless
role="label"from label - fix(slider): drop
isLastSliderMarker prop associated to useless.qtm-lastclass - fix(dropdown): drop useless
.qtm-visibleclass from DropdownOverlay component - fix(checkbox-group): remove
role="group" - fix(drawer): remove
role="menubar" - fix(divider): avoid setting non-existent
.qtm-horizontaland.qtm-roundedclasses - fix(divider): remove bad
role="separator"andaria-orientationuses - fix(datatable): remove useless
role="datatable-no-data"from DatatableNoData - fix(alert): add missing inner
<div>to align with Stencil implementation - fix: switch
enums totypes - fix: let Breadcrumb Item handle the keyboard focus behavior
- fix: render a disabled cursor to the Multiselect and DropdownSelect when disabled
- fix(tabs): add
idto Tab DOM - fix(toggle-switch): avoid applying
defaultCheckedto inner<input>for consistency with other form controls - fix(menu): add
idto SubmenuItem DOM - fix(progress): remove
role="progressbar"from Progress Bar and Progress Circle - fix(dropdown-select): make Dropdown Select actually searchable and make options active when selected
- fix(header): remove useless HeaderDivider
childrenprop handler - fix(tag): remove
role="tag"for consistency with Stencil implementation - fix(alert): remove
role="alert"for consistency with Stencil implementation - fix(alert): don't render right actions
<div>if not dismissible or contains action buttons - fix(toggle-switch): extend interface with
InputHTMLAttributes - fix(slider): drop unused
.qtm-visibleclass - fix(slider): correctly vertically align markers and lead
- fix(multiselect): handle invalid
valueproperty - fix(modal): use new
.qtm-modal-overlay-hiddenclass instead of Tailwind.opacity-0within Modal component logic - fix(menu): render up/down arrow icon in
MenuItemList - fix(split-button): ensure that icons and labels are not rendered when props are not present
- fix(dropdown-select): set 'Select an option' as the default placeholder value
- fix(progress-bar): display percent sign (%) after value
- fix(icon): add specific CSS selector to target React (native) Material icon default size
- fix(menu): remove unused
multiselectableprop fromMenuItemListProps - fix: export
TagButtoncomponent - fix: extend
TextAreaPropsinterface withTextareaHTMLAttributesto support native<textarea>attributes - fix(alert): alert is removed from the DOM after clicking on the close button
📝 Documentation
- docs: uniformize
classesprop description of React (native) components - docs: fix
classesprop description in some cases so that@qtm/css/dist/utilities.cssis well mentioned - docs(storybook): use 'settings' icon in icon story instead of 'home'
- docs(modal): used the outlined info icon for modals header in documentation and Storybook as examples. Make sure this icon is not associated with text utilities to change its color, as it was mistakenly suggested in previous documentation.
- docs: improve documentation generation using react-docgen-typescript
🚀 Features
- feat(dropdown-select): enable passing native HTML attributes by extending prop interfaces and propagating props
- feat(multiselect): enable passing native HTML attributes by extending prop interfaces and propagating props
- feat(text-input): enable passing native HTML attributes by extending prop interfaces and propagating props
- feat(text-input): replace several props and events with an access to the inner
<input>via a newinputPropsprop - feat(textarea): enable passing native HTML attributes by extending prop interfaces and propagating props
- feat(textarea): replace several props and events with an access to the inner
<textarea>via a newtextareaPropsprop - feat(radio-button): replace several props and events with an access to the inner
<input type="radio">via a newinputPropsprop - feat(radio-button): enable passing native HTML attributes by extending prop interfaces and propagating props
- feat(toggle-switch): enable passing native HTML attributes by extending prop interfaces and propagating props
- feat(toggle-switch): replace several props and events with an access to the inner
<input type="checkbox">via a newinputPropsprop - feat(checkbox): replace several props and events with an access to the inner
<input type="checkbox">via a newinputPropsprop - feat(checkbox): enable passing native HTML attributes to Checkbox by extending prop interfaces and propagating props
- feat(slider): enable passing native HTML attributes to Slider by extending prop interfaces and propagating props
- feat(radio): enable passing native HTML attributes to RadioGroup by extending prop interfaces and propagating props
- feat(checkbox): enable passing native HTML attributes to CheckboxGroup by extending prop interfaces and propagating props
- feat(dropdown): enable passing native HTML attributes to DropdownSelectOption by extending prop interfaces and propagating props
- feat(form-caption): enable passing native HTML attributes to FormCaption by extending prop interfaces and propagating props
- feat(formlabel): enable passing native HTML attributes to FormLabel by extending prop interfaces and propagating props
- feat(formfield): enable passing native HTML attributes to FormField by extending prop interfaces and propagating props
- feat(icon): handle possible children the same way as Stencil implementation
- feat: icon props also accepts
stringtype - feat(split-button): enhance SplitButton and SplitButtonOption icons to accept more flexible types
- feat(alert): allow Alert action buttons icon to be defined with the Icon component instead of a string
- feat: enable passing native HTML attributes to all components by extending prop interfaces and propagating props
- feat(dropdown-select): rename
DropdownSelectOptioninterface toDropdownSelectItemto avoid naming conflicts - feat(checkbox): handle children projection with
childrenprop - feat: correctly use boolean instead of strings in both React docs and in React (native) components
- feat(tag): handle children projection with
childrenprop for Tag and Tag Button - feat: drop
BasePropsinterface - feat(progress-bar): change default
showValuetotrue - feat(tag): rename
ButtonPropstoTagButtonPropsand export it - feat(slider): set default
valueandanchorPointto theminvalue - feat: export components types
- feat(tag-button): add
classesprop - feat(textarea): rename
TextArea*occurrences toTextarea* - feat: add DropdownSelectOption children support to DropdownSelect
🛠️ Internal
- test(alert): add unit test for the close button
📦 Other
- Exhaustive list:
BreadcrumbColor,BreadcrumbSeparator,BreadcrumbSize,CheckboxColorType,CheckboxGroupSize,CheckboxSizeType,FormCaptionSize,FormCaptionState,FormLabelSize, andMenuItemListSizeType. <TextArea>→<Textarea>TextArea→TextareaTextAreaProps→TextareaPropsTextAreaSeverity→TextareaSeverityTextAreaSize→TextareaSize- Add support for DropdownSelectOption as children
- Implement getOptionByValue to handle children options
- Add displayName to DropdownSelectOption for identification
- Add functional tests for children API
- Add comprehensive documentation with visual examples
- Add Storybook story demonstrating children API with flags
- Improve documentation
@qtm/tokens
🐛 Bug Fixes
- fix: fixed bluegrey 700 and 750 color values, which had been swapped. While these changes do not introduce breaking changes, it is recommended that projects review their usage of bluegrey 700 and 750 to ensure the adjustments in hexadecimal values do not impact contrast, meaning, design, or visual elements.
- fix: corrected inconsistent camelCase naming in
variables-css.jsto align with other generated files
🚀 Features
- feat: synchronized Tabs
@qtm/tokenswith Figma Tokens 1.5.0 and adapted content to the Tabs component. While these changes do not introduce breaking changes, the "medium vertical" variant has been fixed with larger icons, that could impact the rendering of your project. - feat: add original Quantum Design Tokens JSON files to
@qtm/tokensin ajsondirectory, and enhance the corresponding README - feat: generate tokens for JavaScript ES6 module and TypeScript declarations for ES6 modules