Skip to content

Commit

Permalink
Merge pull request #1588 from cozy/mui-tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
ptbrowne authored Oct 5, 2020
2 parents 11cd2cd + fe27e76 commit db54f27
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 3 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"lint:commit": "git merge-base HEAD master && commitlint --from=$(git merge-base HEAD master) --to=HEAD || true",
"lint:js": "eslint 'react/**/*.jsx' 'react/**/*.js'",
"lint:stylus": "stylint stylus --config .stylintrc",
"lint:md": "remark . -o",
"lint:md": "remark . -o -S",
"palette": "scripts/make-palette.sh",
"prebuild:css": "mkdir -p dist/ && stylus -C node_modules/normalize.css/normalize.css node_modules/normalize.css/normalize.styl",
"prebuild:css:utils": "mkdir -p dist/",
Expand Down
37 changes: 37 additions & 0 deletions react/MuiCozyTheme/theme.js
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,12 @@ export const normalTheme = createMuiTheme({
900: getCssVariableValue('black')
}
},
props: {
MuiTabs: {
textColor: 'primary',
TabIndicatorProps: { color: 'primary' }
}
},
...(isTesting() && { transitions: { create: () => 'none' } })
})

Expand All @@ -150,6 +156,15 @@ normalTheme.overrides = {
borderRadius: 0
}
},
MuiTab: {
// This overrides the disabled color of the MuiTab
textColorPrimary: {
color: 'var(--coolGrey)'
},
textColorSecondary: {
color: 'var(--coolGrey)'
}
},
MuiExpansionPanel: {
rounded: {
borderRadius: defaultValues.borderRadius
Expand Down Expand Up @@ -445,6 +460,9 @@ export const invertedTheme = {
palette: {
...normalTheme.palette,
type: 'dark',
primary: {
main: 'rgb(255,255,255)'
},
text: {
primary: getCssVariableValue('white')
}
Expand Down Expand Up @@ -476,6 +494,25 @@ invertedTheme.overrides = merge({}, normalTheme.overrides, {
color: invertedTheme.palette.text.primary
}
},
MuiTabs: {
root: {
background: normalTheme.palette.primary.main
}
},
MuiTab: {
// This overrides the disabled color of the MuiTab
textColorPrimary: {
color: 'rgb(255,255,255)',
opacity: 0.64
},
textColorSecondary: {
color: 'rgb(255,255,255)',
opacity: 0.64
},
selected: {
opacity: 1
}
},
MuiSwitch: {
switchBase: {
color: getCssVariableValue('primaryContrastTextColor')
Expand Down
4 changes: 4 additions & 0 deletions react/MuiTabs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab'

export { Tabs, Tab }
49 changes: 48 additions & 1 deletion react/Tabs/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,53 @@ Content needs to be separated into sections and accessed via a single content ar

Tabs can have the `inverted` prop to be in the primary color of the app.

### Themed tab for material-ui

```
import { useState } from 'react'
import { Tabs, Tab } from 'cozy-ui/transpiled/react/MuiTabs'
import { CardDivider } from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider';
import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
const Example = () => {
const [value, setValue] = useState(0)
const handleChange = (event, value) => {
setValue(value)
}
return (
<>
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
<CardDivider />
</>
)
};
<>
<MuiCozyTheme variant='normal'>
<Example />
</MuiCozyTheme>
<br/>
<MuiCozyTheme variant='inverted'>
<Example />
</MuiCozyTheme>
</>
```

### Old tabs

```
import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'cozy-ui/transpiled/react/Tabs';
Expand Down Expand Up @@ -57,4 +104,4 @@ import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'cozy-ui/transpiled/reac
</MuiCozyTheme>
```

Tabs can be along with the [NavigationList](#/NavigationList) component.
ℹ️ Tabs can work along with the [NavigationList](#/NavigationList) component.
23 changes: 22 additions & 1 deletion react/__snapshots__/examples.spec.jsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -6123,6 +6123,27 @@ exports[`Table should render examples: Table 1`] = `
`;

exports[`Tabs should render examples: Tabs 1`] = `
"<div>
<div class=\\"MuiTabs-root-141\\" aria-label=\\"simple tabs example\\">
<div class=\\"MuiTabs-flexContainer-142\\">
<div class=\\"MuiTabs-scroller-144 MuiTabs-fixed-145\\" style=\\"margin-bottom: 0px;\\" role=\\"tablist\\">
<div class=\\"MuiTabs-flexContainer-142\\"><button class=\\"MuiButtonBase-root-162 MuiTab-root-150 MuiTab-textColorPrimary-153 MuiTab-selected-155\\" tabindex=\\"0\\" type=\\"button\\" role=\\"tab\\" aria-selected=\\"true\\" id=\\"simple-tab-0\\" aria-controls=\\"simple-tabpanel-0\\"><span class=\\"MuiTab-wrapper-158\\"><span class=\\"MuiTab-labelContainer-159\\"><span class=\\"MuiTab-label-160\\">Item One</span></span></span><span class=\\"MuiTouchRipple-root-200\\"></span></button><button class=\\"MuiButtonBase-root-162 MuiTab-root-150 MuiTab-textColorPrimary-153\\" tabindex=\\"0\\" type=\\"button\\" role=\\"tab\\" aria-selected=\\"false\\" id=\\"simple-tab-1\\" aria-controls=\\"simple-tabpanel-1\\"><span class=\\"MuiTab-wrapper-158\\"><span class=\\"MuiTab-labelContainer-159\\"><span class=\\"MuiTab-label-160\\">Item Two</span></span></span><span class=\\"MuiTouchRipple-root-200\\"></span></button><button class=\\"MuiButtonBase-root-162 MuiTab-root-150 MuiTab-textColorPrimary-153\\" tabindex=\\"0\\" type=\\"button\\" role=\\"tab\\" aria-selected=\\"false\\" id=\\"simple-tab-2\\" aria-controls=\\"simple-tabpanel-2\\"><span class=\\"MuiTab-wrapper-158\\"><span class=\\"MuiTab-labelContainer-159\\"><span class=\\"MuiTab-label-160\\">Item Three</span></span></span><span class=\\"MuiTouchRipple-root-200\\"></span></button></div><span class=\\"MuiPrivateTabIndicator-root-165 MuiPrivateTabIndicator-colorPrimary-166 MuiTabs-indicator-149\\" style=\\"left: 0px; width: 0px;\\"></span>
</div>
</div>
</div>
<hr class=\\"MuiDivider-root-75 u-ml-0 u-maw-100\\"><br>
<div class=\\"MuiTabs-root-168\\" aria-label=\\"simple tabs example\\">
<div class=\\"MuiTabs-flexContainer-169\\">
<div class=\\"MuiTabs-scroller-171 MuiTabs-fixed-172\\" style=\\"margin-bottom: 0px;\\" role=\\"tablist\\">
<div class=\\"MuiTabs-flexContainer-169\\"><button class=\\"MuiButtonBase-root-189 MuiTab-root-177 MuiTab-textColorPrimary-180 MuiTab-selected-182\\" tabindex=\\"0\\" type=\\"button\\" role=\\"tab\\" aria-selected=\\"true\\" id=\\"simple-tab-0\\" aria-controls=\\"simple-tabpanel-0\\"><span class=\\"MuiTab-wrapper-185\\"><span class=\\"MuiTab-labelContainer-186\\"><span class=\\"MuiTab-label-187\\">Item One</span></span></span><span class=\\"MuiTouchRipple-root-207\\"></span></button><button class=\\"MuiButtonBase-root-189 MuiTab-root-177 MuiTab-textColorPrimary-180\\" tabindex=\\"0\\" type=\\"button\\" role=\\"tab\\" aria-selected=\\"false\\" id=\\"simple-tab-1\\" aria-controls=\\"simple-tabpanel-1\\"><span class=\\"MuiTab-wrapper-185\\"><span class=\\"MuiTab-labelContainer-186\\"><span class=\\"MuiTab-label-187\\">Item Two</span></span></span><span class=\\"MuiTouchRipple-root-207\\"></span></button><button class=\\"MuiButtonBase-root-189 MuiTab-root-177 MuiTab-textColorPrimary-180\\" tabindex=\\"0\\" type=\\"button\\" role=\\"tab\\" aria-selected=\\"false\\" id=\\"simple-tab-2\\" aria-controls=\\"simple-tabpanel-2\\"><span class=\\"MuiTab-wrapper-185\\"><span class=\\"MuiTab-labelContainer-186\\"><span class=\\"MuiTab-label-187\\">Item Three</span></span></span><span class=\\"MuiTouchRipple-root-207\\"></span></button></div><span class=\\"MuiPrivateTabIndicator-root-192 MuiPrivateTabIndicator-colorPrimary-193 MuiTabs-indicator-176\\" style=\\"left: 0px; width: 0px;\\"></span>
</div>
</div>
</div>
<hr class=\\"MuiDivider-root-195 u-ml-0 u-maw-100\\">
</div>"
`;

exports[`Tabs should render examples: Tabs 2`] = `
"<div>
<div class=\\"styles__coz-tabs___24QL5\\">
<div class=\\"styles__coz-tab-list___3qac8 styles__coz-tab-list--inverted___3VjXc\\">
Expand All @@ -6136,7 +6157,7 @@ exports[`Tabs should render examples: Tabs 1`] = `
</div>"
`;

exports[`Tabs should render examples: Tabs 2`] = `
exports[`Tabs should render examples: Tabs 3`] = `
"<div>
<div style=\\"width: 300px; margin-top: 32px;\\">
<div class=\\"styles__coz-tabs___24QL5\\">
Expand Down

0 comments on commit db54f27

Please sign in to comment.