Versions

v3.3.1 11/24/2021

Fix

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

v3.3.0 11/23/2021

Changes

  • 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

Fixes

  • 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

Changes

  • 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

Fixes

  • 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

Fixes

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

v3.1.2 10/14/2021

Fixes

  • Datepicker: Fixed an issue where the Datepicker's input event was fired twice when selecting a date from the dropdown

Changes

  • Datepicker: Added the event wmDatepickerNewValidValue
  • Input: Added the event wmInputValueChanged
  • Input: Added number inputs, see property type
  • Search: Added the event wmSearchValueChanged
  • Tag Input: Fine-tuned the dropdown opening direction detection
  • Button: Tooltips always display on top of other elements on the page

Deprecations

  • 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.

Changes

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

v2.33.1 10/05/2021

Changes

  • 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

Changes

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

v2.32.0 08/12/2021

Changes

  • Input: Added character count functionality via the characterLimit property
  • Tag Input: Removed automatic title-casing of dropdown items and added tags

Fix

  • 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

v2.31.1 08/05/2021

Fix

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

v2.31.0 07/22/2021

Fix

  • 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

  • Tag Input

Fix

  • Chart: Add prop to allow gray "not started" color for bar type 5
  • Select, Datepicker, Timepicker, Input: Update label spacing and font weight

v2.29.0 06/10/2021

New component

  • Input

Fix

  • Datepicker: Updating value prop now reflects in input

Deprecations

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

v2.28.1 08/09/2021

Fix

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

v2.28.0 05/20/2021

Fix

  • Select: Fix cursor type when component is disabled
  • Chart: Add new chart type, bar5
  • Accessibility improvements in Action Menu, Button, Chart, Datepicker, Select and Timepicker
  • Menu Item: Add new prop description
  • Tabs: Add new prop custom-padding

v2.27.1 05/03/2021

Fix

  • Datepicker: Fix keyboard accessibility on month panel

v2.27.0 04/29/2021

New component

  • Toggletip

Changes

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

Deprecations

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

v2.26.0 04/8/2021

Changes

  • 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

Changes

  • Action menu: Handles the focus method
  • Chart: Fix an issue where chart-slice onclick functions would run on click of the svg element (instead of just the popover button)
  • Chart: Doughnut slices that make up less than 1% of the chart are labelled accordingly
  • 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)

Deprecations

  • 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

Changes

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

v2.24.1 03/12/2021

Changes

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

v2.24.0 02/25/2021

Changes

  • 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
  • Tab: 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)
  • 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

Changes

  • Navigator: product prop includes icon url

v2.23.2 02/12/2021

Changes

  • Navigator: Replace trailing / for SAML links

v2.23.1 02/09/2021

Changes

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

v2.23.0 02/04/2021

New component

  • Timepicker

Changes

  • Select: Displays an error when an error message is passed
  • Datepicker: New invalid prop

v2.22.1 01/29/2021

Changes

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

v2.22.0 01/14/2021

Changes

  • Select: Add new component variant, multiple
  • 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
  • Tab: Fix an issue where dropdowns would remain open within tab panels when Tab is in responsive view

v2.21.2 02/03/2021

Hotfix

  • 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

Changes

  • 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
  • Tab: Fix an issue where component would prevent action menu within tab panel from closing on tab change

v2.20.3 01/06/2021

Hotfix

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

v2.20.2 12/11/2020

Hotfix

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

v2.20.1 12/09/2020

Hotfix

  • Navigator: Remove trailing slash in url

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

  • Navigator: Fix sso redirect url (connection_name parameter)

v2.19.1 11/20/2020

Hotfixes

  • Datepicker, Select, Action Menu: Fix opening direction detection
  • Uploader: Fix spacing issue between items

v2.19.0 11/12/2020

Changes

  • 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
  • Uploader: Add "rejected-files" property for ability to display server-side errors

v2.18.0 10/22/2020

Changes

  • 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

Changes

  • 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

Changes

  • 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

Changes

  • 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

Changes

  • Chart: New doughnut type (doughnut3)
  • Chart: Accessibility fix (popover title doesn't repeat segment info)

v2.15.5 07/31/2020

Hotfix

  • 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

  • Fixes a bug in Action Menu triggering a console error

v2.15.3 07/28/2020

Changes

  • 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

Fix

  • Action menu: Tooltip doesn't cover first item

v2.15.1 06/26/2020

Change

  • Chart: New style ("bar4")

Fix

  • 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

  • Search

Fix

  • 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

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

v2.14.0 05/20/2020

Change

  • The component library can now be used as react components

Fix

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

v2.13.2 05/19/2020

Change

  • Added missing Spanish transations

Fix

  • Navigator: Fixed the taskstream logo and spacing in menu

v2.13.0 05/06/2020

Change

  • 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

Fix

  • Input tooltip shows translated date format

v2.12.14 04/28/2020

Update

  • Added Spanish language

v2.12.12 04/23/2020

Fix

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

v2.12.10 04/20/2020

Fix

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

v2.12.9 04/16/2020

Fixes

  • Chart: fix tab focus indicator
  • Action menu: Fix console warning (deprecated prop)

v2.12.8 04/01/2020

Fix

  • Datepicker styles adjustments for VIA

v2.12.7 03/31/2020

Fixes

Further bug fixes in the uploader component:

  • Disabled styles were not applied on the button (bug introduced in 2.12.3)
  • 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

Fixes

Fixes issues in the uploader component:

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

v2.12.2 03/26/2020

Fix

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

v2.12.1 03/25/2020

Fixes

  • The datepicker invalid state is now exposed (class .invalid on the component). This can be used for instance to conditionally disable form validation.
  • Button width fix

v2.12.0 03/21/2020

Change

  • Uploader component

v2.11.2 03/21/2020

Fix

  • Buttons spacing to reflect new UI specs

v2.11.0 02/18/2020

Change

  • Introduces modes and product-specific styles

Fix

  • Datepicker only accepts 2 or 4 digits for years

v2.10.0 02/18/2020

Change

  • Navigator component

v2.9.6 02/12/2020

Changes

  • Introduces labelForIdenticalButtons prop so that an aria-label with more informative text can be set on any button
  • Prop labelForIdenticalButtons deprecates labelForButtonsWithIdenticalTooltip. This props is still supported but with deprecation warning.

v2.9.5 02/03/2020

Fix

  • style fixes for chart component

v2.9.4 01/28/2020

Fix

  • Fix broken transition on button hover

v2.9.3 01/23/2020

Fix

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

v2.9.2 01/09/2020

Fixes

  • wm-chart: Fix focus style for keyboard users
  • wm-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

Fix

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

v2.9.0 12/19/2019

Change

  • Tab component

v2.8.3 12/19/2019

Change

  • Add show-legend prop to chart component

v2.8.2 12/05/2019

Fixes

  • 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

Fixes

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

v2.8.0 11/12/2019

Change

  • New chart component

v2.7.9 10/23/2019

Change

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

v2.7.8 10/22/2019

Change

  • 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

Change

  • 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

Fix

  • Dynamic icon change in icononly buttons for Firefox and Edge

v2.7.5 10/11/2019

Fix

  • Primary action button in modal does not automatically close modal

v2.7.4 10/10/2019

Fix

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

v2.7.3 10/09/2019

Fix

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

v2.7.2 10/09/2019

Fixes

  • 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 deprecated icon-label prop in the button component

v2.7.1 10/05/2019

Fix

  • Library bundling optimization

v2.7.0 9/27/2019

Changes

  • New modal component

v2.6.5 9/26/2019

Fixes

  • Screenreader announces expanded/collapsed state of select and action menu
  • Screenreader fixes and enhancements for datepicker

v2.6.4 9/23/2019

Fix

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

v2.6.3 9/17/2019

Change

  • Button styles for dark background

v2.6.2 9/16/2019

Fix

  • Style fix for snackbar spacing in Chrome

v2.6.1 9/10/2019

Fix

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

v2.6.0 9/9/2019

Changes

  • New snackbar component

v2.5.0 9/5/2019

Changes

  • New wrapper component

v2.4.9 8/20/2019

Fix

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

v2.4.8 8/19/2019

Fix

  • Text-only button has now left-aligned text

v2.4.7 8/14/2019

Changes

  • Button has new text-wrap property (for text-only buttons)
  • Button icon-size property now takes CSS value (instead of strings "big" and "small")

v2.4.6 8/13/2019

Fix

  • Action menu has a "tooltip" prop that is required when the button type is icon

v2.4.5 8/13/2019

Fix

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

v2.4.4 8/9/2019

Fixes

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

v2.4.3 8/1/2019

Fixes

  • 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

Fixes

  • Fix button size

v2.4.1 7/26/2019

Fixes

  • Fixed focus style when using keyboard in datepicker panel
  • Fixed the way screen readers announce the select component
  • 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]

New functionalities

  • Select component now includes the label. The label attribute is required. [BREAKING]

Changes

  • Datepicker prop input-required renamed required-field for consistency. [BREAKING]
  • Select component's select-type prop is deprecated

Fixes

  • Fixed a bug in the datepicker (tabbing out of the component was not working as expected in some cases)

v2.3.3 7/8/2019

Fixes

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

v2.3.2 6/28/2019

Changes

  • Increase button height

v2.3.1 6/26/2019

Fixes

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

v2.3.0 6/26/2019

Changes

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

v2.2.1 6/25/2019

Changes

  • Datepicker has an inputRequired prop to render label in "required" format

v2.2.0 6/18/2019

Changes

  • New pagination component

v2.1.1 6/12/2019

Fixes

  • Button now supports dynamic change of icon

v2.1.0 6/5/2019

Changes

  • New datepicker component

v2.0.0 5/31/2019

Changes

  • Upgrade to Stencil v1 (performance improvements)

v1.2.4 5/29/2019

Changes

  • 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

New functionalities

  • Action menu emits an event when menu is loaded

v1.2.2 5/21/2019

Changes

  • 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

  • Fixes focus issue in action menu when screenreader is on

v1.2.1 5/6/2019

New functionalities

  • The selector variant of the action menu can be disabled
  • New invalid prop for select component

v1.2.0 5/6/2019

New functionalities

  • Action menu has a "selector button" variant

Bug Fixes

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

v1.1.1 04/17/2019

Bug Fixes

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

v1.1.0 04/15/2019

New functionalities

  • Add max-height prop to wm-select

Bug Fixes

  • Refactor ARIA attributes in wm-button and wm-action-menu
  • Fixes bug triggering an error in the console in wm-button

v1.0.0

  • Added Button, Action Menu, Menu Item, Select and Option components

In a compound component like Select or Action Menu, child components are rendered in the parent's slot element, part of its shadow DOM tree. Slots essentially serve as a placeholder for markup that you the developer define in the light DOM tree, like <wm-menuitem>, <wm-option>, text content, or other child elements.

The browser distributes the child elements defined in the light DOM into the shadow DOM of the parent. The result is a flattened DOM tree—a merger of the the light DOM and the shadow DOM. This flattened tree is what you see in DevTools and what is rendered on the page.

With the standard implementation of the component, dynamically updating the child items will throw an error. Elm's efficient diffing of the DOM will register that only the child items have changed and try to update them, but the component has already been composed.

Rendering the component in a Keyed node and giving it a dynamic id will cause the entire component, rather than just the child items, to render anew, avoiding the error.