New: Common header badges do not fit on current patter for icon buttons with gap=none

[gregfuruiye]

What does this request relate to?

Theming, component, guidelines

Describe the feature you'd like to request.

In keeping with the theme, guidelines and component for the common header service, the icon buttons have no gap between the buttons. When applying a badge, the gap between the icons would then either overlap, or push to accommodate the space for the badge. In Figma, the badges will overlap the subsequent icon making the design incomprehensible to the user.

Links to Figma files with use cases or ideations from you.

I would propose adding gap xxsmall at minimum for the current badge placement. Alternatively, place the badge within the scope of the button: https://www.figma.com/file/3cwJzWspbhUapvwPANrOyi/COM-Resources?type=design&node-id=222%3A51709&mode=design&t=lOJVOspEPd8hwnUT-1

How urgent is this request?

Not urgent

Is there anything else you would like to mention?

No response

[vavalos5]

@KennyAtHPE any updates on progress?

[KennyAtHPE]

Link to branch

There are several locations in which badging is currently being placed on our components:

• Top right of an icon with a 6px corner radius background
• Top right of an icon with a 100px corner radius background
• Top right of an icon with no background border

We're facing an issue with how the button is built since the badging is positioned on the top right with absolute positioning. Currently, It will always appear at the corner of the button component regardless of whether or not there is a border. If we want to change the positioning to be different from variant to variant based on the border then either:

• the icon frame dimensions will have to change
• the positioning of the badge will change

In both instances the badging positioning will change based on the corner radius and if there is a border or not. Are we sure that we want to go ahead with this change?

[SeamusLeonardHPE]

There are quite a few problems with the implementation of this, the sub component seems to be missing, its alignment is incorrect and it would be nice to see some screen shots from coded examples to understand expected behavior at different button sizes and the restrictions for size based on the number string returned. Would not recommend moving the location based on the button type.

I understand this is not technically a 'component' but its available in Tabs also and not reflected in that figma component. If the styles & implementation/code is the same for tabs lets create a new sub component to use in both place and investigate how we can use booleans to reduce some of the variant creep in Button.

To Gregs question - The simple solution is to add the recommended gap between buttons, since the hover state will then indicate which button the badge belongs to. There is 9px drift outslde of the button bounding box, so gap needs to exceed that. If we increase the size of the badge it will over lap the rounded button more, but will need more margin also.

Should the badge size increase with bigger variants? Does it in Grommet