feat: add `$output` to xy-cell mixin and deprecate `$output-gutter`

Add the `$output` list to the xy-cell mixin for a finer control of what should be output, and an explicit indication that each part may still have to be generated seperately.

`$gutter-output` still works the same way, and breaking change introduced in #11081 has been replaced with a deprecation notice. Migration notes and advices to correctly generate gutters will be included in the release notes of the future version

diff --git a/scss/xy-grid/_cell.scss b/scss/xy-grid/_cell.scss
index 5ebadc10cc98b3b54ec38df0d8f2fee7a00ea1d1..143139a54ca24af573dd134580522f1de9c68800 100644 (file)
--- a/scss/xy-grid/_cell.scss
+++ b/scss/xy-grid/_cell.scss
@@ -95,23 +95,33 @@
 /// Creates a cell for your grid.
 ///
 /// @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 {Boolean} $gutter-output [null] - [DEPRECATED] Whether or not to output gutters.
 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
 /// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+/// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work correctly otherwise.
 @mixin xy-cell(
   $size: full,
-  $gutter-output: true,
+  $gutter-output: null,
   $gutters: $grid-margin-gutters,
   $gutter-type: margin,
   $gutter-position: null,
   $breakpoint: null,
-  $vertical: false
+  $vertical: false,
+  $output: (base size gutters)
 ) {
   $bp-is-fallback: false;
 
+  // Default for $gutter-output
+  @if ($gutter-output != null) {
+    @warn 'xy-cell: $gutter-output is deprecated and will be removed. See migration notes at https://git.io/foundation-6-6-0';
+    @if ($gutter-output == false) {
+      $output: sl-remove($output, gutters);
+    }
+  }
+
   @if($breakpoint == null) {
     // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
     @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {
@@ -136,14 +146,16 @@
   }
 
   @if($gutter != null) {
-    // Base flex properties
-    @include xy-cell-base($size);
-
-    $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
     $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
 
-    @include -xy-cell-properties($size, $-gutter-margin, $vertical);
-    @if ($gutter-output and $gutter-type and $gutter-type != none) {
+    // Base flex properties
+    @if (index($output, base)) {
+      @include xy-cell-base($size);
+    }
+    @if (index($output, size)) {
+      @include -xy-cell-properties($size, $-gutter-margin, $vertical);
+    }
+    @if (index($output, gutters) and $gutter-type and $gutter-type != none) {
       @include xy-gutters($gutter, $gutter-type, $gutter-position);
     }
   }

diff --git a/scss/xy-grid/_layout.scss b/scss/xy-grid/_layout.scss
index 02c63a2aef2c875426592462deb8fdeda3583667..4c37f517209d53b6a9831bcda7fe4cad6d2848e6 100644 (file)
--- a/scss/xy-grid/_layout.scss
+++ b/scss/xy-grid/_layout.scss
@@ -10,25 +10,27 @@
 ///
 /// @param {Number} $n - Number of elements to display per row.
 /// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.
-/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.
+/// @param {Boolean} $gutter-output [null] - [DEPRECATED] Whether or not to output gutters.
 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
 /// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
 /// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation.
 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+/// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work correctly otherwise.
 @mixin xy-grid-layout(
   $n,
   $selector: '.cell',
-  $gutter-output: true,
+  $gutter-output: null,
   $gutters: $grid-margin-gutters,
   $gutter-type: margin,
   $gutter-position: null,
   $breakpoint: null,
-  $vertical: false
+  $vertical: false,
+  $output: (base size gutters)
 ) {
   $size: percentage(1/$n);
 
   & > #{$selector} {
-    @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
+    @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);
   }
 }