Quick start
To import the library via local installation (note that you will need access rights as the package is private) simply run either:
# GitHub installation (recommended) npm install @metsooutotec/modes-web-components
Now you have access to all of Modes UI’s components!
To add a button simply do:
<mo-button>Click me</mo-button>
To ensure the intended styling is applied, you must also import the styles, and configure the installation to find the icons. For more information on how to configure the library, refer to the installation instructions.
Modes
Modes UI is just one part of the larger ecosystem that is Modes (Metso design system). This quick introductory video will demonstrate what Modes has to offer, and how Modes UI fits in to the bigger picture.
Below is a list of some resources that can help you with adopting the Metso design system and contributing to it.
|
Resource
|
Description |
|---|---|
|
Modes UI has been migrated to GitHub, where all the version control, issues, pull requests, packages, etc., are handled now. |
|
The Metso design system zeroheight website has more comprehensive documentation and more designer tools and guidelines. |
|
The storybook documentation page for the components of the original React component library (DSUI) showcases various usage examples and React specific syntax. |
|
Modes UI and DSUI both used to be maintained on Azure DevOps. You can still find the legacy package and PR history there. |
Figma |
Figma contains all the design files related to Metso design system and some additional tools. |
If you do not have sufficient access rights for these websites, let us know and we will try to get you access.
New to Web Components?
Thanks to the popularity of frameworks such as Angular, Vue, and React, component-driven development has become a part of our every day lives. Components help us encapsulate styles and behaviors into reusable building blocks. They make a lot of sense in terms of design, development, and testing.
Unfortunately, framework-specific (React in our case) components fail us in a number of ways:
- You can only use them in the framework they’re designed for
- Their lifespan is limited to that of the framework’s
- New frameworks/versions can lead to breaking changes, requiring substantial effort to update components
Web Components solve these problems. They’re supported by all modern browsers, they’re framework-agnostic, and they’re part of the standard, so we know they’ll be supported for many years to come.
Browser support
Modes UI has been tested in the latest two versions of Chrome, Edge, Safari, and Firefox.
As mentioned above, Custom Elements are supported by all modern browsers:
| Browser | Versions |
|---|---|
Google Chrome
|
Partial support*: v. 54–66 (Oct 12, 2016 - Apr 18, 2018) Full support: v. 67 -> (May 29, 2018 -) |
 Microsoft
Edge
|
Full support: v. 79 -> (Jan 15, 2020 -) |
Mozilla Firefox
|
Full support: v. 63 - (Oct 23, 2018 -) |
 MacOS
Safari
|
Partial support*: v. 10.1- (Mar 27, 2017 - ) |
＊ Safari and earlier Chrome versions have partial support: they support “Autonomous
custom elements” (e.g., <mo-button></mo-button>), but not “Customized built-in
elements” (e.g., <button></button>, that has been customized). Note that
this should not be an issue for regular usage of Modes UI.
Critical bug fixes in earlier versions will be addressed based on their severity and impact.
If you need to support IE11 or pre-Chromium Edge, this library isn’t for you. Although web components can (to some degree) be polyfilled for legacy browsers, supporting them is outside the scope of this project. If you need to provide components for users that need these browsers, you should look into an alternative.
Attribution
A huge thanks to Cory LaViska for creating Shoelace, which functions as the base for this project
Important project dependencies:
- Components are built with LitElement
- Component metadata is generated by the Custom Elements Manifest Analyzer
- Documentation is powered by 11ty
- The homepage illustration is courtesy of unDraw
- Positioning of dropdowns, tooltips, et al is handled by Floating UI
- Animations are courtesy of animate.css
- QR codes are generated with qr-creator
- Search is powered by Lunr