Skip to content

Commit c356e20

Browse files
author
Asad Razzaq
committed
fix(Tabs): styles applied to tabs
1 parent 6f813e5 commit c356e20

File tree

8 files changed

+131
-293
lines changed

8 files changed

+131
-293
lines changed

‎src/components/Tab/Tab.tsx

Lines changed: 5 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,15 @@
1-
// import MuiTab from '@material-ui/core/Tab';
2-
// import React from 'react';
3-
// import { Theme } from '@bluebase/core';
4-
// import { withPropsStyles } from '../../withPropsStyles';
5-
6-
// export const styles: any = ({ }: any, _muiTheme: any, _theme: Theme) => {
7-
// return {
8-
// // root: {
9-
// // backgroundColor: theme.palette.background.default,
10-
// // flexGrow: 1,
11-
// // },
12-
// // tabsRoot: {
13-
// // borderBottom: '1px solid green',
14-
// // },
15-
// // tabsIndicator: {
16-
// // backgroundColor: '#1890ff',
17-
// // },
18-
// tabRoot: {
19-
// textTransform: 'initial',
20-
// minWidth: 72,
21-
// // marginRight: theme.spacing.unit * 4,
22-
// fontFamily: [
23-
// '-apple-system',
24-
// 'BlinkMacSystemFont',
25-
// '"Segoe UI"',
26-
// 'Roboto',
27-
// '"Helvetica Neue"',
28-
// 'Arial',
29-
// 'sans-serif',
30-
// '"Apple Color Emoji"',
31-
// '"Segoe UI Emoji"',
32-
// '"Segoe UI Symbol"',
33-
// ].join(','),
34-
// '&:hover': {
35-
// color: 'green',
36-
// opacity: 1,
37-
// },
38-
// '&$tabSelected': {
39-
// color: 'yellow',
40-
// },
41-
// '&:focus': {
42-
// color: 'red',
43-
// },
44-
// },
45-
// tabSelected: {},
46-
// // typography: {
47-
// // padding: theme.spacing.unit * 3,
48-
// // },
49-
// };
50-
// };
51-
52-
// export const CustomTabs = (props: any) => {
53-
// const { label } = props;
54-
// // const style: any = props.styles;
55-
// return (
56-
// <MuiTab
57-
// classes={{ root: styles.tabRoot, selected: styles.tabSelected }}
58-
// label={label}
59-
// {...props}
60-
// />
61-
// );
62-
// };
63-
64-
// export const Tab = withPropsStyles(styles)(CustomTabs);
65-
1+
import { Icon } from '@bluebase/components';
662
import MuiTab from '@material-ui/core/Tab';
673
import React from 'react';
68-
// import Tab from '@material-ui/core/Tab';
694
import { withStyles } from '@material-ui/core/styles';
70-
// export const Tabs = withStyles(styles)(CustomizedTabs);
715

726
function getTabUI(props: any) {
73-
const { classes } = props;
74-
return <MuiTab classes={{ root: classes.tabRoot, selected: classes.tabSelected }} {...props} />;
7+
return <MuiTab {...props} />;
758
}
769

7710
export const Tab = (props: any) => {
78-
const styles: any = (_theme: any) => {
79-
return {
80-
tabRoot: {
81-
borderBottom: '1px solid blue',
82-
},
83-
tabSelected: {},
84-
...props.styles,
85-
};
86-
};
87-
11+
const { icon, ...rest } = props;
8812
const Wrapper: any = getTabUI;
89-
const Styled = withStyles(styles)(Wrapper);
90-
return <Styled>{props.children}</Styled>;
13+
const Styled = withStyles(props.styles)(Wrapper);
14+
return <Styled {...rest} icon={icon ? <Icon name={icon} /> : undefined} />;
9115
};

‎src/components/Tab/__stories__/Tab.stories.tsx

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,20 @@
11
import React from 'react';
2-
import { Tab } from '@bluebase/components';
2+
import { getComponent } from '@bluebase/core';
33
import storiesOf from '@bluebase/storybook-addon';
44
import { withInfo } from '@storybook/addon-info';
55
import { withKnobs } from '@storybook/addon-knobs';
66

7+
const Tab = getComponent('Tab');
8+
79
const stories = storiesOf('Tab', module);
810

911
stories.addDecorator(withInfo);
1012
stories.addDecorator(withKnobs);
1113

1214
stories
1315

14-
.add('Label Only Tab', () => (
15-
<Tab label="Item One" />
16-
))
16+
.add('Label Only Tab', () => <Tab label="Item One" />)
1717

18-
.add('Icon Only Tab', () => (
19-
<Tab
20-
label="Asad"
21-
selected={true}
22-
// icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }}
23-
/>
24-
))
18+
.add('Icon Only Tab', () => <Tab icon="delete" />)
2519

26-
.add('Icon & Label Tab', () => (
27-
<Tab label="Item One" icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }} />
28-
))
29-
;
20+
.add('Icon & Label Tab', () => <Tab label="Item One" icon="favorite" />);

‎src/components/Tab/__tests__/Tab.test.tsx

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,24 @@ import { mount } from 'enzyme';
55
import { waitForElement } from 'enzyme-async-helpers';
66

77
describe('Tab', () => {
8-
9-
it('should render a DynamicIcon when icon prop is given', async () => {
8+
it('should render an Icon when icon prop is given', async () => {
109
const component = mount(
1110
<BlueBaseApp>
12-
<Tab icon={{ type: 'image', size: 20, source: { uri: 'https://placeimg.com/100/100/any' } }} />
11+
<Tab icon="delete" />
1312
</BlueBaseApp>
1413
);
1514

1615
await waitForElement(component as any, Tab);
1716

18-
// expect(component).toMatchSnapshot();
19-
expect(component.find('Tab DynamicIcon').first().prop('type')).toBe('image');
20-
expect(component.find('Tab DynamicIcon').first().prop('size')).toEqual(20);
21-
expect(component.find('Tab DynamicIcon').first().prop('source')).toMatchObject({
22-
uri: 'https://placeimg.com/100/100/any'
23-
});
24-
17+
expect(
18+
component
19+
.find('Tab Icon')
20+
.first()
21+
.prop('name')
22+
).toBe('delete');
2523
});
2624

27-
it('should not render a DynamicIcon when icon prop is not given', async () => {
25+
it('should not render an Icon when icon prop is not given', async () => {
2826
const component = mount(
2927
<BlueBaseApp>
3028
<Tab label="Item" />
@@ -33,11 +31,12 @@ describe('Tab', () => {
3331

3432
await waitForElement(component as any, Tab);
3533

36-
// expect(component).toMatchSnapshot();
37-
expect(component.find('Tab DynamicIcon')).toHaveLength(0);
38-
34+
expect(
35+
component
36+
.find('Tab')
37+
.last()
38+
.prop('label')
39+
).toBe('Item');
40+
expect(component.find('Tab Icon')).toHaveLength(0);
3941
});
40-
4142
});
42-
43-

‎src/components/Tabs/Tabs.tsx

Lines changed: 4 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,13 @@
11
import MuiTabs from '@material-ui/core/Tabs';
22
import React from 'react';
3-
// import Tab from '@material-ui/core/Tab';
43
import { withStyles } from '@material-ui/core/styles';
5-
// export const Tabs = withStyles(styles)(CustomizedTabs);
6-
74
function getTabsUI(props: any) {
8-
const { classes, children } = props;
9-
return (
10-
<MuiTabs classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }} {...props}>
11-
{children}
12-
</MuiTabs>
13-
);
5+
const { children, ...other } = props;
6+
return <MuiTabs {...other}>{children}</MuiTabs>;
147
}
158

169
export const Tabs = (props: any) => {
17-
const styles: any = (_theme: any) => {
18-
return {
19-
tabsIndicator: {
20-
backgroundColor: 'blue',
21-
},
22-
tabsRoot: {
23-
borderBottom: '1px solid blue',
24-
},
25-
...props.styles,
26-
};
27-
};
28-
2910
const Wrapper: any = getTabsUI;
30-
const Styled = withStyles(styles)(Wrapper);
31-
return <Styled>{props.children}</Styled>;
11+
const Styled = withStyles(props.styles)(Wrapper);
12+
return <Styled {...props} />;
3213
};
33-
34-
// import MuiTabs from '@material-ui/core/Tabs';
35-
// import React from 'react';
36-
// import { withPropsStyles } from './../../withPropsStyles';
37-
38-
// const defaultStyles: any = (_theme: any) => ({
39-
// root: {
40-
// flexGrow: 1,
41-
// backgroundColor: 'red',
42-
// },
43-
// tabsRoot: {
44-
// borderBottom: '1px solid #e8e8e8',
45-
// },
46-
// tabsIndicator: {
47-
// backgroundColor: 'green',
48-
// },
49-
// tabRoot: {
50-
// textTransform: 'initial',
51-
// minWidth: 72,
52-
// // fontWeight: theme.typography.fontWeightRegular,
53-
// // marginRight: theme.spacing.unit * 4,
54-
// fontFamily: [
55-
// '-apple-system',
56-
// 'BlinkMacSystemFont',
57-
// '"Segoe UI"',
58-
// 'Roboto',
59-
// '"Helvetica Neue"',
60-
// 'Arial',
61-
// 'sans-serif',
62-
// '"Apple Color Emoji"',
63-
// '"Segoe UI Emoji"',
64-
// '"Segoe UI Symbol"',
65-
// ].join(','),
66-
// '&:hover': {
67-
// color: 'green',
68-
// opacity: 1,
69-
// },
70-
// '&$tabSelected': {
71-
// color: '#1890ff',
72-
// // fontWeight: theme.typography.fontWeightMedium,
73-
// },
74-
// '&:focus': {
75-
// color: '#40a9ff',
76-
// },
77-
// },
78-
// tabSelected: {},
79-
// typography: {
80-
// // padding: theme.spacing.unit * 3,
81-
// },
82-
// });
83-
84-
// const CustomizedTabs = (props: any) => {
85-
// const { value, children } = props;
86-
87-
// return (
88-
// <MuiTabs
89-
// value={value}
90-
// classes={{ root: defaultStyles.tabsRoot, indicator: defaultStyles.tabsIndicator }}
91-
// >
92-
// {children}
93-
// </MuiTabs>
94-
// );
95-
// };
96-
97-
// export const Tabs = withPropsStyles(defaultStyles)(CustomizedTabs);

0 commit comments

Comments
 (0)