feat(spinners): reintegrate growing spinners from v4 (#1041)

Signed-off-by: louismaximepiton <louismaxime.piton@orange.com> Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Orange-OpenSource · Jan 27, 2022 · 81d5aed · 81d5aed
1 parent d146042
commit 81d5aed
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 11 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "26.4 kB"
+      "maxSize": "26.5 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

diff --git a/scss/_spinners.scss b/scss/_spinners.scss
@@ -33,13 +33,51 @@
   border-width: $spinner-border-width-lg;
 }
 
+//
+// Growing circle
+//
+
+// scss-docs-start spinner-grow-keyframes
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+// scss-docs-end spinner-grow-keyframes
+
+.spinner-grow {
+  display: inline-block;
+  width: $spinner-width;
+  height: $spinner-height;
+  vertical-align: $spinner-vertical-align;
+  background-color: currentColor;
+  // stylelint-disable-next-line property-disallowed-list
+  border-radius: 50%;
+  opacity: 0;
+  animation: $spinner-animation-speed linear infinite spinner-grow;
+}
+
+.spinner-grow-sm {
+  width: $spinner-width-sm;
+  height: $spinner-height-sm;
+}
+
+// Boosted mod
+.spinner-grow-lg {
+  width: $spinner-width-lg;
+  height: $spinner-height-lg;
+}
+// End mod
+
 @if $enable-reduced-motion {
   @media (prefers-reduced-motion: reduce) {
-    .spinner-border {
+    .spinner-border,
+    .spinner-grow {
       animation-duration: $spinner-animation-speed * 2;
     }
   }
 }
-// End mod
-
-// Boosted mod: no .spinner-grow
diff --git a/site/content/docs/5.1/components/spinners.md b/site/content/docs/5.1/components/spinners.md
@@ -6,6 +6,12 @@ group: components
 toc: true
 ---
 
+{{< ods-incompatibility-alert >}}
+This component contains some spinners that should not be used on Orange sites.
+
+**Growing spinner** and its examples are not compatible with the [Orange Design System]({{< param ods.web >}}).
+{{< /ods-incompatibility-alert >}}
+
 ## About
 
 Boosted "spinners" can be used to show the loading state in your projects. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.
@@ -16,7 +22,7 @@ For accessibility purposes, each loader here includes `role="status"` and a nest
 {{< partial "callout-info-prefersreducedmotion.md" >}}
 {{< /callout >}}
 
-## Example
+## Border spinner
 
 Use the border spinners for a lightweight loading indicator.
 
@@ -39,13 +45,52 @@ The border spinner uses `currentColor` for its `border-color`, meaning you can c
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}
+
+{{< example class="bg-dark" >}}
+<div class="spinner-border text-primary" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+<div class="spinner-border text-secondary" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+{{< /example >}}
 <!-- End mod -->
 
 {{< callout info >}}
 **Why not use `border-color` utilities?** Each border spinner specifies a `transparent` border for at least one side, so `.border-{color}` utilities would override that.
 {{< /callout >}}
 
-<!-- Boosted: no Growing spinner -->
+## Growing spinner
+
+If you don't fancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!
+
+{{< example >}}
+<div class="spinner-grow" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+{{< /example >}}
+
+Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color]. Here it is in orange, along with a secondary supported variant.
+
+<!-- Boosted mod -->
+{{< example >}}
+<div class="spinner-grow text-primary" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+<div class="spinner-grow text-secondary" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+{{< /example >}}
+
+{{< example class="bg-dark" >}}
+<div class="spinner-grow text-primary" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+<div class="spinner-grow text-secondary" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+{{< /example >}}
+<!-- End mod -->
 
 ## Alignment
 
@@ -105,17 +150,21 @@ Use [flexbox utilities][flex], [float utilities][float], or [text alignment][tex
 ## Size
 
 <!-- Boosted mod: -sm & -lg -->
-
 Add `.spinner-border-sm` or `.spinner-border-lg` to make a smaller spinner that can quickly be used within other components.
 
-
 {{< example >}}
 <div class="spinner-border spinner-border-sm" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
+<div class="spinner-grow spinner-grow-sm" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
 <div class="spinner-border spinner-border-lg" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
+<div class="spinner-grow spinner-grow-lg" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
 {{< /example >}}
 <!-- End mod -->
 
@@ -129,12 +178,21 @@ Use spinners within buttons to indicate an action is currently processing or tak
   <span class="visually-hidden">Loading...</span>
 </button>
 <button class="btn btn-primary" type="button" disabled>
-  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+  <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
   Loading...
 </button>
 {{< /example >}}
 
-<!-- Boosted: no Growing spinner -->
+{{< example >}}
+<button class="btn btn-primary" type="button" disabled>
+  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
+  <span class="visually-hidden">Loading...</span>
+</button>
+<button class="btn btn-primary" type="button" disabled>
+  <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
+  Loading...
+</button>
+{{< /example >}}
 
 ## Sass
 
@@ -148,6 +206,7 @@ Used for creating the CSS animations for our spinners. Included in `scss/_spinne
 
 {{< scss-docs name="spinner-border-keyframes" file="scss/_spinners.scss" >}}
 
+{{< scss-docs name="spinner-grow-keyframes" file="scss/_spinners.scss" >}}
 
 [color]:   {{< docsref "/utilities/colors" >}}
 [display]: {{< docsref "/utilities/display" >}}