Skip to content

MudForm: Add Spacing property#8880

Merged
henon merged 4 commits intoMudBlazor:devfrom
danielchalmers:form-spacing
May 7, 2024
Merged

MudForm: Add Spacing property#8880
henon merged 4 commits intoMudBlazor:devfrom
danielchalmers:form-spacing

Conversation

@danielchalmers
Copy link
Member

@danielchalmers danielchalmers commented May 5, 2024

Description

Turns the MudForm into a flex display and uses that to add a gap-* class based directly on a new Spacing property.
Resolves #8859.

How Has This Been Tested?

visually

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)
video2.mp4

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

@github-actions github-actions bot added enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library PR: needs review labels May 5, 2024
@codecov
Copy link

codecov bot commented May 5, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.18%. Comparing base (28bc599) to head (13870bb).
Report is 163 commits behind head on dev.

❗ Current head 13870bb differs from pull request most recent head e20984b. Consider uploading reports for the commit e20984b to get more accurate results

Additional details and impacted files
@@            Coverage Diff             @@
##              dev    #8880      +/-   ##
==========================================
+ Coverage   89.82%   90.18%   +0.35%     
==========================================
  Files         412      423      +11     
  Lines       11878    12275     +397     
  Branches     2364     2407      +43     
==========================================
+ Hits        10670    11070     +400     
+ Misses        681      670      -11     
- Partials      527      535       +8     

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

@danielchalmers danielchalmers changed the title Form: Add Spacing property MudForm: Add Spacing property May 5, 2024
@ScarletKuro ScarletKuro requested a review from henon May 5, 2024 21:03
@henon henon added needs: tests A maintainer has explicitly asked for associated test cases to be added to this pull request and removed PR: needs review labels May 7, 2024
@henon
Copy link
Contributor

henon commented May 7, 2024

LGTM, just a test is missing. That check for the application of the class
As for unifying spacing between the various components I'd say let's do it in a separate PR.

@danielchalmers
Copy link
Member Author

@henon Test added. Do you want me to squeeze in the spacing unification before preview2?

@henon henon merged commit 6225f78 into MudBlazor:dev May 7, 2024
@henon
Copy link
Contributor

henon commented May 7, 2024

Do you want me to squeeze in the spacing unification before preview2?

No hurry. We'll do as many previews as we need.

@danielchalmers danielchalmers deleted the form-spacing branch May 7, 2024 19:04
@gabephudson
Copy link
Contributor

You may want to consider adding this to the v7 migration guide, as changing the display from block to flex on the form has caused formatting issues for our application, as our form child components were not expected to be in a flex container. I completely understand the usefulness of the change, but legacy implementations that set their own spacing/layout may now have to tweak. Easy enough to fix with a single wrapper div in the form or a Style change, but it's one of those things that is subtle and doesn't show up in unit testing.

Some issues...

  • Stand alone buttons without a div wrapper are now 100% the form width.
  • Divs with display flex inside the form now have additional spacing/margins that conflict with controls around them which are captured in the forms flex box.

A potential backward compatible fix would be to have the form be display:block if the new spacing parameter is not set.

I would humbly suggest any changes to a container's CSS "display" value be listed as a potential breaking change in the future.

@henon
Copy link
Contributor

henon commented Jul 22, 2024

Thanks for the feedback. I added this to the migration guide: #8447

Warning

MudForm's new Spacing feature changed it to be a flex container which can lead to layout breaks in some applications #8880
To fix them you can wrap your form contents in an extra <div>.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library needs: tests A maintainer has explicitly asked for associated test cases to be added to this pull request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MudForm: Optional margin between items

3 participants