Merge branch 'master' into shape_rename

packages/mdc-chips/README.md

@@ -380,11 +380,9 @@ Method Signature | Description
 --- | ---
 `getSelectedChipIds() => boolean` | Returns an array of the IDs of all selected chips
 `select(chipId: string) => void` | Selects the chip with the given id
-`deselect(chipId: string) => void` | Deselects the chip with the given id
-`toggleSelect(chipId: string) => void` | Toggles selection of the chip with the given id
-`handleChipInteraction(evt: Event) => void` | Handles a custom `MDCChip:interaction` event on the root element
-`handleChipSelection(evt: Event) => void` | Handles a custom `MDCChip:selection` event on the root element
-`handleChipRemoval(evt: Event) => void` | Handles a custom `MDCChip:removal` event on the root element
+`handleChipInteraction(chipId: string) => void` | Handles a custom `MDCChip:interaction` event on the root element
+`handleChipSelection(chipId: string, selected: boolean) => void` | Handles a custom `MDCChip:selection` event on the root element
+`handleChipRemoval(chipId: string) => void` | Handles a custom `MDCChip:removal` event on the root element
 
 #### `MDCChipSetFoundation` Event Handlers
 

packages/mdc-chips/chip-set/foundation.js

@@ -78,11 +78,12 @@ class MDCChipSetFoundation extends MDCFoundation {
 
   /**
    * Toggles selection of the chip with the given id.
+   * @private
    * @param {string} chipId
    */
-  toggleSelect(chipId) {
+  toggleSelect_(chipId) {
     if (this.selectedChipIds_.indexOf(chipId) >= 0) {
-      this.deselect(chipId);
+      this.deselect_(chipId);
     } else {
       this.select(chipId);
     }
@@ -108,9 +109,10 @@ class MDCChipSetFoundation extends MDCFoundation {
 
   /**
    * Deselects the chip with the given id.
+   * @private
    * @param {string} chipId
    */
-  deselect(chipId) {
+  deselect_(chipId) {
     const index = this.selectedChipIds_.indexOf(chipId);
     if (index >= 0) {
       this.selectedChipIds_.splice(index, 1);
@@ -120,36 +122,34 @@ class MDCChipSetFoundation extends MDCFoundation {
 
   /**
    * Handles a chip interaction event
-   * @param {!MDCChipInteractionEventType} evt
+   * @param {string} chipId
    */
-  handleChipInteraction(evt) {
-    const {chipId} = evt.detail;
+  handleChipInteraction(chipId) {
     if (this.adapter_.hasClass(cssClasses.CHOICE) || this.adapter_.hasClass(cssClasses.FILTER)) {
-      this.toggleSelect(chipId);
+      this.toggleSelect_(chipId);
     }
   }
 
   /**
    * Handles a chip selection event, used to handle discrepancy when selection state is set directly on the Chip.
-   * @param {!MDCChipSelectionEventType} evt
+   * @param {string} chipId
+   * @param {boolean} selected
    */
-  handleChipSelection(evt) {
-    const {chipId, selected} = evt.detail;
+  handleChipSelection(chipId, selected) {
     const chipIsSelected = this.selectedChipIds_.indexOf(chipId) >= 0;
     if (selected && !chipIsSelected) {
       this.select(chipId);
     } else if (!selected && chipIsSelected) {
-      this.deselect(chipId);
+      this.deselect_(chipId);
     }
   }
 
   /**
    * Handles the event when a chip is removed.
-   * @param {!MDCChipRemovalEventType} evt
+   * @param {string} chipId
    */
-  handleChipRemoval(evt) {
-    const {chipId} = evt.detail;
-    this.deselect(chipId);
+  handleChipRemoval(chipId) {
+    this.deselect_(chipId);
     this.adapter_.removeChip(chipId);
   }
 }

packages/mdc-chips/chip-set/index.js

@@ -77,9 +77,9 @@ class MDCChipSet extends MDCComponent {
       }
     });
 
-    this.handleChipInteraction_ = (evt) => this.foundation_.handleChipInteraction(evt);
-    this.handleChipSelection_ = (evt) => this.foundation_.handleChipSelection(evt);
-    this.handleChipRemoval_ = (evt) => this.foundation_.handleChipRemoval(evt);
+    this.handleChipInteraction_ = (evt) => this.foundation_.handleChipInteraction(evt.detail.chipId);
+    this.handleChipSelection_ = (evt) => this.foundation_.handleChipSelection(evt.detail.chipId, evt.detail.selected);
+    this.handleChipRemoval_ = (evt) => this.foundation_.handleChipRemoval(evt.detail.chipId);
     this.root_.addEventListener(
       MDCChipFoundation.strings.INTERACTION_EVENT, this.handleChipInteraction_);
     this.root_.addEventListener(

packages/mdc-tab-bar/README.md

@@ -96,6 +96,11 @@ Mixin | Description
 
 ## `MDCTabBar` Properties and Methods
 
+Property | Value Type | Description
+--- | --- | ---
+`focusOnActivate` | `boolean` (write-only) | Sets whether tabs focus themselves when activated. Defaults to `true`.
+`useAutomaticActivation` | `boolean` (write-only) | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter. The default is automatic (`true`).
+
 Method Signature | Description
 --- | ---
 `activateTab(index: number) => void` | Activates the tab at the given index.
@@ -136,6 +141,7 @@ Method Signature | Description
 Method Signature | Description
 --- | ---
 `activateTab(index: number) => void` | Activates the tab at the given index.
+`setUseAutomaticActivation(useAutomaticActivation: boolean) => void` | Sets how tabs activate in response to keyboard interaction. Automatic (`true`) activates as soon as a tab is focused with arrow keys; manual (`false`) activates only when the user presses space/enter.
 `handleKeyDown(evt: Event) => void` | Handles the logic for the `"keydown"` event.
 `handleTabInteraction(evt: Event) => void` | Handles the logic for the `"MDCTab:interacted"` event.
 `scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.

packages/mdc-tab-bar/index.js

@@ -67,6 +67,10 @@ class MDCTabBar extends MDCComponent {
     return new MDCTabBar(root);
   }
 
+  set focusOnActivate(focusOnActivate) {
+    this.tabList_.forEach((tab) => tab.focusOnActivate = focusOnActivate);
+  }
+
   set useAutomaticActivation(useAutomaticActivation) {
     this.foundation_.setUseAutomaticActivation(useAutomaticActivation);
   }

packages/mdc-tab/README.md

@@ -141,7 +141,8 @@ Mixin | Description
 
 Property | Value Type | Description
 --- | --- | ---
-`active` | `boolean` | Allows getting the active state of the tab.
+`active` | `boolean` (read-only) | Allows getting the active state of the tab.
+`focusOnActivate` | `boolean` (write-only) | Sets whether the tab should focus itself when activated. Defaults to `true`.
 
 Method Signature | Description
 --- | ---
@@ -182,6 +183,7 @@ Method Signature | Description
 --- | ---
 `handleClick() => void` | Handles the logic for the `"click"` event.
 `isActive() => boolean` | Returns whether the tab is active.
+`setFocusOnActivate(focusOnActivate: boolean) => void` | Sets whether the tab should focus itself when activated.
 `activate(previousIndicatorClientRect: ClientRect=) => void` | Activates the tab. `previousIndicatorClientRect` is an optional argument.
 `deactivate() => void` | Deactivates the tab.
 `computeDimensions() => MDCTabDimensions` | Returns the dimensions of the tab.

packages/mdc-tab/foundation.js

@@ -72,8 +72,8 @@ class MDCTabFoundation extends MDCFoundation {
   constructor(adapter) {
     super(Object.assign(MDCTabFoundation.defaultAdapter, adapter));
 
-    /** @private {function(?Event): undefined} */
-    this.handleClick_ = () => this.handleClick();
+    /** @private {boolean} */
+    this.focusOnActivate_ = true;
   }
 
   /**
@@ -93,6 +93,14 @@ class MDCTabFoundation extends MDCFoundation {
     return this.adapter_.hasClass(cssClasses.ACTIVE);
   }
 
+  /**
+   * Sets whether the tab should focus itself when activated
+   * @param {boolean} focusOnActivate
+   */
+  setFocusOnActivate(focusOnActivate) {
+    this.focusOnActivate_ = focusOnActivate;
+  }
+
   /**
    * Activates the Tab
    * @param {!ClientRect=} previousIndicatorClientRect
@@ -102,7 +110,9 @@ class MDCTabFoundation extends MDCFoundation {
     this.adapter_.setAttr(strings.ARIA_SELECTED, 'true');
     this.adapter_.setAttr(strings.TABINDEX, '0');
     this.adapter_.activateIndicator(previousIndicatorClientRect);
-    this.adapter_.focus();
+    if (this.focusOnActivate_) {
+      this.adapter_.focus();
+    }
   }
 
   /**

packages/mdc-tab/index.js

@@ -118,6 +118,10 @@ class MDCTab extends MDCComponent {
     return this.foundation_.isActive();
   }
 
+  set focusOnActivate(focusOnActivate) {
+    this.foundation_.setFocusOnActivate(focusOnActivate);
+  }
+
   /**
    * Activates the tab
    * @param {!ClientRect=} computeIndicatorClientRect

test/unit/mdc-chips/mdc-chip-set.foundation.test.js

@@ -106,18 +106,18 @@ test('in filter chips, #select does nothing if chip is already selected', () =>
   assert.equal(foundation.getSelectedChipIds().length, 1);
 });
 
-test('in filter chips, #deselect deselects selected chips', () => {
+test('in filter chips, #handleChipInteraction deselects chip if in selectedChipId', () => {
   const {foundation, mockAdapter} = setupTest();
   td.when(mockAdapter.hasClass(cssClasses.FILTER)).thenReturn(true);
-  foundation.select('chipA');
-  foundation.select('chipB');
+  foundation.handleChipInteraction('chipA');
+  foundation.handleChipInteraction('chipB');
   assert.equal(foundation.getSelectedChipIds().length, 2);
 
-  foundation.deselect('chipB');
+  foundation.handleChipInteraction('chipB');
   td.verify(mockAdapter.setSelected('chipB', false));
   assert.equal(foundation.getSelectedChipIds().length, 1);
 
-  foundation.deselect('chipA');
+  foundation.handleChipInteraction('chipA');
   td.verify(mockAdapter.setSelected('chipA', false));
   assert.equal(foundation.getSelectedChipIds().length, 0);
 });
@@ -127,11 +127,7 @@ test('#handleChipInteraction selects chip if the chip set is a filter chip set',
   td.when(mockAdapter.hasClass(cssClasses.CHOICE)).thenReturn(false);
   td.when(mockAdapter.hasClass(cssClasses.FILTER)).thenReturn(true);
 
-  foundation.handleChipInteraction({
-    detail: {
-      chipId: 'chipA',
-    },
-  });
+  foundation.handleChipInteraction('chipA');
   td.verify(mockAdapter.setSelected('chipA', true));
 });
 
@@ -140,11 +136,7 @@ test('#handleChipInteraction selects chip if the chip set is a choice chip set',
   td.when(mockAdapter.hasClass(cssClasses.CHOICE)).thenReturn(true);
   td.when(mockAdapter.hasClass(cssClasses.FILTER)).thenReturn(false);
 
-  foundation.handleChipInteraction({
-    detail: {
-      chipId: 'chipA',
-    },
-  });
+  foundation.handleChipInteraction('chipA');
   td.verify(mockAdapter.setSelected('chipA', true));
 });
 
@@ -153,11 +145,7 @@ test('#handleChipInteraction does nothing if the chip set is neither choice nor
   td.when(mockAdapter.hasClass(cssClasses.CHOICE)).thenReturn(false);
   td.when(mockAdapter.hasClass(cssClasses.FILTER)).thenReturn(false);
 
-  foundation.handleChipInteraction({
-    detail: {
-      chipId: 'chipA',
-    },
-  });
+  foundation.handleChipInteraction('chipA');
   td.verify(mockAdapter.setSelected('chipA', true), {times: 0});
 });
 
@@ -166,12 +154,7 @@ test('#handleChipSelection selects an unselected chip if selected is true', () =
 
   foundation.selectedChipIds_ = [];
   foundation.select = td.func();
-  foundation.handleChipSelection({
-    detail: {
-      chipId: 'chipA',
-      selected: true,
-    },
-  });
+  foundation.handleChipSelection('chipA', true);
   td.verify(foundation.select('chipA'));
 });
 
@@ -180,50 +163,29 @@ test('#handleChipSelection does nothing if selected is true and the chip is alre
 
   foundation.selectedChipIds_ = ['chipA'];
   foundation.select = td.func();
-  foundation.handleChipSelection({
-    detail: {
-      chipId: 'chipA',
-      selected: true,
-    },
-  });
+  foundation.handleChipSelection('chipA', true);
   td.verify(foundation.select('chipA'), {times: 0});
 });
 
 test('#handleChipSelection deselects a selected chip if selected is false', () => {
   const {foundation} = setupTest();
 
   foundation.selectedChipIds_ = ['chipA'];
-  foundation.deselect = td.func();
-  foundation.handleChipSelection({
-    detail: {
-      chipId: 'chipA',
-      selected: false,
-    },
-  });
-  td.verify(foundation.deselect('chipA'));
+  foundation.handleChipSelection('chipA', false);
+  assert.equal(foundation.selectedChipIds_.length, 0);
 });
 
 test('#handleChipSelection does nothing if selected is false and the chip is not selected', () => {
   const {foundation} = setupTest();
 
-  foundation.selectedChipIds_ = [];
-  foundation.deselect = td.func();
-  foundation.handleChipSelection({
-    detail: {
-      chipId: 'chipA',
-      selected: false,
-    },
-  });
-  td.verify(foundation.deselect('chipA'), {times: 0});
+  foundation.selectedChipIds_ = ['chipB'];
+  foundation.handleChipSelection('chipA', false);
+  assert.equal(foundation.selectedChipIds_.length, 1);
 });
 
 test('#handleChipRemoval removes chip', () => {
   const {foundation, mockAdapter} = setupTest();
 
-  foundation.handleChipRemoval({
-    detail: {
-      chipId: 'chipA',
-    },
-  });
+  foundation.handleChipRemoval('chipA');
   td.verify(mockAdapter.removeChip('chipA'));
 });

test/unit/mdc-chips/mdc-chip-set.test.js

@@ -89,15 +89,24 @@ test('#destroy cleans up child chip components', () => {
 
 test('#initialSyncWithDOM sets up event handlers', () => {
   const {root, mockFoundation} = setupMockFoundationTest();
-
-  domEvents.emit(root, MDCChipFoundation.strings.INTERACTION_EVENT);
-  td.verify(mockFoundation.handleChipInteraction(td.matchers.anything()), {times: 1});
-
-  domEvents.emit(root, MDCChipFoundation.strings.SELECTION_EVENT);
-  td.verify(mockFoundation.handleChipSelection(td.matchers.anything()), {times: 1});
-
-  domEvents.emit(root, MDCChipFoundation.strings.REMOVAL_EVENT);
-  td.verify(mockFoundation.handleChipRemoval(td.matchers.anything()), {times: 1});
+  const {INTERACTION_EVENT, REMOVAL_EVENT, SELECTION_EVENT} = MDCChipFoundation.strings;
+  const evtData = {
+    chipId: 'chipA', selected: true,
+  };
+  const evt1 = document.createEvent('CustomEvent');
+  const evt2 = document.createEvent('CustomEvent');
+  const evt3 = document.createEvent('CustomEvent');
+  evt1.initCustomEvent(INTERACTION_EVENT, true, true, evtData);
+  evt2.initCustomEvent(REMOVAL_EVENT, true, true, evtData);
+  evt3.initCustomEvent(SELECTION_EVENT, true, true, evtData);
+
+  root.dispatchEvent(evt1);
+  root.dispatchEvent(evt2);
+  root.dispatchEvent(evt3);
+
+  td.verify(mockFoundation.handleChipInteraction('chipA'), {times: 1});
+  td.verify(mockFoundation.handleChipSelection('chipA', true), {times: 1});
+  td.verify(mockFoundation.handleChipRemoval('chipA'), {times: 1});
 });
 
 test('#destroy removes event handlers', () => {