cozy-ui 74.7.0 → 75.0.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [75.0.0](https://github.com/cozy/cozy-ui/compare/v74.7.0...v75.0.0) (2022-09-16)
+
+
+### Bug Fixes
+
+* **DropdownText:** Icon and text was misaligned for `body1` variant ([53cd532](https://github.com/cozy/cozy-ui/commit/53cd532))
+
+
+### Features
+
+* **DropdownButton:** Add ripple effect and some props ([cecf1f0](https://github.com/cozy/cozy-ui/commit/cecf1f0))
+
+
+### BREAKING CHANGES
+
+* **DropdownButton:** Horizontal alignment could be different. You have to use `className="u-mh-half"` if you want the old behavior.
+
 # [74.7.0](https://github.com/cozy/cozy-ui/compare/v74.6.1...v74.7.0) (2022-09-16)
 
 

package/package.json

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

package/react/DropdownButton/Readme.md

@@ -1,29 +1,77 @@
-This component can be used as a trigger to open menus, for example an ActionMenu component.
+This component can be used as a trigger to open menus, for example an ActionMenu component. It uses `DropdownText` so you can use all its props.
 
 ```jsx
-import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
-import Typography from "cozy-ui/transpiled/react/Typography";
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
 
-<div>
-  <div>
+const variants = [
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'subtitle1',
+  'subtitle2',
+  'body1',
+  'body2',
+  'caption'
+]
+
+;
+
+<>
+  <Grid container>
+    <Grid item xs={6}>
+      Default
+      {variants.map((variant, index) => (
+        <div key={index} className='u-mb-1'>
+          <DropdownButton textVariant={variant}>
+            {variant}
+          </DropdownButton>
+        </div>
+      ))}
+    </Grid>
+    <Grid item xs={6}>
+      Disabled
+      {variants.map((variant, index) => (
+        <div key={index} className='u-mb-1'>
+          <DropdownButton textVariant={variant} disabled>
+            {variant}
+          </DropdownButton>
+        </div>
+      ))}
+    </Grid>
+  </Grid>
+  <div style={{ border: '1px dashed var(--borderMainColor)', marginBottom: '1rem' }}>
     <DropdownButton>
-      <Typography variant="h3" component="h1">Cozy</Typography>
+      This is a long text without ellipsis without restrictive container
     </DropdownButton>
   </div>
-  <div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}>
     <DropdownButton>
-      <Typography variant="h4">Cozy</Typography>
+      This is a long text without ellipsis inside a restrictive container
     </DropdownButton>
   </div>
-  <div>
-    <DropdownButton>
-      <Typography variant="h5">Cozy</Typography>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}>
+    <DropdownButton noWrap>
+      This is a long text with ellipsis inside a container
     </DropdownButton>
   </div>
-  <div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '100%', marginBottom: '1rem' }}>
     <DropdownButton>
-      <Typography variant="body1">Cozy</Typography>
+      Text with<br />breaking spaces<br />inside content
+    </DropdownButton>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '100%', marginBottom: '1rem' }}>
+    <DropdownButton fullWidth spaceBetween>
+      Space between text and icon (fullWidth needed)
+    </DropdownButton>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '100%' }}>
+    <DropdownButton fullWidth>
+      Full width but no space between text and icon
     </DropdownButton>
   </div>
-</div>
+</>
 ```

package/react/DropdownButton/index.jsx

@@ -1,26 +1,85 @@
-import React from 'react'
-import cx from 'classnames'
-import styles from './styles.styl'
-import Icon from '../Icon'
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import Button from '@material-ui/core/Button'
 
-import BottomIcon from 'cozy-ui/transpiled/react/Icons/Bottom'
+import { makeStyles } from '../styles'
+import DropdownText from '../DropdownText'
 
-const DropdownButton = React.forwardRef(
-  ({ children, className, ...props }, ref) => (
-    <button
-      role="button"
-      className={cx(styles['c-DropdownButton'], className)}
-      ref={ref}
-      {...props}
-    >
-      {children}
-      <Icon
-        icon={BottomIcon}
-        size="12"
-        className={styles['c-DropdownButton-Icon']}
-      />
-    </button>
-  )
+const useStyles = makeStyles({
+  root: {
+    height: 'auto',
+    width: ({ fullWidth, noWrap }) =>
+      fullWidth || noWrap ? `calc(100% + 16px)` : 'auto',
+    margin: '-8px',
+    padding: '8px'
+  },
+  text: {
+    textTransform: 'none',
+    textAlign: 'left'
+  }
+})
+
+const DropdownButton = forwardRef(
+  (
+    {
+      spaceBetween,
+      textVariant,
+      disabled,
+      fullWidth,
+      noWrap,
+      children,
+      className,
+      dropdownTextProps,
+      ...props
+    },
+    ref
+  ) => {
+    const { root, text } = useStyles({ fullWidth, noWrap })
+
+    return (
+      <Button
+        ref={ref}
+        classes={{ root, text }}
+        disabled={disabled}
+        className={className}
+        {...props}
+      >
+        <DropdownText
+          variant={textVariant}
+          spaceBetween={spaceBetween}
+          disabled={disabled}
+          noWrap={noWrap}
+          {...dropdownTextProps}
+        >
+          {children}
+        </DropdownText>
+      </Button>
+    )
+  }
 )
 
+DropdownButton.defaultProps = {
+  spaceBetween: false,
+  textVariant: 'body1',
+  disabled: false,
+  fullWidth: false,
+  noWrap: false
+}
+
+DropdownButton.propTypes = {
+  /** Weither there is a space between the label and the icon */
+  spaceBetween: PropTypes.bool,
+  /** Like variant from Typography component */
+  textVariant: PropTypes.string,
+  /** Whether the component is disabled */
+  disabled: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  /** Whether using ellipsis on text */
+  noWrap: PropTypes.bool,
+  /** Props assigned to the DropdownText inner component */
+  dropdownTextProps: PropTypes.object,
+  className: PropTypes.string,
+  children: PropTypes.node
+}
+
 export default DropdownButton

package/react/DropdownText/Readme.md

@@ -43,17 +43,30 @@ const variants = [
       ))}
     </Grid>
   </Grid>
-  <DropdownText style={{ border: '1px solid var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}  color="error">
-    This is a long text without ellipsis
-  </DropdownText>
-  <DropdownText noWrap style={{ border: '1px solid var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}>
-    This is a long text with ellipsis
-  </DropdownText>
-  <DropdownText spaceBetween style={{ border: '1px solid var(--borderMainColor)', width: '100%', marginBottom: '1rem' }}>
-    Space between text and icon
-  </DropdownText>
-  <DropdownText style={{ border: '1px solid var(--borderMainColor)' }}>
-    Text with<br />breaking spaces<br />inside content
-  </DropdownText>
+  <div style={{ border: '1px dashed var(--borderMainColor)', marginBottom: '1rem' }}>
+    <DropdownText>
+      This is a long text without ellipsis without restrictive container
+    </DropdownText>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}>
+    <DropdownText>
+      This is a long text without ellipsis inside a restrictive container
+    </DropdownText>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '150px', marginBottom: '1rem' }}>
+    <DropdownText noWrap>
+      This is a long text with ellipsis inside a container
+    </DropdownText>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '100%', marginBottom: '1rem' }}>
+    <DropdownText>
+      Text with<br />breaking spaces<br />inside content
+    </DropdownText>
+  </div>
+  <div style={{ border: '1px dashed var(--borderMainColor)', width: '100%' }}>
+    <DropdownText spaceBetween>
+      Space between text and icon
+    </DropdownText>
+  </div>
 </>
 ```

package/react/DropdownText/index.jsx

@@ -21,6 +21,7 @@ const useStyles = makeStyles(theme => ({
   endIcon: {
     display: 'flex',
     marginLeft: '5px',
+    marginTop: ({ variant }) => (variant === 'body1' ? '3px' : undefined),
     color: ({ disabled }) =>
       theme.palette.text[disabled ? 'disabled' : 'primary']
   }
@@ -56,7 +57,7 @@ const DropdownText = forwardRef(
     },
     ref
   ) => {
-    const styles = useStyles({ spaceBetween, disabled, color })
+    const styles = useStyles({ spaceBetween, disabled, color, variant })
 
     return (
       <div ref={ref} className={styles.container} {...props}>