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.
ComponentsGlobal StylesColor Tokens
Component Versions
v5.3.1
10/07/2024
Hotfix
Fixed
Snackbar: Fixed an issue where snackbar would cover bottom portion of page, blocking pointer events.
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.
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.
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.
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
Button, Datepicker, Input, Select, Timepicker, Search: Setting disabled="false" now removes the attribute from the component, preventing screen readers from falsely recognizing the component as disabled.
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.
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
Snackbar: Fixed an issue with the close button tooltip being positioned incorrectly at zoom levels 200%+
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.
Input, Datepicker, Timepicker: The required error message is now customizable through the new required-field-message property.
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.
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.
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.
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.
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)
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.
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
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
Action Menu: Fixes focus issue when screenreader is on.
v1.2.1
5/6/2019
Features
Action Menu: The selector variant can be disabled.
Cards (link opens in new window): Updated border color (using color token), made the vertical spacing consisten, and converted to CSS logical properties
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.3.0
10/3/2024
New token
Added
wmcolor-background-accent
wmcolor-callout-background
v1.2.0
06/30/2024
New tokenDeprecation
Added
wmcolor-quartz
Updated
Updated the neutral theme color on the following tokens:
Ripple
