diff --git a/react/Badge/Readme.md b/react/Badge/Readme.md index d531678a68..158b14a7f3 100644 --- a/react/Badge/Readme.md +++ b/react/Badge/Readme.md @@ -13,19 +13,15 @@ import Variants from 'cozy-ui/docs/components/Variants' import CircleFilledIcon from "cozy-ui/transpiled/react/Icons/CircleFilled" const initialVariants = [ - { overlap: true, error: false, dot: false, withBorder: false, left: false, bottom: false, small: false, large: false } + { overlap: true, dot: false, withBorder: false, left: false, bottom: false, small: false, large: false } ] -; - - - {variant => ( +const DemoBadge = ({ variant, ...props }) => { + return ( + ) +} + +; + + + {variant => ( + <> + + + + + + + + )} ``` diff --git a/react/Badge/index.jsx b/react/Badge/index.jsx index 5bfa658bcd..67821e3adb 100644 --- a/react/Badge/index.jsx +++ b/react/Badge/index.jsx @@ -8,6 +8,7 @@ const Badge = ({ size, withBorder, overlap: overlapProp, + color, ...props }) => { const sizeClasses = { @@ -28,10 +29,16 @@ const Badge = ({ return ( ) @@ -42,6 +49,16 @@ Badge.propTypes = { horizontal: PropTypes.oneOf(['left', 'right']), vertical: PropTypes.oneOf(['bottom', 'top']) }), + className: PropTypes.string, + color: PropTypes.oneOf([ + 'default', + 'success', + 'warning', + 'error', + 'info', + 'primary', + 'secondary' + ]), size: PropTypes.oneOf(['small', 'medium', 'large']), showZero: PropTypes.bool, variant: PropTypes.oneOf(['standard', 'dot']), diff --git a/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js b/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js index faf5a348ef..460ece0446 100644 --- a/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js +++ b/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js @@ -723,6 +723,20 @@ export const makeLightNormalOverrides = theme => ({ fontSize: '.5rem' } }, + colorPrimary: { + '&.colorSuccess': { + backgroundColor: theme.palette.success.main, + color: theme.palette.success.contrastText + }, + '&.colorWarning': { + backgroundColor: theme.palette.warning.main, + color: theme.palette.warning.contrastText + }, + '&.colorInfo': { + backgroundColor: theme.palette.info.main, + color: theme.palette.info.contrastText + } + }, anchorOriginTopRightRectangular: { transform: 'scale(1) translate(37%, -37%)' }, diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap index 0b7f903153..df8ce0b1af 100644 --- a/react/__snapshots__/examples.spec.jsx.snap +++ b/react/__snapshots__/examples.spec.jsx.snap @@ -356,8 +356,8 @@ exports[`Avatar should render examples: Avatar 1`] = ` exports[`Badge should render examples: Badge 1`] = ` "
-
Variant selector
-
4 +
Variant selector
+
4444444 " `;