MudGrid: Refactor and normalize spacing system

[danielchalmers]

Description

• Refactors the MudGrid spacing system, significantly improving maintainability
• Fixes layout weirdness with horizontal scrollbar issues
• Makes the spacing scale consistent with MudStack and MudForm (0-20, 4px each)
• The default value is now 6, up from 3, because the step has been halved 

This does change the amount of spacing for current consumers but allows for finer control and aligns with library.

• Resolves MudGrid width calculation and margin makes no sense? #2046
• Resolves Inconsistent Spacing on MudGrid and MudStack #4869
• Resolves MudGrid Spacing creates a horizontaly scrollable grid #5933

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)

Grid & Stack (Before & after)

Default spacing (Before & after)

Min spacing (Before & after)

Max spacing (Before & after)

Full component page in docs (Before & after)

video6.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.

[danielchalmers]

Need help making sure I fixed those issues correctly.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 90.46%. Comparing base (28bc599) to head (38e42eb).
Report is 192 commits behind head on dev.

Additional details and impacted files

@@            Coverage Diff             @@
##              dev    #8910      +/-   ##
==========================================
+ Coverage   89.82%   90.46%   +0.63%     
==========================================
  Files         412      419       +7     
  Lines       11878    12210     +332     
  Branches     2364     2385      +21     
==========================================
+ Hits        10670    11046     +376     
+ Misses        681      628      -53     
- Partials      527      536       +9     

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

[henon]

LGTM

[henon]

@ncigula @aabney-Tamus @fabianschurz This PR should fix your issues. If you want to confirm, please do so.

[henon]

@danielchalmers What if we allow up to 20 as the max value of spacings? Because if you used Spacing="10" before you got bigger gaps than when you use Spacing="16" now, right?

What shall we write in the migration guide? How to calculate from old spacing to new one?

[aabney-Tamus]

Yes, it looks like this should fix #4869

[danielchalmers]

@danielchalmers What if we allow up to 20 as the max value of spacings? Because if you used Spacing="10" before you got bigger gaps than when you use Spacing="16" now, right?

What shall we write in the migration guide? How to calculate from old spacing to new one?

It uses the CSS gap utility which only goes up to 16. Would be good to see that increased.

The calculation is a little complex because the width, padding, and margin were changed before and now it's just gap. I would just tell people to revise it by eye. @henon

[danielchalmers]

@henon This should be ready to go - I've completely reworked the grid spacing system and it should be the best of both worlds now. In the Migration Guide it just needs to say "it's been scaled 2x so you need to double your current spacing". Very easy to switch over and fixes the original issues while keeping it close to the original design.

[henon]

The old grid used 8px as the spacing unit?

[danielchalmers]

The old grid used 8px as the spacing unit?

Yes; It was applying 4px to all sides. Now only top & left

[henon]

Thanks @danielchalmers

Added this to the migration guide

[ncigula]

@ncigula @aabney-Tamus @fabianschurz This PR should fix your issues. If you want to confirm, please do so.

@henon Yes i believe it would with the changes in _grid.scss because the margin value would no longer be bigger then the value added on top the 100% width