Skip to content

Commit ee703ab

Browse files
oliviertassinarioliviertassinari
authored
[Tabs] Simplify override (#14638)
1 parent 2215e40 commit ee703ab

File tree

17 files changed

+187
-315
lines changed

17 files changed

+187
-315
lines changed

‎docs/src/pages/demos/tabs/CustomizedTabs.hooks.js‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,32 @@
11
import React from 'react';
2-
import { makeStyles } from '@material-ui/styles';
2+
import { makeStyles, withStyles } from '@material-ui/styles';
33
import Tabs from '@material-ui/core/Tabs';
44
import Tab from '@material-ui/core/Tab';
55
import Typography from '@material-ui/core/Typography';
66

7+
const StyledTabs = withStyles({
8+
indicator: {
9+
display: 'flex',
10+
justifyContent: 'center',
11+
backgroundColor: 'transparent',
12+
'& > div': {
13+
maxWidth: 40,
14+
width: '100%',
15+
backgroundColor: '#635ee7',
16+
},
17+
},
18+
})(props => <Tabs {...props} TabIndicatorProps={{ children: <div /> }} />);
19+
20+
const StyledTab = withStyles(theme => ({
21+
root: {
22+
textTransform: 'initial',
23+
color: '#fff',
24+
fontWeight: theme.typography.fontWeightRegular,
25+
fontSize: theme.typography.pxToRem(15),
26+
marginRight: theme.spacing(1),
27+
},
28+
}))(props => <Tab disableRipple {...props} />);
29+
730
const useStyles = makeStyles(theme => ({
831
root: {
932
flexGrow: 1,
@@ -48,6 +71,9 @@ const useStyles = makeStyles(theme => ({
4871
typography: {
4972
padding: theme.spacing(3),
5073
},
74+
demo2: {
75+
backgroundColor: '#2e1534',
76+
},
5177
}));
5278

5379
function CustomizedTabs() {
@@ -82,6 +108,14 @@ function CustomizedTabs() {
82108
/>
83109
</Tabs>
84110
<Typography className={classes.typography}>Ant Design UI powered by Material-UI</Typography>
111+
<div className={classes.demo2}>
112+
<StyledTabs value={value} onChange={handleChange}>
113+
<StyledTab label="Workflows" />
114+
<StyledTab label="Datasets" />
115+
<StyledTab label="Connections" />
116+
</StyledTabs>
117+
<Typography className={classes.typography} />
118+
</div>
85119
</div>
86120
);
87121
}

‎docs/src/pages/demos/tabs/CustomizedTabs.js‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,29 @@ import Tabs from '@material-ui/core/Tabs';
55
import Tab from '@material-ui/core/Tab';
66
import Typography from '@material-ui/core/Typography';
77

8+
const StyledTabs = withStyles({
9+
indicator: {
10+
display: 'flex',
11+
justifyContent: 'center',
12+
backgroundColor: 'transparent',
13+
'& > div': {
14+
maxWidth: 40,
15+
width: '100%',
16+
backgroundColor: '#635ee7',
17+
},
18+
},
19+
})(props => <Tabs {...props} TabIndicatorProps={{ children: <div /> }} />);
20+
21+
const StyledTab = withStyles(theme => ({
22+
root: {
23+
textTransform: 'initial',
24+
color: '#fff',
25+
fontWeight: theme.typography.fontWeightRegular,
26+
fontSize: theme.typography.pxToRem(15),
27+
marginRight: theme.spacing(1),
28+
},
29+
}))(props => <Tab disableRipple {...props} />);
30+
831
const styles = theme => ({
932
root: {
1033
flexGrow: 1,
@@ -49,6 +72,9 @@ const styles = theme => ({
4972
typography: {
5073
padding: theme.spacing(3),
5174
},
75+
demo2: {
76+
backgroundColor: '#2e1534',
77+
},
5278
});
5379

5480
class CustomizedTabs extends React.Component {
@@ -87,7 +113,15 @@ class CustomizedTabs extends React.Component {
87113
label="Tab 3"
88114
/>
89115
</Tabs>
90-
<Typography className={classes.typography}>Ant Design UI powered by Material-UI</Typography>
116+
<Typography className={classes.typography}>Ant Design like with Material-UI</Typography>
117+
<div className={classes.demo2}>
118+
<StyledTabs value={value} onChange={this.handleChange}>
119+
<StyledTab label="Workflows" />
120+
<StyledTab label="Datasets" />
121+
<StyledTab label="Connections" />
122+
</StyledTabs>
123+
<Typography className={classes.typography} />
124+
</div>
91125
</div>
92126
);
93127
}

‎docs/src/pages/demos/tabs/TabsWrappedLabel.hooks.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function TabsWrappedLabel() {
3737
<div className={classes.root}>
3838
<AppBar position="static">
3939
<Tabs value={value} onChange={handleChange}>
40-
<Tab value="one" label="New Arrivals in the Longest Text of Nonfiction" />
40+
<Tab value="one" label="New Arrivals in the Longest Text of Nonfiction" wrapped />
4141
<Tab value="two" label="Item Two" />
4242
<Tab value="three" label="Item Three" />
4343
</Tabs>

‎docs/src/pages/demos/tabs/TabsWrappedLabel.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ class TabsWrappedLabel extends React.Component {
4242
<div className={classes.root}>
4343
<AppBar position="static">
4444
<Tabs value={value} onChange={this.handleChange}>
45-
<Tab value="one" label="New Arrivals in the Longest Text of Nonfiction" />
45+
<Tab value="one" label="New Arrivals in the Longest Text of Nonfiction" wrapped />
4646
<Tab value="two" label="Item Two" />
4747
<Tab value="three" label="Item Three" />
4848
</Tabs>

‎docs/src/pages/premium-themes/instapaper/components/molecules/Tab.js‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,3 @@
1-
import React from 'react';
2-
import clsx from 'clsx';
31
import MuiTab from '@material-ui/core/Tab';
4-
import { TAB } from '../../theme/core';
52

6-
const Tab = ({ className, inverted, ...props }) => (
7-
<MuiTab
8-
className={clsx(TAB.root, className)}
9-
classes={{ label: TAB.label, selected: TAB.selected }}
10-
{...props}
11-
/>
12-
);
13-
14-
export default Tab;
3+
export default MuiTab;

‎docs/src/pages/premium-themes/instapaper/components/molecules/Tabs.js‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,3 @@
1-
import React from 'react';
2-
import clsx from 'clsx';
31
import MuiTabs from '@material-ui/core/Tabs';
4-
import { TABS } from '../../theme/core';
52

6-
const Tabs = ({ className, inverted, ...props }) => (
7-
<MuiTabs
8-
className={clsx(TABS.root, className, inverted && TABS.inverted)}
9-
classes={{ indicator: TABS.indicator }}
10-
{...props}
11-
/>
12-
);
13-
14-
export default Tabs;
3+
export default MuiTabs;

‎docs/src/pages/premium-themes/instapaper/theme/core/classes.js‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -136,18 +136,6 @@ export const OUTLINED_INPUT = {
136136
focused: 'outlined-input--notched-outline',
137137
};
138138

139-
export const TABS = {
140-
root: 'tabs__root',
141-
inverted: 'tabs--inverted',
142-
indicator: 'tabs__indicator',
143-
};
144-
145-
export const TAB = {
146-
root: 'tab__root',
147-
label: 'tab__label',
148-
selected: 'tab--selected',
149-
};
150-
151139
export const TEXT = {
152140
root: 'text__root',
153141
bold: 'text--bold',
@@ -185,8 +173,6 @@ export default {
185173
NOTCHED_OUTLINE,
186174
ICON,
187175
ICON_BUTTON,
188-
TABS,
189-
TAB,
190176
TOOLBAR,
191177
TEXT,
192178
attach,

‎docs/src/pages/premium-themes/instapaper/theme/instapaper/components/tabs.js‎

Lines changed: 13 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default ({ attach, theme, nest, ICON, TAB }) => ({
1+
export default ({ theme }) => ({
22
MuiTabs: {
33
root: {
44
borderTop: '1px solid #efefef',
@@ -15,52 +15,30 @@ export default ({ attach, theme, nest, ICON, TAB }) => ({
1515
},
1616
MuiTab: {
1717
root: {
18-
lineHeight: 'inherit',
18+
minHeight: 54,
19+
fontWeight: 600,
1920
minWidth: 0,
20-
marginRight: theme.spacing(1),
21-
marginLeft: theme.spacing(1),
2221
[theme.breakpoints.up('md')]: {
2322
minWidth: 0,
24-
marginRight: 30,
25-
marginLeft: 30,
26-
},
27-
[attach(TAB.selected)]: {
28-
[nest(TAB.label)]: {
29-
fontWeight: 600,
30-
},
31-
'& *': {
32-
color: '#262626 !important',
33-
},
3423
},
3524
},
3625
labelIcon: {
37-
minHeight: 53,
38-
paddingTop: 0,
39-
'& .MuiTab-wrapper': {
40-
flexDirection: 'row',
41-
},
42-
[nest(ICON.root)]: {
26+
minHeight: null,
27+
paddingTop: null,
28+
'& $wrapper :first-child': {
4329
fontSize: 16,
30+
marginBottom: 0,
4431
marginRight: 6,
4532
},
4633
},
47-
wrapper: {
48-
flexDirection: 'row',
49-
'& *': {
50-
color: '#999',
34+
textColorInherit: {
35+
color: '#999',
36+
'&$selected': {
37+
color: '#262626',
5138
},
5239
},
53-
labelContainer: {
54-
padding: 0,
55-
[theme.breakpoints.up('md')]: {
56-
padding: 0,
57-
paddingLeft: 0,
58-
paddingRight: 0,
59-
},
60-
},
61-
label: {
62-
letterSpacing: 1,
63-
textTransform: 'uppercase',
40+
wrapper: {
41+
flexDirection: 'row',
6442
},
6543
},
6644
});

‎docs/src/pages/premium-themes/paperbase/Paperbase.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,14 +62,10 @@ theme = {
6262
textTransform: 'initial',
6363
margin: '0 16px',
6464
minWidth: 0,
65-
[theme.breakpoints.up('md')]: {
66-
minWidth: 0,
67-
},
68-
},
69-
labelContainer: {
7065
padding: 0,
7166
[theme.breakpoints.up('md')]: {
7267
padding: 0,
68+
minWidth: 0,
7369
},
7470
},
7571
},

‎docs/src/pages/premium-themes/tweeper/components/molecules/Tab.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,8 @@ import clsx from 'clsx';
33
import MuiTab from '@material-ui/core/Tab';
44
import { TAB } from '../../theme/core';
55

6-
const Tab = ({ className, onlyIcon, inverted, ...props }) => (
7-
<MuiTab
8-
className={clsx(TAB.root, className, onlyIcon && TAB.onlyIcon)}
9-
classes={{
10-
label: TAB.label,
11-
wrapper: TAB.wrapper,
12-
selected: TAB.selected,
13-
}}
14-
{...props}
15-
/>
6+
const Tab = ({ className, onlyIcon, ...props }) => (
7+
<MuiTab className={clsx(TAB.root, className, onlyIcon && TAB.onlyIcon)} {...props} />
168
);
179

1810
export default Tab;

0 commit comments

Comments
 (0)