Skip to content

fix(fluid-form): in modal spacing#22266

Merged
riddhybansal merged 5 commits into
carbon-design-system:mainfrom
maradwan26:fluid-form-in-modal-fix
May 22, 2026
Merged

fix(fluid-form): in modal spacing#22266
riddhybansal merged 5 commits into
carbon-design-system:mainfrom
maradwan26:fluid-form-in-modal-fix

Conversation

@maradwan26

@maradwan26 maradwan26 commented May 14, 2026

Copy link
Copy Markdown
Contributor

No issue

Fixes the spacing for FluidForm when inside of a Modal. The current implementation adds too much negative spacing.

Before:
Screenshot 2026-05-13 at 3 01 07 PM

After:
Screenshot 2026-05-13 at 3 01 41 PM

This follows the old design spec created way back in 2023: #13258

Changelog

Changed

  • Changed margin-inline values from $spacing-05 to $spacing-03

Testing / Reviewing

  • Go to Fluid Form stories in both React and WC and open the Modal.
  • Spacing should align with design spec

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • [ ] Updated documentation and storybook examples
  • [ ] Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

@maradwan26 maradwan26 requested a review from a team as a code owner May 14, 2026 16:06
@github-project-automation github-project-automation Bot moved this to 🕵️‍♀️ Triage in Design System May 14, 2026
@maradwan26 maradwan26 moved this from 🕵️‍♀️ Triage to 🚦 In Review in Design System May 14, 2026
@netlify

netlify Bot commented May 14, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 9c885c5
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6a05f2f32af17e0008af42e5
😎 Deploy Preview https://deploy-preview-22266--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 14, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 9c885c5
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a05f2f39aa8760008f0c52f
😎 Deploy Preview https://deploy-preview-22266--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 14, 2026

Copy link
Copy Markdown

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 9c885c5
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/6a05f2f3d5d72400086e2ce7
😎 Deploy Preview https://deploy-preview-22266--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 14, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 9e97832
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6a0f426dac289c0008dbee81
😎 Deploy Preview https://deploy-preview-22266--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 14, 2026

Copy link
Copy Markdown

Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 9e97832
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a0f426d7724360008ea68ff
😎 Deploy Preview https://deploy-preview-22266--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 14, 2026

Copy link
Copy Markdown

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 9e97832
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/6a0f426d462a8d0008264f25
😎 Deploy Preview https://deploy-preview-22266--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@codecov

codecov Bot commented May 14, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.49%. Comparing base (55d8f6c) to head (9e97832).

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #22266      +/-   ##
==========================================
- Coverage   95.52%   95.49%   -0.03%     
==========================================
  Files         582      582              
  Lines       50441    50441              
  Branches     6801     6799       -2     
==========================================
- Hits        48182    48169      -13     
- Misses       2126     2139      +13     
  Partials      133      133              
Flag Coverage Δ
main-packages 89.19% <ø> (ø)
web-components 98.07% <ø> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@sangeethababu9223 sangeethababu9223 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@alina-jacob alina-jacob left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this @maradwan26,
LGTM! 🚀

@riddhybansal riddhybansal added this pull request to the merge queue May 22, 2026
Merged via the queue into carbon-design-system:main with commit 486d06d May 22, 2026
40 checks passed
@github-project-automation github-project-automation Bot moved this from 🚦 In Review to ✅ Done in Design System May 22, 2026
@maradwan26 maradwan26 deleted the fluid-form-in-modal-fix branch May 25, 2026 15:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: ✅ Done

Development

Successfully merging this pull request may close these issues.

5 participants