refactor: deprecate xy-cell-static() and use xy-cell() to generate classes

Deprecate the` xy-cell-static()` mixin and use `xy-cell()` mixin to generate the XY Grid static classes.

The new arguments of `xy-cells` (added in previous commits) have the following goal: making a clear distinction between cells that should not have any gutter, cells from which the gutter must be removed and cells that should have a gutter but generated seperately/later. See migration notes below.

Changes:
- Add deprecation warning in `xy-cell-static()`
- Add deprecation note in `xy-cell-static()` documentation
- Use `xy-cell()` instead of `xy-cell-static()` with the transformations listed below

Migration notes:
- Use `$output: (...)` instead of separate calls to `xy-cell-static()` and `xy-cell-base()`. This may change in the future with 3 distinguish mixins to generate "base", "size" and "gutters" of the cell.
- Use `$gutter-type: none` for cells without gutters
- Use `$gutters: 0` for cells with a 0-width gutters
- Use `$output: (...)` without "gutters" for cells with gutters that must be generated seperately.
- Remove useless `$breakpoint: $-zf-size` as it is always detected automatically

diff --git a/scss/xy-grid/_cell.scss b/scss/xy-grid/_cell.scss
index 3430477a0d9ae05463356af008ece669a47275b5..d98a72a5eca68d31d259783af500942704f1f3de 100644 (file)
--- a/scss/xy-grid/_cell.scss
+++ b/scss/xy-grid/_cell.scss
@@ -166,6 +166,12 @@
 
 /// Creates a single breakpoint sized grid. Used to generate our grid classes.
 ///
+/// `xy-cell-static()` is deprecated and will be removed.
+/// Use `xy-cell()` instead with `$output: (size gutters)` to not generate the cell base.
+/// See migration notes at https://git.io/foundation-6-6-0
+///
+/// @deprecated v6.6.0
+///
 /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
 /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.
 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
@@ -180,6 +186,7 @@
   $breakpoint: $-zf-zero-breakpoint,
   $vertical: false
 ) {
+  @warn 'xy-cell-static() mixin is deprecated and will be removed. Use "xy-cell()" instead. See migration notes at https://git.io/foundation-6-6-0';
 
   $gutter: -zf-get-bp-val($gutters, $breakpoint);
   $gutter-position: if($vertical == true, top bottom, left right);

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index eccf9986a7547ee71f68f3ccbfb4a94e178fcb92..5638ceb0bca9c0760faa0c987475e27d7d38ecfe 100644 (file)
--- a/scss/xy-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -28,8 +28,7 @@
   }
 
   .cell {
-    @include xy-cell-base();
-    @include xy-cell-static($grid-columns, false, $gutter-type: padding);
+    @include xy-cell(full, $gutter-type: none);
 
     &.auto {
       @include xy-cell-base(auto);
@@ -42,11 +41,11 @@
   }
   .grid-x {
     > .auto {
-      @include xy-cell-static(auto, false);
+      @include xy-cell(auto, $gutter-type: none, $output: (size gutters));
     }
 
     > .shrink {
-      @include xy-cell-static(shrink, false);
+      @include xy-cell(shrink, $gutter-type: none, $output: (size gutters));
     }
   }
 
@@ -71,8 +70,7 @@
     // Responsive "auto" modifier
     @if not($-zf-size == small) {
       .grid-x > .#{$-zf-size}-auto {
-        @include xy-cell-base(auto);
-        @include xy-cell-static(auto, false);
+        @include xy-cell(auto, $gutter-type: none);
       }
     }
 
@@ -84,7 +82,7 @@
     @if not($-zf-size == small) {
       .grid-x > .#{$-zf-size}-shrink {
         @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};
-        @include xy-cell-static(shrink, false);
+        @include xy-cell(shrink, $gutter-type: none, $output: (size gutters));
       }
     }
 
@@ -93,7 +91,7 @@
       // Sizing (percentage)
       .grid-x > .#{$-zf-size}-#{$i} {
         @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};
-        @include xy-cell-static($i, false, $gutter-type: padding);
+        @include xy-cell($i, $gutter-type: none, $output: (size gutters));
       }
     }
   }
@@ -112,11 +110,11 @@
 @mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {
   $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');
   > .#{$prefix}auto {
-    @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+    @include xy-cell(auto, $vertical: $vertical, $output: (size));
   }
 
   > .#{$prefix}shrink {
-    @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+    @include xy-cell(shrink, $vertical: $vertical, $output: (size));
   }
 
   @for $i from 1 through $grid-columns {
@@ -124,7 +122,7 @@
     $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');
 
     > #{$classname} {
-      @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+      @include xy-cell($i, $vertical: $vertical, $output: (size));
     }
   }
 }
@@ -140,14 +138,14 @@
 
     // Base cell styles
     > .cell {
-      @include xy-cell-static($vertical: $vertical);
+      @include xy-cell($vertical: $vertical, $output: (size gutters));
     }
 
     // base styles need to all be before the auto and shrink styles
     @include -zf-each-breakpoint() {
       @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {
         > .cell {
-          @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);
+          @include xy-cell($vertical: $vertical, $output: (size gutters));
         }
       }
     }
@@ -197,7 +195,7 @@
     @include -zf-each-breakpoint {
       @for $i from 1 through $xy-block-grid-max {
         .#{$-zf-size}-up-#{$i} {
-          @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: padding, $breakpoint: $-zf-size);
+          @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: padding, $output: (base size));
         }
       }
     }
@@ -212,7 +210,7 @@
           @each $bp in -zf-breakpoints-less-than($-zf-size) {
             @if(map-has-key($grid-margin-gutters, $bp)) {
               .grid-margin-x.#{$bp}-up-#{$i} {
-                @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);
+                @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: margin, $output: (base size));
               }
             }
           }
@@ -220,7 +218,7 @@
       }
       @for $i from 1 through $xy-block-grid-max {
         .grid-margin-x.#{$-zf-size}-up-#{$i} {
-          @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);
+          @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: margin, $output: (base size));
         }
       }
     }
@@ -282,11 +280,11 @@
     }
 
     > .auto {
-      @include xy-cell-static(auto, false, $vertical: true);
+      @include xy-cell(auto, $gutter-type: none, $vertical: true, $output: (size gutters));
     }
 
     > .shrink {
-      @include xy-cell-static(shrink, false, $vertical: true);
+      @include xy-cell(shrink, $gutter-type: none, $vertical: true, $output: (size gutters));
     }
 
 
@@ -308,8 +306,7 @@
       // Responsive "auto" modifier
       @if not($-zf-size == small) {
         > .#{$-zf-size}-auto {
-          @include xy-cell-base(auto);
-          @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+          @include xy-cell(auto, $gutter-type: none, $vertical: true);
         }
       }
 
@@ -321,7 +318,7 @@
       @if not($-zf-size == small) {
         > .#{$-zf-size}-shrink {
           @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};
-          @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+          @include xy-cell(shrink, $gutter-type: none, $vertical: true, $output: (size gutters));
         }
       }
 
@@ -330,7 +327,7 @@
         // Sizing (percentage)
         > .#{$-zf-size}-#{$i} {
           @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};
-          @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);
+          @include xy-cell($i, $gutter-type: none, $vertical: true, $output: (size gutters));
         }
       }
 

diff --git a/scss/xy-grid/_collapse.scss b/scss/xy-grid/_collapse.scss
index 861608f9e1ab15d8630e97516dcc6f67ba3fa3f3..b1b6580752c77a8bf611b613a11415fe270381ca 100644 (file)
--- a/scss/xy-grid/_collapse.scss
+++ b/scss/xy-grid/_collapse.scss
@@ -42,7 +42,7 @@
           @for $i from 1 through $grid-columns {
             // Sizing (percentage)
             > .#{$bp}-#{$i} {
-              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+              @include xy-cell($i, $gutter-type: none, $output: (size));
             }
           }
         }
@@ -51,7 +51,7 @@
           @for $i from 1 through $grid-columns {
             // Sizing (percentage)
             > .#{$bp}-#{$i} {
-              @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
+              @include xy-cell($i, $gutter-type: none, $output: (size));
             }
           }
         }