feat(Buttons): Support now default, inherit, secondary color for Te…

…xt variant
cozy · Aug 7, 2024 · b9af84a · b9af84a
1 parent 707dc1c
commit b9af84a
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 8 deletions.
diff --git a/react/Buttons/Readme.md b/react/Buttons/Readme.md
@@ -20,7 +20,6 @@ const variants = ['primary', 'secondary', 'ghost', 'text']
 const propsArr = [{}, { disabled: true }, { busy: true }]
 
 ;
-
 <Grid container>
   {propsArr.map(props =>
     <Grid item xs={12} sm={4} className="u-mb-1" key={JSON.stringify(props)}>
@@ -163,7 +162,7 @@ import Grid from 'cozy-ui/transpiled/react/Grid'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 
 const variants = ['primary', 'secondary', 'ghost', 'text']
-const colors = ['success', 'error', 'warning', 'info']
+const colors = ['default', 'inherit', 'primary', 'secondary', 'success', 'error', 'warning', 'info']
 
 ;
 
@@ -192,7 +191,7 @@ import Grid from 'cozy-ui/transpiled/react/Grid'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 
 const variants = ['primary', 'secondary', 'ghost', 'text']
-const colors = ['success', 'error', 'warning', 'info']
+const colors = ['default', 'inherit', 'primary', 'secondary', 'success', 'error', 'warning', 'info']
 
 ;
 
@@ -221,7 +220,7 @@ import Grid from 'cozy-ui/transpiled/react/Grid'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 
 const variants = ['primary', 'secondary', 'ghost', 'text']
-const colors = ['success', 'error', 'warning', 'info']
+const colors = ['default', 'inherit', 'primary', 'secondary', 'success', 'error', 'warning', 'info']
 
 ;
 

diff --git a/react/Buttons/index.jsx b/react/Buttons/index.jsx
@@ -7,14 +7,27 @@ import MuiButton from '@material-ui/core/Button'
 import Icon from '../Icon'
 import SpinnerIcon from '../Icons/Spinner'
 
+const CUSTOM_COLORS = ['success', 'error', 'warning', 'info']
+
 const DefaultButton = forwardRef(
-  ({ className, color, label, busy, disabled, endIcon, ...props }, ref) => {
+  (
+    { variant, className, color, label, busy, disabled, endIcon, ...props },
+    ref
+  ) => {
+    const customColor = CUSTOM_COLORS.includes(color) ? color : 'primary'
+    const _color =
+      variant === 'text' && !CUSTOM_COLORS.includes(color) ? color : 'primary'
+
     return (
       <MuiButton
         {...props}
+        variant={variant}
         ref={ref}
-        className={cx({ [`customColor-${color}`]: color }, className)}
-        color="primary"
+        className={cx(
+          { [`customColor-${customColor}`]: customColor },
+          className
+        )}
+        color={_color}
         disabled={disabled || busy}
         endIcon={
           busy ? (
@@ -30,6 +43,7 @@ const DefaultButton = forwardRef(
     )
   }
 )
+
 DefaultButton.displayName = 'DefaultButton'
 
 DefaultButton.defaultProps = {
@@ -76,11 +90,21 @@ const Buttons = forwardRef(({ variant, className = '', ...props }, ref) => {
       return <DefaultButton className={className} {...props} ref={ref} />
   }
 })
+
 Buttons.displayName = 'Buttons'
 
 Buttons.propTypes = {
   variant: PropTypes.oneOf(['primary', 'secondary', 'ghost', 'text']),
-  color: PropTypes.oneOf(['success', 'error', 'warning', 'info'])
+  color: PropTypes.oneOf([
+    'default',
+    'inherit',
+    'primary',
+    'secondary',
+    'success',
+    'error',
+    'warning',
+    'info'
+  ])
 }
 
 Buttons.defaultProps = {