Fe/bugfix/refactor ri tooltip to better use styled components #5233
+374
−26
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
[Tech Debt]
Refactored
RiPopovercomponent to improve styled-components compatibility and extensibility while maintaining full backwards compatibility.Changes
triggerprop (optional): New preferred prop for popover trigger element, works alongside existingbuttonprop.aliasof button, withthe idea to move to it entirely over time and remove
buttonusagesclassNameprop (optional): New preferred prop for popover content wrapper styling, using standard prop name for better styled-components integration.standaloneprop (optional): Whentrue, the trigger renders directly without a span wrapper to avoid DOM interference with styling/layout. Requires the trigger element to be a base DOM element (div,span, etc.) or a component that forwards refs.buttonandpanelClassNameprops continue to work unchanged:buttonalways wraps in span by default (legacy behavior preserved)panelClassNamefalls back whenclassNameis not providedTech Decisions
standaloneprop: Rather than automatically wrapping trigger in span,use an explicit
standaloneprop to control trigger wrapping.This gives developers clear if they need it.
classNameinstead ofpanelClassNamealigns with styled-components and other CSS-in-JS libraries that expect standard React prop names. And will work out of the box for custom styling of popover contentsWhy
This refactoring enables better integration with styled-components and similar styling libraries:
classNameprop, making it easy to style RiPopover's component with styled-components.inlineelement, other timesblock,flexor whatever element for trigger of the popover. This is the Element that the user clicks on to show the popover.anchorClassName(found more than 20 usages in the codebase).It should be a css class stored somewhere (global or module stylesheet), which while it is not a problem in
general, creates discrepancy with how we want to style things (using styled-components).
spanis used, don't need to change anything.span,divorstyled-componentand you are done.Testing
RiPopoverremain unaffectedManual Testing
RiPopoverusages continue to work (e.g.,CancelButton,EditablePopover,ConfirmationPopover,TagsCellHeader)triggerorbuttonprop withstandalone={true}(renders directly without span wrapper)triggerorbuttonprop withoutstandalone(wraps in span as expected)classNameprop works correctly for styled-components integrationbutton/triggerorpanelClassName/classNameare provided