cozy-ui 54.0.0 → 54.1.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [54.1.0](https://github.com/cozy/cozy-ui/compare/v54.0.0...v54.1.0) (2021-09-29)
+
+
+### Bug Fixes
+
+* Allow badge class to be extended ([ec2f6d5](https://github.com/cozy/cozy-ui/commit/ec2f6d5))
+
+
+### Features
+
+* Add withBorder prop ([87339a2](https://github.com/cozy/cozy-ui/commit/87339a2))
+
 # [54.0.0](https://github.com/cozy/cozy-ui/compare/v53.0.0...v54.0.0) (2021-09-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "54.0.0",
+  "version": "54.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Badge/Readme.md

@@ -14,21 +14,43 @@ import Variants from 'cozy-ui/docs/components/Variants';
 import CircleFilledIcon from "cozy-ui/transpiled/react/Icons/CircleFilled";
 
 const initialVariants = [
-  { error: false, dot: false, large: false, small: false },
-  { error: true, dot: true, large: false, small: false },
-  { error: false, dot: false, large: false, small: false },
+  { error: false, dot: false, large: false, small: false, withBorder: false },
+  { error: true, dot: true, large: false, small: false, withBorder: true },
+  { error: false, dot: false, large: false, small: false, withBorder: false },
 ];
 
+testingProps = [
+  { color: 'primary', variant: 'standard', size: 'small', vertical: 'top', horizontal: 'left', withBorder: false},
+  { color: 'secondary', variant: 'dot', size: 'medium', vertical: 'bottom', horizontal: 'right', withBorder: true},
+  { color: 'error', variant: 'standard', size: 'large', vertical: 'top', horizontal: 'left', withBorder: false},
+  { color: 'secondary', variant: 'dot', size: 'small', vertical: 'top', horizontal: 'right', withBorder: true},
+  { color: 'error', variant: 'standard', size: 'medium', vertical: 'bottom', horizontal: 'left', withBorder: false},
+  { color: 'primary', variant: 'dot', size: 'large', vertical: 'top', horizontal: 'right', withBorder: true}
+];
 
-<Variants initialVariants={initialVariants}>{
+<>
+  {isTesting()
+    ? <>
+        {testingProps.map(({color, variant, size, vertical, horizontal, withBorder}) =>
+          <p>
+            <h5>color = {color}, variant = {variant}, size = {size}, vertical = {vertical}, horizontal = {horizontal}, withBorder = {withBorder.toString()}</h5>
+            <Badge badgeContent={4} color={color} variant={variant} size={size} anchorOrigin={{vertical, horizontal}} withBorder={withBorder}>
+              <Icon icon={CircleFilledIcon} size={size === 'large' ? '32' : size === 'small' ? '16' : '24'} color="var(--slateGrey)" />
+            </Badge>
+          </p>
+        )}
+  </>
+  : <Variants initialVariants={initialVariants}>{
   variant => (
     <p>
-      <Badge badgeContent={4} color={variant.error ? 'error' : variant.secondaryColor ? 'secondary' : 'primary'} variant={variant.dot ? 'dot' : 'standard'} size={variant.large ? 'large' : variant.small ? 'small' : 'medium'} anchorOrigin={{vertical: variant.bottom ? 'bottom' : 'top', 'horizontal': variant.left ? 'left' : 'right'}}>
+      <Badge badgeContent={4} color={variant.error ? 'error' : variant.secondaryColor ? 'secondary' : 'primary'} variant={variant.dot ? 'dot' : 'standard'} size={variant.large ? 'large' : variant.small ? 'small' : 'medium'} anchorOrigin={{vertical: variant.bottom ? 'bottom' : 'top', 'horizontal': variant.left ? 'left' : 'right'}} withBorder={variant.withBorder}>
         <Icon icon={CircleFilledIcon} size={variant.large ? '32' : variant.small ? '16' : '24'} color="var(--slateGrey)" />
       </Badge>
     </p>
   )
 }</Variants>
+}
+</>
 ```
 
 ### Double badges

package/react/Badge/index.jsx

@@ -2,21 +2,22 @@ import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import MuiBadge from '@material-ui/core/Badge'
-import { withStyles } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 
 const LARGE_BADGE = '1.25rem'
 const MEDIUM_BADGE = '1.125rem'
 const SMALL_BADGE = '1rem'
 
-const LARGE_DOT = '.875rem'
-const MEDIUM_DOT = '.75rem'
-const SMALL_DOT = '.625rem'
-
-const customStyles = theme => ({
-  badge: {
-    padding: 0
-  },
-  root: {},
+const useStyles = makeStyles(theme => ({
+  colorPrimary: ({ withBorder }) => ({
+    border: withBorder ? `2px solid ${theme.palette.background.paper}` : 'none'
+  }),
+  colorSecondary: ({ withBorder }) => ({
+    border: withBorder ? `2px solid ${theme.palette.background.paper}` : 'none'
+  }),
+  colorError: ({ withBorder }) => ({
+    border: withBorder ? `2px solid ${theme.palette.background.paper}` : 'none'
+  }),
   top: {
     top: '16%'
   },
@@ -49,74 +50,62 @@ const customStyles = theme => ({
     lineHeight: '0',
     padding: '0 3px'
   },
-  colorPrimary: {
-    border: `2px solid ${theme.palette.primary.contrastText}`
-  },
-  colorSecondary: {
-    border: `2px solid ${theme.palette.secondary.contrastText}`
-  },
-  colorError: {
-    border: `2px solid ${theme.palette.error.contrastText}`
-  },
   dot: {
-    borderRadius: '100%',
-    padding: 0,
     '&$large': {
-      height: LARGE_DOT,
-      minWidth: LARGE_DOT
+      height: '.875rem',
+      minWidth: '.875rem'
     },
     '&$medium': {
-      height: MEDIUM_DOT,
-      minWidth: MEDIUM_DOT
+      height: '.75rem',
+      minWidth: '.75rem'
     },
     '&$small': {
-      height: SMALL_DOT,
-      minWidth: SMALL_DOT
+      height: '.625rem',
+      minWidth: '.625rem'
     }
   }
-})
+}))
+
+const Badge = ({ classes = {}, anchorOrigin, size, ...props }) => {
+  const {
+    colorPrimary,
+    colorSecondary,
+    colorError,
+    top,
+    bottom,
+    left,
+    right,
+    large,
+    medium,
+    small,
+    dot
+  } = useStyles(props)
 
-const Badge = withStyles(customStyles)(
-  ({ classes, anchorOrigin, size, ...props }) => {
-    const {
-      badge,
-      colorPrimary,
-      colorSecondary,
-      colorError,
-      dot,
-      top,
-      bottom,
-      left,
-      right,
-      large,
-      medium,
-      small,
-      ...customClasses
-    } = classes
-    const verticalClasses = { top, bottom }
-    const horizontalClasses = { left, right }
-    const sizeClasses = { large, medium, small }
+  const { badge: customBadge, ...customClasses } = classes
 
-    return (
-      <MuiBadge
-        classes={{
+  const verticalClasses = { top, bottom }
+  const horizontalClasses = { left, right }
+  const sizeClasses = { large, medium, small }
+
+  return (
+    <MuiBadge
+      classes={{
+        dot,
+        badge: cx(
+          verticalClasses[anchorOrigin.vertical],
+          horizontalClasses[anchorOrigin.horizontal],
+          sizeClasses[size],
           colorPrimary,
           colorSecondary,
           colorError,
-          dot,
-          badge: cx(
-            badge,
-            verticalClasses[anchorOrigin.vertical],
-            horizontalClasses[anchorOrigin.horizontal],
-            sizeClasses[size]
-          ),
-          ...customClasses
-        }}
-        {...props}
-      />
-    )
-  }
-)
+          customBadge
+        ),
+        ...customClasses
+      }}
+      {...props}
+    />
+  )
+}
 
 Badge.propTypes = {
   anchorOrigin: PropTypes.shape({
@@ -125,13 +114,15 @@ Badge.propTypes = {
   }),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   showZero: PropTypes.bool,
-  variant: PropTypes.oneOf(['standard', 'dot'])
+  variant: PropTypes.oneOf(['standard', 'dot']),
+  withBorder: PropTypes.bool
 }
 
 Badge.defaultProps = {
   anchorOrigin: { horizontal: 'right', vertical: 'top' },
   size: 'medium',
-  showZero: true
+  showZero: true,
+  withBorder: true
 }
 
 export default Badge

package/react/MuiCozyTheme/theme.jsx

@@ -629,6 +629,15 @@ const makeOverrides = theme => ({
         }
       }
     }
+  },
+  MuiBadge: {
+    badge: {
+      padding: 0
+    },
+    dot: {
+      borderRadius: '100%',
+      padding: 0
+    }
   }
 })