feat(css-grid): add percent span prop option (#10552)

* feat(css-grid): add percent span prop option * feat(grid): support offsets with percent-based column spans Co-authored-by: Alessandra Davila <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Josefina Mancilla <[email protected]>
carbon-design-system · Feb 11, 2022 · 9cadb15 · 9cadb15
1 parent 8a07838
commit 9cadb15
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 21 deletions.
diff --git a/packages/grid/scss/modules/_css-grid.scss b/packages/grid/scss/modules/_css-grid.scss
@@ -141,26 +141,6 @@
   grid-column: 1 / -1;
 }
 
-@each $name, $value in $grid-breakpoints {
-  $columns: map.get($value, columns);
-
-  @include breakpoint($name) {
-    @for $i from 0 through $columns {
-      .#{$prefix}--#{$name}\:col-span-#{$i} {
-        @include -column-span($i);
-      }
-    }
-
-    .#{$prefix}--#{$name}\:col-span-auto {
-      grid-column: auto;
-    }
-
-    .#{$prefix}--#{$name}\:col-span-100 {
-      grid-column: 1 / -1;
-    }
-  }
-}
-
 .#{$prefix}--col-span-25 {
   --cds-grid-columns: 1;
 
@@ -215,6 +195,48 @@
   }
 }
 
+@each $name, $value in $grid-breakpoints {
+  $columns: map.get($value, columns);
+
+  @include breakpoint($name) {
+    @for $i from 0 through $columns {
+      .#{$prefix}--#{$name}\:col-span-#{$i} {
+        @include -column-span($i);
+      }
+    }
+
+    .#{$prefix}--#{$name}\:col-span-auto {
+      grid-column: auto;
+    }
+
+    .#{$prefix}--#{$name}\:col-span-100 {
+      grid-column: 1 / -1;
+    }
+
+    $quarterGridColumns: math.div($columns, 4);
+
+    .#{$prefix}--#{$name}\:col-span-75 {
+      $calc: $quarterGridColumns * 3;
+      --cds-grid-columns: #{$calc};
+
+      grid-column: span $calc / span $calc;
+    }
+
+    .#{$prefix}--#{$name}\:col-span-50 {
+      $calc: $quarterGridColumns * 2;
+      --cds-grid-columns: #{$calc};
+
+      grid-column: span $calc / span $calc;
+    }
+
+    .#{$prefix}--#{$name}\:col-span-25 {
+      --cds-grid-columns: #{$quarterGridColumns};
+
+      grid-column: span $quarterGridColumns / span $quarterGridColumns;
+    }
+  }
+}
+
 // -----------------------------------------------------------------------------
 // Column offset
 // -----------------------------------------------------------------------------

diff --git a/packages/react/src/components/Grid/Column.js b/packages/react/src/components/Grid/Column.js
@@ -41,16 +41,19 @@ function Column({
   );
 }
 
+const percentSpanType = PropTypes.oneOf(['25%', '50%', '75%', '100%']);
+
 const spanPropType = FeatureFlags.enabled('enable-css-grid')
   ? PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.number,
       PropTypes.shape({
-        span: PropTypes.number,
+        span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
         offset: PropTypes.number,
         start: PropTypes.number,
         end: PropTypes.number,
       }),
+      percentSpanType,
     ])
   : PropTypes.oneOfType([
       PropTypes.bool,
@@ -149,6 +152,13 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
       continue;
     }
 
+    // If our breakpoint is a string, the user has specified a percent
+    // they'd like this column to span.
+    if (typeof breakpoint === 'string') {
+      classNames.push(`${prefix}--${name}:col-span-${breakpoint.slice(0, -1)}`);
+      continue;
+    }
+
     // If our breakpoint is a number, the user has specified the number of
     // columns they'd like this column to span
     if (typeof breakpoint === 'number') {
@@ -172,6 +182,9 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
 
     if (typeof span === 'number') {
       classNames.push(`${prefix}--${name}:col-span-${span}`);
+    } else if (typeof span === 'string') {
+      classNames.push(`${prefix}--${name}:col-span-${span.slice(0, -1)}`);
+      continue;
     }
   }
 

diff --git a/packages/react/src/components/Grid/next/Grid.stories.js b/packages/react/src/components/Grid/next/Grid.stories.js
@@ -81,6 +81,11 @@ export const Responsive = () => (
       <p>Medium: Span 0 of 8</p>
       <p>Large: Span 4 of 16</p>
     </Column>
+    <Column sm="25%" md="50%" lg="75%">
+      <p>Small: Span 25%</p>
+      <p>Medium: Span 50%</p>
+      <p>Large: Span 75%</p>
+    </Column>
   </Grid>
 );
 
@@ -208,6 +213,11 @@ export const Offset = () => (
       lg={{ span: 12, offset: 4 }}
     />
     <Column sm={{ span: 4 }} md={{ span: 8 }} lg={{ span: 16 }} />
+    <Column
+      sm={{ span: '25%', offset: 1 }}
+      md={{ span: '50%', offset: 2 }}
+      lg={{ span: '75%', offset: 4 }}
+    />
   </Grid>
 );