Skip to content

Commit dec2076

Browse files
oliviertassinarioliviertassinari
committed
[Tabs] Simplify override
1 parent cbed923 commit dec2076

File tree

11 files changed

+169
-242
lines changed

11 files changed

+169
-242
lines changed

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

+35-1
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

+35-1
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

+1-1
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

+1-1
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

+1-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,4 @@
11
import React from 'react';
2-
import clsx from 'clsx';
32
import MuiTab from '@material-ui/core/Tab';
4-
import { TAB } from '../../theme/core';
53

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;
4+
export default MuiTab;

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

+1-9
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,4 @@ import clsx from 'clsx';
33
import MuiTabs from '@material-ui/core/Tabs';
44
import { TABS } from '../../theme/core';
55

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;
6+
export default MuiTabs;

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

-14
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

+13-39
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default ({ attach, theme, nest, ICON, TAB }) => ({
1+
export default () => ({
22
MuiTabs: {
33
root: {
44
borderTop: '1px solid #efefef',
@@ -15,52 +15,26 @@ export default ({ attach, theme, nest, ICON, TAB }) => ({
1515
},
1616
MuiTab: {
1717
root: {
18-
lineHeight: 'inherit',
19-
minWidth: 0,
20-
marginRight: theme.spacing(1),
21-
marginLeft: theme.spacing(1),
22-
[theme.breakpoints.up('md')]: {
23-
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-
},
34-
},
18+
minHeight: 54,
19+
fontWeight: 600,
3520
},
3621
labelIcon: {
37-
minHeight: 53,
38-
paddingTop: 0,
39-
'& .MuiTab-wrapper': {
40-
flexDirection: 'row',
41-
},
42-
[nest(ICON.root)]: {
22+
minHeight: null,
23+
paddingTop: null,
24+
'& $wrapper :first-child': {
4325
fontSize: 16,
26+
marginBottom: 0,
4427
marginRight: 6,
4528
},
4629
},
47-
wrapper: {
48-
flexDirection: 'row',
49-
'& *': {
50-
color: '#999',
30+
textColorInherit: {
31+
color: '#999',
32+
'&$selected': {
33+
color: '#262626',
5134
},
5235
},
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',
36+
wrapper: {
37+
flexDirection: 'row',
6438
},
6539
},
6640
});

0 commit comments

Comments
 (0)