feat(loader): repurpose loader to be usable in the button

Kajabi · Aug 26, 2022 · 6fb356d · 6fb356d
1 parent a6c479a
commit 6fb356d
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 39 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -392,15 +392,6 @@ a.sage-btn {
   &[class*="sage-btn--icon"]::before {
     content: "";
   }
-
-  svg {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: auto;
-  }
 }
 
 // Generate button style variations

diff --git a/packages/sage-assets/lib/stylesheets/components/_loader.scss b/packages/sage-assets/lib/stylesheets/components/_loader.scss
@@ -29,6 +29,15 @@ $-loader-spinner-path-speed: 1.5s;
     opacity: 1;
   }
 
+  .sage-btn--is-loading & {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     &[data-loading*="true"]::before {
       opacity: 0 !important; /* stylelint-disable-line declaration-no-important */
@@ -77,6 +86,12 @@ $-loader-spinner-path-speed: 1.5s;
   animation: rotate $-loader-spinner-speed linear infinite;
 }
 
+.sage-loader__spinner--loading-button {
+  width: sage-spacing(sm);
+  height: sage-spacing(sm);
+  margin-right: sage-spacing(xs);
+}
+
 .sage-loader__spinner-path {
   stroke-dasharray: 150,200;
   stroke-dashoffset: -10;
@@ -85,6 +100,10 @@ $-loader-spinner-path-speed: 1.5s;
   animation: dash $-loader-spinner-path-speed ease-in-out infinite;
 }
 
+.sage-loader__spinner-path--loading-button {
+  stroke: currentColor;
+}
+
 .sage-loader__success {
   width: sage-spacing(xl);
   height: sage-spacing(xl);

diff --git a/packages/sage-assets/lib/stylesheets/components/_toast.scss b/packages/sage-assets/lib/stylesheets/components/_toast.scss
@@ -116,16 +116,6 @@ $-toast-bottom-spacing: sage-spacing(xs);
   position: relative;
 }
 
-.sage-loader__spinner--loading-button {
-  width: sage-spacing(sm);
-  height: sage-spacing(sm);
-  margin-right: sage-spacing(xs);
-}
-
-.sage-loader__spinner-path--loading-button {
-  stroke: currentColor;
-}
-
 .sage-toast__value {
   @include truncate();
 

diff --git a/packages/sage-react/lib/Button/Button.jsx b/packages/sage-react/lib/Button/Button.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Link } from '../Link';
+import { Loader } from '../Loader';
 import { SageTokens } from '../configs';
 import { ButtonGroup } from './ButtonGroup';
 import {
@@ -72,24 +73,12 @@ export const Button = React.forwardRef(({
   //   }
   // };
 
-  const renderLoader = () => loading  && (
-    <span>
-      <svg
-        className="sage-loader__spinner sage-loader__spinner--loading-button"
-        viewBox="25 25 50 50"
-        aria-hidden="true"
-      >
-        <circle
-          className="sage-loader__spinner-path sage-loader__spinner-path--loading-button"
-          cx="50"
-          cy="50"
-          r="20"
-          fill="none"
-          stroke="0072EF"
-          strokeWidth="4"
-        />
-      </svg>
-    </span>
+  const renderLoader = () => (
+    <Loader
+      loading={loading}
+      type={Loader.TYPES.SPINNER_IN_BUTTON}
+      label={null}
+    />
   );
 
   const renderContent = () => {

diff --git a/packages/sage-react/lib/Loader/Loader.jsx b/packages/sage-react/lib/Loader/Loader.jsx
@@ -30,9 +30,37 @@ export const Loader = ({
 
   return (
     <div className={classNames} data-loading={loading} {...ariaAttrs} {...rest}>
+      {(type === LOADER_TYPES.SPINNER_IN_BUTTON) && (
+        <svg
+          className="sage-loader__spinner sage-loader__spinner--loading-button"
+          viewBox="25 25 50 50"
+          aria-hidden="true"
+        >
+          <circle
+            className="sage-loader__spinner-path sage-loader__spinner-path--loading-button"
+            cx="50"
+            cy="50"
+            r="20"
+            fill="none"
+            stroke="0072EF"
+            strokeWidth="4"
+          />
+        </svg>
+      )}
       {(type === LOADER_TYPES.SPINNER) && (
-        <svg className="sage-loader__spinner" viewBox="25 25 50 50">
-          <circle className="sage-loader__spinner-path" cx="50" cy="50" r="20" fill="none" stroke="0072EF" strokeWidth="2" />
+        <svg
+          className="sage-loader__spinner"
+          viewBox="25 25 50 50"
+        >
+          <circle
+            className="sage-loader__spinner-path"
+            cx="50"
+            cy="50"
+            r="20"
+            fill="none"
+            stroke="0072EF"
+            strokeWidth="2"
+          />
         </svg>
       )}
       {(type === LOADER_TYPES.SUCCESS) && (

diff --git a/packages/sage-react/lib/Loader/configs.js b/packages/sage-react/lib/Loader/configs.js
@@ -1,5 +1,6 @@
 export const LOADER_TYPES = {
   BAR: 'bar',
   SPINNER: 'spinner',
+  SPINNER_IN_BUTTON: 'spinner-in-button',
   SUCCESS: 'success',
 };
diff --git a/packages/sage-system/lib/button-spinner.js b/packages/sage-system/lib/button-spinner.js
@@ -24,6 +24,8 @@ Sage.buttonSpinner = (function () {
     currentTarget.setAttribute(ATTRIBUTE_ARIA_LIVE, 'polite');
 
     let element = document.createElement('span');
+    element.classList.add('sage-loader');
+    element.classList.add('sage-loader--spinner');
     element.innerHTML = BUTTON_LOADING_SPINNER;
 
     currentTarget.appendChild(element)