diff --git a/packages/mdc-icon-button/README.md b/packages/mdc-icon-button/README.md index 3c1f0d90e54..6f8aac2efb0 100644 --- a/packages/mdc-icon-button/README.md +++ b/packages/mdc-icon-button/README.md @@ -51,6 +51,7 @@ npm install @material/icon-button ```scss @import "@material/icon-button/mdc-icon-button"; ``` + ### JavaScript Instantiation The icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating `MDCRipple` on the root element. @@ -81,7 +82,7 @@ The icon button can be used to toggle between an on and off icon. To style an ic data-toggle-on-content="favorite" data-toggle-on-label="Remove from favorites" data-toggle-off-content="favorite_border" - data-toggle-off-label="Add to favorites">favorites_border + data-toggle-off-label="Add to favorites">favorite_border ``` ```js @@ -101,10 +102,27 @@ Attribute | Description `data-toggle--content` | The text content to set on the element. Note that if an inner icon is used, the text content will be set on that element instead. `data-toggle--class` | A CSS class to apply to the icon element. The same rules regarding inner icon elements described for `content` apply here as well. +#### Icon Button Toggle with Font Awesome + +The icon button toggle can be used with other font libraries such as Font Awesome that use an inner icon element. + +```html + +``` + ### Icons -The icon button can be used with a standard icon library or an `svg`. The icon button toggle should only be used with -an standard icon library. We recommend you use [Material Icons](https://material.io/tools/icons) from Google Fonts. +The icon button can be used with a standard icon library such as Material Icons or Font Awesome, or with an `svg`. +The icon button toggle should only be used with an standard icon library. We recommend you use +[Material Icons](https://material.io/tools/icons) from Google Fonts. ### Disabled diff --git a/packages/mdc-icon-button/adapter.js b/packages/mdc-icon-button/adapter.js index 7b9f0afab69..db56118d27d 100644 --- a/packages/mdc-icon-button/adapter.js +++ b/packages/mdc-icon-button/adapter.js @@ -58,12 +58,6 @@ class MDCIconButtonToggleAdapter { /** @param {string} text */ setText(text) {} - /** @return {number} */ - getTabIndex() {} - - /** @param {number} tabIndex */ - setTabIndex(tabIndex) {} - /** * @param {string} name * @return {string} @@ -76,9 +70,6 @@ class MDCIconButtonToggleAdapter { */ setAttr(name, value) {} - /** @param {string} name */ - removeAttr(name) {} - /** @param {!IconButtonToggleEvent} evtData */ notifyChange(evtData) {} } diff --git a/packages/mdc-icon-button/foundation.js b/packages/mdc-icon-button/foundation.js index 39a801038a3..d99b3a004c8 100644 --- a/packages/mdc-icon-button/foundation.js +++ b/packages/mdc-icon-button/foundation.js @@ -39,11 +39,8 @@ class MDCIconButtonToggleFoundation extends MDCFoundation { registerInteractionHandler: (/* type: string, handler: EventListener */) => {}, deregisterInteractionHandler: (/* type: string, handler: EventListener */) => {}, setText: (/* text: string */) => {}, - getTabIndex: () => /* number */ 0, - setTabIndex: (/* tabIndex: number */) => {}, getAttr: (/* name: string */) => /* string */ '', setAttr: (/* name: string, value: string */) => {}, - removeAttr: (/* name: string */) => {}, notifyChange: (/* evtData: IconButtonToggleEvent */) => {}, }; } @@ -51,15 +48,14 @@ class MDCIconButtonToggleFoundation extends MDCFoundation { constructor(adapter) { super(Object.assign(MDCIconButtonToggleFoundation.defaultAdapter, adapter)); + const {ARIA_PRESSED} = MDCIconButtonToggleFoundation.strings; + /** @private {boolean} */ - this.on_ = false; + this.on_ = this.adapter_.getAttr(ARIA_PRESSED) === 'true'; /** @private {boolean} */ this.disabled_ = false; - /** @private {number} */ - this.savedTabIndex_ = -1; - /** @private {?IconButtonToggleState} */ this.toggleOnData_ = null; @@ -72,7 +68,6 @@ class MDCIconButtonToggleFoundation extends MDCFoundation { init() { this.refreshToggleData(); - this.savedTabIndex_ = this.adapter_.getTabIndex(); this.adapter_.registerInteractionHandler('click', this.clickHandler_); } diff --git a/packages/mdc-icon-button/index.js b/packages/mdc-icon-button/index.js index f98616ce8fa..317dfa54c90 100644 --- a/packages/mdc-icon-button/index.js +++ b/packages/mdc-icon-button/index.js @@ -64,11 +64,8 @@ class MDCIconButtonToggle extends MDCComponent { registerInteractionHandler: (type, handler) => this.root_.addEventListener(type, handler), deregisterInteractionHandler: (type, handler) => this.root_.removeEventListener(type, handler), setText: (text) => this.iconEl_.textContent = text, - getTabIndex: () => /* number */ this.root_.tabIndex, - setTabIndex: (tabIndex) => this.root_.tabIndex = tabIndex, - getAttr: (name, value) => this.root_.getAttribute(name, value), + getAttr: (name) => this.root_.getAttribute(name), setAttr: (name, value) => this.root_.setAttribute(name, value), - removeAttr: (name) => this.root_.removeAttribute(name), notifyChange: (evtData) => this.emit(MDCIconButtonToggleFoundation.strings.CHANGE_EVENT, evtData), }); } diff --git a/packages/mdc-icon-button/mdc-icon-button.scss b/packages/mdc-icon-button/mdc-icon-button.scss index 8fa5874381f..65ab96d197e 100644 --- a/packages/mdc-icon-button/mdc-icon-button.scss +++ b/packages/mdc-icon-button/mdc-icon-button.scss @@ -23,10 +23,4 @@ @include mdc-states; } -.mdc-icon-button--disabled { - @include mdc-theme-prop(color, text-disabled-on-light); - - pointer-events: none; -} - // postcss-bem-linter: end diff --git a/test/unit/mdc-icon-button/foundation.test.js b/test/unit/mdc-icon-button/foundation.test.js index a1a863f4285..56d9e2164ab 100644 --- a/test/unit/mdc-icon-button/foundation.test.js +++ b/test/unit/mdc-icon-button/foundation.test.js @@ -36,15 +36,24 @@ test('exports cssClasses', () => { test('defaultAdapter returns a complete adapter implementation', () => { verifyDefaultAdapter(MDCIconButtonToggleFoundation, [ 'addClass', 'removeClass', 'registerInteractionHandler', 'deregisterInteractionHandler', - 'setText', 'getTabIndex', 'setTabIndex', 'getAttr', 'setAttr', 'removeAttr', 'notifyChange', + 'setText', 'getAttr', 'setAttr', 'notifyChange', ]); }); const setupTest = () => setupFoundationTest(MDCIconButtonToggleFoundation); test('#constructor sets on to false', () => { - const {foundation} = setupTest(); - assert.isNotOk(foundation.isOn()); + const {mockAdapter} = setupTest(); + td.when(mockAdapter.getAttr(strings.ARIA_PRESSED)).thenReturn('false'); + const foundation = new MDCIconButtonToggleFoundation(mockAdapter); + assert.isFalse(foundation.isOn()); +}); + +test('#constructor sets on to true if the toggle is pressed', () => { + const {mockAdapter} = setupTest(); + td.when(mockAdapter.getAttr(strings.ARIA_PRESSED)).thenReturn('true'); + const foundation = new MDCIconButtonToggleFoundation(mockAdapter); + assert.isTrue(foundation.isOn()); }); test('#toggle flips on', () => { diff --git a/test/unit/mdc-icon-button/mdc-icon-button-toggle.test.js b/test/unit/mdc-icon-button/mdc-icon-button-toggle.test.js index 07926e664ef..77baf1bc2b5 100644 --- a/test/unit/mdc-icon-button/mdc-icon-button-toggle.test.js +++ b/test/unit/mdc-icon-button/mdc-icon-button-toggle.test.js @@ -158,17 +158,6 @@ test('#adapter.setText sets the text content of the inner icon element when used assert.equal(root.querySelector('#icon').textContent, 'foo'); }); -test('#adapter.getTabIndex returns the tabIndex of the element', () => { - const {component} = setupTest({tabIndex: 4}); - assert.equal(component.getDefaultFoundation().adapter_.getTabIndex(), 4); -}); - -test('#adapter.setTabIndex sets the tabIndex of the element', () => { - const {root, component} = setupTest({tabIndex: 4}); - component.getDefaultFoundation().adapter_.setTabIndex(2); - assert.equal(root.tabIndex, 2); -}); - test('#adapter.getAttr retrieves an attribute from the root element', () => { const {root, component} = setupTest(); root.setAttribute('aria-label', 'hello'); @@ -181,13 +170,6 @@ test('#adapter.setAttr sets an attribute on the root element', () => { assert.equal(root.getAttribute('aria-label'), 'hello'); }); -test('#adapter.removeAttr removes an attribute from the root element', () => { - const {root, component} = setupTest(); - root.setAttribute('aria-label', 'hello'); - component.getDefaultFoundation().adapter_.removeAttr('aria-label'); - assert.isNotOk(root.hasAttribute('aria-label')); -}); - test(`#adapter.notifyChange broadcasts a ${MDCIconButtonToggleFoundation.strings.CHANGE_EVENT} custom event`, () => { const {root, component} = setupTest(); const handler = td.func('custom event handler');