MudGrid: Refactor and normalize spacing styles

danielchalmers · May 7, 2024 · 9919bcd · 9919bcd
1 parent 6225f78
commit 9919bcd
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 93 deletions.
diff --git a/src/MudBlazor.Docs/Pages/Components/Grid/Examples/GridSpacingExample.razor b/src/MudBlazor.Docs/Pages/Components/Grid/Examples/GridSpacingExample.razor
@@ -1,6 +1,6 @@
 @namespace MudBlazor.Docs.Examples
 
-<MudSlider @bind-Value="spacing" Min="0" Max="10" Color="Color.Info" Class="mb-6">Spacing: @spacing.ToString()</MudSlider>
+<MudSlider @bind-Value="spacing" Min="0" Max="16" Color="Color.Info" Class="mb-6">Spacing: @spacing.ToString()</MudSlider>
 
 <MudGrid Spacing="@spacing" Justify="Justify.Center">
     <MudItem>

diff --git a/src/MudBlazor/Components/Grid/MudGrid.razor.cs b/src/MudBlazor/Components/Grid/MudGrid.razor.cs
@@ -12,13 +12,15 @@ public partial class MudGrid : MudComponentBase
 {
     protected string Classname =>
         new CssBuilder("mud-grid")
-            .AddClass($"mud-grid-spacing-xs-{Spacing.ToString()}")
+            .AddClass($"gap-{Spacing}")
             .AddClass($"justify-{Justify.ToDescriptionString()}")
             .AddClass(Class)
             .Build();
 
     /// <summary>
-    /// Defines the spacing between its items.
+    /// The gap between items, measured in increments of <c>4px</c>.
+    /// <br/>
+    /// Maximum is <c>16</c>.
     /// </summary>
     [Parameter]
     [Category(CategoryTypes.Grid.Behavior)]

diff --git a/src/MudBlazor/Styles/components/_grid.scss b/src/MudBlazor/Styles/components/_grid.scss
@@ -17,96 +17,6 @@
   box-sizing: border-box;
 }
 
-.mud-grid-spacing-xs-1 {
-  width: calc(100% + 8px);
-  margin: -4px;
-}
-
-.mud-grid-spacing-xs-1 > .mud-grid-item {
-  padding: 4px;
-}
-
-.mud-grid-spacing-xs-2 {
-  width: calc(100% + 16px);
-  margin: -8px;
-}
-
-.mud-grid-spacing-xs-2 > .mud-grid-item {
-  padding: 8px;
-}
-
-.mud-grid-spacing-xs-3 {
-  width: calc(100% + 24px);
-  margin: -12px;
-}
-
-.mud-grid-spacing-xs-3 > .mud-grid-item {
-  padding: 12px;
-}
-
-.mud-grid-spacing-xs-4 {
-  width: calc(100% + 32px);
-  margin: -16px;
-}
-
-.mud-grid-spacing-xs-4 > .mud-grid-item {
-  padding: 16px;
-}
-
-.mud-grid-spacing-xs-5 {
-  width: calc(100% + 40px);
-  margin: -20px;
-}
-
-.mud-grid-spacing-xs-5 > .mud-grid-item {
-  padding: 20px;
-}
-
-.mud-grid-spacing-xs-6 {
-  width: calc(100% + 48px);
-  margin: -24px;
-}
-
-.mud-grid-spacing-xs-6 > .mud-grid-item {
-  padding: 24px;
-}
-
-.mud-grid-spacing-xs-7 {
-  width: calc(100% + 56px);
-  margin: -28px;
-}
-
-.mud-grid-spacing-xs-7 > .mud-grid-item {
-  padding: 28px;
-}
-
-.mud-grid-spacing-xs-8 {
-  width: calc(100% + 64px);
-  margin: -32px;
-}
-
-.mud-grid-spacing-xs-8 > .mud-grid-item {
-  padding: 32px;
-}
-
-.mud-grid-spacing-xs-9 {
-  width: calc(100% + 72px);
-  margin: -36px;
-}
-
-.mud-grid-spacing-xs-9 > .mud-grid-item {
-  padding: 36px;
-}
-
-.mud-grid-spacing-xs-10 {
-  width: calc(100% + 80px);
-  margin: -40px;
-}
-
-.mud-grid-spacing-xs-10 > .mud-grid-item {
-  padding: 40px;
-}
-
 .mud-grid-item-xs-auto {
   flex-grow: 0;
   max-width: none;