diff --git a/react/Field/Readme.md b/react/Field/Readme.md index be59c19d14..91e8702461 100644 --- a/react/Field/Readme.md +++ b/react/Field/Readme.md @@ -245,6 +245,7 @@ import Field from 'cozy-ui/transpiled/react/Field'; import MuiButton from 'cozy-ui/transpiled/react/MuiCozyTheme/Buttons';
+
{ - return {visible ? 'Hide' : 'Show' } + return ( + /* Need to cancel the paddingTop of the button */ +
+ + {visible ? 'Hide' : 'Show' } + +
+ ) }} /> diff --git a/react/MuiCozyTheme/Buttons/Readme.md b/react/MuiCozyTheme/Buttons/Readme.md index 60c82d1002..14c417dc79 100644 --- a/react/MuiCozyTheme/Buttons/Readme.md +++ b/react/MuiCozyTheme/Buttons/Readme.md @@ -1,21 +1,83 @@ ``` import Button from 'cozy-ui/transpiled/react/MuiCozyTheme/Buttons'; +import Typography from 'cozy-ui/transpiled/react/Typography'; +import Icon from 'cozy-ui/transpiled/react/Icon' +import Stack from 'cozy-ui/transpiled/react/Stack' +import WrenchCircleIcon from 'cozy-ui/transpiled/react/Icons/WrenchCircle' -const ButtonsVariant = ({variant}) => { +const ButtonsVariant = ({variant, size }) => { return (
- - - - - - - + + + + +
) } -<>Text Buttons:Outlined Buttons:Contained Buttons: + +const StateRadio = ({ name, ...props }) => { + return setState({ [name]: props.value })} + {...props} + /> +} + +const Example = ({ size, className }) => { + return ( + +
+ Text Buttons + +
+
+ Outlined Buttons + +
+
+ Contained buttons + +
+
+ ) +} + +initialState = { + size: 'medium' +}; + +<> + {true || isTesting() + ? + + {['small', 'medium', 'large'].map(size => ( + + { size } + + + ))} + : + +
+ small{' '} + medium{' '} + large +
+
+ +
+
+ } + ``` diff --git a/react/MuiCozyTheme/theme.js b/react/MuiCozyTheme/theme.js index 64dbc8b2fc..07c26f5ecd 100644 --- a/react/MuiCozyTheme/theme.js +++ b/react/MuiCozyTheme/theme.js @@ -170,15 +170,25 @@ const makeOverrides = theme => ({ } }, MuiButton: { + root: { + height: '2.5rem', + padding: '0px 1rem' + }, + sizeSmall: { + height: '2rem', + padding: '0px 0.75rem' + }, + sizeLarge: { + padding: '0px 1.25rem', + height: '3rem' + }, outlined: { borderRadius: 2, - height: 40, minWidth: 112 }, contained: { borderRadius: 2, boxShadow: 0, - height: 40, minWidth: 112 }, containedSecondary: { diff --git a/react/UploadQueue/styles.styl b/react/UploadQueue/styles.styl index 13aa8cfe7e..b7b4061512 100644 --- a/react/UploadQueue/styles.styl +++ b/react/UploadQueue/styles.styl @@ -130,8 +130,7 @@ progress.upload-queue-progress .upload-queue-header background 0 text-transform uppercase - padding-left 0 - padding-right 0 + padding 0 .upload-queue-content display none diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap index eaa87a15c3..403c3dd329 100644 --- a/react/__snapshots__/examples.spec.jsx.snap +++ b/react/__snapshots__/examples.spec.jsx.snap @@ -2329,10 +2329,12 @@ exports[`Field should render examples: Field 13`] = ` exports[`Field should render examples: Field 14`] = ` "
-
+
-
+
+
+