aria-labelledbyprop to the List Groups Web Component to ensure that associated labels can be read correctly by screen readers.
versionattribute to MDS web component custom elements to identify the version used in the application HTML – for example when using the MDS Coverage tool – without requiring access to the application source code.
hrefattributes are properly recognized as links by screen readers or other assistive technologies. Thanks to Trevor Rice for reporting this issue!
iconRightprop to function as intended. The prop now sets a custom right icon without requiring the additional use of the
activeprop to display. Thanks to Theo Zhang for reporting!
errorand Field Errors
visibleproperties that were deprecated in v2.25.0. Added a CodePen example to demonstrate the use of these properties.
dismiss()method to include logic to also dismiss the modal’s page overlay. Thanks to Nick De Jong for reporting!
mds.cssfile is deprecated and will be removed from our distributed package and CDN in the next major release. Using SCSS is required to ensure access to MDS constants and mixins, which are essential to implementing MDS. Teams are encouraged to adopt this method as early as possible, and will need to do so before upgrading to the next major release once available.
mds-stepper-wide-atmixin allowing you to choose to hide small step indicators at narrow widths. Thanks to Trevor Rice for this recommendation!
<slot>support to the List Group web component, allowing you to pass
<mds-list-group-item>custom elements through the default slot.
flex-growproperty to Form Field Groups to ensure they size themselves predictably when arranged horizontally.
textattribute from being mapped to
aria-labelwhen text was passed via slot rather than prop. Thanks to Amrut Parab and Trevor Rice for reporting!
Updated documentation for Cards to clarify that Cards should not be used to group large sets of related information, or when other customizations are required. Module Containers should be used instead.
Updated List Groups to add support for a new variation that displays metadata below the list item.
Updated the List Group Item web component to accept custom attributes not defined in the List Group Item API.
Added accessibility guidelines for tree Data Tables to clarify how the accessibility of these tables can be improved by using
aria-label attributes to describe parent/child relationships for screen readers. Thanks to Matt Comins for this suggestion!
Updated design guidelines for Buttons to clarify the proper use of left and right-aligned icons. Thanks to Jonathan Duncan for this suggestion!
Resolved an issue that prevented the Button Groups web component from resetting the checked state of child buttons to false when a different button in the same group is selected.
Resolved an issue with Inputs that prevented the
min attribute from being rendered when set to zero. Thanks to Bill Yue for logging this issue!
touch size variation for List Groups. In its place, a new
touch-revised variation has been added. The revised version reduces the amount of padding between items, while still adhering to the 48-pixel guideline for touch interfaces.
The Field Groups
error property has been deprecated. This property should no longer be set manually, but instead is updated automatically by a new Field Error Event Listener.
The Field Errors
visible property has been deprecated. This property should no longer be set manually, but instead is updated automatically by a new Field Error Event Listener.
Touchsize variation, which can be used to ensure common UI components are large enough to be usable on touch displays regardless of screen size. Impacted components include:
valueprops to the List Group Item API to support this new approach.
renderTimeoutsetting caused both the checked and indeterminate state to display at the same time. To resolve this, a new
setIndeterminate()method has been added, and the existing
indeterminateproperty has been deprecated.
additionalClassprop on the List Group item from working as expected.
indeterminateproperty has been deprecated in favor or a new
Touchsize variant for common UI components including Buttons, Button Groups, Checkboxes, Inputs, List Groups, Search Fields, Selects, Switches, and Radio Buttons. This variant can be used to ensure components are large enough to be usable on touch displays regardless of screen size. Documentation to follow in an upcoming release.
Removed a dependency on the SVG4everybody polyfill and updated our Icons documentation with details on proper implementation.
namespacedprop to enable the use of namespaced classes within the web component templates. Read more on the Version 2 Upgrade Guide.
animationprop to the Steppers component to enable teams control over the display of the component’s animation.
/sandboxdirectory in to the
/doc-site, in anticipation of the forthcoming removal of the
actions). In the future, HTML markup should always be passed into web components using slots rather than props.
mds-form--errormodifier class, instead use
mds-form__field-group--error. The deprecated class will be removed in version
mds-icon-height-removalmixin to use the proper name. Thanks to Mandar Katre for reporting!
typerequirements for full-width Button Groups. Thanks to Mandar Deshpande for reporting!
changeevent from firing multiple times. Thanks to Tahnee Evans for reporting!
buttonto Buttons. Thanks to Jack Ou for reporting this!
mds-data-table__header-cell--right. Thanks to Zach Erdmann for reporting!
idprop is rendering in its template.
mds-data-table__header-cell--right, instead use
mds-data-table__header-cell-inner--right. The deprecated class will be removed in version
ellipsis-verticalicons to better match the proportions of other default-size icons and added
ellipsis-vertical--sicons to the small-size icon set. Thanks to Raina Shannon for this contribution!
undoicon and added a small
undo--sversion. Thanks to Jonathan Duncan for this contribution!
import_once.scssdependency to all relevant library SCSS files. Thanks to Jyoti Deka for reporting!
The MDS Web Components beta package is now available for testing and feedback. In the beta you can find web components for:
@mixin mds-article-heading-level-3(), instead use
@mixin mds-article-heading-level-4(), instead use
@mixin mds-article-heading-level-5(), instead use
mds-article__heading--level-2, instead use
mds-article__heading--level-3, instead use
mds-article__heading--level-4, instead use
star-fill--s, instead use
star--s, instead use
6px, improving the visual display of Modals, Popovers, Dialogs, Notifications, Alerts, Cards, and Module Containers.
play-circleicon to the correct category on the Iconography page. Thanks to Jon Duncan for reporting!
@font-facedeclarations. Thanks to Dale Price for this PR submission!
box-shadowto render a border regarding the known browser-specific defects that can occur when using the browser’s zoom function, including:
gitfor install URLs.
falsefrom being rendered in the component’s markup. Thanks to Nick de Jong for reporting!
vwto resolve a scrollbar defect. Thanks to Peter Unsworth for reporting!
play-circleicon to match the visual design of the
play-circle--sicon, thanks to Chris Margelis for this suggestion!
/sandboxdirectory content to the MDS documentation site, exposed as examples on the Forms and Dialogs pages.
maxattributes and accompanying documentation to the Range Slider.
undefinederror on the Typography page.
list-group__item--drawer-toggleList Groups class. Thanks to Tahnee Evans for finding this!
role=alertattribute to the Alerts component to improve accessibility.
The 2.0.0 release includes significant changes that apply to the library of Visual Language and UI Component libraries and how they are packaged to be consumed by adopting teams. Refer to the 2.0.0 Upgrade Guide to learn more and follow the steps required to upgrade to this major release.
tertiaryapplications to create page hierarchy and expanded the available mixins to add them to products.
chart-color-performancecolors and examples to Color and Charts Visual Language page.
mds-form__label-required-indicator-labelto hide the label for Forms.
code-pillsupport to the Do / Don't component.
gulp generate:new-componentcommand that generates files for a new component.
fonts.scssfile indicating that the Univers font loaded corresponds to Univers Next for Morningstar.
mds-form--errorin the Class Reference table.
<label>element from the Combo Box documentation examples.
mds-tag-groupwrapping class to enable consistent spacing within groups of Tags.
$mds-tail-sizeconstant to follow our code standards.
!defaulttag to all Constants and componenent-specific variables to facilitate theming for products that perform client customizations.
mds-docdefault body class.
<label>tags to now use
<span>on code pair examples.
/distdirectory to support Bower installation
svgartwork for production, how to use custom icons alongside MDS, and how to request the addition of a custom icon to the MDS library.
$mds-font-size-defaultin code. Mapped all
16pxfont size constants to use
$mds-font-size-mand marked the deprecated constants as such in constants.yaml with code comments.
js-beautifydependency to prevent automatic upgrading to a broken version. Thanks to Mandar Katre for finding this issue and a solution!
radioButton Groups by adding
distto include the latest compiled assets for MDS
.svg, and other files to NPM and Bower distributions.
mds-button--secondaryclass in demo examples.
border-radiusConstants concepts and applied them across components.
selectand Button Groups heights for distinct elements across incremental sizes.
box-shadowconstants appropriately on the Constants page.
mds-linkmixin to the List Groups component
mds-sizemixin used for incremental spacing for components of varying sizes.
mds-container, and added those controls to styles for:
/sink-pages/components, consistent with where other non-component sinks are located.
<caption>element to improve screen reading.
border-boxmixin, encapsulated per component.