Our Visual Language is woven into our history. Presenting it here is our future. To that end, we’re incredibly pleased to send this first major release into the wild. It’s stable, production-ready and completely open to your feedback.
Please spend some time reviewing our first articulation of visual language, 18 components, and even a UX pattern.
We’ll be widening the net with every release to cement swiftness, consistency and clarity as Morningstar hallmarks.
v1.1.0 August 11, 2017
View 1.1.0 Docs
Download Zip
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.3 July 28, 2017
View 1.0.3 Docs
Download Zip
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
View 1.0.2 Docs
Download Zip
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
View 1.0.1 Docs
Download Zip
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
View 1.0.0 Docs
Download Zip
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
View 0.7.0 Docs
Download Zip
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
View 0.6.0 Docs
Download Zip
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
View 0.5.0 Docs
Download Zip
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
View 0.4.0 Docs
Download Zip
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
View 0.3.0 Docs
Download Zip
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
View 0.2.0 Docs
Download Zip
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.
