fix(grid): added a mixin to do span calculations

wfp · Jul 13, 2022 · 0bcc480 · 0bcc480
1 parent 8adbc4b
commit 0bcc480
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 67 deletions.
diff --git a/src/components/Col/Col.js b/src/components/Col/Col.js
@@ -52,15 +52,16 @@ function columnVariation(props, propName, componentName) {
 Col.propTypes = {
   children: PropTypes.node,
 
+  /** span set how wide each col block when placed next to each other fill 12 columns layout in a row eg: `span={3}`  */
   span: PropTypes.number,
 
   /** innerStyle represents style prop wrapping the inner container */
   innerStyle: PropTypes.object,
 
-  /** Responsiveness on large(1200) screen will have 12 columns and calcuations will be based on this */
+  /** Responsiveness on large(1200) screen will have 12 columns and calcuations will be based on this. range 1-12 */
   lg: columnVariation,
 
-  /** Responsiveness on medium(992) screen will have 12 columns and calcuations will be based on this */
+  /** Responsiveness on medium(992) screen will have 12 columns and calcuations will be based on this. range 1-12 */
   md: columnVariation,
 
   /** Responsiveness on small(768) screen will have 8 columns and calcuations will be based on this */

diff --git a/src/components/Col/_col.scss b/src/components/Col/_col.scss
@@ -18,163 +18,135 @@
   }
   .#{$prefix}--col--span-2,
   .#{$prefix}--col--lg--2 {
-    flex: 0 0 (1/6 * 100%);
-    max-width: (1/6 * 100%);
+    @include column-span(2) // flex: 0 0 (1/6 * 100%);
+      // max-width: (1/6 * 100%);
+;
   }
   .#{$prefix}--col--span-3,
   .#{$prefix}--col--lg--3 {
-    flex: 0 0 (1/4 * 100%);
-    max-width: (1/4 * 100%);
+    @include column-span(3) // flex: 0 0 (1/4 * 100%);
+      // max-width: (1/4 * 100%);
+;
   }
   .#{$prefix}--col--span-4,
   .#{$prefix}--col--lg--4 {
-    flex: 0 0 (1/3 * 100%);
-    max-width: (1/3 * 100%);
+    @include column-span(4);
   }
   .#{$prefix}--col--span-5,
   .#{$prefix}--col--lg--5 {
-    flex: 0 0 (5/12 * 100%);
-    max-width: (5/12 * 100%);
+    @include column-span(5);
   }
   .#{$prefix}--col--span-6,
   .#{$prefix}--col--lg--6 {
-    flex: 0 0 (1/2 * 100%);
-    max-width: (1/2 * 100%);
+    @include column-span(6);
   }
   .#{$prefix}--col--span-7,
   .#{$prefix}--col--lg--7 {
-    flex: 0 0 (7/12 * 100%);
-    max-width: (7/12 * 100%);
+    @include column-span(7);
   }
   .#{$prefix}--col--span-8,
   .#{$prefix}--col--lg--8 {
-    flex: 0 0 (2/3 * 100%);
-    max-width: (2/3 * 100%);
+    @include column-span(8);
   }
   .#{$prefix}--col--span-9,
   .#{$prefix}--col--lg--9 {
-    flex: 0 0 (3/4 * 100%);
-    max-width: (3/4 * 100%);
+    @include column-span(9);
   }
   .#{$prefix}--col--span-10,
   .#{$prefix}--col--lg--10 {
-    flex: 0 0 (5/6 * 100%);
-    max-width: (5/6 * 100%);
+    @include column-span(10);
   }
   .#{$prefix}--col--span-11,
   .#{$prefix}--col--lg--11 {
-    flex: 0 0 (11/12 * 100%);
-    max-width: (11/12 * 100%);
+    @include column-span(11);
   }
   .#{$prefix}--col--span-12,
   .#{$prefix}--col--lg--12 {
-    flex: 0 0 100%;
-    max-width: 100%;
+    @include column-span(12);
   }
 
   // 12 columns on medium(992) screen
   @include breakpointMax(bp--sm--major) {
     .#{$prefix}--col--md--2 {
-      flex: 0 0 (1/6 * 100%);
-      max-width: (1/6 * 100%);
+      @include column-span(2);
     }
 
     .#{$prefix}--col--md--3 {
-      flex: 0 0 (1/4 * 100%);
-      max-width: (1/4 * 100%);
+      @include column-span(3);
     }
     .#{$prefix}--col--span-4,
     .#{$prefix}--col--lg--4 {
-      flex: 0 0 (1/3 * 100%);
-      max-width: (1/3 * 100%);
+      @include column-span(4);
     }
 
     .#{$prefix}--col--md--5 {
-      flex: 0 0 (5/12 * 100%);
-      max-width: (5/12 * 100%);
+      @include column-span(5);
     }
 
     .#{$prefix}--col--md--6 {
-      flex: 0 0 (1/2 * 100%);
-      max-width: (1/2 * 100%);
+      @include column-span(6);
     }
 
     .#{$prefix}--col--md--7 {
-      flex: 0 0 (7/12 * 100%);
-      max-width: (7/12 * 100%);
+      @include column-span(7);
     }
 
     .#{$prefix}--col--md--8 {
-      flex: 0 0 (2/3 * 100%);
-      max-width: (2/3 * 100%);
+      @include column-span(8);
     }
 
     .#{$prefix}--col--md--9 {
-      flex: 0 0 (3/4 * 100%);
-      max-width: (3/4 * 100%);
+      @include column-span(9);
     }
 
     .#{$prefix}--col--md--10 {
-      flex: 0 0 (5/6 * 100%);
-      max-width: (5/6 * 100%);
+      @include column-span(10);
     }
 
     .#{$prefix}--col--md--11 {
-      flex: 0 0 (11/12 * 100%);
-      max-width: (11/12 * 100%);
+      @include column-span(11);
     }
 
     .#{$prefix}--col--md--12 {
-      flex: 0 0 100%;
-      max-width: 100%;
+      @include column-span(12);
     }
   }
 
   // 8 columns on small(768) screen
   @include breakpointMax(bp--sm--major) {
     .#{$prefix}--col--sm--2 {
-      flex: 0 0 (1/4 * 100%);
-      max-width: (1/4 * 100%);
+      @include column-span(2, 8);
     }
     .#{$prefix}--col--sm--3 {
-      flex: 0 0 (3/8 * 100%);
-      max-width: (3/8 * 100%);
+      @include column-span(3, 8);
     }
     .#{$prefix}--col--sm--4 {
-      flex: 0 0 (1/2 * 100%);
-      max-width: (1/2 * 100%);
+      @include column-span(4, 8);
     }
     .#{$prefix}--col--sm--5 {
-      flex: 0 0 (5/8 * 100%);
-      max-width: (5/8 * 100%);
+      @include column-span(5, 8);
     }
     .#{$prefix}--col--sm--6 {
-      flex: 0 0 (3/6 * 100%);
-      max-width: (3/6 * 100%);
+      @include column-span(6, 8);
     }
     .#{$prefix}--col--sm--7 {
-      flex: 0 0 (7/8 * 100%);
-      max-width: (7/8 * 100%);
+      @include column-span(7, 8);
     }
     .#{$prefix}--col--sm--8 {
-      flex: 0 0 100%;
-      max-width: 100%;
+      @include column-span(8, 8);
     }
   }
 
   // 8 columns on small(500) screen
   @include breakpointMax(bp--xs--major) {
     .#{$prefix}--col--xs--2 {
-      flex: 0 0 (1/4 * 100%);
-      max-width: (1/4 * 100%);
+      @include column-span(2, 4);
     }
     .#{$prefix}--col--xs--3 {
-      flex: 0 0 (1/2 * 100%);
-      max-width: (1/2 * 100%);
+      @include column-span(3, 4);
     }
     .#{$prefix}--col--xs--4 {
-      flex: 0 0 100%;
-      max-width: 100%;
+      @include column-span(4, 4);
     }
   }
 }
diff --git a/src/globals/scss/_helper-mixins.scss b/src/globals/scss/_helper-mixins.scss
@@ -11,7 +11,7 @@
 //----------------------------------------------
 // Misc
 // ---------------------------------------------
-
+@use 'sass:math';
 @import 'feature-flags';
 @import 'vars';
 @import 'css--reset';
@@ -173,6 +173,16 @@
   }
 }
 
+@mixin column-span($span, $columns: false) {
+  flex: 0 0 (math.div($span, 12) * 100%);
+  max-width: (math.div($span, 12) * 100%);
+
+  @if ($columns) {
+    flex: 0 0 (math.div($span, $columns) * 100%);
+    max-width: (math.div($span, $columns) * 100%);
+  }
+}
+
 /**
  * Generic `deprecate` mixin that is being used to indicate that a component is
  * no longer going to be present in the next major release of Carbon.