v2.11.0 January 22, 2019
What's New
The MDS Web Components beta package is now available for testing and feedback. In the beta you can find web components for:
Note these are the same UI components MDS already supports, but now available as web components written in vanilla JavaScript. We will continue to add web component versions of more UI components to the beta package in upcoming releases. You can find updates in the Web Components sections below, and track our progress on the component status page .
Read more about MDS Web Components on our Getting Started page or watch our installation tutorial video .
Published documentation for new components:
Updated the MDS documentation site’s navigation and homepage.
Web Components
Enhancements
Updated the standard drop shadow and container border styles to be darker, improving the display of layered components, like Popovers , on lower-quality monitors. Thanks to Landy Wang and Yolanda Feng for reporting!
Improved accessibility of icon-only Buttons by adding an aria-label
attribute.
Improved accessibility of Search Fields by using the new icon-only Button aria-label
.
Updated Article headings to use a t-shirt size scale and deprecated the previous classes and mixins.
Added an additional layer of variables to the Inputs and Combo Boxes SCSS to facilitate 3rd party theming. Thanks to Aji Vishwambharan for this contribution!
Updated the MDS site’s URLs to use query strings to prevent issues with copying and pasting URLs in to Slack or email. Thanks to Rashel Tomeh for reporting!
Added with-icon and icon-only variations to the Buttons component explorer .
Added an SCSS variable for the font-display property, allowing teams to customize this behavior within their product. Thanks to Zach Erdmann and Clay Gregory for this contribution!
Fixes
Fixed a defect preventing link Cards from working. Thanks to Peter Unsworth for reporting and debugging!
Deprecated
Deprecated Article-related classes and mixins:
@mixin mds-article-heading-level-3()
, instead use @mixin mds-article-heading-large()
.
@mixin mds-article-heading-level-4()
, instead use @mixin mds-article-heading-medium()
.
@mixin mds-article-heading-level-5()
, instead use @mixin mds-article-heading-small()
.
mds-article__heading--level-2
, instead use mds-article__heading--large
.
mds-article__heading--level-3
, instead use mds-article__heading--medium
.
mds-article__heading--level-4
, instead use mds-article__heading--small
.
v2.10.0 December 20, 2018
What's New
New Articles component, with documentation and examples to follow in an upcoming release.
Published new documentation on running the MDS local environment .
Updated many component documentation pages—Buttons , for example—to split documentation into four tabs: Variations, Design Guidelines, Code Reference, and Accessibility.
Web Components
Enhancements
Renamed the Morningstar Star Rating icons to better map to their intended use. Thanks to Tim Mills for this suggestion!
Improved implementation documentation for Range Sliders . Thanks to James Harris for this contribution/recommendation!
Added a new modifier class for Loaders to allow for easy showing and hiding of the component.
Split the Getting Started page in to two dedicated tabs for designers and engineers.
Updated and expanded the MDS development overview documentation .
Updated and expanded documentation building an HTML MDS component .
Improved Report a Bug JIRA template to capture more information about defects.
Added an additional layer of variables to the Buttons SCSS to facilitate 3rd party theming. Thanks to Aji Vishwambharan for this contribution!
Deprecated
Deprecated the icons star-fill
and star-fill--s
, instead use star-rating
and star-rating--s
.
Deprecated the icons star
and star--s
, instead use star-rating-hypo
and star-rating-hypo--s
.
v2.9.0 November 13, 2018
What's New
Editorial Message-Design Framework . Thanks to Michaela Hackner and Courey Gruszauskas for this contribution!
Added Courey Gruszauskas to the Segments page as the new Editorial segment owner.
Component status documentation, highlighting new and updated UI components as well as each component’s status across HTML/CSS and Web Component libraries. Including:
Dedicated Component Status page
Component status bar in the header of each UI component page
Indicators in the left navigation highlighting new and updated UI components
New components with documentation to follow in an upcoming release:
Dedicated UI component page for Icons , including all implementation details previously located on the Iconography page.
Split the Forms page into dedicated UI component pages and test pages :
Added markdown files to the MDS repo detailing build tooling and testing tooling .
Web Components
Added API documentation for forthcoming web components:
Sketch File
Added Accordions.
Added the Form layout specification and examples to the Forms page.
Added a cover sheet.
Enhancements
Added a Requested Parts section to the Request a New Part page. Community members can review this section to see what parts have been requested previously, and can link to the JIRA tickets to add their input on existing requests.
Reduced the $mds-border-radius-panel
constant from 12px
to 6px
, improving the visual display of Modals , Popovers , Dialogs , Notifications , Alerts , Cards , and Module Containers .
Updated editorial guidelines for all UI components for consistency. Thanks to Courey Gruszauskas for this contribution!
Sketch File
Removed Headers from Module Containers to match updated implementation in code.
Added Border Bottom Headers to the Headers page.
Removed all surrounding space from Form symbols to match implementation in code.
Fixes
Prevented an unnecessary class from rendering in the Cards component explorer.
Moved play-circle
icon to the correct category on the Iconography page . Thanks to Jon Duncan for reporting!
Corrected improper HTML formatting in many code snippets.
Sketch File
Fixed pinning of menu button in Vertical Site Navigation. Thanks to Jon Duncan for reporting!
Fixed Notifications labels. Thanks to Rashel Tomeh for reporting!
v2.8.0 October 16, 2018
What's New
Links design has been enhanced and documentation updated, with a new variation added for use within Data Tables.
Enhancements
Split iconography in to two categories, UI and IP, and improved documentation.
Updated the Getting Started for designers section to include a link to and information about the brand standards Frontify site.
Updated the exposed generic color Constants .
Added documentation about the new core legend’s design and responsive behaviors to:
Added usage guidelines to the Bubble Chart for the grid view and updated the component explorer to enable this configuration.
Added documentation about the Time Series Line chart’s x-axis logic and behaviors.
Fixes
v2.7.0 October 2, 2018
What's New
Accordions component, documentation and component explorer.
Enhancements
Added a generic chart color section to the color and Charts’ visual language pages. Thanks to Jon Duncan and Pegah Ahmadi for this suggestion!
Improved performance of font loading by adding a font-display
property to @font-face
declarations. Thanks to Dale Price for this PR submission!
Improved documentation on criteria for contributions and requesting a new part .
Added a note to components which utilize box-shadow
to render a border regarding the known browser-specific defects that can occur when using the browser’s zoom function, including:
Added an additional step to the installing MBC documentation regarding using https
instead of git
for install URLs.
Fixes
Added color
property to Headers’ title text to prevent it from inheriting styling. Thanks to Trevor Rice for reporting!
Removed unnecessary z-index
property from the Forms select’s arrow icon. Thanks to Shuang Liu for reporting!
v2.6.0 September 18, 2018
What's New
Sketch File
Enhancements
Fixes
Removed extraneous space from Headers’ component explorer markup.
Fixed Data Tables to prevent false
from being rendered in the component’s markup. Thanks to Nick de Jong for reporting!
Sketch File
Corrected width of default Notifications symbols. Thanks to Dustin Cheng for reporting!
Deprecated
v2.5.0 September 5, 2018
What's New
Sketch File
Added symbols for:
Headers
Module Containers
Enhancements
Enhanced Headers to include a Without Border variation and better support use in Module Containers.
Updated Module Containers to use the improved Header.
Fixes
Updated the 2.0 Upgrade Guide’s guidance on the removed clearfix mixin for accuracy.
Updated Mastheads code snippets to reflect 2.0 updates to Buttons markup. Thanks to Nick de Jong for reporting!
Updated Page Shells to use %
instead of vw
to resolve a scrollbar defect. Thanks to Peter Unsworth for reporting!
Sketch File
Corrected naming of Dialog variations. Thanks to Nathan Leahigh for reporting!
v2.4.0 August 20, 2018
What's New
Forms and Dialogs composed examples and implementation guidelines.
Search UX Pattern , thanks to Will Parton and Oleg Evdokimov for this contribution!
Enhancements
Improved the Using MDS CDN documentation to cover using the CDN for previous versions.
Updated the play-circle
icon to match the visual design of the play-circle--s
icon, thanks to Chris Margelis for this suggestion!
Published the /sandbox
directory content to the MDS documentation site, exposed as examples on the Forms and Dialogs pages.
Fixes
Fixed language in the Site Navigation Hidden Menu documentation to match the behavior of the component. Thanks to Jinhwan Kim for reporting!
v2.3.0 August 6, 2018
What's New
Module Containers component, documentation and component explorer.
Added documentation for composing Forms out of many individual elements.
Built five composition-focused sample pages to be documented in an upcoming release.
Built many examples of composed components to be documented in an upcoming release.
Enhancements
Fixes
Fixed a defect causing unpredictable vertical alignment in the Card label. Thanks to Chris Margelis for reporting!
Removed the no longer relevant below-field example of Forms microcopy . Thanks to Trevor Rice for reporting!
Corrected misinformation in the Steppers CSS class reference section . Thanks to Trevor Rice for reporting!
v2.2.0 July 23, 2018
What's New
Enhancements
Published updates and enhancements to the Errors UX pattern . Thanks to Will Parton for this contribution!
Updated Typography documentation to provide guidance on using the new Headers component.
Added missing min
and max
attributes and accompanying documentation to the Range Slider .
Fixes
Removed duplicate classes from some Layout Grid code snippets. Thanks to Vinnay Gunnam for finding this defect!
Fixed a file path defect when using the gulp generate:new-component
command.
Doc Site
Corrected a defect causing an undefined
error on the Typography page .
Fixed a defect causing incorrect titles in full screen Charts component explorers.
Fixed a typo in the Cards documentation.
Deprecated
Deprecated the unused list-group__item--drawer-toggle
List Groups class. Thanks to Tahnee Evans for finding this!
v2.1.0 July 06, 2018
What's New
Added new Iconography which features the most commonly used icons from the Morningstar Symbols font.
Added Forms composition containers which provide consistent proportional spacing for form elements.
Enhancements
Doc Site
Fixes
Doc Site
v2.0.0 June 18, 2018
What's New
New Major Release 2.0.0
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.
Visual Language
Added new Borders features for primary
, secondary
and tertiary
applications to create page hierarchy and expanded the available mixins to add them to products.
Added chart-color-performance
colors and examples to Color and Charts Visual Language page.
Added new accessibility error colors to the Color page.
Added new Icons : bookmark–-s
, bookmark-fill--s
, caret-circle-left--s
, caret-circle-right--s
, chat-bubble--s
, clock--s
, document--s
, eye–-s
, filter-fill--s
, gear--s
, grab-handle--s
, home--s
, info-circle–-s
, pause-circle--s
, person--s
, person-plus--s
, trash--s
, caret-circle-up--s
, caret-circle-up
, folder-close--s
, folder-close
, person-group--s
, person-group
.
Sketch File
Added new Primary, Secondary and Tertiary Borders.
Added Performance and Feedback Colors.
Added many new icons, detailed in the Visual Language section above.
Added the Indeterminate Checkbox.
Enhancements
Visual Language
Revised the SVG artwork for the following Icons : chat-bubble
, envelope
, download
, download--s
, gear
, heart--s
, info-circle
, person
, person-padless
, person-plus
, person-plus--s
, question-circle
, question-circle--s
, question-circle-padless
, upload
, upload—s
.
Added IE11 Support/polyfill information to the Icons page.
Updated the performance neutral color constant.
Added the Feedback color palette to the Color page.
Added a table of available text color mixins .
UI Components
Added small and large sizes to Form Labels , Microcopy , Error Text , and Required Fields .
Added component explorer to the Card page.
Added accessibility guidelines to the Link page.
Adjusted the internal padding of the Top Hat component small variation.
Added a mds-form__label-required-indicator-label
to hide the label for Forms .
Standardized heights of similar components, including Buttons , Form Text Boxes , Form Selects , Combo Boxes , Search Fields , Pagination , List Groups , and Data Tables .
Added small and large sizes for Menus .
Added ability to pair List Group subsection parent with an icon.
Documentation
Added demonstrations to the Dialog and Range Slider pages.
Updated Notification component demonstrations with alternate classes.
Added a guideline to Page Shell to remove margin and padding from the <body>
tag.
Added links between the Navigation UX pattern and components like Button , Masthead , and Menu .
Added code-pill
support to the Do / Don't component.
Revised gulp generate:new-component
command that generates files for a new component.
Added comments to the fonts.scss
file indicating that the Univers font loaded corresponds to Univers Next for Morningstar.
Expanded Combo Box accessibility guidelines .
Added details about Data Table column header text and cell text alignment.
Added configuration details for SCSS post processors to the Getting Started page.
Expanded Development Process guidelines.
Sketch File
Updated the artwork for many icons, detailed in the Visual Language section above.
Added Small and Large sizes for Form Labels, Errors, Microcopy, and Required Fields Key.
Added List Group subsection parent with icon.
Updated Form errors to use the new, accessible, error text colors.
Updated Small Form Text Boxes, Form Selects, Combo Boxes, Data Tables, and List Groups to be 24px tall, aligning to our component height standards.
Fixes
Visual Language
UI Components
Removed dependency on Button styles within pages testing Form elements.
Improved Automated Visual Regression (AVR) tests by isolating component-specific styles on test pages.
Fixed an IE11 spacing defect effecting Form fieldset Labels , thanks to Aji Vishwambharan for reporting!
Documentation
Fixed Dialog demonstration JavaScript where action buttons weren't appended in correct place.
Fixed Dialog page to replace ' with apostrophe.
Fixed Form page’s mds-form--error
in the Class Reference table.
Fixed Popover typos.
Omitted the period preceding a class name across many component pages.
Removed the <label>
element from the Combo Box documentation examples.
Removed links to documentation and ZIP downloads for past releases from 0.3.0
to 1.0.3
.
Added a bullet about wrapping grouped elements in mds-form__field-group
container.
Remove Theming section from doc-site.
Moved Page Shell , Range Slider , Menu and Popover testing and documentation-specific assets to locations outside the core library/
.
Added a bullet and example about combining Link and typography heading mixins.
Sketch File
Fixed a discrepancy between the size of small and medium Checkboxes. Thanks to Jon Duncan and Nathan Leahigh for reporting!
v1.16.1 April 23, 2018
Fixes
Doc Site
Restored functionality of links to previous versions' documentation on the Release History page.
v1.16.0 April 10, 2018
What's New
Doc Site
Sketch File
Created a Layout Grid symbol and added it to the existing Page Templates.
Created Cards symbols.
Added sizing variations for:
Data Tables
Button Groups
Checkbox, Checkbox Without Label, and Radio Button
Tooltips
Dialogs
Enhancements
Added version stamp to compiled CSS for ease of version identification.
Doc Site
Sketch File
Updated Modal width options to use pixel values instead of t-shirt sizes.
Fixes
Doc Site
Fixed a documentation site-only defect affecting the size of the Pagination .
Corrected typos in modifier classes.
Sketch File
Fixed a pinning defect in the Modal With Actions header symbol. Thanks to Jon Duncan for finding this!
Deprecated
v1.15.0 March 26, 2018
What's New
Added and documented small and large sizes for default Tooltips .
Improved SCSS @import functionality so importing an individual component's SCSS automatically @imports all necessary dependencies.
Doc Site
Enhancements
Updated the List Group and Data Table components to use top alignment when content wraps to multiple lines, ensuring optimal legibility.
Doc Site
Fixes
Doc Site
v1.14.0 March 12, 2018
What's New
Doc Site
Sketch File
Enhancements
Sketch File
Updated Data Tables column header symbols to allow text to wrap upwards on to multiple lines. Thanks to Jon Duncan for this suggestion!
Updated Switch , Checkbox , and Radio Button symbols to allow label text to wrap to multiple lines.
Fixes
Notification and Alert component icons now display correctly in IE11.
Removed unnecessary border declaration from Tag styles.
Updated Sortable Data Table examples to show correct sorting behavior.
Doc Site
Fixed invalid markup on primary doc site template.
v1.13.0 February 27, 2018
Fixes
Fixed a backward-incompatible change to notification.scss that was shipped in version 1.9.0.
Doc Site
Updated Getting Started Guide with instructions on how to import the correct notification component scss.
v1.12.0 February 26, 2018
Backward Incompatible Change
Notification component styles released in MDS 1.9.0 are incompatible with component markup released prior to 1.9.0. This is resolved in version 1.13.0 . MDS recommends all users of the Notification component upgrade to version 1.13.0 or higher.
Read more about the MDS approach to versioning and breaking changes.
What's New
New component variations released, with documentation to follow in a future release:
Doc Site
Added a Status Tag documentation component for use on the MDS site and updated the Tint Stack documentation component to use the Status Tag.
Enhancements
Doc site
Updated visual diffing tests to use a Docker VM, allowing MDS teammates across Mac and PC platforms to perform tests consistently.
Added link behavior to the MDS site's logo to allow easy navigation back to the home page.
Fixes
Fixed a bug on Windows making the menu text of the Forms Select unreadable. Thanks to Gustavo Morales for finding this!
Fixed file paths in Constants documentation.
Doc Site
Fixed Button macro to allow custom href
property.
v1.11.0 February 12, 2018
Backward Incompatible Change
Notification component styles released in MDS 1.9.0 are incompatible with component markup released prior to 1.9.0. This is resolved in version 1.13.0 . MDS recommends all users of the Notification component upgrade to version 1.13.0 or higher.
Read more about the MDS approach to versioning and breaking changes.
What's New
Published new Sketch Design Assets and introduced a new, more scalable method of consuming the assets as a Sketch Library.
Enhancements
Published the mds-tag-group
wrapping class to enable consistent spacing within groups of Tags .
Improved the Accessibility of our Menus , List Groups , and Popovers .
Updated our NPM dependency to fix a security vulnerability.
Added a Component Explorer and a Dismissible Tags demo to the Tags component documentation page.
Published documentation on how to implement Interactive Iconography .
Updated sizing guidance for Button Groups .
Improved and standardized the language around Accessibility for Combo Boxes , Links , and Colors .
Added small and large Data Table variations to the Data Table sink page .
Doc site
Updated our demo JS for Notifications so that the proper interactive behaviors are exhibited.
Fixes
Updated the Menus component macro to reference the supported width modifier classes.
Corrected an unintentional class combination and added missing examples to our Menus Sink Page .
Properly name spaced our $mds-tail-size
constant to follow our code standards.
Doc Site
Vertically centered our demo Modals to match our placement guidance for the component.
v1.10.0 January 22, 2018
Backward Incompatible Change
Notification component styles released in MDS 1.9.0 are incompatible with component markup released prior to 1.9.0. This is resolved in version 1.13.0 . MDS recommends all users of the Notification component upgrade to version 1.13.0 or higher.
Read more about the MDS approach to versioning and breaking changes.
What's New
Published Tags component and documentation.
Enhancements
Fixes
Doc Site
v1.9.1 December 21, 2017
Backward Incompatible Change
Notification component styles released in MDS 1.9.0 are incompatible with component markup released prior to 1.9.0. This is resolved in version 1.13.0 . MDS recommends all users of the Notification component upgrade to version 1.13.0 or higher.
Read more about the MDS approach to versioning and breaking changes.
v1.9.0 December 19, 2017
Backward Incompatible Change
Notification component styles released in MDS 1.9.0 are incompatible with component markup released prior to 1.9.0. This is resolved in version 1.13.0 . MDS recommends all users of the Notification component upgrade to version 1.13.0 or higher.
Read more about the MDS approach to versioning and breaking changes.
What's New
UI Components and related documentation, including:
Morningstar Base Charts components and related documentation, including:
Added new proportional spacing Constants and implemented variables across all components in the library.
Enhancements
Optimized the custom check mark icon SVG used in the Stepper .
Added the !default
tag to all Constants and componenent-specific variables to facilitate theming for products that perform client customizations.
Doc Site
Fixes
Ensured that Menus triggered from Button Groups display and function correctly.
Fortified Tooltips to ensure they don’t inherit styling from parent elements. Thanks to Juan Vallejo for reporting!
Removed all inline styling from icon SVGs. Thanks to Juan Vallejo for reporting!
Added a backwards compatible solution for vertically centering Modals . Thanks to Tison Tang for reporting!
Fixed an SVG encoding defect preventing the Combo Boxes selected item icon from displaying in some browsers. Thanks to Gediminas Suklevicius for reporting!
Doc Site
Fixed broken image in repository README .
Fixed spacing defect in component explorer controls.
v1.8.0 November 27, 2017
What's New
Navigation UX Pattern .
Morningstar Base Charts components and related documentation, including:
Scatter Plot component and documentation, including component explorer.
Bubble component and documentation, including component explorer.
Style Map component and documentation, including component explorer.
Enhancements
Doc Site
Added scrolling to the right-hand local navigation when it is taller than the viewport.
Ensured an in-page anchor link’s location is added to the URL for easy copying.
Fixes
Doc Site
Fixed a styling a defect on Dialog’s with inputs on dark backgrounds.
Fixed a defect causing multiple pages in the navigation to be highlighted as active.
Fixed a defect causing anchor links to scroll to behind the masthead.
v1.7.0 November 3, 2017
What's New
Stepper UI Component and documentation.
Morningstar Base Charts components and related documentation, including:
Line component and documentation, including component explorer.
Donut component and documentation, including component explorer.
Correlation Matrix component and documentation, including component explorer.
Enhancements
Doc Site
Fixes
Updated bower.json
privacy setting.
Doc Site
v1.6.0 October 23, 2017
What's New
Doc Site
Enhancements
Doc Site
Fixes
Doc Site
Fixed a styling defect on Links included in Image Text Pair captions.
Fixed a font size styling defect in Do & Don't image captions.
Fixed a formatting issue on the Color page.
Fixed a text formatting defect on the Punctuation page. Thanks to Zach Sherwood for finding this defect.
Fixed a defect in the local navigation anchor link scrolling behavior.
Deprecated
Existing Popover sizing modifier classes.
v1.5.0 October 9, 2017
What's New
Morningstar Base Charts components and related documentation, including:
UI Components and related documentation, including:
New Borders documentation.
Enhancements
Doc Site
Added ability to suppress utility links (i.e., View on Bitbucket, Report a Bug) in the right-hand local navigation and applied this behavior to appropriate pages.
Added description for mds-doc-image-text-pair documentation component.
Fixes
Fixed misuse of <label>
tags to now use <span>
on code pair examples.
v1.4.1 September 25, 2017
Fixes
Restore /dist
directory to support Bower installation
v1.4.0 September 22, 2017
What's New
Added a Component Explorer to the Buttons page, allowing for sandbox-style exploration of the component’s available configurations.
New Design Handoff to Development documentation. Thanks to Noor Abdelrahim for all of her help and examples.
Enhancements
Added documentation to the Iconography page detailing the process used to save icon svg
artwork for production, how to use custom icons alongside MDS, and how to request the addition of a custom icon to the MDS library.
Added CSS Class Reference and Mixin Reference sections to the Iconography page. Thanks to Swapnil Dagabaj for this suggestion.
Improved the Notification, With Action demo JavaScript to match the timeout behavior described in the component variation documentation.
Improved the Buttons accessibility documentation .
Fixes
Fixed a Radio Group defect by adding the proper name
attribute.
Deprecated
$mds-font-size-base
and $mds-font-size-default
in code. Mapped all 16px
font size constants to use $mds-font-size-m
and marked the deprecated constants as such in constants.yaml with code comments.
v1.3.1 September 18, 2017
Fixes
Version locked js-beautify
dependency to prevent automatic upgrading to a broken version. Thanks to Mandar Katre for finding this issue and a solution!
v1.3.0 September 8, 2017
What's New
Enhancements
Doc Site
Updated the “About MDS” navigation to reflect distinct sections for Development, Contributions, and Adoption.
Updated the home page to include a “What’s Next?” that outlines high-priority items on the MDS roadmap.
Updated the segment owners list on the Segments page.
Fixes
Fixed spacing and text styling defects in Menus . Thanks to Dan Ciupuliga, Cesar Guerrero, and Stéphane Péricat for their feedback on this fix.
Doc Site
Added missing CSS declarations in Typography Mixins example CSS code snippet.
Fixed Dialog in-page and popup examples.
Fixed Modal documentation. Thanks to Nikki Kopelson for finding this defect.
Fixed a Dialog sizing discrepancy by ensuring that the popup examples are using the border-box
mixin.
Corrected a reference to an outdated Constant in the Button documentation. Thanks to Katie Wolf for finding this defect.
v1.2.0 August 25, 2017
What's New
Enhancements
Doc Site
Fixes
Fixed the negative number glyph in Data Tables and added guidelines to doc. Thanks to Katie Wolf for this request!
Doc Site
Ensured all constants are represented in Constants reference table.
Deprecated
v1.1.1 August 14, 2017
Fixes
Doc Site
Updated Button doc example to show correct class for Primary variation.
Updated doc site nav for to correct z-index conflicts on Modal doc page.
v1.1.0 August 11, 2017
What's New
Enhancements
Added External Dependencies section to Getting Started documentation .
Updated Tooltip styles to no longer require a fixed height for the tooltip.
Updated README documentation with a simpler getting started guide for building the MDS Doc site locally.
Added accessibility section to Iconography documentation.
Added ability to set the SCSS font path. Documented in the Getting Started guide. Thanks to Cesar Guerrero for the suggestion via the #mds-engineering Slack channel!
Added additional accessibility guidelines for Forms .
Added full accessibility support in Tooltip .
Improved Search Fields examples and editorial documentation.
Doc Site
Updated doc site layouts to use CSS Grid for consistency across page types.
Fixes
Updated List Group subsection hover color to match hover color for regular links in list group.
Updated Button Group styles to align with default button disabled
state.
Removed unused modifier class from Range Slider doc examples.
Fixed screen reader text and improved accessibility for Icon-Only Button and With-Icon Button .
Improved accessibility of checkbox
and radio
Button Groups by adding <label>
elements.
Improved color contrast of Radio Buttons , Checkboxes , and Switches .
Fixed a visual defect in the dark variation of the Radio Button .
Removed focus outline from Modal .
Fixed Combo Box bug with search field in Safari browser. Thanks to Tim Mills for finding this defect!
Adjusted Combo Box selected item state to mirror List Group behavior. Thanks to Nikki Kopelson for finding this defect!
v1.0.4 August 1, 2017
Fixes
Update npm dist
to include the latest compiled assets for MDS
v1.0.3 July 28, 2017
What's New
Published MDS Craft Library v1.1 , including documentation on how to install the library.
Added support for visual differencing the MDS UI Component library built upon the backstopjs plugin.
Enhancements
Published Sketch Design Assets v1.1 , including:
Symbol resizing bug fixes for Iconography, Data Tables, Dialogs, Forms, List Groups, Menus, Popovers, and Tooltips.
Added disabled states for all Search Fields.
Fixes
Fixed NPM asset paths and resources included in the MDS NPM distribution.
Fixed SCSS paths within Getting Started documentation.
Fixed broken item focus halo within the documentation site’s left navigation, which uses the List Group component.
Added positioning modifier classes to the CSS class reference tables for Tooltip and Popover .
Removed non-modifier classes documented in the Modals component.
Fixed a broken link on the Getting Started page.
Fixed a constants variable reference in Color documentation.
Fixed MDS local navigation to only add a namespaced ID to auto-generated items that start with a number.
Updated MBC dependency to 2.0.5
.
v1.0.2 July 21, 2017
Fixes
Added <meta viewport>
tag to doc site so it renders correctly on all devices.
Updated Button Group documentation to include mds-button-group--flex
class.
Updated Combo Box documentation examples to change based on background color selector.
Updated Getting Started documentation to fix broken links.
v1.0.1 July 5, 2017
Fixes
Added source .scss
, .svg
, and other files to NPM and Bower distributions.
Updated Buttons documentation to include correct mds-button--secondary
class in demo examples.
Fixed site navigation animation bug in IE.
v1.0.0 June 30, 2017
What's New
Deployed code assets via a package available on Morningstar’s NPM and Bower repositories.
Redesigned MDS site home page .
Strengthened Typography , including:
Detailed documentation on font family, weight, headings, line height, and line length.
Improved available mixins for headings, body copy, and links, including resets, size, weight, color, and line heights.
Improved Iconography , including:
Added considerable guidelines and instructions.
Made icon templates available for download.
Added, updated, and removed icons from an earlier set and weaving relevant final icons throughout components.
Published visual style & components including:
Published the first UX pattern: Errors .
Published additional system documentation for:
Enhancements
Site Documentation
Added the ability to pair an image with a caption.
Added the ability to pair images and text side-by-side, and applied the new layout to many components.
Added background color to documentation code/example pairs
Improved link specificity for reporting bugs and requesting enhancements to open customized JIRA tickets.
Added a table of contents navigation to many documentation site pages.
Isolated documentation page titles and intros to ease formatting and content reuse.
Centralized the conventional display of code text.
Fixes
Site Documentation
Fixed small defects within site navigation.
Made numerous small copy edits throughout site documentation.
Displayed box-shadow
constants appropriately on the Constants page.
Suppressed site navigation active highlight when on a page not displayed in the site navigation.
v0.7.0 June 16, 2017
What's New
Published documentation for visual style & components including:
Added documentation describing how the community can learn about and engage with the system, including:
Enhancements
Improved documentation site typography with larger type and proper spacing
Improved documentation page-specific navigation with enhanced visual style, smooth scrolling, responsiveness, headers, and more.
Extended the Space visual conventions for inline items aligned to the left and right of a block.
Added and documented an optional close button to the Tooltip component
Added examples to the Pagination component
Fixes
Visual Style & Component Library
Updated Border Colors to use a lighter gray in light background settings.
Applied the mds-link
mixin to the List Groups component
Refined the location of a focus ring on the Button Group and Links components
Removed underline from required form indicator in Firefox and Chrome
Applied spatial conventions to existing components including Tooltips .
Added accessibility support for labels and content in the Pagination component
Simplified the mds-size
mixin used for incremental spacing for components of varying sizes.
Site Documentation
Added background color to label within code/example renderings, improving contrast between the label and the rendered content beneath it
Removed narrow examples from the Modals and Range Sliders components
Removed subsection divider between sections in site navigation
Enabled the code pill to wrap in documentation reference tables
Remove dependency on forked github version of gulp-nunjucks plugin
v0.6.0 June 2, 2017
What's New
New component documentation now available:
New components released, with documentation to follow in a future release:
Published helpful setup and configuration instructions for engineers to Get Started .
Displayed the gallery of Icons with a custom grid design.
Displayed Typography specimens for varied font weights, sizes, and types.
Normalized icon sizing for regular and small icons.
Enhancements
Improved the Modal component with:
Dynamic button quantity (previously, max 2) and types, including flat icon buttons
Added scrollbar on content body within the modal
Fully utilizes MDS typography mixin for the content body
Width options and fitting 90% height of a viewport
Makes title/heading optional (although title is still present in DOM for accessibility)
Added clickable overlay to dismiss modal but disabled for those that contain a primary button
Enhanced MDS site navigation (on the left) to emphasize visual style, improve list group size and spacing, and better organize concerns for scale.
Added accessibility attributes to the Search Fields component.
Suppressed visited styles on Links .
Improved Data Tables , Button Groups and List Group macros and tooling for documentation displays.
Improved CSS Class References per component by highlighting code using a code pill display
Fixes
Aligned focus state displays across library components, including Button , Search Field , and Switch .
Moved component-specific JavaScript demonstrations from the library/
folder to the docs/
folder, and consolidated demonstration JavaScript across MDS sink pages.
v0.5.0 May 19, 2017
What's New
New component documentation now available:
New components released, with documentation to follow in a future release:
Added a renamed and revised set of MDS icons to complete the collection to be made available as part of MDS v1.0
.
Enabled the production of versioned documentation, ZIP downloads, and NPM packages permanently available for all MDS releases.
Enhancements
Added spacing and sizing mixins to tune visual style on components that require small, medium, and/or large displays.
Began applying global spacing concepts across library components to better centrally manage space using constants with:
Added light/dark mixins for easily defining background, text, and border colors per component and elements-within-components across background colors triggered by a container that uses a mds-container
, and added those controls to styles for:
Improved link decoration based on go-forward, non-underlined convention.
Fixes
Improved security of Gulp usage from Github by added https
Improved element focus ring displays for Form , List Group , and Pagination components.
Ensured that a List Group item’s metadata appears on the same line as the primary label.
Swapped border strokes for box-shadow strokes for Button , Search Field , and Switch focus displays.
Refactored Notification to apply appropriate MDS variable names, organized JavaScript, and markup attributes.
Fixed a SASS linting error for HEX code pills within MDS documentation .
Refactored documentation site components to comply with new spacing constants and mixins.
Unified the automation of constants, so that one constants.json is referred to by both /library
and /doc
displays.
Moved “kitchen sink” pages from /component-sinks
to /sink-pages/components
, consistent with where other non-component sinks are located.
v0.4.0 May 5, 2017
What's New
Color documentation that includes:
Revised neutrals palette from white to black, threaded through the library
Revised system blues for default, hover, and active interactive states used for buttons, links and other controls
Background color for white, light gray, dark gray, and black settings
Text colors for primary, secondary, disabled, interactive, and inline error text
Borders for separating content (such as a table or list row) and stroking controls (like a form or pagination component)
An accessible color contrast chart
New components released, with some related documentation to follow in a future release:
New documented component released:
Enhancements
Added ~100 additional MUI-Bootstrap icons as a starting point for the MDS icon library.
Overlaid revised space onto Form elements, using concepts illustrated on the [Space] sink page.
Colored swatches adjacent to hex variables displayed inline throughout documentation and on the Constants page.
Added additional components to the Components Gallery “Sink” page.
Added a favicon for the MDS site.
Fixes
Revised typography quotes on the Release History page.
Swapped deprecated interactive cyans for new interactive blues.
v0.3.0 April 21, 2017
What's New
New components released, with some related documentation to follow in a future release:
Enhancements
Added banner to MDS Home page.
Added Flat variation to the button component.
Added keyboard and screen reader accessibility to tooltips .
Radio button and checkbox hover & active styles aligned with Button hover & active styles.
Added component_config.yaml file to control what component styles are included in the compiled mds_library.css file.
Numerous adjustments to style, markup, and configuration-file conventions to accommodate theming, with changes completed in a future release.
Fixes
Fixed ie11 button focus.
Fixed Data Table accessibility by adding a <caption>
element to improve screen reading.
v0.2.0 April 7, 2017
What's New
New components released, with some related documentation to follow in a future release:
Constants documentation with introductory material and complete catalog.
Added a gulp task for generating files required for a new component.
Enhancements
Refined button colors for hover and disabled states.
Revised distinctions (via a mixin) for disabled states of entire block elements vs. text within an element. Affected items include forms, pagination, range slider, switch, and button.
Fixes
Removed Morningstar-specific content around the MDS release process.
Replaced global box-sizing with border-box
mixin, encapsulated per component.
Added charset meta tag to documentation site.
Realigned pairing of button label and icon within buttons .