[List] extract button from ListItem to ListItemButton #26446

siriwatknp · 2021-05-25T09:22:51Z

the main changes are ListItem.js and ListItemButton.js, the rests are demos update.

`ListItem`

add secondaryAction prop to stop checking children
add disablePadding prop (similar to List) to use with ListItemButton
deprecate button related props

`ListItemButton`

support dense, alignItems, divider and disableGutters

docs

fix demos to use ListItemButton
add CustomizedList demo to test DX of the new API

closes #13597
closes #26442
closes #26469
closes #14971 (deprecate button prop)

I have followed (at least) the PR section of the contributing guide.

Preview: https://deploy-preview-26446--material-ui.netlify.app/components/lists/

mui-pr-bot · 2021-05-25T09:24:40Z

Details of bundle changes (experimental)

@material-ui/core: parsed: +0.10% , gzip: +0.09%

Generated by 🚫 dangerJS against 0195818

packages/material-ui/src/ListItem/ListItem.js

docs/src/pages/components/lists/lists.md

packages/material-ui/src/ListItem/ListItem.js

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

…at/list-item-improvement

docs/src/pages/components/lists/InsetList.tsx

packages/material-ui/src/ListItemButton/ListItemButton.js

packages/material-ui/src/ListItemButton/listItemButtonClasses.ts

oliviertassinari · 2021-06-06T16:31:43Z

docs/src/pages/components/lists/CheckboxList.tsx

@@ -33,25 +33,25 @@ export default function CheckboxList() {
          <ListItem
            key={value}
            role={undefined}


Its correct place is on the ListItemButton

https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeploy-preview-26446--material-ui.netlify.app%2Fcomponents%2Flists%2F

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

eps1lon · 2021-06-07T06:59:30Z

packages/material-ui/src/ListItem/ListItem.js

@@ -304,12 +333,14 @@ ListItem.propTypes /* remove-proptypes */ = {
   * If `true`, the list item is focused during the first mount.
   * Focus will also be triggered if the value changes from false to true.
   * @default false
+   * @deprecated will be removed in v6, checkout `ListItemButton` instead


Let's not mention any timeline for planned removals. They just become confusing if something changes and don't provide any value now. Mentioning the alternative should be enough.

There is no visual feedback in https://deploy-preview-26446--material-ui.netlify.app/api/list-item/#props that it's deprecated.
Should we have a deprecatedPropType() as we make them deprecated in TypeScript?

Good point.

packages/material-ui/src/ListItem/ListItem.js

docs/src/pages/components/lists/CustomizedList.js

eps1lon · 2021-06-07T13:10:28Z

For documentation we would need to use deprecatedPropType but then testing becomes non-trivial since we throw on unexpected console.error. However, we only receive these errors on the first test run and not in watchmode. So we can't easily integrate them with toErrorDev since React 17 no longer respects PropTypes.resetWarningCache and mocha doesn't have an API to reset modules.

We can do deprecation in a separate release though.

oliviertassinari · 2021-06-12T15:15:23Z

Looking at the first demo in https://deploy-preview-26446--material-ui.netlify.app/components/lists/#simple-list, it looks like we are not following the canonical DOM structure:

nav > ul > li > button.

Should we update the demo?

siriwatknp · 2021-06-13T10:29:03Z

Looking at the first demo in https://deploy-preview-26446--material-ui.netlify.app/components/lists/#simple-list, it looks like we are not following the canonical DOM structure:

nav > ul > li > button.

Should we update the demo?

Sure, will create a PR.

oliviertassinari · 2021-06-13T13:56:07Z

For context, I found this working on #26711. It took me a while to find the List example I could copy with the new DOM structure.

siriwatknp added 4 commits May 25, 2021 15:20

add wip ListItemButton

e4f684d

update lists docs to use ListItemButton

a0d6928

run proptypes and docs

41b248b

fix typo name

ae4db46

siriwatknp added the component: list This is the name of the generic UI component, not the React module! label May 25, 2021

minor fix

f047a2c

siriwatknp mentioned this pull request May 25, 2021

[RFC] ListItem improvement #26442

Closed

siriwatknp added 3 commits May 26, 2021 11:34

mark button related prop as deprecated

8fb85ca

fix description

3f46f02

add usage guide to docs

4f385a9

github-actions bot mentioned this pull request May 26, 2021

Update snapshots for pr/26446 eps1lon/mui-scripts-incubator#2423

Closed

add dense note

83eadf9

siriwatknp marked this pull request as ready for review May 26, 2021 05:32

siriwatknp requested review from eps1lon and oliviertassinari May 26, 2021 05:40

eps1lon requested changes May 26, 2021

View reviewed changes

packages/material-ui/src/ListItem/ListItem.js Outdated Show resolved Hide resolved

oliviertassinari reviewed May 26, 2021

View reviewed changes

docs/src/pages/components/lists/lists.md Outdated Show resolved Hide resolved

docs/src/pages/components/lists/lists.md Outdated Show resolved Hide resolved

packages/material-ui/src/ListItem/ListItem.js Outdated Show resolved Hide resolved

Update docs/src/pages/components/lists/lists.md

1678d53

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

siriwatknp mentioned this pull request May 28, 2021

[List] extract button from ListItem to ListItemButton #26480

Closed

1 task

siriwatknp marked this pull request as draft May 28, 2021 07:53

siriwatknp added 9 commits June 3, 2021 10:21

Merge branch 'next' of https://github.com/mui-org/material-ui into fe…

8941802

…at/list-item-improvement

add action prop and update demos

43a0f75

run proptypes, docs:api, docs:typescript

aeb3eb3

add customized demo and theme component props

4edef7d

update demo

4f931d0

refactor ListItem.d.ts

9c49711

add disablePadding prop

6b1e037

update demo to use disablePadding

7040bcc

follow disablePadding in List

0884aa6

siriwatknp added 2 commits June 6, 2021 21:54

run docs:formatted

002dd5f

run docs:api

c8f8990

siriwatknp requested a review from oliviertassinari June 6, 2021 15:10

oliviertassinari reviewed Jun 6, 2021

View reviewed changes

docs/src/pages/components/lists/InsetList.tsx Outdated Show resolved Hide resolved

fix Inset demo

84c3766

oliviertassinari reviewed Jun 6, 2021

View reviewed changes

oliviertassinari mentioned this pull request Jun 6, 2021

[RFC] Material-UI v5 🚀 #20012

Closed

siriwatknp and others added 3 commits June 7, 2021 08:59

Update packages/material-ui/src/ListItemButton/ListItemButton.js

0f13f5f

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

Update packages/material-ui/src/ListItemButton/listItemButtonClasses.ts

6e8431a

Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>

move role undefined to ListItemButton

4ba8d1c

eps1lon approved these changes Jun 7, 2021

View reviewed changes

siriwatknp added 2 commits June 7, 2021 14:49

run docs:api

e0bffb4

fix as suggested

0195818

eps1lon assigned eps1lon and unassigned eps1lon Jun 7, 2021

eps1lon merged commit 89b5b4f into mui:next Jun 7, 2021

nuanyang233 mentioned this pull request Jun 11, 2021

feat: upgrade react-router to v6 in dashboard DimensionDev/Maskbook#3007

Merged

oliviertassinari mentioned this pull request Jun 12, 2021

[List] Add runtime deprecation warnings #26709

Closed

2 tasks

siriwatknp deleted the feat/list-item-improvement branch June 13, 2021 10:29

This was referenced Jun 14, 2021

[List] Fix demo to have correct semantic #26742

Merged

[List] Add button runtime deprecation warning #26743

Merged

mnajdova mentioned this pull request Jun 29, 2021

ListItem button prop can not accept boolean type in typescript #27011

Closed

2 tasks

This was referenced Aug 18, 2022

[docs] Fix ListItem button deprecated use #33970

Merged

[discussion] Preparing v6 #30660

Closed

DiegoAndai mentioned this pull request Feb 27, 2024

[material-ui][ListItem] Remove props which have been deprecated since 2021 #41296

Closed

aarongarciah mentioned this pull request May 15, 2024

[material-ui][ListItemSecondaryAction] Deprecate component #42251

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[List] extract button from ListItem to ListItemButton #26446

[List] extract button from ListItem to ListItemButton #26446

siriwatknp commented May 25, 2021 •

edited

Loading

mui-pr-bot commented May 25, 2021 •

edited

Loading

oliviertassinari Jun 6, 2021 •

edited

Loading

eps1lon Jun 7, 2021

oliviertassinari Jun 7, 2021 •

edited

Loading

siriwatknp Jun 7, 2021

eps1lon commented Jun 7, 2021

oliviertassinari commented Jun 12, 2021 •

edited

Loading

siriwatknp commented Jun 13, 2021

oliviertassinari commented Jun 13, 2021 •

edited

Loading

[List] extract button from ListItem to ListItemButton #26446

[List] extract button from ListItem to ListItemButton #26446

Conversation

siriwatknp commented May 25, 2021 • edited Loading

ListItem

ListItemButton

docs

mui-pr-bot commented May 25, 2021 • edited Loading

oliviertassinari Jun 6, 2021 • edited Loading

Choose a reason for hiding this comment

eps1lon Jun 7, 2021

Choose a reason for hiding this comment

oliviertassinari Jun 7, 2021 • edited Loading

Choose a reason for hiding this comment

siriwatknp Jun 7, 2021

Choose a reason for hiding this comment

eps1lon commented Jun 7, 2021

oliviertassinari commented Jun 12, 2021 • edited Loading

siriwatknp commented Jun 13, 2021

oliviertassinari commented Jun 13, 2021 • edited Loading

siriwatknp commented May 25, 2021 •

edited

Loading

`ListItem`

`ListItemButton`

mui-pr-bot commented May 25, 2021 •

edited

Loading

oliviertassinari Jun 6, 2021 •

edited

Loading

oliviertassinari Jun 7, 2021 •

edited

Loading

oliviertassinari commented Jun 12, 2021 •

edited

Loading

oliviertassinari commented Jun 13, 2021 •

edited

Loading