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.

Sign up for GitHub

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

Jump to bottom

[BottomNavigation] Remove wrapper from BottomNavigationAction #26923

Merged
merged 3 commits into from
Jun 28, 2021
Merged

[BottomNavigation] Remove wrapper from BottomNavigationAction #26923

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fc121be
remove `wrapper` from BottomNavigationAction
siriwatknp Jun 24, 2021
1869709
Update docs/src/pages/guides/migration-v4/migration-v4.md
siriwatknp Jun 25, 2021
40f8c22
update link
siriwatknp Jun 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/pages/api-docs/bottom-navigation-action.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"name": "BottomNavigationAction",
"styles": {
"classes": ["root", "selected", "iconOnly", "wrapper", "label"],
"classes": ["root", "selected", "iconOnly", "label"],
"globalClasses": { "selected": "Mui-selected" },
"name": "MuiBottomNavigationAction"
},
Expand Down
13 changes: 13 additions & 0 deletions docs/src/pages/guides/migration-v4/migration-v4.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.


```diff
<button class="MuiBottomNavigationAction-root">
- <span class="MuiBottomNavigationAction-wrapper">
{icon}
<span class="MuiBottomNavigationAction-label">
{label}
</span>
- </span>
</button>
```

### Box

- The `borderRadius` system prop value transformation has been changed. If it receives a number, it multiplies this value with the `theme.shape.borderRadius` value. Use a string to provide an explicit `px` value.
Expand Down
4 changes: 0 additions & 4 deletions docs/translations/api-docs/bottom-navigation-action/bottom-navigation-action.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,6 @@
"nodeName": "the root element",
"conditions": "<code>showLabel={false}</code> and not selected"
},
"wrapper": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the span element that wraps the icon and label"
},
"label": {
"description": "Styles applied to {{nodeName}}.",
"nodeName": "the label's span element"
Expand Down
25 changes: 5 additions & 20 deletions packages/material-ui/src/BottomNavigationAction/BottomNavigationAction.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ const useUtilityClasses = (styleProps) => {

const slots = {
root: ['root', !showLabel && !selected && 'iconOnly', selected && 'selected'],
wrapper: ['wrapper'],
label: ['label', !showLabel && !selected && 'iconOnly', selected && 'selected'],
};

Expand All @@ -42,6 +41,7 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
minWidth: 80,
maxWidth: 168,
color: theme.palette.text.secondary,
flexDirection: 'column',
flex: '1',
...(!styleProps.showLabel &&
!styleProps.selected && {
Expand All @@ -53,19 +53,6 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
},
}));

const BottomNavigationActionWrapper = styled('span', {
name: 'MuiBottomNavigationAction',
slot: 'Wrapper',
overridesResolver: (props, styles) => styles.wrapper,
})({
/* Styles applied to the span element that wraps the icon and label. */
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
flexDirection: 'column',
});

const BottomNavigationActionLabel = styled('span', {
name: 'MuiBottomNavigationAction',
slot: 'Label',
Expand Down Expand Up @@ -175,12 +162,10 @@ const BottomNavigationAction = React.forwardRef(function BottomNavigationAction(
styleProps={styleProps}
{...other}
>
<BottomNavigationActionWrapper className={classes.wrapper} styleProps={styleProps}>
{icon}
<BottomNavigationActionLabel className={classes.label} styleProps={styleProps}>
{label}
</BottomNavigationActionLabel>
</BottomNavigationActionWrapper>
{icon}
<BottomNavigationActionLabel className={classes.label} styleProps={styleProps}>
{label}
</BottomNavigationActionLabel>
</BottomNavigationActionRoot>
);
});
Expand Down
4 changes: 1 addition & 3 deletions packages/material-ui/src/BottomNavigationAction/bottomNavigationActionClasses.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ export interface BottomNavigationActionClasses {
selected: string;
/** Pseudo-class applied to the root element if `showLabel={false}` and not selected. */
iconOnly: string;
/** Styles applied to the span element that wraps the icon and label. */
wrapper: string;
/** Styles applied to the label's span element. */
label: string;
}
Expand All @@ -21,7 +19,7 @@ export function getBottomNavigationActionUtilityClass(slot: string): string {

const bottomNavigationActionClasses: BottomNavigationActionClasses = generateUtilityClasses(
'MuiBottomNavigationAction',
['root', 'iconOnly', 'selected', 'wrapper', 'label'],
['root', 'iconOnly', 'selected', 'label'],
);

export default bottomNavigationActionClasses;