JavaScript in MDS

The Design System uses JavaScript to:

• Demonstrate browser-based interactions, such as opening and closing a Dialog or Notification.
• Polyfill functionality not natively supported in all modern browsers.

When to Write Example JavaScript

When component functionality can’t be achieved through HTML and CSS alone, use example JavaScript to illustrate component functionality. MDS users will reference these examples to write their own JavaScript for their products. MDS users should not copy and paste example JavaScript into their products.

Third-Party Libraries

MDS strives to minimize third-party dependencies, so be sure example JavaScript is insufficient before suggesting a third-party dependency. Third-party JavaScript libraries can be used if they enable markup customization so that CSS classes and HTML structure align with BEM naming conventions for MDS.

Consider following points when choosing between Third-party libraries:

• Popularity. Popular libraries are often used by Morningstar product teams. Consult with product teams to determine what libraries are already being used.
• Actively Maintained. Look for a library with recent and frequent code commits that indicate the library is actively maintained.
• Accessibility. If the library controls markup that should contain accessibility attributes or features, make sure that it’s meeting those accessibility guidelines. For example, noUISlider added accessibility support in v10.0.0.

Installing Third-Party Libraries

1. Install third-party libraries via NPM using the --save flag to add them to MDS’s package.json file.
2. Copy the dependency file paths to the dependencies:copy gulp task found in gulpfile.js. This will copy them to the doc site’s asset path.