Workday
Buttons placed within `Popup.Body` are getting their focus rings cut off
🐛 Bug Report
A clear and concise description of what the bug is.
To Reproduce
[email protected]
Place any CK button (Primary/Secondary/Tertiary) within a Popup.Body. Focus the button.
Expected Behavior
The focus ring should not get cut off by the Popup's padding.
Actual Results
The focus ring is cut off on the sides that are too close to the Popup's borders. Fix should also work for buttons that cannot be moved outside of Popup.Body
Browser (if applicable)
Edge and Chrome on Mac
Link to repl or repo (highly encouraged)
https://workday.github.io/canvas-kit/?path=/docs/components-popups-dialog-react--basic https://workday.github.io/canvas-kit/?path=/docs/components-popups-toast-react--error#with-an-action-link
Error Output
Not sure yet but based on this issue, it's not encouraged to have an element break the stacking context: https://github.com/w3c/csswg-drafts/issues/3417
Still need to dig into this. I know some libraries have their action buttons outside the "Body" to avoid this. In this case, the Modal could have another sub component, something like Modal.Footer where these buttons would live and have the proper focus outline not clipped.
FYI @mannycarrera4 , there are use cases where buttons might not want to go at a footer (i.e. 2nd screenshot). Some popups will have buttons that are placed on the left or right borders of the Popup which wouldn't make sense to move to a Modal.Footer or equivalent