@carbon/grid 10.28.0 → 10.30.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/grid",
   "description": "Grid for digital and software products using the Carbon Design System",
-  "version": "10.28.0",
+  "version": "10.30.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -32,10 +32,10 @@
   },
   "dependencies": {
     "@carbon/import-once": "^10.6.0",
-    "@carbon/layout": "^10.25.0"
+    "@carbon/layout": "^10.26.0"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.24.0",
+    "@carbon/cli": "^10.25.0",
     "rimraf": "^3.0.0"
   },
   "eyeglass": {
@@ -44,5 +44,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "d02eacdefc2c94da1b7619a20df441e264bf884c"
+  "gitHead": "74da5c7df7a93263ed79ed9b3dd6dc2b52d80024"
 }

package/scss/modules/_css-grid.scss

@@ -11,6 +11,7 @@
 
 @mixin css-grid() {
   display: grid;
+  max-width: 99rem;
   padding-right: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
   padding-left: calc(var(--cds-grid-margin) + var(--cds-grid-gutter) / 2);
   margin-right: auto;
@@ -35,6 +36,8 @@
   --cds-grid-columns: 4;
   --cds-grid-column-size: 1fr;
   --cds-grid-gutter: 2rem;
+  // Used to configure appropriate margins for condensed subgrids inside wide grids
+  --cds-grid-gutter-wide: 2rem;
   --cds-grid-hang: 1rem;
   --cds-grid-margin: 0;
 
@@ -67,20 +70,8 @@
   @include subgrid();
 }
 
-.#{$prefix}--css-grid--narrow .#{$prefix}--subgrid.#{$prefix}--css-grid {
-  padding-right: 0;
-  padding-left: 0;
-  margin-right: 0;
-  margin-left: 0;
-}
-
-.#{$prefix}--css-grid--condensed .#{$prefix}--subgrid.#{$prefix}--css-grid {
-  --cds-grid-gutter: 2rem;
-
-  padding-right: calc(var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-gutter) / 2);
-  margin-right: 0;
-  margin-left: 0;
+.#{$prefix}--subgrid[class*='col'] {
+  display: grid;
 }
 
 // -----------------------------------------------------------------------------
@@ -102,13 +93,17 @@
   margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
 }
 
-// Narrow subgrid inside condensed
-.#{$prefix}--css-grid--condensed
+// Narrow subgrid inside wide
+.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--condensed)
   .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow {
-  --cds-grid-gutter: 2rem;
+  padding: 0;
+}
 
-  padding-right: calc(var(--cds-grid-gutter) / 2);
-  padding-left: calc(var(--cds-grid-gutter) / 2);
+// Narrow subgrid column inside wide
+.#{$prefix}--css-grid
+  .#{$prefix}--subgrid.#{$prefix}--css-grid--narrow
+  > [class*='col'] {
+  margin-left: calc(var(--cds-grid-gutter) / 2 * -1);
 }
 
 // -----------------------------------------------------------------------------
@@ -122,11 +117,10 @@
 }
 
 // condensed subgrid inside wide
-.#{$prefix}--css-grid .bx--subgrid.#{$prefix}--css-grid--condensed {
-  margin-right: calc(
-    (var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1
-  );
-  margin-left: calc((var(--cds-grid-margin) + var(--cds-grid-gutter) / 2) * -1);
+.#{$prefix}--css-grid:not(.#{$prefix}--css-grid--narrow)
+  .bx--subgrid.#{$prefix}--css-grid--condensed {
+  margin-right: calc((var(--cds-grid-gutter-wide) / 2) * -1);
+  margin-left: calc((var(--cds-grid-gutter-wide) / 2) * -1);
 }
 
 // -----------------------------------------------------------------------------
@@ -142,6 +136,13 @@
   column-gap: var(--cds-grid-gutter);
 }
 
+// -----------------------------------------------------------------------------
+// Full width
+// -----------------------------------------------------------------------------
+.#{$prefix}--css-grid--full-width {
+  max-width: 100%;
+}
+
 // -----------------------------------------------------------------------------
 // Column span
 // -----------------------------------------------------------------------------
@@ -151,6 +152,7 @@
   } @else {
     --cds-grid-columns: #{$i};
 
+    display: block;
     grid-column: span $i / span $i;
   }
 }
@@ -268,7 +270,10 @@
   $columns: map.get($value, columns);
 
   @include breakpoint($name) {
-    @for $i from 1 through $columns {
+    // The `grid-column-end` and `grid-column-start` properies are *not* inclusive.
+    // It starts/ends the column *at* the column, not *on* the column. We must
+    // ensure that there is one additional class available for each breakpoint.
+    @for $i from 1 through $columns + 1 {
       .#{$prefix}--#{$name}\:col-start-#{$i} {
         grid-column-start: $i;
       }
@@ -348,3 +353,67 @@
 .#{$prefix}--align-items-center {
   align-items: center;
 }
+
+// -----------------------------------------------------------------------------
+// Aspect ratio -- TODO: in v11 should this move to a new file to live alongside the AspectRatio component?
+// -----------------------------------------------------------------------------
+
+/// The aspect ratios that are used to generate corresponding aspect ratio
+/// classes in code
+/// @type List
+/// @access public
+/// @group @carbon/grid
+$carbon--aspect-ratios: (
+  (16, 9),
+  (9, 16),
+  (2, 1),
+  (1, 2),
+  (4, 3),
+  (3, 4),
+  (3, 2),
+  (2, 3),
+  (1, 1)
+);
+
+/// Generates the CSS classname utilities for the aspect ratios
+///
+/// CSS Tricks article on aspect ratios and all the different ways it can be done.
+/// https://css-tricks.com/aspect-ratio-boxes/#article-header-id-6
+///
+/// That article references an earlier article on the topic.
+/// https://keithjgrant.com/posts/2017/03/aspect-ratios/
+///
+/// @param {Number} $width width from an aspect ratio
+/// @param {Number} $height height from an aspect ratio
+/// @access private
+/// @group @carbon/grid
+@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
+  .#{$prefix}--aspect-ratio {
+    position: relative;
+  }
+
+  .#{$prefix}--aspect-ratio::before {
+    width: 1px;
+    height: 0;
+    margin-left: -1px;
+    content: '';
+    float: left;
+  }
+
+  .#{$prefix}--aspect-ratio::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  @each $aspect-ratio in $aspect-ratios {
+    $width: nth($aspect-ratio, 1);
+    $height: nth($aspect-ratio, 2);
+
+    .#{$prefix}--aspect-ratio--#{$width}x#{$height}::before {
+      padding-top: percentage($height / $width);
+    }
+  }
+}
+
+@include carbon--aspect-ratio();