Contribute

Once the preliminary design steps are complete, contributions can be transferred from design to code. Coding contributions to Morningstar Design can range from simple bug fixes or minor feature updates to more complex work like adding new components or capabilities.

Develop

Changes must be compatible with existing configurations and variations of the component. For example, a new feature must be able to work in tandem with all existing features without causing functional or design defects.

  1. Fork the relevant Morningstar Design repository, such as ui-elements or chart-elements.
  2. Make your fork publicly accessible by clicking Repository settings in the left-hand nav, opening the Repository permissions page, and adding group access for stash-users.
  3. Create a feature branch for your contribution and implement your changes.

Harden, Text, and Validate

Contributions should adhere to existing Vue naming conventions for props, methods, and events, as well as established SCSS practices, like BEM and nesting.

  1. Update storybook examples to incorporate your changes. If adding a new feature or variation, add stories to demonstrate the new feature.
  2. Ensure automated visual regression (AVR) and unit test coverage is at least 90%. See guidelines under the docs folder in the relevant Morningstar Design repository for details.
  3. Ensure Sonar coverage is at least 80%.
  4. Ensure accessibility support is in place, including keyboard control, screen reader support, and proper use of ARIA tags when necessary.
  5. Ensure use of Morningstar Design constants and typography mixins where applicable.

Document and Submit Your PR

  1. Update technical documentation to account for any new props, methods, or events. Documentation is found in the docs subfolder for each component, for example /button/docs/src/page.vue.
  2. Add your name to the contributors object in the component’s package.json file if it isn’t already present.
    Include your merge PR commit message as a comment for review. See guidelines in the docs folder of the relevant Morningstar Design repository for details.
  3. Merge the main branch into your feature branch to ensure there are no merge conflicts.
    PR your feature branch to main branch in the relevant Morningstar Design repository and submit to the Morningstar Design team for review.
  4. During review the Morningstar Design team will help determine whether your update will be a major, minor, or patch release.

Technical Documentation

Any new props, events, or methods must be accompanied by documentation. Technical documentation should be included in the PR for the contribution, and the Morningstar Design team will help with any questions, including writing standards for documentation.

Contributing Pull Requests

Reach out to the Morningstar Design team with questions before opening a PR. For breaking changes to the system, the Morningstar Design change process applies. Common sense should inform the level of review needed for any given change. If you are on a PC, you will not be able to run our automated visual regression (AVR) tests – please coordinate with a Morningstar Design team member to have them run and promote these tests on your behalf.