fix: deprecation warning about using / for division (#1452)

* fix: replaced divisions using / with multiplications using / for division is deprecated and the math module (math.div(x,y)) not guaranteed to be available * added changeset * fixed "lack of concentration" issue
primer · Jun 15, 2021 · 8838a3a · 8838a3a
1 parent 81c0c84
commit 8838a3a
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 35 deletions.
diff --git a/.changeset/slow-pumas-arrive.md b/.changeset/slow-pumas-arrive.md
@@ -0,0 +1,5 @@
+---
+'@primer/css': patch
+---
+
+Division using / is deprecated. Replaced it with multiplications.
diff --git a/src/layout/grid-offset.scss b/src/layout/grid-offset.scss
@@ -4,16 +4,16 @@
 
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
-    .offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
-    .offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
-    .offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
-    .offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
-    .offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
-    .offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
-    .offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
-    .offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
-    .offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
-    .offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
-    .offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
+    .offset#{$variant}-1 { margin-left: (1 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-2 { margin-left: (2 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-3 { margin-left: (3 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-4 { margin-left: (4 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-5 { margin-left: (5 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-6 { margin-left: (6 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-7 { margin-left: (7 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-8 { margin-left: (8 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-9 { margin-left: (9 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-10 { margin-left: (10 * 0.0833333333 * 100%) !important; }
+    .offset#{$variant}-11 { margin-left: (11 * 0.0833333333 * 100%) !important; }
   }
 }
diff --git a/src/layout/grid.scss b/src/layout/grid.scss
@@ -1,32 +1,32 @@
 // GRID
 
 // Columns
-.col-1 { width: (1 / 12 * 100%); }
-.col-2 { width: (2 / 12 * 100%); }
-.col-3 { width: (3 / 12 * 100%); }
-.col-4 { width: (4 / 12 * 100%); }
-.col-5 { width: (5 / 12 * 100%); }
-.col-6 { width: (6 / 12 * 100%); }
-.col-7 { width: (7 / 12 * 100%); }
-.col-8 { width: (8 / 12 * 100%); }
-.col-9 { width: (9 / 12 * 100%); }
-.col-10 { width: (10 / 12 * 100%); }
-.col-11 { width: (11 / 12 * 100%); }
+.col-1 { width: (1 * 0.0833333333 * 100%); }
+.col-2 { width: (2 * 0.0833333333 * 100%); }
+.col-3 { width: (3 * 0.0833333333 * 100%); }
+.col-4 { width: (4 * 0.0833333333 * 100%); }
+.col-5 { width: (5 * 0.0833333333 * 100%); }
+.col-6 { width: (6 * 0.0833333333 * 100%); }
+.col-7 { width: (7 * 0.0833333333 * 100%); }
+.col-8 { width: (8 * 0.0833333333 * 100%); }
+.col-9 { width: (9 * 0.0833333333 * 100%); }
+.col-10 { width: (10 * 0.0833333333 * 100%); }
+.col-11 { width: (11 * 0.0833333333 * 100%); }
 .col-12 { width: 100%; }
 
 @each $breakpoint in map-keys($breakpoints) {
   @include breakpoint($breakpoint) {
-    .col-#{$breakpoint}-1 { width: ( 1 / 12 * 100%); }
-    .col-#{$breakpoint}-2 { width: ( 2 / 12 * 100%); }
-    .col-#{$breakpoint}-3 { width: ( 3 / 12 * 100%); }
-    .col-#{$breakpoint}-4 { width: ( 4 / 12 * 100%); }
-    .col-#{$breakpoint}-5 { width: ( 5 / 12 * 100%); }
-    .col-#{$breakpoint}-6 { width: ( 6 / 12 * 100%); }
-    .col-#{$breakpoint}-7 { width: ( 7 / 12 * 100%); }
-    .col-#{$breakpoint}-8 { width: ( 8 / 12 * 100%); }
-    .col-#{$breakpoint}-9 { width: ( 9 / 12 * 100%); }
-    .col-#{$breakpoint}-10 { width: ( 10 / 12 * 100%); }
-    .col-#{$breakpoint}-11 { width: ( 11 / 12 * 100%); }
+    .col-#{$breakpoint}-1 { width: ( 1 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-2 { width: ( 2 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-3 { width: ( 3 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-4 { width: ( 4 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-5 { width: ( 5 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-6 { width: ( 6 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-7 { width: ( 7 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-8 { width: ( 8 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-9 { width: ( 9 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-10 { width: ( 10 * 0.0833333333 * 100%); }
+    .col-#{$breakpoint}-11 { width: ( 11 * 0.0833333333 * 100%); }
     .col-#{$breakpoint}-12 { width: 100%; }
   }
 }

diff --git a/src/marketing/utilities/layout.scss b/src/marketing/utilities/layout.scss
@@ -27,7 +27,7 @@
 @each $breakpoint, $variant in $responsive-variants {
   @include breakpoint($breakpoint) {
     @for $offset from 1 through 7 {
-      .offset#{$variant}-n#{$offset} { margin-left: -($offset / 12 * 100%); }
+      .offset#{$variant}-n#{$offset} { margin-left: -($offset * 0.0833333333 * 100%); }
     }
   }
 }

diff --git a/src/support/variables/layout.scss b/src/support/variables/layout.scss
@@ -33,7 +33,7 @@ $spacer: 8px !default;
 
 // Our spacing scale
 $spacer-0: 0 !default;                  // 0
-$spacer-1: round($spacer / 2) !default; // 4px
+$spacer-1: $spacer * 0.5 !default;      // 4px
 $spacer-2: $spacer !default;            // 8px
 $spacer-3: $spacer * 2 !default;        // 16px
 $spacer-4: $spacer * 3 !default;        // 24px