@carbon/grid 11.54.0-rc.0 → 11.55.0-rc.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-rc.0",
+  "version": "11.55.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -35,11 +35,11 @@
     "postinstall": "ibmtelemetry --config=telemetry.yml"
   },
   "dependencies": {
-    "@carbon/layout": "^11.52.0-rc.0",
+    "@carbon/layout": "^11.52.0",
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^11.43.0-rc.0",
+    "@carbon/cli": "^11.43.0",
     "rimraf": "^6.0.1"
   },
   "eyeglass": {
@@ -48,5 +48,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "20a00767571db791cac99d499527e2f995ead478"
+  "gitHead": "32de263c201d0424d86bc47d97d1c085abecb24e"
 }

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);