Allow the Large ("l") Icon size for EuiButtonEmpty.iconSize property

[qpointsystems]

EuiButtonEmpty is a useful component in various UIX situations. It is also used as a subcomponent of a number of other Eui components (e.g., EuiHeaderSectionItem, etc).

Currently EuiButtonEmpty performs a validation check on the iconSize property, with the valid values being "s" and "m" (small and medium, respectively).

In certain UIX situations, particularly for clarity, it is useful to display the Icon in its "l" (large) size particularly where only the Icon is being displayed.

As a user of the EuiButtonEmpty component, it would be useful to display/utilize the "l" or Large size for the Icon display, without failing the property validation check and generating the accompanying stacktrace.

[elizabetdev]

Hi @qpointsystems,

Not supporting the size "l" for EuiButtonEmpty and EuiButton was a design decision. But we're going to consider supporting a bigger size.

In certain UIX situations, particularly for clarity, it is useful to display the Icon in its "l" (large) size particularly where only the Icon is being displayed.

Is there any particular reason you're not using EuiButtonIcon? For the size "m" of the EuiButtonIcon you can customize the iconSize to any of "s", "m", "l", "xl", "original", "xxl".

Let me know if that was helpful.

[qpointsystems]

Thank you for the thoughtful reply. I need to say upfront that I love EUI and all the work that's gone into this project and especially that it's an opinionated UX. I value and respect the opinion here. Specifically in my case, the scoping of the icon sizes (e.g. limiting choices) is highly appropriate because it is enforcing the 'opinion'/design philosophy.

Now wrt this question of mine: in my case I'm only getting the EuiButtonEmpty through that components usage in the EuiHeaderSectionItem component. The 'size' property is propagated to [I think] EuiButtonEmpty. I'm not sure 100% who is doing the 'assert' check on the property and constraining the size choices. I think it is the EuiHeaderSectionItem.

I my UI, I'm displaying a few EuiHeaderSectionItem widgets in my topbar [see attachment] and, on a large screen these days with a gazillion pixel horiz DPI, the "m" buttons just look too tiny and the "l" makes a nice difference. Just my opinion, haha.

I'm ready to concede here on this issue and go with "m" or simply hide the warning that is generated by EUI (BTW, it works just fine with the "l" icon size; it simply throws a warning in the logs).

Cheers!

[github-actions[bot]]

👋 This issue hasn't seen activity in 3 days, so we're automatically closing this issue as answered. Please leave a comment if that's not the case, or if you have any remaining questions or issues.