resources

Versions

Here you’ll find a detailed history of updates and changes made to our design system. Each version tracks modifications separately for components, color tokens, and global styles. By referencing past updates, you can understand the evolution of each element and maintain consistency across projects by adopting the appropriate versions of each asset type.

Ripple follows the semantic versioning convention to indicate whether or not a version contains breaking changes.

About Semantic Versioning

Each version number follows the MAJOR.MINOR.PATCH format. Changes to the major version indicate potential incompatibilities with previous versions. For instance, updating from v2.8.0 to v3.0.0 may break existing implementations in your project. In contrast, updates to a new minor version (e.g., from v2.8.0 to v2.9.0) or a new patch version (e.g., from v2.8.0 to v2.8.1) should not cause any disruptions.

An example of semantic versioning showing the major, minor and patch designations
Components Global Styles Color Tokens

Component Versions

v5.5.1

11/26/2024

Fixed

  • Datepicker: The component no longer prevents closing of modal with Escape key.

v5.5.0

11/18/2024

Features

  • Chart: Doughnut2 supports 5 categories

Fixed

  • Datepicker, Date Range: Added a missing accessible name to the calendar buttons.
  • Datepicker, Date Range: Fixed an issue where shift-tabbing could break free of the calendar dropdown's tab trap, when in the month-selection view.
  • Navigator: Fixed an issue where when opening a long Navigator dropdown, the selected option will extend below the fold and not receive focus.

v5.4.0

10/24/2024

Features

  • Navigation: Updated component styles to use new token wmcolor-interactive-background-selected.
  • Tag Input: Updated component styles to use new token wmcolor-interactive-background-highlight.
  • Line Chart: Updated component styles to use new token wmcolor-interactive-background-highlight.

v5.3.1

10/07/2024

Hotfix

Fixed

  • Snackbar: Fixed an issue where snackbar would cover bottom portion of page, blocking pointer events.

v5.3.0

10/03/2024

New component

Features

  • New component: Date Range.
  • Snackbar: Reduced timeout from 20s to 6s. Updated text layout. Added reveal animation. Added support for updating existing notifications.

Fixed

  • Chart: buttons in chart-slice popovers no longer close the popover on activation.
  • Modal: Remove unnecessary overflow rule on the container (should have no incidence).

v5.2.1

09/23/2024

Hotfix

Fixed

  • Progress Monitor: Fixed an issue where Progress Indicators would not properly render in bar form.

v5.2.0

09/12/2024

Features

Fixed

  • Select: Fixed an issue where search Selects with Options containing "<" or ">" would not render Option text properly.

v5.1.1

09/23/2024

Hotfix

Fixed

  • Progress Monitor: Fixed an issue where Progress Indicators would not properly render in bar form.

v5.1.0

08/22/2024

Features

  • Chart: bar3 now handles two or four categories (previously only four)

v5.0.0

08/01/2024

The component library now requires the Ripple tokens. Make sure to load or import the asset before the component library. See the installation tab on the Components Getting Started page for more information.

v4.11.0

08/01/2024

Fixed

  • Action Menu: Fixed initial focus styles in dropdown when using NVDA.
  • Chart: Screen reader now announces values for slices. Fixed rounding error in bar6 x-axis intervals.
  • Tabs: Updated button label when rendered in a narrow width.

v4.10.0

06/20/2024

Features

Fixed

  • Datepicker, Input, Select, Textarea, Timepicker: Ensure screen reader validation error-message announcements are not interrupted by focus of new elements.
  • Uploader: Screen readers now announce errors for individual files (e.g. file type is not accepted) and global errors (e.g. “selected files exceed maximum number of files allowed”).
  • Tag Input: Screen readers now announce when the tag limit is reached, and include tag count information on component focus.

v4.9.0

05/30/2024

Fixed

  • Allow dynamic imports (for lazy loading components).
  • Action Menu: Correct style for disabled menuitems.
  • Chart: Doughnut charts no longer show the "small values" warning for 0 values.
  • Select: Correct alignment of Option's subinfo when spanning multiple lines.

v4.8.1

05/14/2024

Hotfix

Fixed

  • Progress Monitor: Fix an issue introduced in v4.8.0 making the component always display in bar mode.

v4.8.0

05/09/2024

New component

Features

Fixed

  • Chart: Fix issues with resizing (missing values when inside Tabs).
  • Chart: Fix erroneous display of info message in PDF.

v4.7.0

04/18/2024

Features

Fixed

  • Tag Input: Fix an issue with the highlighting of duplicate tags.
  • Search: Do not show 'No results found' when input is empty.
  • Multiselect: The separator is no longer shown at the bottom of the list when all options are selected.

v4.6.0

03/28/2024

Fixed

  • Datepicker: Fixed an issue in Firefox where selecting dates multiple times with the mouse would not update the value.
  • Modal: Focus is now properly returned to Action Menu when Modal is closed.
  • Modal: Trap focus is now limited to the modal element (does not loop through browser chrome).
  • Modal: wmModalCloseTriggered event is not emitted on escape key press.
  • Tabs: Fixed an issue where Tabslist is not resizing properly within modal.
  • Button: Fixed an issue where focus indicator would show for mouse users in some cases.

v4.5.0

03/07/2024

Fixed

  • New focus indicator with improved accessibility.
  • Chart & Progress Indicator: Slices now have a minimum width of 5px for bars and 7 degrees for doughnuts.
  • Chart & Progress Indicator: Clicking legend items now open the popover for their corresponding slice.
  • Chart & Progress Indicator: Opacity changes when slices are focused, or popovers are opened.
  • Chart & Progress Indicator: Added properties print-mode and print-mode-format.
  • Select: Re-selecting currently selected option in single select now emits the proper event (selected instead of deeselected).

v4.4.0

02/14/2024

Fixed

v4.3.0

01/25/2024

Fixed

  • Line Chart: Fixed an issue where Line Chart would become unresponsive when switching data while popover is visible.

v4.2.0

01/04/2024

Fixed

  • Modal: Fixed modal not inheriting text color.

v4.1.0

12/07/2023

Fixed

  • Action Menu, Select: Pressing the Space key will select the focused option, but if an option is currently being searched for it will be treated as part of the search.
  • Modal: Fixed unselectable Modal text.
  • Chart: Update logic for hiding overlapping bar chart values.

v4.0.0

11/16/2023

Breaking Changes

Now introducing stateless components! Please see our upgrade guide for more information.

v3.38.0

01/04/2024

Fixed

  • Modal: Fixed modal not inheriting text color.

v3.37.0

12/07/2023

Fixed

  • Modal: Fixed NVDA not reading Modal button names.

v3.36.1

01/04/2024

Fixed

  • Modal: Fixed NVDA not reading Modal button labels.

v3.36.0

11/16/2023

Fixed

  • Select: Fixed Options with subinfo not respecting search query.
  • Uploader: Removed the maximum file-size limit.

v3.35.0

10/26/2023

Fixed

  • Action Menu: Fixing screen readers not reading menuitems in Chrome.

v3.34.0

09/14/2023

Features

  • Introducing Neutral theme (Faculty Success only). See usage tab on the Components Getting Started page.

Fixed

  • Select: Fixing Voiceover reading incorrect selected state on Options.

v3.33.0

08/24/2023

Fixed

v3.32.0

08/03/2023

Features

  • Pagination: Responsiveness is now based on component width instead of browser width.

Fixed

  • Tag Input: Pasting a value including commas now adds those as a series of tags instead of a single tag.

v3.31.0

07/13/2023

Features

  • Button: Added property is-submit to enable form submission.
  • Input: Added property is-submit to enable form submission.

Fixed

  • Chart: Bar 6 and bar 7 charts now render even if all provided values are 0.
  • Chart: Hidden values message no longer appears for two adjacent values of 0.
  • Line Chart: Removed extra right-hand space for some charts displayed at reduced widths.

v3.30.0

06/22/2023

Features

  • Chart: Added label-position property.

Fixed

  • Button: Fixed an issue when primary and secondary button width could too small to fit the button content.
  • Button: Fixed an issue where button icons were incorrectly mentioned in Voiceover.
  • Chart: Fixed alignment for bar2 label.
  • Tag Input: Adjusted the input field's max-height when contained within a wm-modal.

v3.29.0

06/08/2023

New component

Features

Fixed

  • Tag Input: Fixed an issue for table variant, where tooltip would not disappear on mouse exit.

v3.28.0

05/11/2023

Fixed

  • Search: Fixed a screen reader issue where stale result counts were announced.

v3.27.1

04/25/2023

Features

  • Tag Input: Added a maximum height of 200px to the input area.

v3.27.0

04/20/2023

Features

  • All tooltips now appear above any other element on the page, and break out of containing element with overflow rules.
  • Icons: Various icon sizes throughout components have been slightly increased to meet specs.

Fixed

  • Snackbar: Fixed an issue where screen readers would not announce repeated snacks.

v3.26.1

04/13/2023

Hotfix

Fixed

  • Tag input: Fixes an issue where wrong rows would get in focus when using keyboard and user had typed in the input to filter the rows.

v3.26.0

03/30/2023

Features

  • Chart: New "conditionally met" status for bar2.
  • Input: New properties input-width, symbol-before, symbol-after, text-after.
  • Tag Input: Tag Inputs have been given a maximum height of 80vh. See the Notes tab for more information.

Fixed

  • Tag Input: Tags that are too long for the component are now handled. Long tags in the selected tag area are truncated, long tags in the dropdown wrap.
  • Tag Input: Fixed an issue where left and right arrow keys could not be used to move the input cursor.
  • Button: Non-textonly buttons now only break words at spaces, instead of anywhere.

v3.25.1

03/10/2023

Hotfix

Fixed

  • The package was distributed with added sourcemap files in v3.24.0 and v3.25.0 after a dependency update. These new files caused issues with the webpack configuration of some products. This patch removes the sourcemap files.

v3.25.0

03/09/2023

Features

  • Tag Input: Added properties message-config, required-field and error-message.

Fixed

v3.24.1

02/23/2023

Fixed

  • Datepicker: Fixed an issue where changing the date to an equivalent date (i.e 01/02/2023 to 1/2/23) would result in the component holding an unformatted value.

v3.24.0

02/16/2023

Features

  • Modal: Implemented focus method.

Fixed

  • FileList, Uploader: Fixed an issue where Typescript was not recognizing onWmFileDelete and others as valid events.
  • Uploader: Better focus handling after file deletion.

v3.23.0

01/26/2023

Features

  • Chart: Added chart-types bar6 and bar7.
  • Uploader: Added properties label, required-field, and error-message.
  • Uploader: Handle error for uploading multiple of the same file at once.

Fixed

  • Chart: Screen reader accessibility fixes.
  • Tabs: Fix issue where Tab Panel could incorrectly receive focus.
  • Tag Input: Fix locked rows of table variant incorrectly having hover styles.

v3.22.0

01/05/2023

Features

Fixed

  • Search: Fix screen reader accessibility issue.

v3.21.0

12/15/2022

Features

Fixed

v3.20.0

11/22/2022

New component Deprecation

Features

  • New Component: File List.
  • Chart: Doughnut charts now display slices in descending order.
  • Chart: Type doughnut2 now allows for a 4th slice.

Deprecated

  • Tabs: Deprecated the controller-enabled property and related functionality.

v3.19.0

11/03/2022

Fixed

  • Select: Fixed an issue where when navigating by keyboard, sometimes options would not scroll into view.
  • Toggletip: Fixed an issue where, when within a table header, toggletip contents would be heard when navigating cells in the same column.

v3.18.0

10/13/2022

Features

Fixed

  • Select: Jumping to options by using characters now works with uppercase characters.
  • Tag Input: Long placeholders no longer overflow from the input field.
  • Tag Input: Added screen reader announcement for when a search returns no results.
  • Tag Input: Fixed an issue in Firefox where table cells were not displaying tooltips despite being truncated.
  • Tooltips: Single word tooltips no longer have a max width, and will not overflow beyond the tooltip area.
  • Input, Datepicker, Timepicker: No longer displays browser's default "required field" tooltip when hovered over.

v3.17.0

09/22/2022

Features

Fixed

  • Tabs: Fixed the color contrast of dark mode focus rings.
  • Tag Input Table: Removed reference to character-limit from screen reader label.
  • Tooltips: Fixed an issue where revealing a button tooltip then revealing a non-button tooltip (Uploader, Tag Input Table) would cause them to become incorrectly positioned.

v3.16.0

09/01/2022

Features

v3.15.0

08/11/2022

Features

  • Button: Added properties icon-rotate and icon-flip.

Fixed

  • Uploader: No longer shows an error if loaded in with maximum files already reached. Maximum files reached error only shows after the upload button is activated.
  • Action Menu: Removed unnecessary console error, previously printed when component was loaded without wm-menuitem children.

v3.14.1

08/03/2022

Hotfix

Fixed

  • Select: replace change event by wmSelectChanged and include necessary information in event.detail. See here for more information.

v3.14.0

07/21/2022

Fixed

  • Select: Fix a Voiceover issue in Search variant where options are read letter by letter.
  • Uploader: Fix an issue where "Maximum file size" text is not shown for 100Mb.
  • Select: The Search variant's search field no longer scrolls with the dropdown options, and dropdown maximum height is increased.

v3.13.0

06/30/2022

Features

Fixed

  • Button: Fix an issue with tooltip placement when content is dynamically added to the page.
  • Uploader: Update styles.
  • Modal: info-text is now announced by screen readers.

v3.12.0

06/09/2022

Features

  • Uploader: Added "Clear" button to file errors.

v3.11.1

05/20/2022

Hotfix

Fixed

  • Button: Fix an issue where tooltip would sometimes not disappear immediately when scrolling.

v3.11.0

05/19/2022

Deprecation

Features

Fixed

  • Modal: Fix an issue with trap focus logic.

Deprecated

  • Uploader: Deprecated uploader-types and wm-network-uploader.

v3.10.0

04/28/2022

Fixed

v3.9.1

04/14/2022

Hotfix

Fixed

  • Button: Fix textonly button background color on hover (bug introduced in v3.9.0).

v3.9.0

04/07/2022

New component

Features

Fixed

  • Uploader: Fix return focus after user selects files to upload.
  • Chart: Screen readers now announce subinfo.

v3.8.2

03/23/2022

Hotfix

v3.8.1

03/17/2022

Hotfix

Fixed

  • Navigation: Fix an issue with hamburger size when hidden.
  • Navigation: Panel now closes when an item is clicked.

v3.8.0

03/10/2022

New component

Features

  • New Component: Navigation.
  • Chart: Popover related props can now be retrieved as properties instead of attributes.
  • Tag Input: Implemented focus method.

Fixed

  • Datepicker: Fix blur event not emitting properly.
  • Chart: Fix bar chart amounts sometimes becoming misaligned.
  • Modal: Where modals are nested, fix child closing parent on escape press.
  • Timepicker: Fix blur event not emitting properly.

v3.7.0

02/17/2022

Features

  • Button: Added new types pairpositive and pairnegative.
  • Datepicker: Implemented focus method.

Fixed

  • Chart: Fix Voiceover issue related to unlabelled doughnut slices.
  • Input: Fix an issue where Input was validating when clearing error messages.
  • Tabs: Fix an issue where some keyboard shortcuts would not work in tabs.

v3.6.0

01/27/2022

Fixed

  • Chart: Fixed pointer cursors for interactive elements.
  • Tag Input: Label now includes character count information for screen readers.

v3.5.2

01/13/2022

Hotfix

Fixed

  • Timepicker, Select, Action Menu: Fix click behavior in dropdown (issue introduced in v3.3.0). There was still an issue with the scrollbars in the previous hotfix.

v3.5.1

01/12/2022

Hotfix

Fixed

v3.5.0

01/06/2022

Fixed

  • Chart: Documentation and examples improvements.
  • Chart: Bar properly resizes when viewport width changes.
  • Chart: Hybrid chart completion color update.

v3.4.0

12/16/2021

Fixed

  • Chart: Fix Hybrid completion message alignment.
  • Datepicker: Dropdown now closes when it loses focus.
  • Input: Inputs now include character limit information in the screen reader label.
  • Select: Fix the width of the component when label is on the left.

v3.3.2

12/9/2021

Fixed

  • Datepicker: When a date is initially set, opens at that date rather than today's.

v3.3.1

11/24/2021

Fixed

  • Action Menu: Fix an issue where dropdown would close immediately after being open in certain circumstances.

v3.3.0

11/23/2021

Features

  • Tag Input: Space between words reflects actual number of space characters (remove space collapsing)
  • Datepicker: Emits change event when the user commits a value change.

Fixed

  • Button: Fixed text font.
  • Datepicker: Doesn't emit blur event when the pop-up window closes if the component is still in focus.
  • Chart: Bar chart widths now adjust properly when resizing the window.
  • Select, Action Menu: Blur event now fires when leaving the component with the dropdown open.
  • Select, Action Menu, Timepicker: Dropdowns now close on component blur.
  • Input: Character count is now accurate on initial load.

v3.2.0

11/04/2021

Features

  • Button: Tooltips are now centered when unable to fit on either side.
  • Snackbar: Added the ability to specify a link as opening in a new window, see notifications property.

Fixed

  • Button, Modal: Fixed an issue where tooltips would display for mouse users on programmatic focus.
  • Datepicker: wmDatepickerValidValue has up-to-date target.value.
  • Tag Input: Fixed an issue where non-whitespace characters were accepted as valid tags.
  • Tag Input: Fixed an issue in Safari and Voiceover where the number of tags was not read properly.

v3.1.3

10/05/2021

Fixed

  • Button: Fix issue where tooltip would show for mouse users when button was focused programatically.

v3.1.2

10/14/2021

Deprecation

Features

  • Datepicker: Added the event wmDatepickerNewValidValue.
  • Input: Added the event wmInputValueChanged.
  • Input: Added number inputs, see property type.
  • Search: Added the event wmSearchValueChanged.

Fixed

  • Datepicker: Fixed an issue where the Datepicker's input event was fired twice when selecting a date from the dropdown.
  • Tag Input: Fine-tuned the dropdown opening direction detection.
  • Button: Tooltips always display on top of other elements on the page.

Deprecated

  • Action Menu: Property button-type has been deprecated in favor of action-menu-type.
  • Button: Property button-style has been deprecated in favor of button-type.
  • Chart: Property show-values has been deprecated in favor of value-format.
  • Modal: Property is-open has been deprecated in favor of open.
  • Modal: Property is-type-dialog has been deprecated in favor of modal-type.
  • Modal: Event wmCloseTriggered has been deprecated in favor of wmModalCloseTriggered.
  • Modal: Event wmPrimaryTriggered has been deprecated in favor of wmModalPrimaryTriggered.
  • Modal: Event wmSecondaryTriggered has been deprecated in favor of wmModalSecondaryTriggered.
  • Pagination: Event pageClicked has been deprecated in favor of wmPaginationPageClicked.
  • Search: Event wmBrowseSearchResults has been deprecated in favor of wmSearchBrowseResults.
  • Select: Event wmComponentBlurred has been deprecated in favor of wmSelectBlurred.
  • Snackbar: Event userFinishedSnack has been deprecated in favor of wmSnackbarSnackFinished.
  • Snackbar: Event userTriggeredAction has been deprecated in favor of wmSnackbarActionTriggered.
  • Tabs: Event tabSelected has been deprecated in favor of wmTabSelected.
  • Timepicker: Property wmTimepickerOnChange has been deprecated in favor of wmTimepickerNewValidValue.
  • Toggletip: Property tooltip-text has been deprecated in favor of tooltip.
  • Uploader: Property type has been deprecated in favor of uploader-type.
  • Uploader: Event wmFilesSelected has been deprecated in favor of wmUploaderFilesSelected.
  • Uploader: Event wmDeleteFile has been deprecated in favor of wmUploaderDeleteFile.
  • Uploader: Event wmDownloadFile has been deprecated in favor of wmUploaderDownloadFile.

v3.0.1

09/23/2021

Please note, due to a glitch this new major version is released as 3.0.1. There is no v3.0.0.

Features

  • The component library is now available on npm (@watermarkinsights/ripple). Installation instructions are here
  • Tag Input: Added the max-tags property.

v2.33.1

10/05/2021

Fixed

  • Datepicker: value property is set to user input when validation fails. Attribute doesn't reflect property anymore.

Versions below were published in the old repository (administrator/wm-components)

v2.33.0

09/02/2021

Features

  • Datepicker, Input, Timepicker: Added the prevent-validation property.
  • Action Menu: Component detects automatically where to open dropdown (position property is now useless). Added new tooltip-position property.

Fixed

  • Input: Fixed Input custom id support.
  • Tag Input: Fixed an issue where removing the last tag while using NVDA in Chrome would not assign focus properly.
  • Button: Tooltip position will adjust if there is not enough room at the specified position.

v2.32.0

08/12/2021

Features

  • Input: Added character count functionality via the characterLimit property.

Fixed

  • Tabs: Fixed an issue causing the component to throw an error in certain cases.
  • Tag Input: Fixed an issue where dropdown items were improperly sorted (case sensitive)
  • Tag Input: Fixed an issue where duplicate tags with different casing could be added (e.g. "APPLE" and "apple")
  • Timepicker: Fixed an issue where custom error messages were getting cleared on blur.
  • Fixed an issue in Firefox where in some instances NVDA announcements were only partially read.
  • Tag Input: Removed automatic title-casing of dropdown items and added tags.

v2.31.1

08/05/2021

Fixed

  • Navigator: Updated styling to allow for differently sized product icons.

v2.31.0

07/22/2021

Fixed

  • Tag Input: Screen reader "n existing options" announcement made accurate.
  • Tag Input: Deleting the last tag via keyboard now redirects focus to the input.
  • Tag Input: Typing while hitting the character limit will now repeatedly warn the user via screen reader.
  • Tag Input: Input field now takes up remaining width available.
  • Input: Error message is now announced by screen readers on component focus.
  • Modal: Fix an issue where focus would go to info text on primary button activation.

v2.30.0

07/01/2021

New component

Features

Fixed

v2.29.0

06/10/2021

New component Deprecation

Features

Fixed

  • Datepicker: Updating value prop now reflects in input.

Deprecated

  • Autogenerated tooltips: Buttons no longer autogenerate tooltips for common icons.

v2.28.1

08/09/2021

Fixed

  • Navigator: Updated styling to allow for differently sized product icons.

v2.28.0

05/20/2021

Features

Fixed

  • Select: Fix cursor type when component is disabled.
  • Accessibility improvements in Action Menu, Button, Chart, Datepicker, Select and Timepicker.

v2.27.1

05/03/2021

Fixed

  • Datepicker: Fix keyboard accessibility on month panel.

v2.27.0

04/29/2021

New component Deprecation

Features

  • New Component: Toggletip.
  • Uploader: Network Uploader timestamp time now formats according to the user's language (12hr v 24hr)
  • Uploader: Network Uploader now emits new event wmNetworkUploaderFilesChanged.

Deprecated

  • Autogenerated labels: Button will stop autogenerating labels for common icons in version 2.29.0.

v2.26.0

04/8/2021

Fixed

  • Datepicker: Fix issue where calendar opens on escape key.
  • Modal: The wmCloseTriggered event is now emitted by the wm-modal element.
  • Navigator: Navigator now accepts camelCase product keys in addition to snake_case.
  • Select: Option text is no longer user-selectable.
  • Select, Tabs: Handle the focus method.

v2.25.0

03/18/2021

Deprecation

Features

  • Action Menu: Handles the focus method.
  • Chart: Doughnut slices that make up less than 1% of the chart are labelled accordingly.

Fixed

  • Chart: Fix an issue where chart-slice onclick functions would run on click of the svg element (instead of just the popover button)
  • Datepicker: Fix an issue where the required field error was shown prematurely in one instance.
  • Modal: Properly returns focus to Action Menu on close.
  • Navigator: product prop includes icon url (v2.23.3 hotfix)

Deprecated

  • Chart: The chart-slice onclick as a means to provide functionality to the popover button has been deprecated. A replacement event wmChartPopoverButtonTriggered is added.

v2.24.2

03/18/2021

Fixed

  • Navigator: product prop includes icon url (v2.23.3 hotfix)

v2.24.1

03/12/2021

Fixed

  • Tabs: Fix an issue with the breakpoint (tabs were displayed as dropdown too early)

v2.24.0

02/25/2021

Removed Props

Fixed

  • Action Menu, Select: Fix an issue where disabled Menu Items / Options would still run onclick functions.
  • Chart: Update bar3 font weight.
  • Datepicker: Errors now clear for empty optional fields.
  • Datepicker: Displays error when required fields are left empty.
  • Tabs: Fix an issue where Tab was not entering dropdown mode when within Modal.
  • Select: Multiselect variant now displays "All selected" when all options are selected.
  • Select: Fix an issue where React wrappers were not displaying Multiselect checkboxes.
  • Modal: Fix an accessibility issue where modals would have a tabindex when hidden.
  • Navigator: The dropdown has a maximum height (and scrolls if there are additional items)

Removed

  • The following deprecated props were removed: label-for-buttons-with-identical-tooltip (in Button) and base-logout-uri (in Navigator)

v2.23.3

03/17/2021

Fixed

v2.23.2

02/12/2021

Fixed

v2.23.1

02/09/2021

Fixed

  • Navigator: Do not append connection-name in endpoint mode.

v2.23.0

02/04/2021

New component

Features

Fixed

  • Select: Displays an error when an error message is passed.

v2.22.1

01/29/2021

Fixed

  • Navigator: Handles unknown ids. Supports 2 new product ids in prop mode (c1 and system_admin)

v2.22.0

01/14/2021

Features

  • Select: Add new component variant, multiple.

Fixed

  • Action Menu: Fix an animation issue when opening upwards.
  • Button: Fix an issue where navigational button icons would sometimes not respond to icon-size property.
  • Button: Update disabled color for text-only buttons.
  • Navigator: Match menu positioning when opening right versus left.
  • Tabs: Fix an issue where dropdowns would remain open within tab panels when Tab is in responsive view.

v2.21.2

02/03/2021

Hotfix

Fixed

  • Navigator: Handles unknown ids. Supports 2 new product ids in prop mode (c1 and system_admin) [same as v2.22.1]

v2.21.1

01/12/2021

Hotfix
  • Action Menu: Fix an issue where the component would add extra space underneath.

v2.21.0

12/17/2020

Fixed

  • Select: Fix a screen reader issue with expanded state and number of options.
  • Datepicker: Fix incorrect reformatting when user types 3 digits for month.
  • Uploader: Component now handles file validation regardless of the case of the file name.
  • Tabs: Fix an issue where component would prevent action menu within tab panel from closing on tab change.

v2.20.3

01/06/2021

Hotfix

Fixed

  • Action Menu: Fix an issue where the component would add extra space underneath.

v2.20.2

12/11/2020

Hotfix

Fixed

  • Navigator: New mode to get data from endpoint rather than props.

v2.20.1

12/09/2020

Hotfix

Fixed

v2.20.0

12/03/2020

Changes

  • Select: Update dropdown scrollbar behavior when navigating by keyboard.
  • Datepicker: Add multi-line support for left-aligned labels.
  • Improved support for internationalization.

v2.19.2

12/01/2020

Hotfix

Fixed

  • Navigator: Fix sso redirect url (connection_name parameter)

v2.19.1

11/20/2020

Hotfix

Fixed

v2.19.0

11/12/2020

Features

  • Uploader: Add rejected-files property for ability to display server-side errors.

Fixed

  • Navigator: Detects open direction on open instead of on load.
  • Chart: Fix bars showing values from disappearing while rerendered and focused.
  • Datepicker: Update label height / margin to meet 4-point spacing guidelines.
  • Datepicker: Now opens up if there is not enough space below.
  • Datepicker: Add red border for error state and fix label position when error is displayed.
  • Action Menu: Clicking button when menu is expanded now closes the menu.
  • Action Menu: Now opens up if there is not enough space below.

v2.18.0

10/22/2020

Fixed

  • Navigator: logout-url property replaces base-logout-uri.
  • Select: Dropdown now opens up if there is not enough space below.
  • Uploader: Type validation now based on file extension (with fallback on MIME type). More descriptive error message. Layout improvements.
  • Chart: Add onclick function capability on wm-chart-slice. Fix an issue where warning message would overlap.
  • Modal: Add missing footer hairline.
  • Button: Fix misalignment between icon and text when icon is larger.
  • Search: Fix overlap when input string is longer than the box.

v2.17.1

10/08/2020

Fixed

  • Chart: Fix subinfo display and remove info message intended for doughnut chart from bar chart.
  • Modal: Make footer separator visible again.

v2.17.0

10/01/2020

Fixed

  • Button, Search: Programmatic focus (it is now possible to call .focus() on the custom element itself)
  • Chart: Fix the percentage display for the doughnut charts when small values are close to one another.
  • Chart: Reduce gap between label and legend for bar chart, and fix other spacing inconsistencies.

v2.16.0

09/10/2020

Fixed

  • Datepicker, Select: Fix cursor for clickable and disabled items.
  • Button: Add new tooltip positions. Value "left" renamed "bottom-left" (the "left" value now places the tooltip on the left side, vertically centered)
  • Tabs: Update inactive tab text color.
  • Uploader: Fix text wrapping on button, fix unit in file size error message.
  • Navigator: Fix tabbing navigation.
  • Chart: fix display on bar 4 when displaying values.

v2.15.6

08/20/2020

Features

  • Chart: New doughnut type (doughnut3)

Fixed

  • Chart: Accessibility fix (popover title doesn't repeat segment info)

v2.15.5

07/31/2020

Hotfix

Fixed

  • Fixes a bug in Tabs where the active state of the tab item scaled down and resulted in the edge of the tab not being activated on click.

v2.15.4

07/30/2020

Hotfix

Fixed

  • Fixes a bug in Action Menu triggering a console error.

v2.15.3

07/28/2020

Fixed

  • Uploader: Add missing tabbing focus style.
  • Select: Fix subinfo text wrapping.
  • Chart: Add programmatic focus capability.
  • Modal: Reposition close button tooltip to lefthand side.
  • Action Menu: Reposition tooltip next to button, above dropdown.

v2.15.2

07/08/2020

Fixed

v2.15.1

06/26/2020

Features

Fixed

  • Search: Fix the previous button label for search and find (it erroneously announced "next" instead of "previous")
  • Search: Invert previous and next buttons.
  • Search: Buttons are disabled when there's only one result.

v2.15.0

06/25/2020

New component

Features

Fixed

  • Tabs: fix issue with accessiblity focus style when component is focused programmatically

Update

  • Tabs: update spacing between tabs and add prop to customize it.

v2.14.2

06/22/2020

Hotfix

Fixed

  • Updated smartcatalog identifier in navigator. smart catalog was not showing in menu due to a change of id.

v2.14.0

05/20/2020

Features

  • The component library can now be used as react components

Fixed

  • Navigator button closes menu if menu is open Pointer on clickable menu items

v2.13.2

05/19/2020

Change

  • Added missing Spanish transations

Fixed

  • Navigator: Fixed the taskstream logo and spacing in menu

v2.13.0

05/06/2020

Fixed

  • From this version on, the library distribution is available from the repo wm-components (used to be wm-dist). The code is in the dist directory.

v2.12.15

05/04/2020

Fixed

  • Input tooltip shows translated date format

v2.12.14

04/28/2020

Update

  • Added Spanish language

v2.12.12

04/23/2020

Fixed

  • Pagination: Fix tabbing focus indicator on the pagination components for smaller screens

v2.12.10

04/20/2020

Fixed

  • Uploader: fix a bug where component didn't consider file with progress of 0 as uploading

v2.12.9

04/16/2020

Deprecation

Fixed

v2.12.8

04/01/2020

Fixed

v2.12.7

03/31/2020

Fixed

  • Uploader: Disabled styles were not applied on the button (bug introduced in 2.12.3)
  • Uploader: In certain cases with Firefox on Windows the component doesn't get the file type. The component now accepts files with missing MIME type (better to accept an invalid file, which will be refused by the server, than to prevent upload of a valid file)

v2.12.3

03/27/2020

Fixed

  • Uploader: Upload button style fixes.
  • Uploader: Control buttons container size when filename is long.
  • Uploader: Namespacing issue causing wrong uploader to upload files when several are rendered on the same page (in Edge)

v2.12.2

03/26/2020

Fixed

  • Uploader: The button width fix from the previous patch resulted in extremely wide buttons in the uploader where there was an empty state. This resolves that issue.

v2.12.1

03/25/2020

Fixed

  • Datepicker: invalid state is now exposed (class .invalid on thecomponent). This can be used for instance to conditionally disable form validation.
  • Button width fix

v2.12.0

03/21/2020

New component

Features

v2.11.2

03/21/2020

Fixed

  • Buttons spacing to reflect new UI specs

v2.11.0

02/18/2020

Fixed

  • Introduces modes and product-specific styles

Fixed

  • Datepicker only accepts 2 or 4 digits for years

v2.10.0

02/18/2020

New component

Features

v2.9.6

02/12/2020

Deprecation

Features

  • Button: Introduces labelForIdenticalButtons prop so that an aria-label with more informative text can be set on any button

Deprecated

  • Button: Prop labelForIdenticalButtons deprecates labelForButtonsWithIdenticalTooltip. This props is still supported but with deprecation warning.

v2.9.5

02/03/2020

Fixed

  • Chart: style fixes for chart component

v2.9.4

01/28/2020

Fixed

  • Button: Fix broken transition on button hover

v2.9.3

01/23/2020

Fixed

  • Chart: Fix an issue where chart popover would not close on scroll in certain conditions

v2.9.2

01/09/2020

Fixed

  • Chart: Fix focus style for keyboard users
  • Chart: Bar chart hides legend item when amount is 0 and text is not provided (to support case where options have been removed by user)

v2.9.1

01/03/2020

Fixed

  • Select: Fix a styling issue in Select component with disabled and selected options

v2.9.0

12/19/2019

New component

Features

v2.8.3

12/19/2019

Features

  • Add show-legend prop to chart component

v2.8.2

12/05/2019

Fixed

  • Width of bar chart types 2 and 3 is now 100% of container width
  • No more gap between the parts of the bar chart
  • Fixed bug where doughnut chart hidden label would show a hairline

v2.8.1

11/20/2019

Fixed

  • Removed fixed height on snackbar to accommodate longer messages
  • Fixed screenreader repeating snackbar announcements

v2.8.0

11/12/2019

New component

Features

v2.7.9

10/23/2019

Fixed

  • Modal: emits third event in case secondary button and close buttons have discrete actions

v2.7.8

10/22/2019

Fixed

  • Select: accepts error messages for the screen reader to announce. Select emits custom event on blur for app validation.

v2.7.7

10/18/2019

Fixed

  • Modal: accommodates focusing a footer button on opening, with new requirements to pass an id and set an id on the modal body. Prop idToFocus changed to elementToFocus

v2.7.6

10/15/2019

Fixed

  • Button: Dynamic icon change in icononly buttons for Firefox and Edge

v2.7.5

10/11/2019

Fixed

  • Modal: Primary action button in modal does not automatically close modal

v2.7.4

10/10/2019

Fixed

  • Button: Fix bug in button where long strings would overflow the container instead of wrapping

v2.7.3

10/09/2019

Fixed

  • Select: Added aria-labelledby and aria-hidden attributes to select listbox to resolve Axe errors

v2.7.2

10/09/2019

Property removed

Features

  • Action, Button: New prop in Button and Action menu components allows the tooltip text and the aria-label text to be different, to give more contextual information when several component on the same page share the same tooltip (e.g. "edit", "delete")

Removed

  • Button: Removed deprecated icon-label prop in the button component

v2.7.1

10/05/2019

Fixed

  • Library bundling optimization.

v2.7.0

9/27/2019

New component

Features

v2.6.5

9/26/2019

Fixed

v2.6.4

9/23/2019

Fixed

  • Button: Fix an issue in Elm where a disabled button would fire the onclick event

v2.6.3

9/17/2019

Features

  • Button: Added styles for dark background

v2.6.2

9/16/2019

Fixed

  • Snackbar: Style fix for snackbar spacing in Chrome

v2.6.1

9/10/2019

Fixed

  • Pagination: Mobile button on pagination component not emitting correct data with event

v2.6.0

9/9/2019

New component

Features

v2.5.0

9/5/2019

New component

Features

v2.4.9

8/20/2019

Fixed

  • Button: disabled styles fixed (for types permanentlyDelete and navigational)

v2.4.8

8/19/2019

Fixed

  • Button: Text-only button has now left-aligned text.

v2.4.7

8/14/2019

Features

  • Button: New text-wrap property (for text-only buttons)

Fixed

  • Button: icon-size property now takes CSS value (instead of strings "big" and "small")

v2.4.6

8/13/2019

Features

  • Action Menu: New tooltip prop that is required when the button type is "icon"

v2.4.5

8/13/2019

Fixed

  • Action Menu: Menuitem displays focus style on load if menu re-renders and user is tabbing

v2.4.4

8/9/2019

Fixed

  • Datepicker: component automatically scrolls when calendar popup falls below the fold of a container

v2.4.3

8/1/2019

Fixed

  • Datepicker: displays error messages when external validations are run on blur
  • Datepicker: calendar has responsive positioning left and right

v2.4.2

7/29/2019

Fixed

v2.4.1

7/26/2019

Fixed

  • Datepicker: Fixed focus style when using keyboard in datepicker panel
  • Select: Fixed the way screen readers announce the select component
  • Select: Fixed the focus style on button in select component after selecting an option (when user is tabbing)

v2.4.0

7/8/2019

Breaking Changes Deprecation

Features

  • Select: Now includes the label. The label attribute is required.

Fixed

  • Datepicker: Fixed a bug in the datepicker (tabbing out of the component was not working as expected in some cases)
  • Datepicker: Prop input-required renamed required-field for consistency.

Deprecated

  • Select: select-type prop is deprecated.

v2.3.3

7/8/2019

Fixed

  • Button: Pointer events on button tooltip
  • Button: Hover state of permanently delete text button in Edge
  • Select: Select component id property

v2.3.2

6/28/2019

Features

v2.3.1

6/26/2019

Fixed

  • Button: Tooltip value getting overriden by generated label on load. Make tooltip backwards compatible by checking for iconLabel property.

v2.3.0

6/26/2019

Features

  • Button: New visual styles, including the addition of a permanentlyDelete prop for a button variant

v2.2.1

6/25/2019

Features

  • Datepicker: New inputRequired prop to render label in "required" format

v2.2.0

6/18/2019

New component

Features

v2.1.1

6/12/2019

Fixed

  • Button now supports dynamic change of icon

v2.1.0

6/5/2019

New component

Features

v2.0.0

5/31/2019

Features

  • Upgrade to Stencil v1 (performance improvements)

v1.2.4

5/29/2019

Fixed

  • Action Menu: Focus doesn't return to button when action menu closes if at that point focus has left the menu, e.g., shifting to a modal

v1.2.3

5/24/2019

Features

v1.2.2

5/21/2019

Fixed

  • The component library doesn't bundle the Material Design Icons anymore. This asset needs to be loaded before the component library (See Installation page)
  • Components using Material Design icons take the code as a property instead of the icon name. (Icon name is still valid for backwards compatibility)
  • Components now use CSS containment for improved performance. See here for more details.

Bug Fixes

v1.2.1

5/6/2019

Features

v1.2.0

5/6/2019

Features

Bug Fixes

  • Action Menu: Focus removed on menuitem when not tabbing.
  • Action Menu: Fixes a display issue for right-to-left languages.
  • Auto-generation of ID now begins with letters.

v1.1.1

04/17/2019

Bug Fixes

  • Button: Handle a bug in Edge where an onclick function on a disabled button would run.

v1.1.0

04/15/2019

Features

Bug Fixes

v1.0.0

New component

Features

Global Styles Versions

View on CodePen (link opens in new window)

v1.3.0

v1.2.1

v1.2.0

  • Removed "toggle-switch" class in favor of "switch-toggle" (which used 2 labels)
  • Changed .user-is-tabbing to :focus-visible
  • Changed focus styles for inputs, checkboxes, radio buttons and toggle switches

v1.1.13

  • Updated Watermark Cyan to meet accessibility requirements

v1.1.12

  • Darkened the card shadow
  • Cards for empty states only have the dark header if there is no actual header
  • Added focus styles for textarea character count

v1.1.11

  • Updated the Grid styles to use CSS grid instead of flexbox
  • Used the aria-current attribute to style the current step in the Stepper instead of an arbitrary class name
  • Used math.div in the SCSS files instead of a slash
  • Added dvh units wherever 100vh was used

v1.1.10

  • Updated styles for the "textfieldlabel" class used with inputs closing the distance between the label and the input field.

v1.1.9

  • Button border color on hover changes to the hover state color
  • Changed button left/right padding to 14px to accommodate the 2px border and maintain the 16px spacing
  • Updated button-collection space between buttons to 16px
  • Updated padding in cards

v1.1.8

  • Updated the font weight of links
  • Changed the main content padding to a fixed unit
  • Fixed the vertical alignment of link chevrons in bread crumbs

1.1.7

  • Change textfield label font weight
  • Change character count top margin from 10px to 4px
  • Added styles for the switch-toggle

1.1.6

  • Added search highlighting styles (primary-highlight and secondary-hightlight classes)

1.1.5

  • Updated the styles for empty state cards
  • Removed improperly named "subtitle" class for eyebrow titles in cards
  • Updated subtitle font size in modal headers

1.1.4

  • In the page header, the paragraph following the title has no top margin
  • The header has no letter-spacing
  • Added a -noborder variant on the card header that removes the rule
  • For tables in cards there is no bottom border on the last row
  • For text fields that are in error, when they are focused the border color is the normal focus color and does not remain red
  • Updated the empty card styles

1.1.3

  • In cards with headers if there is a data table in the body, the left padding of the card aligns with the header.
  • Added an "eyebrowtitle" class that's more appropriately named than "subtitle" (which will be removed in a future version).
  • The error messages on text inputs is no longer absolutely positioned, so it will cause the content after it to shift appropriately.
  • Textfields that are in error can simply have an error class on the textfield container without needing the error classes on the label, input and message.

Color Token Versions

v1.4.0

10/24/2024

New token

Added

  • wmcolor-interactive-background-disabled
  • wmcolor-interactive-background-highlight
  • wmcolor-interactive-background-selected

Updated

v1.3.0

10/3/2024

New token

Added

  • wmcolor-background-accent
  • wmcolor-callout-background

v1.2.0

06/30/2024

New token Deprecation

Added

  • wmcolor-quartz

Updated

Deprecated

  • wmcolor-acidwashjeans
  • wmcolor-asphalt-light
  • wmcolor-cement
  • wmcolor-firetruck-darker
  • wmcolor-lavender
  • wmcolor-salmon

v1.1.0

03/07/2024

New token Deprecation Token removed

Added

Updated

Deprecated

  • wmcolor-interactive-focus-ondark
  • wmcolor-interactive-focus-textonly-ondark
  • wmcolor-interactive-focus-textonly

Removed

  • wmcolor-brightblue
  • wmcolor-violet
  • wmcolor-violet-light

v1.0.0

11/12/2023

Color tokens introduced to the Ripple design system. The Colors page now includes color token documentation.

Back to Top