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

[Tabs] Alternative way to disable ":first-child is unsafe" error #28982

Merged
merged 3 commits into from
Oct 12, 2021
Merged

[Tabs] Alternative way to disable ":first-child is unsafe" error #28982

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
3085d3a
[Tab] Clone icon element and assign class name
hbjORbj Oct 11, 2021
f2fb8f5
[Tab] better way to type-check icon
hbjORbj Oct 12, 2021
f4f5d05
[Tab] Do not override icon classname
hbjORbj Oct 12, 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
22 changes: 10 additions & 12 deletions packages/mui-material/src/Tab/Tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const useUtilityClasses = (ownerState) => {
selected && 'selected',
disabled && 'disabled',
],
icon: [icon && 'iconWrapper'],
iconWrapper: ['iconWrapper'],
};

return composeClasses(slots, getTabUtilityClass, classes);
Expand Down Expand Up @@ -55,19 +55,13 @@ const TabRoot = styled(ButtonBase, {
textAlign: 'center',
flexDirection: 'column',
lineHeight: 1.25,
...(ownerState.icon && {
[`& > .${tabClasses.iconWrapper}`]: {
display: 'inherit',
},
}),
...(ownerState.icon &&
ownerState.label && {
minHeight: 72,
paddingTop: 9,
paddingBottom: 9,
[`& > .${tabClasses.iconWrapper}`]: {
marginBottom: 6,
display: 'inherit',
},
}),
...(ownerState.textColor === 'inherit' && {
Expand Down Expand Up @@ -117,7 +111,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
disableFocusRipple = false,
// eslint-disable-next-line react/prop-types
fullWidth,
icon,
icon: iconProp,
// eslint-disable-next-line react/prop-types
indicator,
label,
Expand All @@ -140,15 +134,20 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
disabled,
disableFocusRipple,
selected,
icon: !!icon,
icon: !!iconProp,
label: !!label,
fullWidth,
textColor,
wrapped,
};

const classes = useUtilityClasses(ownerState);

const icon =
iconProp && label && React.isValidElement(iconProp)
? React.cloneElement(iconProp, {
className: classes.iconWrapper,
})
: iconProp;
const handleClick = (event) => {
if (!selected && onChange) {
onChange(event, value);
Expand Down Expand Up @@ -183,8 +182,7 @@ const Tab = React.forwardRef(function Tab(inProps, ref) {
tabIndex={selected ? 0 : -1}
{...other}
>
{icon && <span className={classes.icon}>{icon}</span>}

{icon}
{label}
{indicator}
</TabRoot>
Expand Down
9 changes: 4 additions & 5 deletions packages/mui-material/src/Tab/Tab.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,16 +121,15 @@ describe('<Tab />', () => {
expect(getByTestId('icon')).not.to.equal(null);
});

it('should create a wrapper', () => {
const { getByRole } = render(<Tab icon={<div data-testid="icon" />} />);
it('should add a classname when passed together with label', () => {
const { getByRole } = render(<Tab icon={<div data-testid="icon" />} label="foo" />);
const wrapper = getByRole('tab').children[0];
expect(wrapper.tagName).to.equal('SPAN');
expect(wrapper).to.have.class(classes.iconWrapper);
});

it('should create a wrapper with bottom margin when passed together with label', () => {
it('should have bottom margin when passed together with label', () => {
const { getByRole } = render(<Tab icon={<div data-testid="icon" />} label="foo" />);
const wrapper = getByRole('tab').children[0];
expect(wrapper.tagName).to.equal('SPAN');
expect(wrapper).toHaveComputedStyle({ marginBottom: '6px' });
});
});
Expand Down