FAQ

What is Modes UI?

Modes UI is Metso Design System’s (Modes’) collection of reusable components and tools, that can be assembled together to build digital products and experiences for Metso. It is the recommended component library for any new Metso product teams starting to use the design system’s assets.

Where does the name come from?

Modes is a pseudo-acronym of the words Metso Design System, but it’s actual meaning refers to ways of doing or operating a system. Find more information about the Modes design system on the zeroheight page.

Will Modes UI replace DSUI (Modes React Components)?

Eventually, it would be best to have just one component library, and Modes UI would be the obvious choice in that case. However, as many product teams still depend on DSUI, deprecating it is not currently feasible. DSUI will continue to be maintained for the foreseeable future, but most new development will be focused on Modes UI.

If your project is already using Modes React Components (DSUI), there is no urgent need to migrate to using just the Modes UI library. However, both can be used simultaneously, and it is up to the user to decide if using one of the libraries or both is ideal for their use case.

Can I use Modes UI with React?

Yes, Modes UI provides all of its components as plain Web Components, and also as React wrapped variants. It uses @lit-labs/react to wrap the components to ensure proper event and property handling in React. The latest major React version 18 supports plain Web Components only partially, but Modes UI’s automatic wrapping handles the parts that React currently cannot.

As React has such wide adoption, all the components also have React code examples that users can copy and try in their applications.

How is this documentation site created?

This documentation page is a static web application hosted on Azure. It’s built with 11ty currently (used to be Docsify), and uses markdown files for the different pages. See the documentation template repository if you’d like to create a documentation site like it yourself.

How is version control handled?

As of early 2023, all Modes components and the library packages are now hosted in GitHub. Previously the components and their packages were hosted in Azure DevOps. They are still available there, but will no longer receive updates and all future version control should be handled in the GitHub repositories. Existing projects using the Azure packages are strongly encouraged to migrate to the GitHub repository.

I don’t have access to the GitHub repository?

To gain access to the repository, and to be able to clone the project and install the packages, you will need to get a Metso Enterprise GitHub license from the Access Catalog in FastTrack. After you have your account and you can access the repository, see the authentication section on the installation page to see how to install the package.

How frequently is the component library updated or maintained?

The component library does not have a set schedule for new releases and updates, but it is actively maintained at all times. New releases typically come out every two weeks or so, depending on the features that are added and if there are contributions from external teams. In case of a business-critical bug, a new release can be made immediately to address it.

How are the components created?

The components are written using Lit, Google’s library to facilitate more efficient Web Component creation. The components follow a consistent implementation approach that is documented in the Best Practices documentation, and any new components should abide by these guidelines.

How can I contribute?

See the Contributing page for general guidelines on how to handle issues and pull requests for the component library repository. Implement your changes following the Best Practices documentation. Once you create a pull request targeted to the next branch, the GitHub actions pipeline will automatically run checks on the PR and deploy a temporary environment where you can demo your changes to those who have not checked them out locally.

If you are unfamiliar with Lit, you can find tutorials and documentation on Lit.dev, it should be fairly easy to learn the syntax since it is very similar to React.

Why Web Components?

Web Components offer a standardized approach to building reusable and encapsulated components that work across different frameworks and browsers. They provide several benefits in terms of reusability, encapsulation, interoperability, maintainability, extensibility, and access to a vibrant community ecosystem.

Are there any performance considerations when using the components?

For the most part, all the components are performant enough for typical use cases in Metso’s digital products. However, rendering thousands of elements in the DOM will be slow regardless of performance optimizations in the components. Some components such as the Table, Datagrid and Combobox handle massive data using DOM virtualization, but even then it is up to the users to ensure they use the components in a reasonable way.

For example, having 3000 options on a Select component does not provide a good user experience, and will also lead to performance issues. Instead, options should be filtered in another way before assigning them to the Select.

If you believe there are performance related issues with the components themselves, you can create an issue in the repository and we will look into the problem and find out the cause.

Can I use the component library in both web and mobile applications?

The components in Modes UI are adaptive, meaning they will function well on mobile screen sizes in the browser. Modes UI does not provide mobile application specific components, such as React Native. This means that the components cannot be used in a native mobile application.

However, Progressive Web Applications (PWAs) can use Web Components, and they are gaining popularity in the mobile application space.

Can I customize the components in the library to fit my specific needs?

Modes UI components should be composable and flexible enough, so that you can add functionality and content to them without having to actually change the component source code itself. However, if you do need the component itself to change to support a feature, create an issue about the change in the repository and the design system team will consider whether the feature should be included, and who would implement it.

Can I create a custom theme?

Yes, you can now create your own theme using the Modes Theme Builder tool. Keep in mind that the theme colors should be chosen to be in line with branding guidelines (i.e., no blue themes). The palette generation tool should ensure accessibility and contrast between colors, but ensure that this is the case before deploying.

This tool gives more power to the user, but also more responsibility. Contact us or the branding team before changing the theme on your application.