Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BottomNavigation] Remove wrapper from BottomNavigationAction #26923

Merged
merged 3 commits into from
Jun 28, 2021

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jun 24, 2021

BREAKING CHANGE


WHY the wrapper is removed
button > span > children exists as a workaround for flex container bug on button BUT not anymore, so this PR remove the span.

  • ✅ Chrome 83+ (latest 90)
  • ✅ Safari 11+ (latest 14)
  • ✅ Edge
  • ✅ Firefox 63 (latest 89)

https://github.com/philipwalton/flexbugs#flexbug-9


fix one of breaking changes #20012.

Preview: https://deploy-preview-26923--material-ui.netlify.app/components/bottom-navigation/

@siriwatknp siriwatknp added the component: bottom navigation This is the name of the generic UI component, not the React module! label Jun 24, 2021
@mui-pr-bot
Copy link

mui-pr-bot commented Jun 24, 2021

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 40f8c22

Comment on lines 550 to 552
### BottomNavigationAction

- `span` element that wraps children has been removed. `wrapper` classKey is also removed. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### BottomNavigationAction
- `span` element that wraps children has been removed. `wrapper` classKey is also removed. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).
- Remove the `span` element that wraps the children. Remove the `wrapper` classKey too. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).

Copy link
Member

@oliviertassinari oliviertassinari Jun 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No objections to reverse the approach, one header by React component instead of UI component, but maybe the change should be done all at once, in a batch 🤷‍♂️

@oliviertassinari oliviertassinari changed the title [BottomNavigation] remove wrapper from BottomNavigationAction [BottomNavigation] Remove wrapper from BottomNavigationAction Jun 24, 2021
Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com>
@siriwatknp siriwatknp requested a review from mnajdova June 25, 2021 03:24
@@ -547,6 +547,19 @@ You can use the [`moved-lab-modules` codemod](https://github.com/mui-org/materia
+<BottomNavigation onChange={(event: React.SyntheticEvent) => {}} />
```

- Remove the `span` element that wraps the children. Remove the `wrapper` classKey too. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's confusing linking different PR here. Let's update the current PR descirption with the details of why the changes was introduced and link this PR in the migration guide.

Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See one comment before merging. Apart from that looks great 👍

@siriwatknp siriwatknp merged commit 57f0adc into mui:next Jun 28, 2021
@siriwatknp siriwatknp deleted the fix/bottom-actions-wrapper branch June 28, 2021 03:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change component: bottom navigation This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants