modus-web-components Button: Small buttons are not sized correctly

See screenshot (from https://modus-web-components.trimble.com/?path=/docs/components-content-tree--multi-selection) showing active state here:

We should specify height and width of the button, or set consistent vertical/horizontal padding to fix this issue.

Feb 16 '24 08:02 coliff

The actionbar is just a collection of modus buttons so the issue should be addressed on small buttons. Ensure size and focus borders are correct after fix.

Apr 03 '24 15:04 cjwinsor

@ElishaSamPeterPrabhu Maybe the modus-button should have icon-only on it e.g. icon-only="add" ?

Nov 08 '24 07:11 coliff

@ElishaSamPeterPrabhu Maybe the modus-button should have icon-only on it e.g. icon-only="add" ?

Yes we can do that but the icon map doesn't contain for the other icons

So where should we update them?

Nov 08 '24 07:11 ElishaSamPeterPrabhu

...or instead use some custom CSS like:

height: 28px; width: 28px; padding: 8px; margin-left: 8px

Nov 08 '24 08:11 coliff

height: 28px; width: 28px; padding: 8px; margin-left: 8px

after applying the css Is this the expected look?

Nov 11 '24 05:11 ElishaSamPeterPrabhu

Is this the expected look?

not exactly, I just included that CSS as a starting point which improves things somewhat.

Nov 11 '24 10:11 coliff

Is this the expected look?

not exactly, I just included that CSS as a starting point which improves things somewhat.

@coliff There are two points to address

#1466 has a similar need to decide between modus button with icon-only property or the custom css with svg.
Is there a reference on how the custom bar should look as its not available in figma?

Nov 12 '24 05:11 ElishaSamPeterPrabhu