react icon indicating copy to clipboard operation
react copied to clipboard

[Do not merge yet] Portal: Make portals 100% width to support children with width:auto

Open siddharthkp opened this issue 7 months ago • 3 comments

  • Fixes https://github.com/primer/react/issues/3947
  • Includes https://github.com/primer/react/pull/3958

[!WARNING] Possible breaking changes?

This PR affects Portals, so all overlays with width:auto would now be able to grow like they should have. It's hard to know which instances will this PR breaks.

Components that use Portal:

  • Overlay (+ AnchoredOverlay, ActionMenu, Autocomplete, InlineAutocomplete, ~LabelGroup (not used in dotcom)~)
  • ~Dialog v2 (+ ConfirmationDialog). (dialog never uses width:auto)~

Side note: There are multiple instances where width has been set to small or medium that can be cleaned up now in favor of auto

 

The issue here was that the Portal we created by default did not have any width which meant floating components like Overlay don't grow even with width:auto

Before After
long text wraps in 2 rows long text making the menu wider

siddharthkp avatar Nov 20 '23 14:11 siddharthkp