What is the best way to set up buttons configuration for the Modus Modal Web component

[msankaran0712]

The latest Modus guidelines(Figma) for Modals state that a component's footer can have up to three buttons, as long as they follow a structural or colour progression without mixing. Non-primary buttons can also repeat. We need a configuration on the Modal component to let users choose which buttons to render and ensure the conditions are met.

Even if we cannot apply all the conditions mentioned above, we must at least identify the primary button and enforce its position. A primary button always stays right.

Examples,

Valid

Invalid:

The worst-case scenario is that we end up with a simple array of three buttons, with no conditions.

[mihkeleidast]

I wouldn't enforce the usage guidelines so strictly in the component API. This will become limiting to consumers at some point - I don't think it's unreasonable that someone somewhere at some point will find a need for something more custom. The guidelines should be what they are - recommendations provided with the component as copy-pasteable examples and documentation.

From a technical perspective, I'd leverage more dynamic composition over strict props: add a simple footer slot, where the consumers can put whatever they need.

<modus-modal header-text="Modal title">
  <p>Woo-hoo, you're reading this text in a modal!</p>
  <div slot="footer">
    <modus-button>Cancel</modus-button>
    <modus-button>Save changes</modus-button>
  </div>
</modus-modal>

This will allow:

• the current recommended approach/layouts
• any custom approach "the new product" needs
• using any props on the buttons
• wrapping the button with a tooltip, which may also be needed for whatever reason

As an example, here's one of our modal footers, which has a delete button on the left:

I would expect this sort of thing to be possible with the modus components, otherwise it will be very hard to adopt once the time comes.

Sidenote: the same goes for the modal header, really - it should also be customizable through a slot. The header can likely benefit from having two configuration options, i.e. either a title prop on the main component, or a slot with custom content.

So if we have this kind of modal header, which includes a back button, and a help button, I would expect this also to be possible, otherwise, again, adopting will be very difficult.

[msankaran0712]

@mihkeleidast Thank you for the answer. Very much appreciated! The Modus Web components are designed with the Modus Styleguide in mind, ensuring consistency across Trimble products and preventing projects from deviating from the guidelines. The components have limited user control to maintain this consistency, as tiger teams validate multiple use cases before framing the guidelines. However, we will provide more flexibility to the components as new valid use cases arise and the components need support. For example, inside a Modal the buttons are expected to be on the right side, not on the left. For more questions on the UX, you can reach out to Ewa Nowak/Eric Gunther/Sonia Kaukonen.

[cjwinsor]

Given the rigidity that is desired, there will be design decisions that don't make as much sense as a more flexible system would. Normally you'd either have a slot or an array of buttons. Both options allow for modus to design system to be broken, or to at least add confusion with something isn't rendered. This leads me to think that the answer is to add a tertiaryButton option or have secondary1 and secondary2. Its odd, but I think that comes with the territory here. Then you could at least have a single property that defines the type of both secondary buttons.

My preference would be for a more flexible component library and expect that UX teams to follow the modus design system while constructing their UI's and presenting to development to build. This would simplify and potentially speed up the development of the components too. However that can and will be abused when the modus design system doesn't cover their use case perfectly.

[msankaran0712]

@cjwinsor @mihkeleidast I am thinking of having it like an array of buttons, each with an index and a flag to indicate whether or not a primary button so that we can control the position of that button alone.

[cjwinsor]

Do we need an index property since the order of an array in js is guaranteed? And if we go with an array, then we'd need to have logic to deal with someone trying to set primary on all the buttons, having more than 3 buttons in the array, etc.

[msankaran0712]

@cjwinsor @mihkeleidast Thank you for all your inputs 👍🏼 The Modus team reviewed it and confirmed that we could let users configure the footer. So we will add a slot for the footer but will keep the primary and secondary buttons configurations, using which we can retain the focus inside the Modal window until a close event occurs. There will be a separate Github issue for wrapping the focus with a custom footer.