[Input components, Combobox, Popover] Make close and clear buttons more consistent across system

[ashetland]

Draft proposal - pending user feedback

Description

Close buttons across Calcite exhibit some inconsistencies due to differences in implementation. Ideally close buttons would be consistent in both design and implementation throughout the system.

Acceptance Criteria

Update close & clear button padding

• Use action for close and clear buttons
• Update padding in consuming component

Relevant Info

Part of 4.0's Phase 2

Blocked by: #10759

Which Component

• combobox
• popover
• input
• input-number
• input-text
• input-date-picker
• input-time-picker
• input-time-zone

Example Use Case

No response

Priority impact

p4 - not time sensitive

Esri team

Calcite (design)

[ashetland]

Need to rescope this to include Close and Clear buttons. Basic design of x-button is complete and should be ready to propagate in design files. cc @jcfranco

[jcfranco]

For posterity, the z-index workaround for #7272 will probably not be needed if tabs' closable button ends up being round.

[ashetland]

To do

• Verify above list and add any missing
• Determine which component should get round or square buttons (or if everything just goes round)
• Make visual catalogue of changes

[alisonailea]

I think code-wise we should create a mixin similar to the Floating UI functions that all components can share.

[driskull]

Currently, we only have an internal functional component to handle close buttons. We should consider using action or enhancing it to meet the needs of close buttons. It would be good to use an existing component if possible. Ideally, whatever we do we have public so other users can create componets with close buttons that match ours.

[ashetland]

I've wondered about using Action too. Action would need more scales added (or a way to make them smaller) to accommodate all the sizes we need. It would also need the ability to be round. For example, Chips use a round 16px close button. Maybe rounding it could be achieved without explicitly adding that to Actions? In any other context, round Actions could be weird?

[driskull]

Action or Button make sense from a close look but it could warrant its own component if those won't be able to handle it.