fix(tooltip, popover): Support transparent backgrounds #6803
Conversation
github-actions
bot
added
the
bug
driskull
added
the
pr ready for visual snapshots
driskull
removed
the
pr ready for visual snapshots
driskull
added
the
pr ready for visual snapshots
|
@jcfranco @ashetland Let me know if you'd like to proceed with this or not. |
|
Losing the border on the arrow is a deal breaker for me on this one. Without the border, the arrow practically disappears and thus reads like a bug. I think supporting transparency, even if minimal, is valid though. What would it mean to support it? Are we talking breaking changes / major rework? |
|
@jcfranco you'll have to make the call on what is more important here. If we have an arrow behind an arrow that will defeat the purpose of transparency as well due to compounding background colors. |
|
Going to close this as it's not possible to use just clip-path and have a border with it. I even tried putting a rotated box div inside and trying to clip it but it still didn't render correctly. Going forward, we may want to introduce an internal component (possibly functional component) to handle rendering a triangle SVG and styling it with a stroke/fill. See: floating-ui/floating-ui#2195 CSS just isn't good at doing this even in 2023. |
…ng (#6086) **Related Issue:** #6081 [#6803](#6083) ## Summary As suggested by @alisonailea [in this comment](#6075 (comment)), extracts some common keyboard navigation focus helpers into a shared utility. Along the way discovered a few things that are fixed alongside the refactors: Accordion: - Cleanup: The keyboard expected navigation changed at some point, which I confirmed with @geospatialem, but there was a lot of related stale code that is removed. Dropdown: - Fix: Previously, tab / shift tab would skip elements resulting in navigating to every other item. - Fix: Previously, there was inconsistent close behavior when using tab / shift tab at the first / last item. - Fix: Previously, when `accordion-item` had a populated `href` property, there was a "double focus" issue. - Cleanup: Uses the new utility to handle keyboard navigation / focus Stepper / Tabs: - Cleanup: Uses the new utility to handle keyboard navigation / focus All existing tests are passing, but we may want some extra passes of manual testing, especially in the dropdown case, since there were so many weird bugs previously.
**Related Issue:** #6798 ## Summary - Creates a `FloatingArrow` functional component to generate an SVG for the arrow. - Uses `FloatingArrow` instead of `transform: rotate` to create the caret arrow tail. - Introduces optional state property `floatingLayout` on `FloatingUIComponent` class for sizing the arrow properly. - Removes CSS where we are setting the BG on two separate elements. - Sets `Action` used in the popover to be transparent. - Removes unnecessary styles - Screener tests - See: floating-ui/floating-ui#2195
Related Issue: #6798
Summary
clip-pathinstead oftransform: rotateto create the caret arrow tail.