search

trimble-oss / modus-web-components

This library provides Modus components as web components - reusable, encapsulated UI elements that are framework agnostic (can be implemented in any site).
https://modus-web-components.trimble.com/
MIT License
34 stars 70 forks source link

Button: Small buttons are not sized correctly #2162

Open coliff opened 8 months ago

coliff commented 8 months ago

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

image

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

cjwinsor commented 7 months ago

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.

coliff commented 3 days ago

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

ElishaSamPeterPrabhu commented 3 days ago

@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?

coliff commented 3 days ago

...or instead use some custom CSS like:

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

ElishaSamPeterPrabhu commented 16 hours ago

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

after applying the css image Is this the expected look?

coliff commented 11 hours ago

Is this the expected look?

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