Provide the ability to have a button in the Button's endIcon

[gnapse]

🚀 Feature request

Motivation

We have the need, from some designs in Todoist's new task details view, to give the impression that there's a button inside another button. Specifically, to have an icon-button in the context of where the endIcon of a Button would appear:

Example

CleanShot.2022-05-09.at.21.48.25.mp4

Problems that this would solve

We're currently achieving this in the short term using a CSS hack to show the endIcon only when the button is hovered or its focus is visible. Then we provide a endIcon={<SvgComponent onClick={…} />}. But this is ignoring two larger issues:

1. The inner icon is not really a button, so it is not accessible.
2. Even if we made it a button (e.g. endIcon={<button type="button"><svg /></button>}), it would be incorrect markup to have a button inside another button.

Possible implementations

We would need a new component that provides an outer box containing the two buttons, but giving the impression that the main button fills this entire box, while the icon-only button sits also inside this outer bot, but outside the first button.

We already do something like this in Todoist's LabelPill component (closed source, but we may open-source a more generic version of it in the process of doing this work).

[frankieyan]

Twist ref: https://twist.com/a/1585/ch/496323/t/3559728/c/77579577