Add deprecation warnings for new flex classes, and update docs

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 552b466100872ebe18957b44db3a047dcb17c661..c3fdc61f2c14c8e2b6eae6b0ef40719457392bb6 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -11,7 +11,10 @@
 @import 'foundation';
 @import 'motion-ui';
 
+$-zf-flex-classes-imported: true;
+
 @include foundation-everything;
+@include foundation-flex-classes;
 @include motion-ui-transitions;
 
 @import 'foundation-docs';

diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md
index 84da76b77da41da9e77c57e9a62ad9361640e623..37be6e1396fb046eb22a68e5d681a31ff11c0b9f 100644 (file)
--- a/docs/pages/flex-grid.md
+++ b/docs/pages/flex-grid.md
@@ -214,13 +214,17 @@ Applying a vertical alignment class to the flex row will affect every column dir
 
 ---
 
-The same alignment classes can also be applied to individual columns.
+Similar alignment classes can also be applied to individual columns, which use the format `.align-self-*` instead of `.align-*`.
+
+<div class="warning callout">
+  <p>In Foundation 6.2, we introduced the <code>.align-self-&ast;</code> classes, which replace the old method of using <code>.align-&ast;</code> classes on columns. The old classes will be removed completely in Foundation 6.3.</p>
+</div>
 
 ```html_example
 <div class="row">
-  <div class="column align-bottom">Align bottom</div>
-  <div class="column align-middle">Align middle</div>
-  <div class="column align-top">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
+  <div class="column align-self-bottom">Align bottom</div>
+  <div class="column align-self-middle">Align middle</div>
+  <div class="column align-self-top">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
 </div>
 ```
 

diff --git a/scss/_global.scss b/scss/_global.scss
index 2eef7ce62c99ae3fe3c9971225c8bdc857775072..4a7b105b43170882b2eafad099b5813a9b403d65 100644 (file)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -106,6 +106,7 @@ $alert-color: map-get($foundation-palette, alert);
 
 // Remove this in 6.3
 $-zf-menu-icon-imported: false;
+$-zf-flex-classes-imported: false;
 
 @mixin foundation-global-styles {
   @include -zf-normalize;

diff --git a/scss/components/_flex.scss b/scss/components/_flex.scss
index 4deae326fb04557b8cd753c80b3856cb0f966c52..0cd142fbfbe99c3c3757c6d44a6abc3da780cd59 100644 (file)
--- a/scss/components/_flex.scss
+++ b/scss/components/_flex.scss
@@ -1,13 +1,21 @@
-// Horizontal alignment using justify-content
-@each $hdir, $prop in map-remove($-zf-flex-justify, left) {
-  .row.align-#{$hdir} {
-    @include flex-align($x: $hdir);
+@mixin foundation-flex-classes {
+  $-zf-flex-classes-imported: true;
+
+  // Horizontal alignment using justify-content
+  @each $hdir, $prop in map-remove($-zf-flex-justify, left) {
+    .align-#{$hdir} {
+      @include flex-align($x: $hdir);
+    }
   }
-}
 
-// Vertical alignment using align-items and align-self
-@each $vdir, $prop in $-zf-flex-align {
-  .align-#{$vdir} {
-    @include flex-align($y: $vdir);
+  // Vertical alignment using align-items and align-self
+  @each $vdir, $prop in $-zf-flex-align {
+    .align-#{$vdir} {
+      @include flex-align($y: $vdir);
+    }
+
+    .align-self-#{$vdir} {
+      @include flex-align-self($y: $vdir);
+    }
   }
 }

diff --git a/scss/foundation.scss b/scss/foundation.scss
index 21e32d364f9da1bfe9f4f151fe01391f8851905b..8124f6e6a7f40f2b676ef57bf4b6f38b3af3f28b 100644 (file)
--- a/scss/foundation.scss
+++ b/scss/foundation.scss
@@ -28,6 +28,7 @@
 @import 'components/drilldown';
 @import 'components/dropdown-menu';
 @import 'components/dropdown';
+@import 'components/flex';
 @import 'components/flex-video';
 @import 'components/label';
 @import 'components/media-object';
@@ -54,6 +55,7 @@
     @include foundation-grid;
   }
   @else {
+    @include foundation-flex-classes;
     @include foundation-flex-grid;
   }
   @include foundation-typography;

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index a1dbc94fd8fe6523f1d513dc0824a75e428837a9..ae0b779e5a7dcbf42195c6f83db98d92cdd35c58 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -214,6 +214,7 @@
   }
 
   // Vertical alignment using align-items and align-self
+  // Remove these in 6.3
   @each $vdir, $prop in $-zf-flex-align {
     .column.align-#{$vdir} {
       @include flex-grid-column-align($vdir);
@@ -224,4 +225,10 @@
     // scss-lint:disable PlaceholderInExtend
     @extend .column;
   }
+
+  // Remove this in 6.3
+  @if not $-zf-flex-classes-imported {
+    @warn 'In Foundation 6.2, a new component mixin was added called "foundation-flex-classes". Add "@import foundation-flex-classes" to the main Sass file of your project to remove this warning.';
+    @include foundation-flex-classes;
+  }
 }