fix(button): updates to disabled button

Kajabi · Jul 21, 2021 · 294d60e · 294d60e
1 parent e359c4f
commit 294d60e
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 65 deletions.
diff --git a/docs/app/views/examples/components/button/_props.html.erb b/docs/app/views/examples/components/button/_props.html.erb
@@ -33,6 +33,12 @@
   <td><%= md('Boolean') %></td>
   <td><%= md('`false`') %></td>
 </tr>
+<tr>
+  <td><%= md('`disabled_with`') %></td>
+  <td><%= md('When the button is in a loading state, this test will be set as the `aria-label`.') %></td>
+  <td><%= md('String') %></td>
+  <td><%= md('`nil`') %></td>
+</tr>
 <tr>
   <td><%= md('`full_width`') %></td>
   <td><%= md('Forces a button to 100% the width of its container.') %></td>

diff --git a/docs/app/views/pages/sandbox.html.erb b/docs/app/views/pages/sandbox.html.erb
@@ -4,15 +4,29 @@
 
 Use this scratchpad to test out elements and components in context. Just be sure not to commit your changes. ❤️
 ") %>
-<%= sage_component SageButton, {
-  value: "SASS Docs",
-  disableWith: true,
-  attributes: {
-    href: "#",
-    target: "_blank",
-    rel: "noopener noreferrer",
-    title: "Open Sassdocs site"
-  },
-  style: "primary",
-} %>
+<div>
+  <%= sage_component SageButton, {
+    value: "SASS Docs",
+    disable_with: "hey",
+    attributes: {
+      href: "#",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: "Open Sassdocs site"
+    },
+    style: "primary",
+  } %>
+</div>
+<div>
+  <%= sage_component SageButton, {
+    value: "SASS Docs",
+    attributes: {
+      href: "#",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: "Open Sassdocs site"
+    },
+    style: "primary",
+  } %>
+</div>
 <% end %>
diff --git a/docs/lib/sage_rails/app/sage_components/sage_button.rb b/docs/lib/sage_rails/app/sage_components/sage_button.rb
@@ -2,10 +2,9 @@ class SageButton < SageComponent
   set_attribute_schema({
     align: [:optional, NilClass, String],
     attributes: [:optional, NilClass, Hash],
-    disabled: [:optional, NilClass, TrueClass],
-    disableWith: [:optional, NilClass, TrueClass],
-    disableWithText: [:optional, NilClass, String],
     custom_content_class: [:optional, NilClass, String],
+    disabled: [:optional, NilClass, TrueClass],
+    disable_with: [:optional, NilClass, String],
     full_width: [:optional, NilClass, TrueClass],
     icon: [:optional, { name: String, style: Set.new(["left", "right", "only"]) }],
     no_shadow: [:optional, NilClass, TrueClass],

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_button.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_button.html.erb
@@ -19,7 +19,7 @@
     <%= "sage-btn--icon-#{component.icon[:style]}-#{component.icon[:name]}" if component.icon %>
     <%= component.generated_css_classes %>
   "
-  <%= "data-js-sage-disabled-with" if component.disableWith %>
+  <%= "data-js-sage-disabled-with=#{component.disable_with}" if component.disable_with.present? %>
   <%= component.generated_html_attributes.html_safe %>
 >
   <% if component.icon&.dig(:style) == "only" %>

diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -96,6 +96,7 @@ $-btn-subtle-styles: (
 // Custom variables
 //
 $-btn-interactive-label-icon-size: rem(24px);
+$-btn-loading-min-height: rem(36px);
 
 
 // stylelint-disable max-nesting-depth
@@ -314,6 +315,15 @@ $-btn-interactive-label-icon-size: rem(24px);
   // NOTE: Icon generation consolidated in `core/_icons.scss`
 }
 
+.sage-btn--is-loading {
+  min-height: $-btn-loading-min-height;
+  pointer-events: none;
+
+  svg {
+    margin-right: 0;
+  }
+}
+
 // Generate button style variations
 @each $-style-name, $-styles in $-btn-base-styles {
   .sage-btn--#{$-style-name} {

diff --git a/packages/sage-assets/lib/stylesheets/components/_toast.scss b/packages/sage-assets/lib/stylesheets/components/_toast.scss
@@ -115,19 +115,14 @@ $-toast-bottom-spacing: sage-spacing(xs);
   position: relative;
 }
 
-.sage-toast__spinner {
+.sage-loader__spinner--loading-button {
   width: sage-spacing(sm);
   height: sage-spacing(sm);
   margin-right: sage-spacing(xs);
-  animation: rotate $-loader-spinner-speed linear infinite;
 }
 
-.sage-toast__spinner-path {
-  stroke-dasharray: 150,200;
-  stroke-dashoffset: -10;
-  stroke-linecap: round;
+.sage-loader__spinner-path--loading-button {
   stroke: sage-color(white);
-  animation: dash $-loader-spinner-path-speed ease-in-out infinite;
 }
 
 .sage-toast__value {

diff --git a/packages/sage-react/lib/Toast/Toast.jsx b/packages/sage-react/lib/Toast/Toast.jsx
@@ -62,8 +62,8 @@ export const Toast = ({
   const renderAsset = () => {
     if (type === Toast.TYPES.LOADING) {
       return (
-        <svg className="sage-toast__spinner" aria-hidden="true" viewBox="25 25 50 50">
-          <circle className="sage-toast__spinner-path" cx="50" cy="50" r="20" fill="none" stroke="0072EF" strokeWidth="4" />
+        <svg className="sage-loader__spinner sage-loader__spinner--loading-button" aria-hidden="true" viewBox="25 25 50 50">
+          <circle className="sage-loader__spinner sage-loader__spinner-path--loading-button" cx="50" cy="50" r="20" fill="none" stroke="0072EF" strokeWidth="4" />
         </svg>
       );
     }

diff --git a/packages/sage-system/lib/button-disable.js b/packages/sage-system/lib/button-disable.js
@@ -4,58 +4,30 @@ Sage.buttonDisable = (function () {
   // ==================================================
 
   const SELECTOR_BUTTON_DISABLED_WITH = "data-js-sage-disabled-with"
-  const BUTTON_LOADING_SPINNER = "<svg class='sage-toast__spinner' viewBox='25 25 50 50' aria-hidden='true'><circle class='sage-toast__spinner-path' cx='50' cy='50' r='20' fill='none' stroke='0072EF' stroke-width='4'></circle></svg>"
+  const BUTTON_LOADING_SPINNER = `<svg class='sage-loader__spinner sage-loader__spinner--loading-button' viewBox='25 25 50 50' aria-hidden='true'><circle class='sage-loader__spinner-path sage-loader__spinner-path--loading-button' cx='50' cy='50' r='20' fill='none' stroke='0072EF' stroke-width='4'></circle></svg>`;
   const ATTRIBUTE_ARIA_LABEL = 'aria-label';
 
-
-  const disabledWithButton = document.querySelector(`[${SELECTOR_BUTTON_DISABLED_WITH}]`);
-
   // ==================================================
   // Functions
   // ==================================================
 
-  function renderDisabledButtonSpinner(node) {
-    console.log('node', node);
-    const spinnerSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    const spinnerSvgIconPath = document.createElementNS(
-      'http://www.w3.org/2000/svg',
-      'path'
-    );
-
-    spinnerSvg.setAttribute('fill', 'none');
-    spinnerSvg.setAttribute('viewBox', '25 25 50 50');
-    spinnerSvg.setAttribute('aria-hidden', true);
-    spinnerSvg.classList.add('sage-toast__spinner');
-
-    const spinnerSvgCircle = document.createElementNS(spinnerSvg, 'circle');
-    spinnerSvgCircle.setAttributeNS(null, 'cx', 50);
-    spinnerSvgCircle.setAttributeNS(null, 'cy', 50);
-    spinnerSvgCircle.setAttributeNS(null, 'r', 20);
-    spinnerSvgCircle.setAttribute('fill', 'none');
-    spinnerSvgCircle.setAttribute('stroke', '#ffffff');
-    spinnerSvgCircle.setAttribute('stroke-width', '4');
-    spinnerSvgCircle.classList.add('sage-toast__spinner-path');
-
-    spinnerSvg.appendChild(spinnerSvgCircle);
-
-    return node.appendChild(spinnerSvg);
-  }
-
-
+  const disabledWithButton = document.querySelector(`[${SELECTOR_BUTTON_DISABLED_WITH}]`);
 
   renderDisabledButtonSpinner(disabledWithButton);
 
+  function renderDisabledButtonSpinner(node) {
+    if (disabledWithButton == null) return false;
 
-  // debugger;
-  console.log('Im in here', disabledWithButton);
-
-  // disabledWithButton.setAttribute(ATTRIBUTE_ARIA_LABEL, 'my label');
-  // disabledWithButton.appendChild(BUTTON_LOADING_SPINNER);
+    let spinnerLabel = node.getAttribute(SELECTOR_BUTTON_DISABLED_WITH);
 
-  function init() {
+    node.classList.add('sage-btn--is-loading');
+    node.setAttribute(ATTRIBUTE_ARIA_LABEL, spinnerLabel)
 
+    return node.innerHTML = BUTTON_LOADING_SPINNER;
   }
 
+  function init() {}
+
   return {
     init: init,
   };

diff --git a/packages/sage-system/lib/toast/toast.template.js b/packages/sage-system/lib/toast/toast.template.js
@@ -13,7 +13,7 @@ export const toastTemplate = ({id, type, icon, text, link}) => (`
     class="sage-toast sage-toast--style-${type}"
     id="${id}"
     ${DATA_ATTR}
-  > 
+  >
     ${type === "loading" ? loadingTemplate() : iconTemplate(icon)}
     <output
       class="sage-toast__value"
@@ -57,8 +57,8 @@ const linkTemplate = (link) => {
 };
 
 const loadingTemplate = () => (
-  `<svg class="sage-toast__spinner" viewBox="25 25 50 50" aria-hidden="true">
-    <circle class="sage-toast__spinner-path" cx="50" cy="50" r="20" fill="none" stroke="0072EF" stroke-width="4"></circle>
+  `<svg class="sage-loader__spinner sage-loader__spinner--loading-button" viewBox="25 25 50 50" aria-hidden="true">
+    <circle class="sage-loader__spinner-path sage-loader__spinner-path--loading-button" cx="50" cy="50" r="20" fill="none" stroke="0072EF" stroke-width="4"></circle>
   </svg>`
 );