cozy-ui 74.7.0 → 75.0.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [75.0.1](https://github.com/cozy/cozy-ui/compare/v75.0.0...v75.0.1) (2022-09-20)
+
+
+### Bug Fixes
+
+* **Field:** Use ref instead of inputRef when using Input comp ([d7317a9](https://github.com/cozy/cozy-ui/commit/d7317a9))
+
+# [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.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ActionMenu/ActionMenuHeader.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+
+import styles from './styles.styl'
+
+export const ActionMenuHeader = ({ children, className }) => {
+  return (
+    <div className={cx(styles['c-actionmenu-header'], className)}>
+      {children}
+    </div>
+  )
+}
+
+ActionMenuHeader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string
+}

package/react/ActionMenu/ActionMenuItem.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+
+import { Media, Bd, Img } from '../Media'
+import { spacingProp } from '../Stack'
+
+import styles from './styles.styl'
+
+export const ActionMenuItem = ({
+  left,
+  children,
+  right,
+  onClick,
+  className,
+  contentSpacing
+}) => {
+  return (
+    <Media
+      className={cx(styles['c-actionmenu-item'], className)}
+      onClick={onClick}
+      align="top"
+    >
+      {left && <Img className="u-mh-1">{left}</Img>}
+      <Bd
+        className={cx(left ? 'u-mr-1' : 'u-mh-1', `u-stack-${contentSpacing}`)}
+      >
+        {children}
+      </Bd>
+      {right && <Img className="u-mr-1">{right}</Img>}
+    </Media>
+  )
+}
+
+ActionMenuItem.propTypes = {
+  left: PropTypes.node,
+  right: PropTypes.node,
+  children: PropTypes.node,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  /** Controls spacing between between children of the ActionMenuItem */
+  contentSpacing: spacingProp
+}
+
+ActionMenuItem.defaultProps = {
+  contentSpacing: 'xs'
+}

package/react/ActionMenu/ActionMenuRadio.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import Radio from '../Radio'
+
+import styles from './styles.styl'
+
+export const ActionMenuRadio = props => {
+  return <Radio {...props} className={styles['c-actionmenu-radio']} />
+}

package/react/ActionMenu/ActionMenuWrapper.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import BottomDrawer from '../BottomDrawer'
+import NotInlineWrapper from './NotInlineWrapper'
+
+const ActionMenuWrapper = ({
+  inline,
+  onClose,
+  anchorElRef,
+  popperOptions,
+  placement,
+  preventOverflow,
+  children
+}) => {
+  if (!inline) {
+    return <BottomDrawer onClose={onClose}>{children}</BottomDrawer>
+  }
+
+  return (
+    <NotInlineWrapper
+      anchorElRef={anchorElRef}
+      popperOptions={popperOptions}
+      placement={placement}
+      preventOverflow={preventOverflow}
+      onClose={onClose}
+    >
+      {children}
+    </NotInlineWrapper>
+  )
+}
+
+export default ActionMenuWrapper

package/react/ActionMenu/NotInlineWrapper.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+import { usePopper } from 'react-popper'
+import ClickAwayListener from '@material-ui/core/ClickAwayListener'
+
+import { getCssVariableValue } from '../utils/color'
+
+const NotInlineWrapper = ({
+  anchorElRef,
+  popperOptions,
+  placement,
+  preventOverflow,
+  onClose,
+  children
+}) => {
+  const [popperElement, setPopperElement] = useState(null)
+  const referenceElement = anchorElRef ? anchorElRef.current : null
+
+  const normalOverflowModifiers = [
+    {
+      name: 'preventOverflow',
+      enabled: false
+    },
+    {
+      name: 'hide',
+      enabled: false
+    }
+  ]
+  const options = popperOptions || {
+    placement,
+    modifiers: preventOverflow ? undefined : normalOverflowModifiers
+  }
+
+  const { styles, attributes } = usePopper(
+    referenceElement,
+    popperElement,
+    options
+  )
+
+  const handleClose = e => {
+    if (referenceElement.contains(e.target)) return
+    onClose(e)
+  }
+  return (
+    <div
+      ref={setPopperElement}
+      style={{
+        ...styles.popper,
+        zIndex: getCssVariableValue('zIndex-popover')
+      }}
+      {...attributes.popper}
+    >
+      <ClickAwayListener onClickAway={handleClose}>
+        {children}
+      </ClickAwayListener>
+    </div>
+  )
+}
+
+export default NotInlineWrapper

package/react/ActionMenu/index.jsx

@@ -1,93 +1,17 @@
-import ClickAwayListener from '@material-ui/core/ClickAwayListener'
-import PropTypes from 'prop-types'
 import React from 'react'
+import PropTypes from 'prop-types'
 import cx from 'classnames'
-import { usePopper } from 'react-popper'
 
-import BottomDrawer from '../BottomDrawer'
-import Radio from '../Radio'
 import createDepreciationLogger from '../helpers/createDepreciationLogger'
-import styles from './styles.styl'
 import useBreakpoints from '../hooks/useBreakpoints'
-import { Media, Bd, Img } from '../Media'
-import { getCssVariableValue } from '../utils/color'
-import { spacingProp } from '../Stack'
+import ActionMenuWrapper from './ActionMenuWrapper'
+import { ActionMenuHeader } from './ActionMenuHeader'
+import { ActionMenuItem } from './ActionMenuItem'
+import { ActionMenuRadio } from './ActionMenuRadio'
 import { useActionMenuEffects } from './ActionMenuEffects'
 
-const ActionMenuWrapper = ({
-  inline,
-  onClose,
-  anchorElRef,
-  popperOptions,
-  placement,
-  preventOverflow,
-  children
-}) => {
-  if (!inline) return <BottomDrawer onClose={onClose}>{children}</BottomDrawer>
-  return (
-    <NotInlineWrapper
-      anchorElRef={anchorElRef}
-      popperOptions={popperOptions}
-      placement={placement}
-      preventOverflow={preventOverflow}
-      onClose={onClose}
-    >
-      {children}
-    </NotInlineWrapper>
-  )
-}
-
-const NotInlineWrapper = ({
-  anchorElRef,
-  popperOptions,
-  placement,
-  preventOverflow,
-  onClose,
-  children
-}) => {
-  const [popperElement, setPopperElement] = React.useState(null)
-  const referenceElement = anchorElRef ? anchorElRef.current : null
-
-  const normalOverflowModifiers = [
-    {
-      name: 'preventOverflow',
-      enabled: false
-    },
-    {
-      name: 'hide',
-      enabled: false
-    }
-  ]
-  const options = popperOptions || {
-    placement,
-    modifiers: preventOverflow ? undefined : normalOverflowModifiers
-  }
-
-  const { styles, attributes } = usePopper(
-    referenceElement,
-    popperElement,
-    options
-  )
+import styles from './styles.styl'
 
-  const handleClose = e => {
-    if (referenceElement.contains(e.target)) return
-    onClose(e)
-  }
-  return (
-    <div
-      ref={setPopperElement}
-      style={{
-        ...styles.popper,
-        zIndex: getCssVariableValue('zIndex-popover')
-      }}
-      {...attributes.popper}
-    >
-      <ClickAwayListener onClickAway={handleClose}>
-        {children}
-      </ClickAwayListener>
-    </div>
-  )
-}
 const logDepecratedPlacement = createDepreciationLogger()
 const logDepecratedOverflow = createDepreciationLogger()
 const logDepecratedContainer = createDepreciationLogger()
@@ -183,61 +107,5 @@ ActionMenu.defaultProps = {
   autoclose: false
 }
 
-const ActionMenuHeader = ({ children, className }) => {
-  return (
-    <div className={cx(styles['c-actionmenu-header'], className)}>
-      {children}
-    </div>
-  )
-}
-
-ActionMenuHeader.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-}
-
-const ActionMenuItem = ({
-  left,
-  children,
-  right,
-  onClick,
-  className,
-  contentSpacing
-}) => {
-  return (
-    <Media
-      className={cx(styles['c-actionmenu-item'], className)}
-      onClick={onClick}
-      align="top"
-    >
-      {left && <Img className="u-mh-1">{left}</Img>}
-      <Bd
-        className={cx(left ? 'u-mr-1' : 'u-mh-1', `u-stack-${contentSpacing}`)}
-      >
-        {children}
-      </Bd>
-      {right && <Img className="u-mr-1">{right}</Img>}
-    </Media>
-  )
-}
-
-const ActionMenuRadio = props => {
-  return <Radio {...props} className={styles['c-actionmenu-radio']} />
-}
-
-ActionMenuItem.propTypes = {
-  left: PropTypes.node,
-  right: PropTypes.node,
-  children: PropTypes.node,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  /** Controls spacing between between children of the ActionMenuItem */
-  contentSpacing: spacingProp
-}
-
-ActionMenuItem.defaultProps = {
-  contentSpacing: 'xs'
-}
-
 export default ActionMenu
 export { ActionMenuHeader, ActionMenuItem, ActionMenuRadio }

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}>