Merge 1a8d490 into fca5bd9

infor-design · Jun 1, 2021 · 33be01a · 33be01a
2 parents fca5bd9 + 1a8d490
commit 33be01a
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 21 deletions.
diff --git a/src/ids-button/ids-button.js b/src/ids-button/ids-button.js
@@ -12,6 +12,8 @@ import { IdsRenderLoopMixin, IdsRenderLoopItem } from '../ids-mixins/ids-render-
 
 import styles from './ids-button.scss';
 
+const { stringToBool } = stringUtils;
+
 // Button Styles
 const BUTTON_TYPES = [
   'default',
@@ -88,10 +90,13 @@ class IdsButton extends mix(IdsElement).with(
       switch (name) {
       // Convert "tabindex" to "tabIndex"
       case 'tabindex':
+        if (Number.isNaN(Number.parseInt(newValue))) {
+          this.tabIndex = null;
+        }
         this.tabIndex = Number(newValue);
         break;
       default:
-        IdsElement.prototype.attributeChangedCallback.apply(this, [name, oldValue, newValue]);
+        super.attributeChangedCallback.apply(this, [name, oldValue, newValue]);
         break;
       }
     }
@@ -106,7 +111,6 @@ class IdsButton extends mix(IdsElement).with(
     this.setIconAlignment();
     this.shouldUpdate = true;
     super.connectedCallback();
-    this.setAttribute('role', 'button');
   }
 
   /**
@@ -286,16 +290,20 @@ class IdsButton extends mix(IdsElement).with(
    * @param {boolean|string} val true if the button will be disabled
    */
   set disabled(val) {
+    const isValueTruthy = stringToBool(val);
     this.shouldUpdate = false;
-    this.removeAttribute(props.DISABLED);
-    this.shouldUpdate = true;
+    if (isValueTruthy) {
+      this.setAttribute(props.DISABLED, '');
+    } else {
+      this.removeAttribute(props.DISABLED);
+    }
 
-    const trueVal = stringUtils.stringToBool(val);
-    this.state.disabled = trueVal;
+    this.shouldUpdate = true;
+    this.state.disabled = isValueTruthy;
 
     /* istanbul ignore next */
     if (this.button) {
-      this.button.disabled = trueVal;
+      this.button.disabled = isValueTruthy;
     }
   }
 
@@ -309,17 +317,15 @@ class IdsButton extends mix(IdsElement).with(
    * @returns {void}
    */
   set tabIndex(val) {
-    // Remove the webcomponent tabIndex
-    this.shouldUpdate = false;
-    this.removeAttribute(props.TABINDEX);
-    this.shouldUpdate = true;
-
     const trueVal = Number(val);
+
     if (Number.isNaN(trueVal) || trueVal < -1) {
       this.state.tabIndex = 0;
       this.button.setAttribute(props.TABINDEX, '0');
+      this.removeAttribute(props.TABINDEX);
       return;
     }
+
     this.state.tabIndex = trueVal;
     this.button.setAttribute(props.TABINDEX, `${trueVal}`);
   }

diff --git a/test/ids-button/ids-button-func-test.js b/test/ids-button/ids-button-func-test.js
@@ -68,7 +68,7 @@ describe('IdsButton Component', () => {
   it('can be disabled/enabled', () => {
     btn.disabled = true;
 
-    expect(btn.hasAttribute('disabled')).toBeFalsy();
+    expect(btn.hasAttribute('disabled')).toBeTruthy();
     expect(btn.disabled).toBeTruthy();
     expect(btn.button.hasAttribute('disabled')).toBeTruthy();
     expect(btn.state.disabled).toBeTruthy();
@@ -105,7 +105,7 @@ describe('IdsButton Component', () => {
 
     btn.setAttribute('tabindex', '0');
 
-    expect(btn.hasAttribute('tabindex')).toBeFalsy();
+    expect(btn.hasAttribute('tabindex')).toBeTruthy();
     expect(btn.tabIndex).toEqual(0);
     expect(btn.button.getAttribute('tabindex')).toEqual('0');
     expect(btn.state.tabIndex).toEqual(0);

diff --git a/test/ids-button/ids-button-func-test.js.snap b/test/ids-button/ids-button-func-test.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`IdsButton Component renders correctly 1`] = `"<ids-button css-class=\\"test-class\\" icon=\\"add\\" role=\\"button\\"><span>test</span><ids-icon slot=\\"icon\\" icon=\\"add\\" class=\\"ids-icon\\"></ids-icon></ids-button>"`;
+exports[`IdsButton Component renders correctly 1`] = `"<ids-button css-class=\\"test-class\\" disabled=\\"\\" icon=\\"add\\"><span>test</span><ids-icon slot=\\"icon\\" icon=\\"add\\" class=\\"ids-icon\\"></ids-icon></ids-button>"`;
 
-exports[`IdsButton Component renders icons on the opposite side correctly 1`] = `"<ids-button id=\\"test-button\\" icon=\\"settings\\" role=\\"button\\"><span>Settings</span><ids-icon slot=\\"icon\\" icon=\\"settings\\" class=\\"ids-icon\\"></ids-icon></ids-button>"`;
+exports[`IdsButton Component renders icons on the opposite side correctly 1`] = `"<ids-button id=\\"test-button\\" icon=\\"settings\\"><span>Settings</span><ids-icon slot=\\"icon\\" icon=\\"settings\\" class=\\"ids-icon\\"></ids-icon></ids-button>"`;
diff --git a/test/ids-menu-button/ids-menu-button-func-test.js.snap b/test/ids-menu-button/ids-menu-button-func-test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`IdsMenuButton Component renders correctly 1`] = `"<ids-menu-button id=\\"new-button\\" role=\\"button\\" menu=\\"new-menu\\"></ids-menu-button>"`;
+exports[`IdsMenuButton Component renders correctly 1`] = `"<ids-menu-button id=\\"new-button\\" menu=\\"new-menu\\"></ids-menu-button>"`;
diff --git a/test/ids-theme-switcher/ids-theme-switcher-func-test.js.snap b/test/ids-theme-switcher/ids-theme-switcher-func-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`IdsThemeSwitcher Component renders correctly 1`] = `
-"<style nonce=\\"0a59a005\\">.ids-theme-switcher { background-color: transparent; }</style><ids-menu-button id=\\"ids-theme-switcher\\" menu=\\"ids-theme-menu\\" mode=\\"light\\" version=\\"new\\" role=\\"button\\">
+"<style nonce=\\"0a59a005\\">.ids-theme-switcher { background-color: transparent; }</style><ids-menu-button id=\\"ids-theme-switcher\\" menu=\\"ids-theme-menu\\" mode=\\"light\\" version=\\"new\\">
             <ids-icon slot=\\"icon\\" icon=\\"more\\"></ids-icon>
             <span class=\\"audible\\">Theme Switcher</span>
         </ids-menu-button>

diff --git a/test/ids-trigger-button/ids-trigger-button-func-test.js.snap b/test/ids-trigger-button/ids-trigger-button-func-test.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`IdsTriggerButton Component renders correctly 1`] = `"<ids-trigger-button role=\\"button\\"></ids-trigger-button>"`;
+exports[`IdsTriggerButton Component renders correctly 1`] = `"<ids-trigger-button></ids-trigger-button>"`;
diff --git a/test/ids-trigger-field/ids-trigger-field-func-test.js.snap b/test/ids-trigger-field/ids-trigger-field-func-test.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`IdsTriggerField Component renders correctly 1`] = `"<ids-trigger-field><ids-input id=\\"ids-input-2\\" triggerfield=\\"true\\"></ids-input><ids-trigger-button role=\\"button\\"></ids-trigger-button></ids-trigger-field>"`;
+exports[`IdsTriggerField Component renders correctly 1`] = `"<ids-trigger-field><ids-input id=\\"ids-input-2\\" triggerfield=\\"true\\"></ids-input><ids-trigger-button></ids-trigger-button></ids-trigger-field>"`;
 
-exports[`IdsTriggerField Component renders correctly 2`] = `"<ids-trigger-field><ids-input id=\\"ids-input-2\\" triggerfield=\\"true\\"></ids-input><ids-trigger-button role=\\"button\\"></ids-trigger-button></ids-trigger-field>"`;
+exports[`IdsTriggerField Component renders correctly 2`] = `"<ids-trigger-field><ids-input id=\\"ids-input-2\\" triggerfield=\\"true\\"></ids-input><ids-trigger-button></ids-trigger-button></ids-trigger-field>"`;