From b2dacab6ccfb29a9f4e27931079261b98a574de9 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Fri, 2 Oct 2020 19:00:59 +0200 Subject: [PATCH 1/3] feat: Add theme for MuiTabs and add example --- react/MuiCozyTheme/theme.js | 32 ++++++++++++++++++++++++++++++++ react/MuiTabs.js | 4 ++++ react/Tabs/Readme.md | 34 +++++++++++++++++++++++++++++++++- 3 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 react/MuiTabs.js diff --git a/react/MuiCozyTheme/theme.js b/react/MuiCozyTheme/theme.js index 9c0137335d..c57ffe63b5 100644 --- a/react/MuiCozyTheme/theme.js +++ b/react/MuiCozyTheme/theme.js @@ -128,6 +128,12 @@ export const normalTheme = createMuiTheme({ 900: getCssVariableValue('black') } }, + props: { + MuiTabs: { + textColor: 'primary', + TabIndicatorProps: { color: 'primary' } + } + }, ...(isTesting() && { transitions: { create: () => 'none' } }) }) @@ -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 @@ -445,6 +460,9 @@ export const invertedTheme = { palette: { ...normalTheme.palette, type: 'dark', + primary: { + main: 'white' + }, text: { primary: getCssVariableValue('white') } @@ -476,6 +494,20 @@ 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: 'white' + }, + textColorSecondary: { + color: 'white' + } + }, MuiSwitch: { switchBase: { color: getCssVariableValue('primaryContrastTextColor') diff --git a/react/MuiTabs.js b/react/MuiTabs.js new file mode 100644 index 0000000000..f92b15fd1c --- /dev/null +++ b/react/MuiTabs.js @@ -0,0 +1,4 @@ +import Tabs from '@material-ui/core/Tabs' +import Tab from '@material-ui/core/Tab' + +export { Tabs, Tab } diff --git a/react/Tabs/Readme.md b/react/Tabs/Readme.md index cbbb5eb4f3..284f377986 100644 --- a/react/Tabs/Readme.md +++ b/react/Tabs/Readme.md @@ -2,6 +2,38 @@ 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 { 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}`, + }; +} + +initialState.value = 0 + +const handleChange = (event, value) => { + setState({ value }) +}; + + + + + + + + + +``` + +### Old tabs + ``` import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'; import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'cozy-ui/transpiled/react/Tabs'; @@ -57,4 +89,4 @@ import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'cozy-ui/transpiled/reac ``` -Tabs can be along with the [NavigationList](#/NavigationList) component. +ℹ️ Tabs can work along with the [NavigationList](#/NavigationList) component. From e5bb71a42f7555d5cb6089371791d206a2076f48 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Fri, 2 Oct 2020 19:31:23 +0200 Subject: [PATCH 2/3] feat: Update test and snapshots --- react/MuiCozyTheme/theme.js | 11 +++++-- react/Tabs/Readme.md | 37 +++++++++++++++------- react/__snapshots__/examples.spec.jsx.snap | 23 +++++++++++++- 3 files changed, 56 insertions(+), 15 deletions(-) diff --git a/react/MuiCozyTheme/theme.js b/react/MuiCozyTheme/theme.js index c57ffe63b5..20c94d4836 100644 --- a/react/MuiCozyTheme/theme.js +++ b/react/MuiCozyTheme/theme.js @@ -461,7 +461,7 @@ export const invertedTheme = { ...normalTheme.palette, type: 'dark', primary: { - main: 'white' + main: 'rgb(255,255,255)' }, text: { primary: getCssVariableValue('white') @@ -502,10 +502,15 @@ invertedTheme.overrides = merge({}, normalTheme.overrides, { MuiTab: { // This overrides the disabled color of the MuiTab textColorPrimary: { - color: 'white' + color: 'rgb(255,255,255)', + opacity: 0.64 }, textColorSecondary: { - color: 'white' + color: 'rgb(255,255,255)', + opacity: 0.64 + }, + selected: { + opacity: 1 } }, MuiSwitch: { diff --git a/react/Tabs/Readme.md b/react/Tabs/Readme.md index 284f377986..c944c45f04 100644 --- a/react/Tabs/Readme.md +++ b/react/Tabs/Readme.md @@ -5,6 +5,7 @@ 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' @@ -16,20 +17,34 @@ function a11yProps(index) { }; } -initialState.value = 0 -const handleChange = (event, value) => { - setState({ value }) +const Example = () => { + const [value, setValue] = useState(0) + const handleChange = (event, value) => { + setValue(value) + } + + return ( + <> + + + + + + + + ) }; - - - - - - - - +<> + + + +
+ + + + ``` ### Old tabs diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap index 0fbe52aad1..a49614cf6f 100644 --- a/react/__snapshots__/examples.spec.jsx.snap +++ b/react/__snapshots__/examples.spec.jsx.snap @@ -6123,6 +6123,27 @@ exports[`Table should render examples: Table 1`] = ` `; exports[`Tabs should render examples: Tabs 1`] = ` +"
+
+
+
+
+
+
+
+

+
+
+
+
+
+
+
+
+
" +`; + +exports[`Tabs should render examples: Tabs 2`] = ` "
@@ -6136,7 +6157,7 @@ exports[`Tabs should render examples: Tabs 1`] = `
" `; -exports[`Tabs should render examples: Tabs 2`] = ` +exports[`Tabs should render examples: Tabs 3`] = ` "
From fe27e763b711676553913e930642a9e45f40dce1 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Mon, 5 Oct 2020 09:22:04 +0200 Subject: [PATCH 3/3] chore: Make remark only output errors Do not pollute the console with successes --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2618ebe9ef..d6dda4f3f4 100644 --- a/package.json +++ b/package.json @@ -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/",