[LG-5760] chore: FormFooter Sticky Styling #3344
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 42ddd29 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 |
Contributor
|
Size Change: +94 B (+0.01%) Total Size: 1.8 MB
ℹ️ View Unchanged
|
adamrasheed
requested review from
TheSonOfThomp,
Copilot,
stephl3 and
tsck
and removed request for
a team
Contributor
There was a problem hiding this comment.
Pull request overview
This PR refactors the FormFooter component's internal DOM structure to properly support sticky positioning by separating the outer footer container from the inner content container. This separation allows the overflow shadow utility to be correctly applied to the inner container while maintaining the proper background styling on the outer element, preventing visual issues when the footer uses position: sticky.
Key Changes
- Introduced a new inner container div with
getInnerContainerStyles()that applies the overflow shadow and inherits the background from the outer footer - Moved layout styles (min-height, padding, flex properties) from the outer footer to the inner container
- Updated the Storybook stories to use named imports and added a new
StickyFooterstory demonstrating the sticky positioning use case
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
packages/form-footer/src/FormFooter.tsx |
Added new inner container div between footer and content elements; removed unused cx import; restructured DOM hierarchy to support sticky positioning |
packages/form-footer/src/FormFooter.styles.ts |
Split styles into three layers: outer footer (background, theme), inner container (layout, overflow shadow), and content (flex layout); added getInnerContainerStyles() and getContentStyles() helper functions |
packages/form-footer/src/FormFooter.stories.tsx |
Changed import from default to named export; added new StickyFooter story with sticky positioning example |
tools/install/src/ALL_PACKAGES.ts |
Added two @lg-chat packages to the package list (appears to be unrelated to FormFooter changes) |
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
Collaborator
TheSonOfThomp
left a comment
TheSonOfThomp
left a comment
There was a problem hiding this comment.
Just missing a changeset
stephl3
reviewed
Nov 25, 2025
| /> | ||
| ); | ||
|
|
||
| const StickyTemplate: StoryType<typeof FormFooter> = ({ |
Collaborator
There was a problem hiding this comment.
If this is intended to be a chromatic snapshot, it could be made more realistic by setting overflow: hidden; on the scrolling div and making this a play test that scrolls to a fixed point before taking the snapshot. There are a couple examples of this in the Drawer stories if you search for a ScrollableAndPadded story
Collaborator
There was a problem hiding this comment.
I don't know if we necessarily need to test that the sticky behavior works on scroll, and just leave it with a test confirming that adding position: sticky; doesn't break it
stephl3
reviewed
Nov 26, 2025
Contributor
|
Coverage after merging ar/LG-5760-shadow into main will be
Coverage Report for Changed Files
|
|||||||||||||||||||
|
Hey @TheSonOfThomp @adamrasheed @stephl3 - I’m asking here because I’m not sure where else to reach out. I’m building an app and plan to use LeafyGreen as the design system, with some customizations (changing primary colors etc.). I’d also like to use your icon library in the product. I see that the project is open-sourced under the Apache license, but I wanted to explicitly confirm that it’s okay to use the design system outside of MongoDB for a commercial, paid product - including elements that are indirectly part of MongoDB’s brand (because they are embedded in this repo, for example, your font and icons). If someone could clarify this directly or point me to / ping the right person on your team, I’d really appreciate it. Feel free to delete this comment after replying. You can also reach me by email at [email protected]. |
TheSonOfThomp
approved these changes
Dec 1, 2025
TheSonOfThomp
added a commit
that referenced
this pull request
Dec 3, 2025
commit cb03690 Merge: f201865 dbf5b75 Author: Adam Michael Thompson <[email protected]> Date: Wed Dec 3 14:26:43 2025 -0500 Merge branch 'main' into at/wizard-integration commit f201865 Merge: 814af43 7a1b203 Author: Adam Michael Thompson <[email protected]> Date: Wed Dec 3 14:26:14 2025 -0500 Merge branch 'at/wizard-integration' of https://github.com/mongodb/leafygreen-ui into at/wizard-integration commit 814af43 Author: Adam Michael Thompson <[email protected]> Date: Wed Dec 3 14:26:03 2025 -0500 Update getTestUtils.tsx commit 7a1b203 Author: Adam Thompson <[email protected]> Date: Wed Dec 3 14:25:00 2025 -0500 Update packages/wizard/src/WizardStep/WizardStep.tsx Co-authored-by: Copilot <[email protected]> commit 83f936e Author: Adam Thompson <[email protected]> Date: Wed Dec 3 14:24:54 2025 -0500 Update packages/lib/src/childQueries/findChildren/findChildren.spec.tsx Co-authored-by: Copilot <[email protected]> commit f4a1e3d Author: Adam Thompson <[email protected]> Date: Wed Dec 3 14:24:33 2025 -0500 Update packages/lib/src/childQueries/findChild/findChild.spec.tsx Co-authored-by: Copilot <[email protected]> commit a219fae Author: Adam Thompson <[email protected]> Date: Wed Dec 3 14:24:23 2025 -0500 Update packages/wizard/src/Wizard/Wizard.tsx Co-authored-by: Copilot <[email protected]> commit dbf5b75 Author: Stephen Lee <[email protected]> Date: Wed Dec 3 10:16:56 2025 -0800 fix: publish script (#3356) commit 918b3a5 Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed Dec 3 01:41:06 2025 +0000 Version Packages (#3354) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> commit 0c523f5 Author: Stephen Lee <[email protected]> Date: Tue Dec 2 15:12:23 2025 -0800 chore: update release pipeline (#3355) * chore: update release pipeline * refactor: update publish script commit 0c42aba Author: Adam Thompson <[email protected]> Date: Mon Dec 1 19:03:38 2025 -0500 LG-3879: fix(DatePicker) Updates DatePicker Next/Prev button aria-labels (#3224) * updates chevron button labels * update select labels * update calendar cell label * Create date-picker-aria.md * Update DatePickerMenu.spec.tsx * Update DatePicker.testutils.tsx * Update date-picker-aria.md * Apply suggestion from @Copilot Co-authored-by: Copilot <[email protected]> * Apply suggestion from @TheSonOfThomp --------- Co-authored-by: Copilot <[email protected]> commit 6e49fef Merge: c462dca 9e5932c Author: Adam Thompson <[email protected]> Date: Mon Dec 1 18:27:25 2025 -0500 Merge branch 'main' into at/wizard-integration commit 9e5932c Author: Adam Rasheed <[email protected]> Date: Mon Dec 1 13:28:47 2025 -0600 [LG-5760] chore: FormFooter Sticky Styling (#3344) * [LG-5760] chore: FormFooter Sticky Styling * updated story * updates pt1 * updated story, style cleanup * cleanup, added changeset commit fa89f65 Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed Nov 26 23:12:40 2025 +0000 Version Packages (#3353) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> commit 837a0e7 Author: Adam Thompson <[email protected]> Date: Wed Nov 26 16:10:48 2025 -0500 Update pr.yml (#3352) commit 651c0bb Author: Nima Taheri <[email protected]> Date: Wed Nov 26 13:05:53 2025 -0800 LG-5588 Fix array field updates in chart options merge (#3351) * feat: correctly merge array-fields (choose full override, no recursive) * docs
Collaborator
While we can’t provide advice on your specific use, the library may be used consistent with the license terms and MongoDB’s Trademark Standards for Use (https://www.mongodb.com/legal/trademark-usage-guidelines). |
adamrasheed
added a commit
that referenced
this pull request
Dec 4, 2025
* [LG-5760] chore: FormFooter Sticky Styling * updated story * updates pt1 * updated story, style cleanup * cleanup, added changeset
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
✍️ Proposed changes
This PR refactors the
FormFootercomponent's internal structure to properly support sticky positioning (or prevent the overflow shadow from breaking based on additional styles added throughclassName). The changes separate the outer footer container from the inner content container, allowing the overflow shadow to be applied correctly when the footer is positioned as sticky. Previously, the shadow and background styles were applied to the same element, which caused visual issues in sticky contexts.🎟️ Jira ticket: LG-5760
✅ Checklist
pnpm changesetand documented my changes🧪 How to test changes
FormFooterStorybook stories