Floating Toolbar in Web Components

[davidtsilcock]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the Modus style guidelines

Proposal

This is a ticket outlining the work to be done on the toolbar in the floating UI style that has been discussed with the modus team.

This development can be carried out by the Creator/Nexus team.

Original toolbar:
Modus doesn't currently have a toolbar in its library, however, it would look something like this in the current style.

Floating UI Navbar:

Trimble Creator Navbar:

The toolbar would like just be a standard modus button contained in a panel/wrapper of some sort.

We would like to develop this as a Modus web component, and then contribute it back to Modus.

Motivation and context

Floating UI is a critical part of a canvas-style application such as Trimble Creator, SketchUp, Maps, and more. This UI allows the user to focus more o the creative space rather than the encompassing UI.

What is the issue regarding ?

@trimble-oss/modus-web-components

Priority

Medium

What product/project are you using Modus Components for ?

Trimble Creator

What is your team/division name ?

Nexus

Are you willing to contribute ?

Yes

Are you using Modus Web Components in production ?

Not yet, this will be one of the first steps on our migration to web-components in Trimble Creator.

[msankaran0712]

Moving this to backlog until Trimble creator team or someone is available to contribute

[msankaran0712]

Maha to add Figma and Styleguide references

[msankaran0712]

Maha to check with the Modus team about what is the status of Floating Toolbar, Navbar and Utility panel on Styleguide and figma

[sorina-ocheana]

I'll be the one contributing to this component

[sorina-ocheana]

• The red toolbar is opened by button no. 1 and it's placed on the left
• The blue toolbar is opened by button no. 2 and it's placed on top
• With green is a dropdown placed on top, opened by button no. 3

[sorina-ocheana]

Text button

[msankaran0712]

@egunther39 Do you have any comments on the above use cases?

[msankaran0712]

@sorina-ocheana Can you please explain the use case for text button? Why can't have a icon button instead?

[davidtsilcock]

We could have an icon button, but I imagine there are a lot of use cases where text buttons would be needed in toolbars. Take Trimble Drawing for example:

I feel that it would be more productive for the component to allow any type of button to sit inside it, not just icon only buttons.

[msankaran0712]

@enowak1031 @egunther39 any comments on the text buttons inside a Toolbar?

cc @davidtsilcock @sorina-ocheana

[egunther39]

@msankaran0712 @davidtsilcock @enowak1031 - I think this is a valid use case and I'm okay with this

[msankaran0712]

@davidtsilcock we are good with having text buttons in Toolbar. PLease proceed with the developemnt