Doist
Provide the ability to have a button in the Button's endIcon
🚀 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
https://user-images.githubusercontent.com/15199/167526279-c52510bc-2e23-4a02-8ab3-87af5ba1266a.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:
- The inner icon is not really a button, so it is not accessible.
- 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).
