From ed1aeb2cf34430b04bd17a0e59ce07a15a699f1d Mon Sep 17 00:00:00 2001
From: "Andrew C. Dvorak" <acdvorak@gmail.com>
Date: Tue, 5 Feb 2019 14:07:35 -0800
Subject: [PATCH] fix(list): Update default notifyAction impl to emit object
 (#4356)

Fixes #4355

BREAKING CHANGE: The default `MDCListAdapter.notifyAction()` implementation now emits an object of type `{index: number}` rather than a primitive `number` directly.
---
 packages/mdc-list/README.md         | 22 ++++++++++++++++++++++
 packages/mdc-list/index.js          |  2 +-
 test/unit/mdc-list/mdc-list.test.js |  5 +++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/mdc-list/README.md b/packages/mdc-list/README.md
index 8caf11a272a..8d3e661be9c 100644
--- a/packages/mdc-list/README.md
+++ b/packages/mdc-list/README.md
@@ -439,6 +439,28 @@ Key | Action
 `Space` | Will cause the currently focused list item to become selected/deselected if `singleSelection=true`.
 `Enter` | Will cause the currently focused list item to become selected/deselected if `singleSelection=true`.
 
+
+## `MDCList` Properties and Methods
+
+Property | Value Type | Description
+--- | --- | ---
+`vertical` | `boolean` (write-only) | Proxies to the foundation's `setVerticalOrientation()` method.
+`listElements` | `Array<Element>` (read-only) | Returns all enabled list item elements.
+`wrapFocus` | `boolean` (write-only) | Proxies to the foundation's `setWrapFocus()` method.
+`singleSelection` | `boolean` (write-only) | Proxies to the foundation's `setSingleSelection()` method.
+`selectedIndex` | `boolean` | Proxies to the foundation's `getSelectedIndex()` and `setSelectedIndex()` methods.
+
+Method Signature | Description
+--- | ---
+`layout() => void` | Recalculates layout and orientation.
+`initializeListType() => void` | Initialize `selectedIndex` value based on pre-selected checkbox list items, single selection or radio.
+
+### Events
+
+Event Name | `event.detail` | Description
+--- | --- | ---
+`MDCList:action` | `{index: number}` | Indicates that a list item with the specified index has been activated.
+
 ## Usage within Web Frameworks
 
 If you are using a JavaScript framework, such as React or Angular, you can create a List for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).
diff --git a/packages/mdc-list/index.js b/packages/mdc-list/index.js
index 57637fe7cbf..21a9d545323 100644
--- a/packages/mdc-list/index.js
+++ b/packages/mdc-list/index.js
@@ -277,7 +277,7 @@ class MDCList extends MDCComponent {
         toggleEl.dispatchEvent(event);
       },
       notifyAction: (index) => {
-        this.emit(strings.ACTION_EVENT, index, /** shouldBubble */ true);
+        this.emit(strings.ACTION_EVENT, {index}, /** shouldBubble */ true);
       },
       isFocusInsideList: () => {
         return this.root_.contains(document.activeElement);
diff --git a/test/unit/mdc-list/mdc-list.test.js b/test/unit/mdc-list/mdc-list.test.js
index 1b6fdac8064..131df77c14b 100644
--- a/test/unit/mdc-list/mdc-list.test.js
+++ b/test/unit/mdc-list/mdc-list.test.js
@@ -449,11 +449,12 @@ test('adapter#setCheckedCheckboxOrRadioAtIndex toggles the radio on list item',
 test('adapter#notifyAction emits action event', () => {
   const {component} = setupTest();
 
-  const handler = td.func('notifyActionHandler');
+  let detail = null;
+  const handler = (evt) => detail = evt.detail;
 
   component.listen(strings.ACTION_EVENT, handler);
   component.getDefaultFoundation().adapter_.notifyAction(3);
   component.unlisten(strings.ACTION_EVENT, handler);
 
-  td.verify(handler(td.matchers.anything()));
+  assert.deepEqual(detail, {index: 3});
 });