fix(list): Change default class to activated

demos/list.html

@@ -53,7 +53,7 @@
               info
             </a>
           </li>
-          <li class="mdc-list-item">
+          <li class="mdc-list-item mdc-list-item--activated">
             <span class="mdc-list-item__graphic" role="presentation">
               <i class="material-icons" aria-hidden="true">folder</i>
             </span>
@@ -1135,10 +1135,6 @@ <h3>Example - Interactive List</h3>
         [].slice.call(document.querySelectorAll('.mdc-list')).forEach(function(ele) {
           var list = mdc.list.MDCList.attachTo(ele);
           list.wrapFocus = true;
-
-          if (ele.parentElement.classList.contains('hero')) {
-            list.singleSelection = true;
-          }
         });
 
         addRippleToListItems(document.getElementById('leading-checkbox-list'));

packages/mdc-list/README.md

@@ -134,7 +134,7 @@ OR
 ### Single Selection List
 
 MDC List can handle selecting/deselecting list elements based on click or keyboard action. When enabled, the `space` and `enter` keys (or `click` event) will trigger an 
-single list item to become selected or deselected. 
+single list item to become selected and any other previous selected element to become deselected. 
 
 ```html
 <ul id="my-list" class="mdc-list" aria-orientation="vertical">
@@ -153,7 +153,8 @@ list.singleSelection = true;
 #### Pre-selected list item
 
 When rendering the list with a pre-selected list item, the list item that needs to be selected should contain
-the `mdc-list-item--selected` class and `aria-selected="true"` attribute before creating the list.
+the `mdc-list-item--selected` or `mdc-list-item--activated` class and `aria-selected="true"` attribute before
+creating the list.
 
 ```html
 <ul id="my-list" class="mdc-list" aria-orientation="vertical">
@@ -267,10 +268,10 @@ these should also receive `tabIndex="-1"`.
 #### Setup in `singleSelection()`
 
 When implementing a component that will use the single selection variant, the HTML should be modified to include
-the `aria-selected` attribute, the `mdc-list-item--selected` class should be added, and the `tabindex` of the selected
-element should be `0`. The first list item should have the `tabindex` updated to `-1`. The foundation method 
-`setSelectedIndex()` should be called with the initially selected element immediately after the foundation is 
-instantiated.
+the `aria-selected` attribute, the `mdc-list-item--selected` or `mdc-list-item--activated` class should be added, 
+and the `tabindex` of the selected element should be `0`. The first list item should have the `tabindex` updated 
+to `-1`. The foundation method `setSelectedIndex()` should be called with the initially selected element immediately 
+after the foundation is instantiated.
 
 ```html
 <ul id="my-list" class="mdc-list" aria-orientation="vertical">
@@ -302,6 +303,7 @@ Method Signature | Description
 `setVerticalOrientation(value: Boolean) => void` | Sets the list to an orientation causing the keys used for navigation to change. `true` results in the Up/Down arrow keys being used. `false` results in the Left/Right arrow keys being used. 
 `setSingleSelection(value: Boolean) => void` | Sets the list to be a selection list. Enables the `enter` and `space` keys for selecting/deselecting a list item. 
 `setSelectedIndex(index: Number) => void` | Toggles the `selected` state of the list item at index `index`. 
+`setUseActivated(useActivated: boolean) => void` | Sets the selection logic to apply/remove the `mdc-list-item--activated` class.
 `handleFocusIn(evt: Event) => void` | Handles the changing of `tabindex` to `0` for all `button` and `a` elements when a list item receives focus. 
 `handleFocusOut(evt: Event) => void` | Handles the changing of `tabindex` to `-1` for all `button` and `a` elements when a list item loses focus.
 `handleKeydown(evt: Event) => void` | Handles determining if a focus action should occur when a key event is triggered. 

packages/mdc-list/constants.js

@@ -20,6 +20,7 @@ const cssClasses = {
   ROOT: 'mdc-list',
   LIST_ITEM_CLASS: 'mdc-list-item',
   LIST_ITEM_SELECTED_CLASS: 'mdc-list-item--selected',
+  LIST_ITEM_ACTIVATED_CLASS: 'mdc-list-item--activated',
 };
 
 /** @enum {string} */

packages/mdc-list/foundation.js

@@ -63,6 +63,8 @@ class MDCListFoundation extends MDCFoundation {
     this.isSingleSelectionList_ = false;
     /** {number} */
     this.selectedIndex_ = -1;
+    /** {boolean} */
+    this.useActivatedClass_ = false;
   }
 
   /**
@@ -89,32 +91,33 @@ class MDCListFoundation extends MDCFoundation {
     this.isSingleSelectionList_ = value;
   }
 
+  /**
+   * Sets the useActivatedClass_ private variable.
+   * @param {boolean} useActivated
+   */
+  setUseActivatedClass(useActivated) {
+    this.useActivatedClass_ = useActivated;
+  }
+
   /** @param {number} index */
   setSelectedIndex(index) {
     if (index === this.selectedIndex_) {
-      this.adapter_.removeAttributeForElementIndex(this.selectedIndex_, strings.ARIA_SELECTED);
-      this.adapter_.removeClassForElementIndex(this.selectedIndex_, cssClasses.LIST_ITEM_SELECTED_CLASS);
-
-      // Used to reset the first element to tabindex=0 when deselecting a list item.
-      // If already on the first list item, leave tabindex at 0.
-      if (this.selectedIndex_ >= 0) {
-        this.adapter_.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', -1);
-        this.adapter_.setAttributeForElementIndex(0, 'tabindex', 0);
-      }
-      this.selectedIndex_ = -1;
       return;
     }
 
+    const className = this.useActivatedClass_
+      ? cssClasses.LIST_ITEM_ACTIVATED_CLASS : cssClasses.LIST_ITEM_SELECTED_CLASS;
+
     if (this.selectedIndex_ >= 0) {
       this.adapter_.removeAttributeForElementIndex(this.selectedIndex_, strings.ARIA_SELECTED);
-      this.adapter_.removeClassForElementIndex(this.selectedIndex_, cssClasses.LIST_ITEM_SELECTED_CLASS);
+      this.adapter_.removeClassForElementIndex(this.selectedIndex_, className);
       this.adapter_.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', -1);
     }
 
     if (index >= 0 && this.adapter_.getListItemCount() > index) {
       this.selectedIndex_ = index;
       this.adapter_.setAttributeForElementIndex(this.selectedIndex_, strings.ARIA_SELECTED, true);
-      this.adapter_.addClassForElementIndex(this.selectedIndex_, cssClasses.LIST_ITEM_SELECTED_CLASS);
+      this.adapter_.addClassForElementIndex(this.selectedIndex_, className);
       this.adapter_.setAttributeForElementIndex(this.selectedIndex_, 'tabindex', 0);
 
       if (this.selectedIndex_ !== 0) {

packages/mdc-list/index.js

@@ -61,6 +61,7 @@ class MDCList extends MDCComponent {
     this.root_.addEventListener('focusin', this.focusInEventListener_);
     this.root_.addEventListener('focusout', this.focusOutEventListener_);
     this.layout();
+    this.initializeListType();
   }
 
   layout() {
@@ -78,6 +79,21 @@ class MDCList extends MDCComponent {
       .forEach((ele) => ele.setAttribute('tabindex', -1));
   }
 
+  initializeListType() {
+    // Automatically set single selection if selected/activated classes are present.
+    const preselectedElement =
+      this.root_.querySelector(`.${cssClasses.LIST_ITEM_ACTIVATED_CLASS}, .${cssClasses.LIST_ITEM_SELECTED_CLASS}`);
+
+    if (preselectedElement) {
+      if (preselectedElement.classList.contains(cssClasses.LIST_ITEM_ACTIVATED_CLASS)) {
+        this.foundation_.setUseActivatedClass(true);
+      }
+
+      this.singleSelection = true;
+      this.selectedIndex = this.listElements_.indexOf(preselectedElement);
+    }
+  }
+
   /** @param {boolean} value */
   set vertical(value) {
     this.foundation_.setVerticalOrientation(value);
@@ -102,11 +118,6 @@ class MDCList extends MDCComponent {
     }
 
     this.foundation_.setSingleSelection(isSingleSelectionList);
-    const selectedElement = this.root_.querySelector('.mdc-list-item--selected');
-
-    if (selectedElement) {
-      this.selectedIndex = this.listElements_.indexOf(selectedElement);
-    }
   }
 
   /** @param {number} index */

test/unit/mdc-list/foundation.test.js

@@ -495,7 +495,7 @@ test('#handleKeydown space key is triggered when singleSelection is true selects
   td.verify(mockAdapter.setAttributeForElementIndex(0, strings.ARIA_SELECTED, true), {times: 1});
 });
 
-test('#handleKeydown space key is triggered 2x when singleSelection is true un-selects the list item', () => {
+test('#handleKeydown space key is triggered 2x when singleSelection does not un-select the item.', () => {
   const {foundation, mockAdapter} = setupTest();
   const preventDefault = td.func('preventDefault');
   const target = {classList: ['mdc-list-item']};
@@ -509,7 +509,8 @@ test('#handleKeydown space key is triggered 2x when singleSelection is true un-s
   foundation.handleKeydown(event);
 
   td.verify(preventDefault(), {times: 2});
-  td.verify(mockAdapter.removeAttributeForElementIndex(0, strings.ARIA_SELECTED), {times: 1});
+  td.verify(mockAdapter.setAttributeForElementIndex(0, strings.ARIA_SELECTED, true), {times: 1});
+  td.verify(mockAdapter.removeAttributeForElementIndex(0, strings.ARIA_SELECTED), {times: 0});
 });
 
 test('#handleKeydown space key is triggered when singleSelection is true on second ' +
@@ -544,8 +545,9 @@ test('#handleKeydown space key is triggered 2x when singleSelection is true on s
   foundation.handleKeydown(event);
 
   td.verify(preventDefault(), {times: 2});
-  td.verify(mockAdapter.setAttributeForElementIndex(0, 'tabindex', 0), {times: 1});
-  td.verify(mockAdapter.setAttributeForElementIndex(1, 'tabindex', -1), {times: 1});
+  td.verify(mockAdapter.setAttributeForElementIndex(1, strings.ARIA_SELECTED, true), {times: 1});
+  td.verify(mockAdapter.setAttributeForElementIndex(1, 'tabindex', 0), {times: 1});
+  td.verify(mockAdapter.setAttributeForElementIndex(0, 'tabindex', -1), {times: 1});
 });
 
 test('#handleKeydown space key is triggered and focused is moved to a different element', () => {
@@ -646,3 +648,12 @@ test('#focusLastElement is called when the list is empty does not focus an eleme
 
   td.verify(mockAdapter.focusItemAtIndex(td.matchers.anything()), {times: 0});
 });
+
+test('#setUseActivatedClass causes setSelectedIndex to use the --activated class', () => {
+  const {foundation, mockAdapter} = setupTest();
+  td.when(mockAdapter.getListItemCount()).thenReturn(3);
+  foundation.setUseActivatedClass(true);
+  foundation.setSelectedIndex(1);
+
+  td.verify(mockAdapter.addClassForElementIndex(1, cssClasses.LIST_ITEM_ACTIVATED_CLASS), {times: 1});
+});

test/unit/mdc-list/mdc-list.test.js

@@ -72,6 +72,30 @@ test('component calls setVerticalOrientation(true) on the foundation if aria-ori
   td.verify(mockFoundation.setVerticalOrientation(true), {times: 1});
 });
 
+test('#initializeListType sets the selectedIndex if a list item has the --selected class', () => {
+  const {root, component, mockFoundation} = setupTest();
+  root.querySelector('.mdc-list-item').classList.add(MDCListFoundation.cssClasses.LIST_ITEM_SELECTED_CLASS);
+  component.initializeListType();
+  td.verify(mockFoundation.setSelectedIndex(0), {times: 1});
+  td.verify(mockFoundation.setSingleSelection(true), {times: 1});
+});
+
+test('#initializeListType sets the selectedIndex if a list item has the --activated class', () => {
+  const {root, component, mockFoundation} = setupTest();
+  root.querySelector('.mdc-list-item').classList.add(MDCListFoundation.cssClasses.LIST_ITEM_ACTIVATED_CLASS);
+  component.initializeListType();
+  td.verify(mockFoundation.setSelectedIndex(0), {times: 1});
+  td.verify(mockFoundation.setSingleSelection(true), {times: 1});
+});
+
+test('#initializeListType calls the foundation if the --activated class is present', () => {
+  const {root, component, mockFoundation} = setupTest();
+  root.querySelector('.mdc-list-item').classList.add(MDCListFoundation.cssClasses.LIST_ITEM_ACTIVATED_CLASS);
+  component.initializeListType();
+  td.verify(mockFoundation.setUseActivatedClass(true), {times: 1});
+  td.verify(mockFoundation.setSingleSelection(true), {times: 1});
+});
+
 test('#adapter.getListItemCount returns correct number of list items', () => {
   const {root, component} = setupTest();
   document.body.appendChild(root);
@@ -259,12 +283,6 @@ test('wrapFocus calls setWrapFocus on foundation', () => {
   td.verify(mockFoundation.setWrapFocus(true), {times: 1});
 });
 
-test('singleSelection true sets the selectedIndex if a list item has the --selected class', () => {
-  const {root, component, mockFoundation} = setupTest();
-  root.querySelector('.mdc-list-item').classList.add(MDCListFoundation.cssClasses.LIST_ITEM_SELECTED_CLASS);
-  component.singleSelection = true;
-  td.verify(mockFoundation.setSelectedIndex(0), {times: 1});
-});
 
 test('singleSelection true sets the click handler from the root element', () => {
   const {root, component, mockFoundation} = setupTest();