Rename vf-animation to vf-transition

package.json

@@ -45,7 +45,7 @@
     "percy": "percy exec -- node snapshots.js",
     "icon-svgs-to-mixins": "node scripts/convert-svgs-to-icon-mixins.js icons"
   },
-  "version": "3.6.2",
+  "version": "3.7.0",
   "files": [
     "_index.scss",
     "/scss",

scss/_base_button.scss

@@ -14,7 +14,7 @@
   }
 
   %vf-button-base {
-    @include vf-animation(#{background-color, border-color}, snap, in);
+    @include vf-transition(#{background-color, border-color}, snap, in);
     @include vf-focus;
 
     border-radius: $border-radius;

scss/_layouts_application.scss

@@ -64,7 +64,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   // Navigation panel/drawer
   // -------------------------
   .l-navigation {
-    @include vf-animation(
+    @include vf-transition(
       $property: (
         transform,
         box-shadow,
@@ -117,7 +117,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
     }
 
     .l-navigation {
-      @include vf-animation(
+      @include vf-transition(
         $property: (
           width,
           box-shadow,
@@ -182,7 +182,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   %vf-application-layout--faded-when-collapsed {
     // when app navigation panel is collapsed, fade out unnecessary elements
     @include vf-application-layout--when-collapsed() {
-      @include vf-animation($property: opacity, $duration: snap);
+      @include vf-transition($property: opacity, $duration: snap);
 
       opacity: 0;
     }
@@ -246,7 +246,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   }
 
   .l-aside {
-    @include vf-animation(
+    @include vf-transition(
       $property: (
         transform,
         box-shadow,

scss/_patterns_accordion.scss

@@ -33,7 +33,7 @@
 
     &::before {
       @include vf-icon-chevron($color-mid-dark);
-      @include vf-animation($property: transform, $duration: fast);
+      @include vf-transition($property: transform, $duration: fast);
       @extend %icon;
 
       content: '';

scss/_patterns_chip.scss

@@ -4,7 +4,7 @@
 @mixin vf-p-chip {
   %vf-chip {
     @extend %small-text;
-    @include vf-animation(#{background-color, border-color}, snap, out);
+    @include vf-transition(#{background-color, border-color}, snap, out);
     @include vf-focus;
 
     align-items: baseline;

scss/_patterns_form-tick-elements.scss

@@ -17,7 +17,7 @@
     &::before,
     &::after {
       $properties: #{background-color, border-color};
-      @include vf-animation($properties);
+      @include vf-transition($properties);
 
       position: absolute;
     }

scss/_patterns_navigation.scss

@@ -57,7 +57,7 @@ $spv-navigation-logo: 0.3125rem;
     $properties: #{background-color, color, opacity};
     @extend %navigation-link-responsive-padding-horizontal;
     @extend %navigation-link-responsive-padding-vertical;
-    @include vf-animation($properties, snap);
+    @include vf-transition($properties, snap);
     @include vf-focus;
 
     // override button styles
@@ -443,7 +443,7 @@ $spv-navigation-logo: 0.3125rem;
     }
 
     .p-navigation__search-overlay {
-      @include vf-animation(opacity, snap);
+      @include vf-transition(opacity, snap);
 
       background-color: $colors--light-theme--background-overlay;
       display: block;

scss/_patterns_search-and-filter.scss

@@ -70,7 +70,7 @@
     }
 
     .p-search-and-filter__panel {
-      @include vf-animation(opacity, fast);
+      @include vf-transition(opacity, fast);
 
       background: $color-x-light;
       border-radius: $border-radius;

scss/_patterns_side-navigation.scss

@@ -143,7 +143,7 @@
   }
 
   .p-side-navigation__overlay {
-    @include vf-animation(opacity);
+    @include vf-transition(opacity);
 
     bottom: 0;
     left: 0;

scss/_patterns_switch.scss

@@ -47,7 +47,7 @@ $knob-size: $sp-unit * 2;
     &::before {
       @extend %vf-has-round-corners;
       @extend %vf-has-box-shadow;
-      @include vf-animation($duration: slow);
+      @include vf-transition($duration: slow);
 
       background: $color-x-light;
       border: 1px solid $color-mid-dark;

scss/_patterns_tabs.scss

@@ -55,7 +55,7 @@
 
       &::before {
         @extend %vf-pseudo-border;
-        @include vf-animation(#{background-color, border-color}, snap, in);
+        @include vf-transition(#{background-color, border-color}, snap, in);
 
         bottom: 0;
         z-index: 1;

scss/_settings_animations.scss

@@ -12,8 +12,13 @@ $animation-easing: (
   in: cubic-bezier(0.55, 0.055, 0.675, 0.19),
 );
 
-@mixin vf-animation($property: all, $duration: brisk, $easing: out) {
+@mixin vf-transition($property: all, $duration: brisk, $easing: out) {
   transition-duration: map-get($animation-duration, $duration);
   transition-property: $property;
   transition-timing-function: map-get($animation-easing, $easing);
 }
+
+// DEPRECATED: vf-animation mixin is deprecated and will be removed in future version of Vanilla, please use vf-transition instead
+@mixin vf-animation($args...) {
+  @include vf-transition($args...);
+}

templates/_layouts/docs.html

@@ -63,7 +63,7 @@
             <ul class="p-side-navigation__list">
               <li class="p-side-navigation__item--title"><span class="p-side-navigation__text">Components</span></li>
               {{ side_nav_item("/docs/patterns/accordion", "Accordion") }}
-              {{ side_nav_item("/docs/patterns/badge", "Badge", "new", "positive") }}
+              {{ side_nav_item("/docs/patterns/badge", "Badge") }}
               {{ side_nav_item("/docs/patterns/breadcrumbs", "Breadcrumbs") }}
               {{ side_nav_item("/docs/patterns/buttons", "Buttons") }}
               {{ side_nav_item("/docs/patterns/card", "Cards") }}
@@ -132,7 +132,7 @@
 
             <ul class="p-side-navigation__list">
               <li class="p-side-navigation__item--title"><span class="p-side-navigation__text">Settings</span></li>
-              {{ side_nav_item("/docs/settings/animation-settings", "Animations") }}
+              {{ side_nav_item("/docs/settings/animation-settings", "Animations", "Updated", "information") }}
               {{ side_nav_item("/docs/settings/assets-settings", "Assets") }}
               {{ side_nav_item("/docs/settings/breakpoint-settings", "Breakpoints") }}
               {{ side_nav_item("/docs/settings/color-settings", "Color") }}

templates/docs/settings/animation-settings.md

@@ -61,7 +61,7 @@ include animation by including the animation mixin.
 The format is as follows:
 
 ```scss
-@include vf-animation(PROPERTY, DURATION, EASING);
+@include vf-transition(PROPERTY, DURATION, EASING);
 ```
 
 <div class="p-notification--information">
@@ -74,11 +74,14 @@ The format is as follows:
 A valid use could be, for example:
 
 ```scss
-@include vf-animation(height, brisk, out);
+@include vf-transition(height, brisk, out);
 ```
 
 If you require multiple properties then the list must be interpolated as shown in the following example:
 
 ```scss
-@include vf-animation(#{height, width}, brisk, out);
+@include vf-transition(#{height, width}, brisk, out);
 ```
+
+<span class="p-status-label--negative">Deprecated</span>
+Previously used `vf-animation` mixin has been deprecated in 3.7.0 and will be removed in future versions of Vanilla. Please use `vf-transition` instead.

templates/docs/whats-new.md

@@ -20,14 +20,30 @@ When we add, make significant updates, or deprecate a component we update their
     </tr>
   </thead>
   <tbody>
-    <!-- 3.6.0 -->
+    <!-- 3.7.0 -->
     <tr>
-      <th><a href="/docs/patterns/badge">Badge</a></th>
+      <th>
+        <a href="/docs/settings/animation-settings#usage">
+          <code>vf-animation</code> mixin
+        </a>
+      </th>
+      <td>
+        <span class="p-status-label--negative">Deprecated</span>
+      </td>
+      <td>3.7.0</td>
+      <td><code>vf-animation</code> mixin has been deprecated. Please use <code>vf-transition</code> instead.</td>
+    </tr>
+    <tr>
+      <th>
+        <a href="/docs/settings/animation-settings#usage">
+          <code>vf-transition</code> mixin
+        </a>
+      </th>
       <td>
         <span class="p-status-label--positive">New</span>
       </td>
-      <td>3.6.0</td>
-      <td>We've added a badge component.</td>
+      <td>3.7.0</td>
+      <td><code>vf-transition</code> mixin replaces deprecated <code>vf-animation</code>.</td>
     </tr>
   </tbody>
 </table>
@@ -44,6 +60,15 @@ When we add, make significant updates, or deprecate a component we update their
     </tr>
   </thead>
   <tbody>
+    <!-- 3.6.0 -->
+    <tr>
+      <th><a href="/docs/patterns/badge">Badge</a></th>
+      <td>
+        <span class="p-status-label--positive">New</span>
+      </td>
+      <td>3.6.0</td>
+      <td>We've added a badge component.</td>
+    </tr>
     <!-- 3.5.0 -->
     <tr>
       <th><a href="/docs/patterns/navigation#side-navigation">Side navigation - Headings</a></th>