Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: resolve layout issues with sticky footer forms inside Carbon modal components (FE-6816) #6990

Merged
merged 4 commits into from
Oct 23, 2024
Merged

fix: resolve layout issues with sticky footer forms inside Carbon modal components (FE-6816) #6990

merged 4 commits into from
Oct 23, 2024

Conversation

Parsium
Copy link
Contributor

@Parsium Parsium commented Sep 26, 2024 •
edited
Loading

closes #6969

Proposed behaviour

  • Address overflow issue when using Form with a sticky footer in:
    • Dialog
    • DialogFullscreen
    • Sidebar
      Screenshot 2024-10-09 at 16 57 55
  • Utilise CSS Flexbox more internally - to make layouts more flexible to viewport size changes
  • Add stories for checking the issue hasn't regressed
  • Ensure Dialog height never exceeds 90% of the viewport height

Current behaviour

  • When a sticky footer Form is placed inside a Dialog, DialogFullscreen and Sidebar, it's possible for the form's content to overflow the modal at small screen sizes:
    371104967-d8affa4e-59ef-4cc4-a1a8-db1b8014a79a

Checklist

  • Commits follow our style guide
  • Related issues linked in commit messages if required
  • Screenshots are included in the PR if useful
  • All themes are supported if required
  • Unit tests added or updated if required
  • Playwright automation tests added or updated if required
  • Storybook added or updated if required
  • Translations added or updated (including creating or amending translation keys table in storybook) if required
  • Typescript d.ts file added or updated if required
  • Related docs have been updated if required

QA

  • Tested in provided StackBlitz sandbox/Storybook
  • Add new Playwright test coverage if required
  • Carbon implementation matches Design System/designs
  • UI Tests GitHub check reviewed if required

Testing instructions

  • Please check the following stories when checking the overflow bug has been fixed:
    • Dialog
      • Test/Dialog With Long Header Content
    • DialogFullscreen
      • Test/With Sticky Form
    • Sidebar
      • Test/With Sticky Form
      • Test/With Form

@Parsium Parsium self-assigned this Sep 26, 2024
@Parsium Parsium force-pushed the FE-6816/dialog-overflow branch 3 times, most recently from 0a33c82 to a6cbfdf Compare September 26, 2024 13:09
@Parsium Parsium changed the title fix(dialog): prevent overflow when it contains a sticky form fix(dialog): prevent overflow when it contains a sticky form (FE-6816) Sep 26, 2024
@Parsium Parsium force-pushed the FE-6816/dialog-overflow branch 3 times, most recently from 8d1502f to b172b5e Compare September 26, 2024 14:30
@DipperTheDan DipperTheDan self-requested a review September 26, 2024 14:51
DipperTheDan
DipperTheDan previously approved these changes Sep 27, 2024
View reviewed changes
@edleeks87 edleeks87 marked this pull request as ready for review September 27, 2024 12:40
@edleeks87 edleeks87 requested review from a team as code owners September 27, 2024 12:40
@edleeks87 edleeks87 marked this pull request as draft September 27, 2024 12:43
@Parsium Parsium force-pushed the FE-6816/dialog-overflow branch 10 times, most recently from d171508 to 13e8191 Compare October 3, 2024 13:19
@Parsium Parsium force-pushed the FE-6816/dialog-overflow branch 2 times, most recently from 489ec31 to 5175309 Compare October 17, 2024 12:42
DipperTheDan
DipperTheDan previously approved these changes Oct 18, 2024
View reviewed changes
edleeks87
edleeks87 previously approved these changes Oct 18, 2024
View reviewed changes
@Parsium Parsium marked this pull request as draft October 22, 2024 12:10
@Parsium Parsium dismissed stale reviews from edleeks87 and DipperTheDan via 6f648cc October 22, 2024 12:10
@Parsium Parsium force-pushed the FE-6816/dialog-overflow branch 2 times, most recently from 6f648cc to 338e5db Compare October 22, 2024 15:22
@edleeks87 edleeks87 marked this pull request as ready for review October 22, 2024 15:32
@harpalsingh
Copy link
Member

@Parsium looks good to me.

@Parsium Parsium force-pushed the FE-6816/dialog-overflow branch 2 times, most recently from 4d37589 to 7f5273a Compare October 23, 2024 14:45
@Parsium Parsium changed the title fix: resolve overflow issue with a sticky footer form in a scrollable modal (FE-6816) fix: resolve layout issues with sticky footer forms inside Carbon modal components (FE-6816) Oct 23, 2024
@Parsium
fix: prevent sticky footer form content from overflowing in Carbon mo…
cb77fb7 
…dal components

Fixes a layout issue, where content inside of a sticky footer `Form` would overflow outside
of a parent Carbon modal component, such as `Dialog`, `DialogFullscreen` and `Sidebar`, at
smaller screen sizes.

Utilises CSS Flexbox more internally, to improve how each component adapts to changes in
screen size.

closes #6969
@Parsium
fix(dialog): ensure height never exceeds 90% of the viewport height
619a651 
Tweaks how an opened `Dialog` is centred in the middle of the screen, while
ensuring it never exceeds 90% of the viewport height.
@Parsium
chore: align chromatic modes with Storybook viewports
a98fd09
@Parsium
fix: resolve layout issues with sticky footer forms inside Carbon mod…
0fe249d 
…al components

Fixes other layout issues observed when a sticky footer `Form` is placed inside of a Carbon modal
component such as `Dialog`, `DialogFullscreen`, or `Sidebar`.
@Parsium Parsium force-pushed the FE-6816/dialog-overflow branch from 7f5273a to 0fe249d Compare October 23, 2024 14:51
@Parsium Parsium merged commit e88c3dd into master Oct 23, 2024
24 checks passed
@Parsium Parsium deleted the FE-6816/dialog-overflow branch October 23, 2024 16:01
@carbonci
Copy link
Collaborator

🎉 This PR is included in version 144.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@edleeks87 edleeks87 mentioned this pull request Oct 30, 2024
Closed
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@paulrobinson88 paulrobinson88 paulrobinson88 approved these changes

@DipperTheDan DipperTheDan DipperTheDan approved these changes

@edleeks87 edleeks87 edleeks87 approved these changes

Assignees

@Parsium Parsium

Labels
Passed QA Passed Review Passed UX QA released Squad Front End
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Dialog] - Long title makes dialog content to overflow in small screens
6 participants
@Parsium @harpalsingh @carbonci @edleeks87 @DipperTheDan @paulrobinson88