From: Geoff Kimball <geoff@zurb.com>
Date: Wed, 13 Jan 2016 00:15:43 +0000 (-0800)
Subject: Add deprecation warnings for new flex classes, and update docs
X-Git-Tag: v6.2.0-rc.1~73^2~5
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=15da8b08a0893ec7b40361922ad5df99a6bda375;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 552b46610..c3fdc61f2 100644
--- 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 84da76b77..37be6e139 100644
--- 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 2eef7ce62..4a7b105b4 100644
--- 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 4deae326f..0cd142fbf 100644
--- 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 21e32d364..8124f6e6a 100644
--- 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 a1dbc94fd..ae0b779e5 100644
--- 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;
+  }
 }