Merge pull request #4033 from sparkdesignsystem/spinners-again

Spinners Fix Without TDP Fix

Author: Amber Febbraro

html/components/button.stories.js

@@ -47,7 +47,9 @@ after Spark's JavaScript functions run.
   spinning. Defaults to an empty string.
   - \`data-sprk-spinner-variant="primary|secondary|dark"\` – The variant
   for the spinning icon.
-
+  - \`data-sprk-spinner="is-not-disabled"\` – This is identical to
+  \`data-sprk-spinner="click"\` except the button will not be disabled when it
+  is clicked. This should be used for buttons that submit a form.
 
 ###### Example Spinner Implementation
 \`\`\`

html/components/spinners.js

@@ -32,14 +32,20 @@ const setSpinning = (element, options) => {
   const spinningAriaLabel = options.ariaLabel || 'Loading';
   const ariaValueText = options.ariaValueText || 'Loading';
   const role = options.role || 'progressbar';
+  const hasDoNotDisable = options.hasDoNotDisable || false;
 
   el.classList.add('sprk-c-Button--has-spinner');
   el.setAttribute('aria-label', spinningAriaLabel);
   el.setAttribute('data-sprk-spinner-text', el.textContent);
-  el.setAttribute('disabled', '');
   el.setAttribute('data-sprk-has-spinner', 'true');
   el.setAttribute('style', `width: ${width}px`);
 
+  // This flag should be used for submit buttons so that the
+  // disabled attribute does not suppress the submit behavior.
+  if (!hasDoNotDisable) {
+    el.setAttribute('disabled', '');
+  }
+
   el.innerHTML = `
     <div
       class="${getSpinnerClasses(options)}"
@@ -60,8 +66,15 @@ const cancelSpinning = (element) => {
 };
 
 const spinners = () => {
-  getElements('[data-sprk-spinner="click"]', (spinnerContainer) => {
+  getElements('[data-sprk-spinner]', (spinnerContainer) => {
+    const spinnerType = spinnerContainer.getAttribute('data-sprk-spinner');
+
     const options = {};
+
+    if (spinnerType === 'is-not-disabled') {
+      options.hasDoNotDisable = true;
+    }
+
     options.size = spinnerContainer.getAttribute('data-sprk-spinner-size');
     // TODO: Deprecate lightness option in favor of variant - issue #1292
     options.lightness = spinnerContainer.getAttribute(

html/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparkdesignsystem/spark",
-  "version": "17.0.0",
+  "version": "17.0.1",
   "description": "Spark is the main package for the Spark Design System. This package contains the JavaScript and components that make up the basic interfaces for Quicken Loans Fintech products.",
   "main": "es5/sparkExports.js",
   "scripts": {

html/package.json

@@ -15,7 +15,7 @@ describe('spinners init', () => {
     sinon.spy(document, 'querySelectorAll');
     spinners();
     expect(document.querySelectorAll.getCall(0).args[0]).toBe(
-      '[data-sprk-spinner="click"]',
+      '[data-sprk-spinner]',
     );
   });
 });
@@ -287,3 +287,47 @@ describe('cancelSpinning tests', () => {
     ).toBe(false);
   });
 });
+
+describe('spinners with is-not-disabled', () => {
+  let spinnerContainer;
+
+  beforeEach(() => {
+    spinnerContainer = document.createElement('button');
+    spinnerContainer.setAttribute('data-sprk-spinner', 'is-not-disabled');
+    spinnerContainer.textContent = 'Submit';
+
+    sinon.spy(spinnerContainer, 'addEventListener');
+    sinon.spy(spinnerContainer, 'setAttribute');
+
+    document.body.append(spinnerContainer);
+    spinners();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+    spinnerContainer.addEventListener.restore();
+    spinnerContainer.setAttribute.restore();
+  });
+
+  it('should start spinning and not be disabled if its clicked', () => {
+    spinnerContainer.click();
+
+    expect(
+      spinnerContainer
+        .querySelector('div')
+        .classList.contains('sprk-c-Spinner--circle'),
+    ).toBe(true);
+
+    expect(spinnerContainer.hasAttribute('disabled')).toBe(false);
+  });
+
+  it('should not start spinning if its already spinning', () => {
+    spinnerContainer.setAttribute('data-sprk-has-spinner', 'true');
+
+    spinnerContainer.click();
+
+    expect(spinnerContainer.querySelector('div')).toBe(null);
+
+    expect(spinnerContainer.hasAttribute('disabled')).toBe(false);
+  });
+});