Uh oh!
There was an error while loading. Please reload this page.
Overlay: Add min-width to Overlay container - #5129
Conversation
🦋 Changeset detectedLatest commit: 2f7a92c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
size-limit report 📦
|
🟢 golden-jobs completed with status |
| } as React.CSSProperties | ||
| } | ||
| data-reflow-container={reflowSize && reflow ? true : undefined} | ||
| data-reflow-container={overflow || (reflowSize && !preventOverflow) ? true : undefined} |
There was a problem hiding this comment.
I'm confused about this logic, wouldn't the second part be overriding the FF? or is that the intent here?
There was a problem hiding this comment.
For this, I was thinking of adding the prop outside of the FF, but putting the opt-out factor inside the feature flag. So basically someone could use the prop today, but they'd have to pass it themselves.
if overflow is true, that means that the FF is enabled and a consumer would have to opt-out of it via preventOverflow=true. Otherwise, if the FF is not enabled, they must pass in preventOverflow="false" in order to get the reflow style.
There was a problem hiding this comment.
ahh I see, thanks for explaining that!
Closeshttps://github.com/github/primer/issues/3377
Adds a prop that enables "reflow", making the
Overlayresponsive when the screen width reaches a breakpoint of320px.Example: Memex Nested Overlays Story
Draft note: The prop is added so that this doesn't affect implementations that utilize
Overlaysuch asActionMenuand others.Example video
Screen.Recording.2024-10-28.at.2.34.39.PM.mov
Video description: Video showcases the responsiveness of the "Memex Nested Overlays" story. I adjust the width of the viewport to demonstrate the reflow behavior of the
Overlaycomponent.Changelog
Changed
min-widthtoOverlaycontainerRollout strategy
Testing & Reviewing
Merge checklist