Refines defaultInset to better render on retina and regular monitors
Adds ability to shift the arrow placement alongside the edge of the parent container. This addresses the case when a parent container is too short for be supported by the default arrow placement logic.
For example:
The arrow of a small tooltip using end-bottom placement will extend past the container's boundaries because of the border-radius
Before
After
Checklist
[ ] :ok_hand: design updates will be Garden Designer approved (add the designer as a reviewer)
[x] :globe_with_meridians: demo is up-to-date (npm start)
[ ] ~~:arrow_left: renders as expected with reversed (RTL) direction
[ ] :black_circle: renders as expected in dark mode
[ ] ~:metal: renders as expected with Bedrock CSS (?bedrock)~~
[ ] :guardsman: includes new unit tests. Maintain existing coverage (always >= 96%)
[ ] ~~:wheelchair: tested for WCAG 2.1 AA accessibility compliance
[x] :memo: tested in Chrome, Firefox, Safari, and Edge
Description
Fixes a regression created in https://github.com/zendeskgarden/react-components/pull/1882
Detail
defaultInsetto better render on retina and regular monitorsFor example:
The arrow of a small tooltip using
end-bottomplacement will extend past the container's boundaries because of the border-radiusBefore
After
Checklist
npm start):black_circle: renders as expected in dark mode?bedrock)~~