feat(icons): new throb and fade animations (#5122)

Co-authored-by: Jacob Müller

Author: tmorehouse

src/_variables.scss

@@ -64,12 +64,14 @@ $b-custom-file-height-inner-sm: calc(
 $b-icon-vertical-offset: -0.15em;
 
 // Animations
+$b-icon-animation-cylon-duration: 0.75s !default;
+$b-icon-animation-cylon-vertical-duration: $b-icon-animation-cylon-duration !default;
+$b-icon-animation-fade-duration: 0.75s !default;
 $b-icon-animation-spin-duration: 2s !default;
 $b-icon-animation-spin-reverse-duration: $b-icon-animation-spin-duration !default;
 $b-icon-animation-spin-pulse-duration: 1s !default;
 $b-icon-animation-spin-reverse-pulse-duration: $b-icon-animation-spin-pulse-duration !default;
-$b-icon-animation-cylon-duration: 0.75s !default;
-$b-icon-animation-cylon-vertical-duration: $b-icon-animation-cylon-duration !default;
+$b-icon-animation-throb-duration: 0.75s !default;
 
 // --- Sidebar ---
 

src/icons/README.md

@@ -127,7 +127,7 @@ Vue.use(BootstrapVueIcons)
 BootstrapVue icons SCSS/CSS does not depend on any Bootstrap SASS variables, mixins, functions or
 CSS classes (other than the Bootstrap `text-{variant}` text color utility classes, if using the
 `variant` prop). Please note that the icons CSS is _also_ included in the main BootstrapVue SCSS/CSS
-files.
+files. Animations effects require BootstrapVue custom SCSS/CSS.
 
 ### Browser
 
@@ -439,18 +439,32 @@ affected. If you need to shift the border/background with the icon, use Bootstra
 
 BootstrapVue includes the following built-in animations for icons:
 
+- `'cylon'` slides the icon left-right
+- `'cylon-vertical'` slides the icon up-down
+- `'fade'` fades the icon in and out <span class="badge badge-info small">2.12.0+</span>
 - `'spin'` smoothly spins the icon clockwise
 - `'spin-reverse'` smoothly spins the icon counter-clockwise
 - `'spin-pulse'` spins the icon clockwise, but in a pulsed step style
 - `'spin-reverse-pulse'` spins the icon counter-clockwise, but in a pulsed step style
-- `'cylon'` slides the icon left-right
-- '`cylon-vertical'` slides the icon up-down
+- `'throb'` scales the icon in and out <span class="badge badge-info small">2.12.0+</span>
 
 To use the animation, set the `animation` prop to one of the animation names above.
 
 ```html
 <template>
   <b-row class="text-md-center">
+    <b-col md="6" class="mb-3">
+      <p>Cylon animation:</p>
+      <b-icon icon="three-dots" animation="cylon" font-scale="4"></b-icon>
+    </b-col>
+    <b-col md="6" class="mb-3">
+      <p>Vertical cylon animation:</p>
+      <b-icon icon="three-dots-vertical" animation="cylon-vertical" font-scale="4"></b-icon>
+    </b-col>
+    <b-col md="6" class="mb-3">
+      <p>Fade animation:</p>
+      <b-icon icon="star-fill" animation="fade" font-scale="4"></b-icon>
+    </b-col>
     <b-col md="6" class="mb-3">
       <p>Spinning animation:</p>
       <b-icon icon="arrow-clockwise" animation="spin" font-scale="4"></b-icon>
@@ -468,23 +482,15 @@ To use the animation, set the `animation` prop to one of the animation names abo
       <b-icon icon="arrow-counterclockwise" animation="spin-reverse-pulse" font-scale="4"></b-icon>
     </b-col>
     <b-col md="6" class="mb-3">
-      <p>Cylon animation:</p>
-      <b-icon icon="three-dots" animation="cylon" font-scale="4"></b-icon>
-    </b-col>
-    <b-col md="6" class="mb-3">
-      <p>Vertical cylon animation:</p>
-      <b-icon icon="three-dots-vertical" animation="cylon-vertical" font-scale="4"></b-icon>
+      <p>Throb animation:</p>
+      <b-icon icon="circle-fill" animation="throb" font-scale="4"></b-icon>
     </b-col>
   </div>
 </template>
 
 <!-- b-icon-aminations.vue -->
 ```
 
-Note with the `cylon` animations, the left-right movement (or up-down movement) extends past the
-icon's bounding box by `+/- 25%`, so you may need to adjust padding or margins to compensate for
-your use case.
-
 As the animations are CSS based, they are applied _after_ any SVG transforms have taken place:
 
 ```html
@@ -504,13 +510,18 @@ Need a different style animation? Just create a custom class defining the animat
 class to the icon component, or create a new animation class in the form of
 `b-icon-animation-{animationName}` and pass the custom animation name to the `animation` prop.
 
-**Note:** The BootstrapVue defined animation effects of this component is dependent on the
-`prefers-reduced-motion` media query. See the
-[reduced motion section of our accessibility documentation](/docs/reference/accessibility) for
-additional details.
+**Animation notes:**
 
-Side note: the `cylon` animation gets its name from the "eye" of the Cylons from the _original_
-[1978 Battlestar Galactica TV series](https://www.youtube.com/watch?v=5a5bEIf0UaU).
+- With the `cylon` animations, the left-right movement (or up-down movement) extends _past_ the
+  icon's bounding box by `+/- 25%`, so you may need to adjust padding or margins to compensate for
+  your use case.
+- Animation durations can be [configured via SASS SCSS variables](/docs/reference/theming)
+- The BootstrapVue defined animation effects of this component is dependent on the
+  `prefers-reduced-motion` media query. See the
+  [reduced motion section of our accessibility documentation](/docs/reference/accessibility#reduced-motion)
+  for additional details.
+- The `cylon` animation gets its name from the "eye" of the Cylons from the _original_
+  [1978 Battlestar Galactica TV series](https://www.youtube.com/watch?v=5a5bEIf0UaU).
 
 ## Stacking icons
 
@@ -572,7 +583,7 @@ available on individual icons.
 
 Stacked icon notes:
 
-- Remember to set the `stacked` prop on the inner icon components
+- Remember to set the `stacked` prop on the inner icon components!
 - The `font-scale` prop cannot be used on the inner icon components
 - The `width` and `height` attributes cannot be applied to the inner icon components
 - Stacked icons **cannot** be stacked inside another `<b-iconstack>`
@@ -603,7 +614,7 @@ Individual icons within the icon stack can also be animated (except on IE 11):
       <b-icon
         stacked
         icon="camera"
-        animation="spin"
+        animation="throb"
         variant="info"
         scale="0.75"
       ></b-icon>
@@ -644,20 +655,19 @@ font scaled by 125%).
 <template>
   <div>
     <b-button size="sm" class="mb-2">
-      <b-icon icon="gear-fill"></b-icon> Settings
+      <b-icon icon="gear-fill" aria-hidden="true"></b-icon> Settings
     </b-button>
     <br>
     <b-button variant="primary" class="mb-2">
-      Pay now <b-icon icon="credit-card"></b-icon>
+      Pay now <b-icon icon="credit-card" aria-hidden="true"></b-icon>
     </b-button>
     <br>
     <b-button variant="outline-info" class="mb-2">
-      <b-icon icon="power"></b-icon> Logout
+      <b-icon icon="power" aria-hidden="true"></b-icon> Logout
     </b-button>
     <br>
     <b-button size="lg" variant="primary" class="mb-2">
-      <b-icon icon="question-circle-fill" aria-hidden="true"></b-icon>
-      <span class="sr-only">Help</span>
+      <b-icon icon="question-circle-fill" aria-label="Help"></b-icon>
     </b-button>
   </div>
 </template>

src/icons/_icons.scss

@@ -8,6 +8,38 @@
     vertical-align: $b-icon-vertical-offset;
   }
 
+  &.b-icon-animation-cylon,
+  &.b-iconstack .b-icon-animation-cylon > g {
+    transform-origin: center;
+    animation: $b-icon-animation-cylon-duration infinite ease-in-out alternate
+      b-icon-animation-cylon;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  &.b-icon-animation-cylon-vertical,
+  &.b-iconstack .b-icon-animation-cylon-vertical > g {
+    transform-origin: center;
+    animation: $b-icon-animation-cylon-vertical-duration infinite ease-in-out alternate
+      b-icon-animation-cylon-vertical;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  &.b-icon-animation-fade,
+  &.b-iconstack .b-icon-animation-fade > g {
+    transform-origin: center;
+    animation: $b-icon-animation-throb-duration infinite ease-in-out alternate b-icon-animation-fade;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
   &.b-icon-animation-spin,
   &.b-iconstack .b-icon-animation-spin > g {
     transform-origin: center;
@@ -49,54 +81,63 @@
     }
   }
 
-  &.b-icon-animation-cylon,
-  &.b-iconstack .b-icon-animation-cylon > g {
+  &.b-icon-animation-throb,
+  &.b-iconstack .b-icon-animation-throb > g {
     transform-origin: center;
-    animation: $b-icon-animation-cylon-duration infinite ease-in-out alternate
-      b-icon-animation-cylon;
+    animation: $b-icon-animation-throb-duration infinite ease-in-out alternate
+      b-icon-animation-throb;
 
     @media (prefers-reduced-motion: reduce) {
       animation: none;
     }
   }
+}
 
-  &.b-icon-animation-cylon-vertical,
-  &.b-iconstack .b-icon-animation-cylon-vertical > g {
-    transform-origin: center;
-    animation: $b-icon-animation-cylon-vertical-duration infinite ease-in-out alternate
-      b-icon-animation-cylon-vertical;
+// Animation for spinning icons
+@keyframes b-icon-animation-cylon {
+  0% {
+    transform: translateX(-25%);
+  }
+  100% {
+    transform: translateX(25%);
+  }
+}
 
-    @media (prefers-reduced-motion: reduce) {
-      animation: none;
-    }
+@keyframes b-icon-animation-cylon-vertical {
+  0% {
+    transform: translateY(25%);
+  }
+  100% {
+    transform: translateY(-25%);
   }
 }
 
-// Animation for spinning icons
-@keyframes b-icon-animation-spin {
+@keyframes b-icon-animation-fade {
   0% {
-    transform: rotate(0deg);
+    opacity: 0.1;
   }
   100% {
-    transform: rotate(359deg);
+    opacity: 1;
   }
 }
 
-@keyframes b-icon-animation-cylon {
+@keyframes b-icon-animation-spin {
   0% {
-    transform: translateX(-25%);
+    transform: rotate(0deg);
   }
   100% {
-    transform: translateX(25%);
+    transform: rotate(359deg);
   }
 }
 
-@keyframes b-icon-animation-cylon-vertical {
+@keyframes b-icon-animation-throb {
   0% {
-    transform: translateY(25%);
+    opacity: 0.5;
+    transform: scale(0.5);
   }
   100% {
-    transform: translateY(-25%);
+    opacity: 1;
+    transform: scale(1);
   }
 }
 

src/icons/icons.d.ts

@@ -1,7 +1,7 @@
 // --- BEGIN AUTO-GENERATED FILE ---
 //
 // @IconsVersion: 1.0.0-alpha3
-// @Generated: 2020-03-19T18:55:36.736Z
+// @Generated: 2020-04-13T19:59:46.519Z
 //
 // This file is generated on each build. Do not edit this file!
 

src/icons/icons.js

@@ -1,7 +1,7 @@
 // --- BEGIN AUTO-GENERATED FILE ---
 //
 // @IconsVersion: 1.0.0-alpha3
-// @Generated: 2020-03-19T18:55:36.736Z
+// @Generated: 2020-04-13T19:59:46.519Z
 //
 // This file is generated on each build. Do not edit this file!