fix(list): maintain classes with state.listItemClassNames #776

moog16 · 2019-03-26T23:31:55Z

Fixes issue where listitems lose classNames. Pre-PR: listItems would be rendered correctly, but be re-rendered with a new set of classnames. This PR puts classes on the state.listItemClassNames property. When #adapter.addClassForElementIndex is called, it pushes the new className from state.listItemClassNames. When #adapter.removeClassForElementIndex is called, it removes the class name from the array. This is then merged in the renderListItem method in the List component.

BREAKING CHANGE: Removes props.tabbableOnListItemFocus from all the auxiliary components, as it seemed confusing to have this and tabIndex dictate what tabIndex would ultimately be.

listItemClassNames and listItemAttr

codecov-io · 2019-03-27T01:20:47Z

Codecov Report

Merging #776 into feat/mdcweb-typescript-update will decrease coverage by 67.54%.
The diff coverage is 47.05%.

@@                        Coverage Diff                         @@
##           feat/mdcweb-typescript-update     #776       +/-   ##
==================================================================
- Coverage                          94.29%   26.74%   -67.55%     
==================================================================
  Files                                 73       73               
  Lines                               2964     3286      +322     
  Branches                             459      542       +83     
==================================================================
- Hits                                2795      879     -1916     
- Misses                                61     2384     +2323     
+ Partials                             108       23       -85

Impacted Files	Coverage Δ
packages/list/ListItemMeta.tsx	`28.57% <0%> (-71.43%)`	⬇️
packages/list/ListItemText.tsx	`16.66% <0%> (-71.34%)`	⬇️
packages/list/ListItemGraphic.tsx	`36.36% <0%> (-63.64%)`	⬇️
packages/list/index.tsx	`58.7% <50%> (-34.08%)`	⬇️
packages/list/ListItem.tsx	`78.12% <75%> (-21.88%)`	⬇️
packages/text-field/Input.tsx	`8.19% <0%> (-88.53%)`	⬇️
packages/select/NativeControl.tsx	`14.58% <0%> (-85.42%)`	⬇️
packages/linear-progress/index.tsx	`17.94% <0%> (-82.06%)`	⬇️
packages/chips/ChipSet.tsx	`16.86% <0%> (-81.93%)`	⬇️
packages/chips/Chip.tsx	`12.38% <0%> (-80%)`	⬇️
... and 57 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f69db2e...3cef521. Read the comment docs.

moog16 · 2019-03-27T23:05:06Z

fixes #763

packages/list/index.tsx

abhiomkar · 2019-04-01T22:54:53Z

packages/list/index.tsx

        }
+        this.setState({listItemClassNames});


Did you test this with disabled list item?

React.Children.map runs on each list item but these adapters excludes disabled list item when indexing.

good catch - updated and added tests

abhiomkar · 2019-04-02T18:57:35Z

packages/list/index.tsx

+   * 3. If neither and props.selectedIndex is set, set tabIndex on selectedIndex
+   * 4. If neither type of list nor props.selectedIndex is set, then set tabIndex on first element
+   */
+  private getListItemInitialTabIndex = (index: number) => {


To simplify this, I think List should set tabindex to first ListItem if none of the items are selected (No matter the variant). tabindex should be set to selected index otherwise. (First selected index item if it Array).

@abhiomkar you're saying it doesn't matter if its checkbox or radio type list? It should only be set to the first selectedIndex?

That's correct. See Accessibility section and examples for reference: https://github.com/material-components/material-components-web/tree/master/packages/mdc-list#accessibility

Hmm...ya that sounds a lot simpler than what i have...I will update.

ya that worked like a charm. Thanks!

abhiomkar · 2019-04-02T19:08:32Z

packages/list/index.tsx

+   * 3. If neither and props.selectedIndex is set, set tabIndex on selectedIndex
+   * 4. If neither type of list nor props.selectedIndex is set, then set tabIndex on first element
+   */
+  private getListItemInitialTabIndex = (index: number) => {


nit: missing return type. And in other places.

I think it is better for the TS compiler to infer the type here. Otherwise the return type is {}

BREAKING CHANGE: Removes props.tabbableOnListItemFocus from all the auxiliary components, as it seemed confusing to have this and tabIndex dictate what tabIndex would ultimately be.

commit 14b22bc Author: Matt Goo <[email protected]> Date: Tue Apr 30 12:06:32 2019 -0700 feat(select): enhanced select (#823) commit b400013 Author: Matt Goo <[email protected]> Date: Mon Apr 29 14:49:32 2019 -0700 chore: reduce unused deps in package.json (#819) commit beedb23 Author: Matt Goo <[email protected]> Date: Mon Apr 29 13:43:20 2019 -0700 feat(select): add icon (#825) commit e22ac2a Author: Matt Goo <[email protected]> Date: Mon Apr 29 13:35:45 2019 -0700 feat(select): add helper text (#824) commit abaa146 Author: Matt Goo <[email protected]> Date: Mon Apr 29 13:35:16 2019 -0700 feat(select): add option component (#826) commit 7adc12a Author: Matt Goo <[email protected]> Date: Mon Apr 29 13:11:16 2019 -0700 fix(drawer): add missing foundation import in drawer (#821) commit 7e0f877 Author: Matt Goo <[email protected]> Date: Fri Apr 26 14:33:40 2019 -0700 feat(menu): add component (#786) commit 509e93e Author: Matt Goo <[email protected]> Date: Fri Apr 26 09:46:26 2019 -0700 chore(infrastructure): add esmoduleinterop to tsconfig (#818) commit 4dbc8b8 Author: Matt Goo <[email protected]> Date: Tue Apr 16 15:56:25 2019 -0700 feat(notched-outline): update to v1.1.1 (#806) commit ea15a2a Author: 태재영 <[email protected]> Date: Sat Apr 13 06:50:37 2019 +0900 fix(chips): Fix incorrect ripple effect (#804) commit 7b413df Author: Matt Goo <[email protected]> Date: Mon Apr 8 13:27:36 2019 -0700 feat(button): update mdc web deps to v1.1.0 (#791) commit 034158c Author: Matt Goo <[email protected]> Date: Tue Apr 2 17:36:46 2019 -0700 fix: remove .only (#794) commit 74379af Author: Matt Goo <[email protected]> Date: Tue Apr 2 16:24:45 2019 -0700 fix(list): maintain classes with state.listItemClassNames (#776) BREAKING CHANGE: Removes props.tabbableOnListItemFocus from all the auxiliary components, as it seemed confusing to have this and tabIndex dictate what tabIndex would ultimately be. commit e5b953f Author: Ben McKernan <[email protected]> Date: Tue Apr 2 20:18:03 2019 +0200 fix(icon-button): upgrade to mdc-web v1.1 (#792) commit 9c7bfa7 Author: Andrii Kostenko <[email protected]> Date: Mon Apr 1 23:08:27 2019 +0300 fix(card): upgrade to mdc-web v1.1 (#788) commit bb9e7e4 Author: Andrii Kostenko <[email protected]> Date: Mon Apr 1 20:44:28 2019 +0300 fix(top-app-bar): mdc-web v1 upgrade (#780) commit 37c7269 Author: Andrii Kostenko <[email protected]> Date: Mon Apr 1 20:00:39 2019 +0300 fix(linear-progress): upgrade mdc-web to v1 (#787) commit b6403e6 Author: Andrii Kostenko <[email protected]> Date: Mon Apr 1 19:38:31 2019 +0300 fix(fab): upgrade to mdc-web v1.1 (#790) commit bcda111 Author: Andrii Kostenko <[email protected]> Date: Fri Mar 29 21:11:19 2019 +0300 fix(dialog): mdc-web v1 upgrade (#779) commit 8ff8695 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 28 22:32:55 2019 +0300 fix(typography): upgrade to mdc-web v1 (#778) commit 4d6bbc0 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 28 22:15:22 2019 +0300 feat(radio): upgrade to typescript v1 (#777) commit 4f523e3 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 28 22:13:29 2019 +0300 fix(checkbox): upgrade mdc-web to v1 (#769) commit 1a04f3d Author: Matt Goo <[email protected]> Date: Wed Mar 27 12:39:00 2019 -0700 feat(menu-surface): upgrade to mdc web v1 (#774) commit 44cca84 Author: Andrii Kostenko <[email protected]> Date: Wed Mar 27 01:14:18 2019 +0200 feat(switch): upgrade to mdc-web v1 (#757) commit 580c850 Author: Andrii Kostenko <[email protected]> Date: Wed Mar 27 01:13:37 2019 +0200 fix(tab-bar): upgrade mdc-web to v1 (#770) commit 45fef89 Author: Matt Goo <[email protected]> Date: Mon Mar 25 15:27:29 2019 -0700 fix(card): add react-ripple to package json (#773) commit 4e99b4c Author: Matt Goo <[email protected]> Date: Tue Mar 19 14:10:37 2019 -0700 feat(list): update to MDC Web 1.0.0 (#740) commit 38e9886 Author: Matt Goo <[email protected]> Date: Tue Mar 19 12:36:06 2019 -0700 feat(floating-label): update mdc web to v1.0.0 (#741) commit dd95b60 Author: Andrii Kostenko <[email protected]> Date: Mon Mar 18 23:38:34 2019 +0200 feat(snackbar): MDC Web v1.0.0 (#755) commit 9b86474 Author: Andrii Kostenko <[email protected]> Date: Mon Mar 18 23:27:39 2019 +0200 fix(tab): mdc-web v1.0.0 upgrade (#748) commit a8c64b5 Author: Lucas Cordeiro <[email protected]> Date: Mon Mar 18 17:46:29 2019 -0300 feat(drawer): add innerRef prop (#749) commit 5f55983 Author: Andrii Kostenko <[email protected]> Date: Fri Mar 15 19:05:44 2019 +0200 fix(chips): upgrade mdc-web to v1.0.0 (#750) commit 09cb8a5 Author: Matt Goo <[email protected]> Date: Fri Mar 15 10:05:03 2019 -0700 fix: [email protected] --> [email protected] & update imports (#709) commit ae9b421 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 14 20:53:28 2019 +0300 fix(tab-scroller): upgrade mdc-web to 1.0.0 (#743) commit 1b29dd9 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 14 20:32:18 2019 +0300 fix(tab-indicator): upgrade mdc-web to 1.0.0 (#742) commit f966714 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 14 19:45:11 2019 +0300 feat(ripple) mdc-web typescript conversion (#711) commit 0b674f5 Author: Andrii Kostenko <[email protected]> Date: Fri Mar 8 23:54:24 2019 +0300 feat(line-ripple): mdc-web typescript support (#716)

* Squashed commit of the following: commit 14b22bc Author: Matt Goo <[email protected]> Date: Tue Apr 30 12:06:32 2019 -0700 feat(select): enhanced select (#823) commit b400013 Author: Matt Goo <[email protected]> Date: Mon Apr 29 14:49:32 2019 -0700 chore: reduce unused deps in package.json (#819) commit beedb23 Author: Matt Goo <[email protected]> Date: Mon Apr 29 13:43:20 2019 -0700 feat(select): add icon (#825) commit e22ac2a Author: Matt Goo <[email protected]> Date: Mon Apr 29 13:35:45 2019 -0700 feat(select): add helper text (#824) commit abaa146 Author: Matt Goo <[email protected]> Date: Mon Apr 29 13:35:16 2019 -0700 feat(select): add option component (#826) commit 7adc12a Author: Matt Goo <[email protected]> Date: Mon Apr 29 13:11:16 2019 -0700 fix(drawer): add missing foundation import in drawer (#821) commit 7e0f877 Author: Matt Goo <[email protected]> Date: Fri Apr 26 14:33:40 2019 -0700 feat(menu): add component (#786) commit 509e93e Author: Matt Goo <[email protected]> Date: Fri Apr 26 09:46:26 2019 -0700 chore(infrastructure): add esmoduleinterop to tsconfig (#818) commit 4dbc8b8 Author: Matt Goo <[email protected]> Date: Tue Apr 16 15:56:25 2019 -0700 feat(notched-outline): update to v1.1.1 (#806) commit ea15a2a Author: 태재영 <[email protected]> Date: Sat Apr 13 06:50:37 2019 +0900 fix(chips): Fix incorrect ripple effect (#804) commit 7b413df Author: Matt Goo <[email protected]> Date: Mon Apr 8 13:27:36 2019 -0700 feat(button): update mdc web deps to v1.1.0 (#791) commit 034158c Author: Matt Goo <[email protected]> Date: Tue Apr 2 17:36:46 2019 -0700 fix: remove .only (#794) commit 74379af Author: Matt Goo <[email protected]> Date: Tue Apr 2 16:24:45 2019 -0700 fix(list): maintain classes with state.listItemClassNames (#776) BREAKING CHANGE: Removes props.tabbableOnListItemFocus from all the auxiliary components, as it seemed confusing to have this and tabIndex dictate what tabIndex would ultimately be. commit e5b953f Author: Ben McKernan <[email protected]> Date: Tue Apr 2 20:18:03 2019 +0200 fix(icon-button): upgrade to mdc-web v1.1 (#792) commit 9c7bfa7 Author: Andrii Kostenko <[email protected]> Date: Mon Apr 1 23:08:27 2019 +0300 fix(card): upgrade to mdc-web v1.1 (#788) commit bb9e7e4 Author: Andrii Kostenko <[email protected]> Date: Mon Apr 1 20:44:28 2019 +0300 fix(top-app-bar): mdc-web v1 upgrade (#780) commit 37c7269 Author: Andrii Kostenko <[email protected]> Date: Mon Apr 1 20:00:39 2019 +0300 fix(linear-progress): upgrade mdc-web to v1 (#787) commit b6403e6 Author: Andrii Kostenko <[email protected]> Date: Mon Apr 1 19:38:31 2019 +0300 fix(fab): upgrade to mdc-web v1.1 (#790) commit bcda111 Author: Andrii Kostenko <[email protected]> Date: Fri Mar 29 21:11:19 2019 +0300 fix(dialog): mdc-web v1 upgrade (#779) commit 8ff8695 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 28 22:32:55 2019 +0300 fix(typography): upgrade to mdc-web v1 (#778) commit 4d6bbc0 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 28 22:15:22 2019 +0300 feat(radio): upgrade to typescript v1 (#777) commit 4f523e3 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 28 22:13:29 2019 +0300 fix(checkbox): upgrade mdc-web to v1 (#769) commit 1a04f3d Author: Matt Goo <[email protected]> Date: Wed Mar 27 12:39:00 2019 -0700 feat(menu-surface): upgrade to mdc web v1 (#774) commit 44cca84 Author: Andrii Kostenko <[email protected]> Date: Wed Mar 27 01:14:18 2019 +0200 feat(switch): upgrade to mdc-web v1 (#757) commit 580c850 Author: Andrii Kostenko <[email protected]> Date: Wed Mar 27 01:13:37 2019 +0200 fix(tab-bar): upgrade mdc-web to v1 (#770) commit 45fef89 Author: Matt Goo <[email protected]> Date: Mon Mar 25 15:27:29 2019 -0700 fix(card): add react-ripple to package json (#773) commit 4e99b4c Author: Matt Goo <[email protected]> Date: Tue Mar 19 14:10:37 2019 -0700 feat(list): update to MDC Web 1.0.0 (#740) commit 38e9886 Author: Matt Goo <[email protected]> Date: Tue Mar 19 12:36:06 2019 -0700 feat(floating-label): update mdc web to v1.0.0 (#741) commit dd95b60 Author: Andrii Kostenko <[email protected]> Date: Mon Mar 18 23:38:34 2019 +0200 feat(snackbar): MDC Web v1.0.0 (#755) commit 9b86474 Author: Andrii Kostenko <[email protected]> Date: Mon Mar 18 23:27:39 2019 +0200 fix(tab): mdc-web v1.0.0 upgrade (#748) commit a8c64b5 Author: Lucas Cordeiro <[email protected]> Date: Mon Mar 18 17:46:29 2019 -0300 feat(drawer): add innerRef prop (#749) commit 5f55983 Author: Andrii Kostenko <[email protected]> Date: Fri Mar 15 19:05:44 2019 +0200 fix(chips): upgrade mdc-web to v1.0.0 (#750) commit 09cb8a5 Author: Matt Goo <[email protected]> Date: Fri Mar 15 10:05:03 2019 -0700 fix: [email protected] --> [email protected] & update imports (#709) commit ae9b421 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 14 20:53:28 2019 +0300 fix(tab-scroller): upgrade mdc-web to 1.0.0 (#743) commit 1b29dd9 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 14 20:32:18 2019 +0300 fix(tab-indicator): upgrade mdc-web to 1.0.0 (#742) commit f966714 Author: Andrii Kostenko <[email protected]> Date: Thu Mar 14 19:45:11 2019 +0300 feat(ripple) mdc-web typescript conversion (#711) commit 0b674f5 Author: Andrii Kostenko <[email protected]> Date: Fri Mar 8 23:54:24 2019 +0300 feat(line-ripple): mdc-web typescript support (#716) * feat(text-field): update to v1.1.1 (#812)

Matt Goo added 2 commits March 26, 2019 16:26

fix(list): remove tabblableOnListItemFocus and added back

02e6701

listItemClassNames and listItemAttr

fix: onDestroy

244b124

googlebot added the cla: yes label Mar 26, 2019

Matt Goo added 2 commits March 26, 2019 17:30

WIP: tabindex

3a90d94

fix: tests

272d779

moog16 assigned abhiomkar Mar 27, 2019

fix: update golden

54eb6ea

moog16 mentioned this pull request Mar 27, 2019

List Item Steals Focus After Selection #763

Closed

abhiomkar reviewed Mar 28, 2019

View reviewed changes

packages/list/index.tsx Show resolved Hide resolved

abhiomkar reviewed Apr 1, 2019

View reviewed changes

Matt Goo added 2 commits April 1, 2019 16:21

fix: added test case for disabled

b14a9a9

fix: added tests

6d1166f

abhiomkar approved these changes Apr 2, 2019

View reviewed changes

fix: clean logic for getListItemInitialTabIndex

3cef521

moog16 merged commit dd52744 into feat/mdcweb-typescript-update Apr 2, 2019

moog16 deleted the fix/list/class-bug branch April 2, 2019 23:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(list): maintain classes with state.listItemClassNames #776

fix(list): maintain classes with state.listItemClassNames #776

moog16 commented Mar 26, 2019 •

edited

Loading

codecov-io commented Mar 27, 2019 •

edited

Loading

moog16 commented Mar 27, 2019

abhiomkar Apr 1, 2019

moog16 Apr 1, 2019

abhiomkar Apr 2, 2019

moog16 Apr 2, 2019

abhiomkar Apr 2, 2019

moog16 Apr 2, 2019

moog16 Apr 2, 2019

abhiomkar Apr 2, 2019

moog16 Apr 2, 2019

fix(list): maintain classes with state.listItemClassNames #776

fix(list): maintain classes with state.listItemClassNames #776

Conversation

moog16 commented Mar 26, 2019 • edited Loading

codecov-io commented Mar 27, 2019 • edited Loading

Codecov Report

moog16 commented Mar 27, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moog16 commented Mar 26, 2019 •

edited

Loading

codecov-io commented Mar 27, 2019 •

edited

Loading