@carbon/grid 11.54.0 → 11.55.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/grid",
   "description": "Grid for digital and software products using the Carbon Design System",
-  "version": "11.54.0",
+  "version": "11.55.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -48,5 +48,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "5e89339998bd16c8ddd42e1cc6a2d0c15b3b0af5"
+  "gitHead": "13c5c427ad4413aea5184a0a593e6452bc163e4a"
 }

package/scss/_css-grid.scss

@@ -150,6 +150,21 @@
       )};
   }
 
+  // -----------------------------------------------------------------------------
+  // Row gap
+  // -----------------------------------------------------------------------------
+
+  // Add row gap support for CSS Grid
+  // Row gap should match the total gutter (start + end margins)
+  .#{$prefix}--css-grid--with-row-gap {
+    row-gap: var(--cds-grid-gutter);
+  }
+
+  // Narrow mode has 0 + 1rem = 1rem total gutter
+  .#{$prefix}--css-grid--narrow.#{$prefix}--css-grid--with-row-gap {
+    row-gap: calc(var(--cds-grid-gutter) / 2);
+  }
+
   // -----------------------------------------------------------------------------
   // Alignment
   // -----------------------------------------------------------------------------
@@ -193,6 +208,7 @@
   }
 
   .#{$prefix}--subgrid--condensed {
+    --cds-grid-gutter: #{$grid-gutter-condensed};
     --cds-grid-gutter-start: #{math.div($grid-gutter-condensed, 2)};
     --cds-grid-gutter-end: #{math.div($grid-gutter-condensed, 2)};
     --cds-grid-column-hang: #{math.div($grid-gutter, 2) - math.div(
@@ -201,6 +217,25 @@
       )};
   }
 
+  // -----------------------------------------------------------------------------
+  // Row gap
+  // -----------------------------------------------------------------------------
+
+  // Add row gap support for CSS subgrids
+  // Row gap should match the total gutter (start + end margins)
+  .#{$prefix}--subgrid--with-row-gap {
+    row-gap: #{$grid-gutter};
+  }
+
+  // Narrow mode has 0 + 1rem = 1rem total gutter
+  .#{$prefix}--subgrid--narrow.#{$prefix}--subgrid--with-row-gap {
+    row-gap: #{math.div($grid-gutter, 2)};
+  }
+
+  .#{$prefix}--subgrid--condensed.#{$prefix}--subgrid--with-row-gap {
+    row-gap: #{$grid-gutter-condensed};
+  }
+
   // -----------------------------------------------------------------------------
   // Column hang
   // -----------------------------------------------------------------------------

package/scss/_flex-grid.scss

@@ -318,6 +318,32 @@
     padding-block: $condensed-gutter * 0.5;
   }
 
+  // Add row gap support for Flexbox Grid using gap and margin-block-end
+  .#{$prefix}--grid--with-row-gap {
+    --cds-grid-row-gap: #{$grid-gutter};
+  }
+
+  // Sets the gap between rows and wrapped columns
+  .#{$prefix}--grid--with-row-gap > .#{$prefix}--row {
+    gap: var(--cds-grid-row-gap) 0;
+    margin-block-end: var(--cds-grid-row-gap);
+  }
+
+  // Condensed mode has 0 in FlexGrid
+  .#{$prefix}--grid--with-row-gap.#{$prefix}--grid--condensed {
+    --cds-grid-row-gap: 0;
+  }
+
+  // Narrow mode has 0 + 1rem = 1rem total gutter
+  .#{$prefix}--grid--with-row-gap.#{$prefix}--grid--narrow {
+    --cds-grid-row-gap: calc(#{$grid-gutter} / 2);
+  }
+
+  // Remove margin from the last row
+  .#{$prefix}--grid--with-row-gap > .#{$prefix}--row:last-child {
+    margin-block-end: 0;
+  }
+
   @include -make-grid-columns($breakpoints, $grid-gutter);
   @include -no-gutter();
   @include -hang($grid-gutter);

package/scss/_inlined/_css-grid.scss

@@ -150,6 +150,21 @@
       )};
   }
 
+  // -----------------------------------------------------------------------------
+  // Row gap
+  // -----------------------------------------------------------------------------
+
+  // Add row gap support for CSS Grid
+  // Row gap should match the total gutter (start + end margins)
+  .#{$prefix}--css-grid--with-row-gap {
+    row-gap: var(--cds-grid-gutter);
+  }
+
+  // Narrow mode has 0 + 1rem = 1rem total gutter
+  .#{$prefix}--css-grid--narrow.#{$prefix}--css-grid--with-row-gap {
+    row-gap: calc(var(--cds-grid-gutter) / 2);
+  }
+
   // -----------------------------------------------------------------------------
   // Alignment
   // -----------------------------------------------------------------------------
@@ -193,6 +208,7 @@
   }
 
   .#{$prefix}--subgrid--condensed {
+    --cds-grid-gutter: #{$grid-gutter-condensed};
     --cds-grid-gutter-start: #{math.div($grid-gutter-condensed, 2)};
     --cds-grid-gutter-end: #{math.div($grid-gutter-condensed, 2)};
     --cds-grid-column-hang: #{math.div($grid-gutter, 2) - math.div(
@@ -201,6 +217,25 @@
       )};
   }
 
+  // -----------------------------------------------------------------------------
+  // Row gap
+  // -----------------------------------------------------------------------------
+
+  // Add row gap support for CSS subgrids
+  // Row gap should match the total gutter (start + end margins)
+  .#{$prefix}--subgrid--with-row-gap {
+    row-gap: #{$grid-gutter};
+  }
+
+  // Narrow mode has 0 + 1rem = 1rem total gutter
+  .#{$prefix}--subgrid--narrow.#{$prefix}--subgrid--with-row-gap {
+    row-gap: #{math.div($grid-gutter, 2)};
+  }
+
+  .#{$prefix}--subgrid--condensed.#{$prefix}--subgrid--with-row-gap {
+    row-gap: #{$grid-gutter-condensed};
+  }
+
   // -----------------------------------------------------------------------------
   // Column hang
   // -----------------------------------------------------------------------------

package/scss/_inlined/_flex-grid.scss

@@ -318,6 +318,32 @@
     padding-block: $condensed-gutter * 0.5;
   }
 
+  // Add row gap support for Flexbox Grid using gap and margin-block-end
+  .#{$prefix}--grid--with-row-gap {
+    --cds-grid-row-gap: #{$grid-gutter};
+  }
+
+  // Sets the gap between rows and wrapped columns
+  .#{$prefix}--grid--with-row-gap > .#{$prefix}--row {
+    gap: var(--cds-grid-row-gap) 0;
+    margin-block-end: var(--cds-grid-row-gap);
+  }
+
+  // Condensed mode has 0 in FlexGrid
+  .#{$prefix}--grid--with-row-gap.#{$prefix}--grid--condensed {
+    --cds-grid-row-gap: 0;
+  }
+
+  // Narrow mode has 0 + 1rem = 1rem total gutter
+  .#{$prefix}--grid--with-row-gap.#{$prefix}--grid--narrow {
+    --cds-grid-row-gap: calc(#{$grid-gutter} / 2);
+  }
+
+  // Remove margin from the last row
+  .#{$prefix}--grid--with-row-gap > .#{$prefix}--row:last-child {
+    margin-block-end: 0;
+  }
+
   @include -make-grid-columns($breakpoints, $grid-gutter);
   @include -no-gutter();
   @include -hang($grid-gutter);