cozy-ui 69.0.0 → 69.3.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [69.3.0](https://github.com/cozy/cozy-ui/compare/v69.2.0...v69.3.0) (2022-07-07)
+
+
+### Bug Fixes
+
+* **Chips:** Using classname doesn't break style anymore ([3272df1](https://github.com/cozy/cozy-ui/commit/3272df1))
+
+
+### Features
+
+* **Chips:** Add ref forwarding ([8d7513e](https://github.com/cozy/cozy-ui/commit/8d7513e))
+
+# [69.2.0](https://github.com/cozy/cozy-ui/compare/v69.1.0...v69.2.0) (2022-07-07)
+
+
+### Features
+
+* **BottomDrawer:** Add possibility to use it with long content ([59296f0](https://github.com/cozy/cozy-ui/commit/59296f0))
+* **Overlay:** Add ref propagation ([6a0b3f0](https://github.com/cozy/cozy-ui/commit/6a0b3f0))
+
+# [69.1.0](https://github.com/cozy/cozy-ui/compare/v69.0.0...v69.1.0) (2022-07-05)
+
+
+### Features
+
+* **Icon:** Add new tag icon ([514402f](https://github.com/cozy/cozy-ui/commit/514402f))
+
 # [69.0.0](https://github.com/cozy/cozy-ui/compare/v68.9.1...v69.0.0) (2022-07-01)
 
 

package/assets/icons/ui/tag.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/><path clip-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v5.89a2 2 0 0 0 .586 1.415l5.98 5.973a2.462 2.462 0 0 0 3.481 0l5.236-5.237.002-.002a2.461 2.461 0 0 0 0-3.47L9.303.587A2 2 0 0 0 7.888 0H2Zm0 2h5.888l5.978 5.98a.461.461 0 0 1 0 .649l-5.234 5.236a.46.46 0 0 1-.652 0L2 7.89V2Z"/></svg>

package/package.json

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

package/react/BottomDrawer/Readme.md

@@ -1,25 +1,34 @@
 Displays content coming up from the bottom of the screen.
 
 ```jsx
-import BottomDrawer from 'cozy-ui/transpiled/react/BottomDrawer';
-import Card from 'cozy-ui/transpiled/react/Card';
-import Button from 'cozy-ui/transpiled/react/Button';
-import Typography from "cozy-ui/transpiled/react/Typography";
+import BottomDrawer from 'cozy-ui/transpiled/react/BottomDrawer'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import Button from 'cozy-ui/transpiled/react/Buttons'
+import Typography from "cozy-ui/transpiled/react/Typography"
+import Variants from 'cozy-ui/docs/components/Variants'
 
-initialState = { isDrawerDisplayed: isTesting() };
+const initialState = { isDrawerDisplayed: isTesting() }
+const initialVariants = [{ longText: false }]
 
 const showDrawer = () => setState({ isDrawerDisplayed: true });
-const hideDrawer = () => setState({ isDrawerDisplayed: false });
+const hideDrawer = () => setState({ isDrawerDisplayed: false })
 
-<div>
-  <Button onClick={showDrawer}>Open drawer</Button>
-  {state.isDrawerDisplayed &&
-    <BottomDrawer onClose={hideDrawer}>
-      <Card className="u-bg-white">
-        <Typography className="u-mb-1" variant="h5">This is a card in a drawer</Typography>
-        <Typography className="u-mb-1" variant="body1">This is some card content. Content can be small or huge.</Typography>
-        <Button className="u-ml-0" label="Demo button" />
-      </Card>
-  </BottomDrawer>}
-</div>
+;
+
+<Variants initialVariants={initialVariants}>
+  {variant => (
+    <>
+      <Button variant="ghost" size="small" onClick={showDrawer} label="Open drawer" />
+
+      {state.isDrawerDisplayed &&
+        <BottomDrawer onClose={hideDrawer}>
+          <Paper className="u-p-1" style={{ borderRadius: '1rem 1rem 0 0' }}>
+            <Typography variant="h5" paragraph>This is a paper in a drawer</Typography>
+            <Typography paragraph>{variant.longText ? content.ada.long : content.ada.short}</Typography>
+            <Button label="Demo button" onClick={() => console.info('huhu')} />
+          </Paper>
+      </BottomDrawer>}
+    </>
+  )}
+</Variants>
 ```

package/react/BottomDrawer/index.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, createRef } from 'react'
 import PropTypes from 'prop-types'
 import Hammer from 'hammerjs'
 import once from 'lodash/once'
@@ -13,6 +13,8 @@ class BottomDrawer extends Component {
   constructor(props) {
     super(props)
     this.state = { closing: false }
+    this.menuRef = createRef()
+    this.wrapperRef = createRef()
   }
 
   componentDidMount() {
@@ -22,7 +24,7 @@ class BottomDrawer extends Component {
 
   componentWillUnmount() {
     this.gesturesHandler.destroy()
-    this.menuNode.current.style = '' // Drops the node style in case it gets recycled, see https://github.com/cozy/cozy-ui/pull/602
+    this.menuRef.current.style = '' // Drops the node style in case it gets recycled, see https://github.com/cozy/cozy-ui/pull/602
   }
 
   initialAppear() {
@@ -35,21 +37,21 @@ class BottomDrawer extends Component {
   }
 
   turnTransitionsOn() {
-    this.menuNode.current.classList.add(styles['with-transition'])
+    this.menuRef.current.classList.add(styles['with-transition'])
   }
 
   turnTransitionsOff() {
-    this.menuNode.current.classList.remove(styles['with-transition'])
+    this.menuRef.current.classList.remove(styles['with-transition'])
   }
 
   attachEvents() {
-    this.gesturesHandler = new Hammer.Manager(this.wrapperNode.current, {
+    this.gesturesHandler = new Hammer.Manager(this.wrapperRef.current, {
       recognizers: [[Hammer.Pan, { direction: Hammer.DIRECTION_VERTICAL }]]
     })
 
     // to be completely accurate, `maximumGestureDelta` should be the difference between the top of the menu and the
     // bottom of the page; but using the height is much easier to compute and accurate enough.
-    const maximumGestureDistance = this.menuNode.current.getBoundingClientRect()
+    const maximumGestureDistance = this.menuRef.current.getBoundingClientRect()
       .height
     // between 0 and 1, how far down the gesture must be to be considered complete upon release
     const minimumCloseDistance = 0.6
@@ -97,47 +99,47 @@ class BottomDrawer extends Component {
   applyTransformation(progress) {
     // constrain between 0 and 1.1 (go a bit further than 1 to be hidden completely)
     const progressToApply = Math.min(1.1, Math.max(0, progress))
-    this.menuNode.current.style.transform =
+    this.menuRef.current.style.transform =
       'translateY(' + progressToApply * 100 + '%)'
   }
 
   animateClose = () => {
+    const { current: menuNode } = this.menuRef
     this.setState({ closing: true })
 
     // we need to transition the menu to the bottom before dismissing it
-    const close = once(() => {
-      this.menuNode.current &&
-        this.menuNode.current.removeEventListener('transitionend', close)
-      this.close()
-    })
+    const close = menuNode =>
+      once(() => {
+        menuNode?.removeEventListener('transitionend', close(menuNode))
+        this.close()
+      })
 
-    this.menuNode.current &&
-      this.menuNode.current.addEventListener('transitionend', close, false)
+    menuNode?.addEventListener('transitionend', close(menuNode), false)
     // in case transitionend is not called, for example if the element is removed
-    setTimeout(close, TRANSITION_DURATION)
+    setTimeout(close(menuNode), TRANSITION_DURATION)
 
     this.applyTransformation(1.1)
   }
 
   close = () => {
+    const { onClose } = this.props
     this.setState({ closing: true })
-    this.props.onClose && this.props.onClose()
+    onClose && onClose()
   }
 
   render() {
     const { children } = this.props
     const { closing } = this.state
-    this.menuNode = React.createRef()
-    this.wrapperNode = React.createRef()
+
     return (
       <RemoveScroll>
-        <div ref={this.wrapperNode}>
+        <div ref={this.wrapperRef}>
           <Overlay
             style={{ opacity: closing ? 0 : 1 }}
             onClick={this.animateClose}
             onEscape={this.animateClose}
           >
-            <div ref={this.menuNode} className={styles['BottomDrawer-content']}>
+            <div ref={this.menuRef} className={styles['BottomDrawer-content']}>
               {children}
             </div>
           </Overlay>

package/react/BottomDrawer/styles.styl

@@ -8,11 +8,12 @@
     @extends $transition-transform-ease-out
 
 .BottomDrawer-content
-    z-index        $drawer-index
-    position       fixed
-    bottom         0
-    left           0
-    right          0
-    width          100%
-    margin         0
-
+    z-index $drawer-index
+    position fixed
+    bottom 0
+    left 0
+    right 0
+    width 100%
+    margin 0
+    max-height 100vh
+    overflow-y auto

package/react/Chips/Readme.md

@@ -27,14 +27,14 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
         <Grid item xs={12} sm={6} className="u-mb-1" key={JSON.stringify(column)}>
           <Stack spacing="s">
             <Typography>{Object.values(column)[0]}</Typography>
-            <p>
+            <div>
               <Chip
                 label="Simple chip"
                 disabled={Object.values(column)[1]}
                 variant={Object.keys(variant).find(key => variant[key])}
               />
-            </p>
-            <p>
+            </div>
+            <div>
               <Chip
                 icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
                 label="Clickable chip"
@@ -42,16 +42,16 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
                 disabled={Object.values(column)[1]}
                 variant={Object.keys(variant).find(key => variant[key])}
               />
-            </p>
-            <p>
+            </div>
+            <div>
               <Chip
                 avatar={<Avatar textId="Ada Lovelace" text="AL" size='xsmall' />}
                 label="Avatar chip"
                 disabled={Object.values(column)[1]}
                 variant={Object.keys(variant).find(key => variant[key])}
               />
-            </p>
-            <p>
+            </div>
+            <div>
               <Chip
                 label="Deletable chip"
                 clickable
@@ -59,8 +59,8 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
                 disabled={Object.values(column)[1]}
                 variant={Object.keys(variant).find(key => variant[key])}
               />
-            </p>
-            <p>
+            </div>
+            <div>
               <Chip
                 icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
                 label="Deletable chip with icon"
@@ -69,8 +69,8 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
                 disabled={Object.values(column)[1]}
                 variant={Object.keys(variant).find(key => variant[key])}
               />
-            </p>
-            <p>
+            </div>
+            <div>
               <Chip
                 icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
                 label="1 invoice"
@@ -81,14 +81,25 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
                 disabled={Object.values(column)[1]}
                 variant={Object.keys(variant).find(key => variant[key])}
               />
-            </p>
-            <p>
+            </div>
+            <div>
+              <Chip
+                className="u-ml-1"
+                icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
+                label="Deletable chip with icon and class"
+                clickable
+                onDelete={() => alert('You clicked on delete icon')}
+                disabled={Object.values(column)[1]}
+                variant={Object.keys(variant).find(key => variant[key])}
+              />
+            </div>
+            <div>
               <Chip
                 icon={<Icon icon={RightIcon} />}
                 disabled={Object.values(column)[1]}
                 variant={Object.keys(variant).find(key => variant[key])}
               />
-            </p>
+            </div>
           </Stack>
         </Grid>
       )}
@@ -124,7 +135,7 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
         <Grid item xs={12} sm={6} md={3} className="u-mb-1" key={JSON.stringify(color)}>
           <Stack spacing="s">
             <Typography>{color}</Typography>
-            <p>
+            <div>
               <Chip
                 icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
                 label="1 invoice"
@@ -135,8 +146,8 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
                 color={color}
                 variant={Object.keys(variant).find(key => variant[key])}
               />
-            </p>
-            <p>
+            </div>
+            <div>
               <Chip
                 icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
                 label="1 invoice"
@@ -148,7 +159,7 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
                 disabled
                 variant={Object.keys(variant).find(key => variant[key])}
               />
-            </p>
+            </div>
           </Stack>
         </Grid>
       )}

package/react/Chips/index.jsx

@@ -1,28 +1,35 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
 import MuiChip from '@material-ui/core/Chip'
 
-const Chips = ({ label, variant = 'default', color = 'primary', ...props }) => {
-  return (
-    <MuiChip
-      className={cx({
-        noLabel: !label,
-        ghost: variant === 'ghost',
-        [`customColor-${color}`]: color
-      })}
-      label={label}
-      variant={variant === 'active' ? 'default' : 'outlined'}
-      color={variant === 'active' ? 'primary' : 'default'}
-      {...props}
-    />
-  )
-}
+const Chips = forwardRef(
+  (
+    { label, variant = 'default', color = 'primary', className, ...props },
+    ref
+  ) => {
+    return (
+      <MuiChip
+        ref={ref}
+        className={cx(className, {
+          noLabel: !label,
+          ghost: variant === 'ghost',
+          [`customColor-${color}`]: color
+        })}
+        label={label}
+        variant={variant === 'active' ? 'default' : 'outlined'}
+        color={variant === 'active' ? 'primary' : 'default'}
+        {...props}
+      />
+    )
+  }
+)
 
 Chips.propTypes = {
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   variant: PropTypes.oneOf(['default', 'active', 'ghost']),
-  color: PropTypes.oneOf(['primary', 'success', 'error', 'warning', 'info'])
+  color: PropTypes.oneOf(['primary', 'success', 'error', 'warning', 'info']),
+  className: PropTypes.string
 }
 
 export default Chips

package/react/Icon/Readme.md

@@ -214,6 +214,7 @@ import Stats from 'cozy-ui/transpiled/react/Icons/Stats'
 import Subway from 'cozy-ui/transpiled/react/Icons/Subway'
 import Sync from 'cozy-ui/transpiled/react/Icons/Sync'
 import SyncCozy from 'cozy-ui/transpiled/react/Icons/SyncCozy'
+import Tag from 'cozy-ui/transpiled/react/Icons/Tag'
 import Target from 'cozy-ui/transpiled/react/Icons/Target'
 import Team from 'cozy-ui/transpiled/react/Icons/Team'
 import Telephone from 'cozy-ui/transpiled/react/Icons/Telephone'
@@ -426,6 +427,7 @@ const icons = [
   Subway,
   Sync,
   SyncCozy,
+  Tag,
   Target,
   Team,
   Telephone,
@@ -704,7 +706,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online','openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','attachment','attention','bank','banking-add','banking','bell','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','categories','certified','check-circle','check-list','check-square','check','checkbox','circle-filled','clock','cloud-happy','cloud','collect','comment','company','compass','connector','contract','contrast','cozy-laugh','cozy-text','credit-card-add','credit-card','credit','crop','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','debit','devices','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','email-notification','email','eu','euro','exchange','eye-closed','eye','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder','forbidden','from-user','gear','globe','graph-circle','grid','group-list','groups','hand','heart','help','history','home','hourglass','image','info-outlined','info','key','laptop','left','lightbulb','link-out','link','list','location','lock','logout','magic-trick','magnet','magnifier','merge','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','offline','online','openwith','palette','paper','paperplane','password','pen','people','percent-circle','percent','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','plus-small','plus','previous','printer','qualify','radio-checked','radio-unchecked','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','select-all','setting','share-circle','share','shield','shop','sound','spinner','stack','star','stats','subway','sync-cozy','sync','tag','target','team','telephone','to-the-cloud','top','train','trash','trophy','unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','wrench-circle']
 ;
 <div style={{ fontSize: '2rem', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)' }}>
   <Sprite />

package/react/Icon/icons-sprite.js

@@ -526,7 +526,7 @@ module.exports = `<svg><defs>
             <path d="M8 2c2.21 0 4 1.79 4 4 2.21 0 4 1.79 4 4s-1.79 4-4 4H4c-2.21 0-4-1.79-4-4s1.79-4 4-4c0-2.21 1.79-4 4-4zM4.6 9.014c-.12-.025-.242-.004-.345.055l-.038.024c-.042.029-.08.063-.112.104l-.012.014c-.034.047-.059.1-.074.16l-.006.04C4.008 9.441 4 9.469 4 9.5v2c0 .276.224.5.5.5.237 0 .426-.168.478-.39C5.728 12.459 6.818 13 8 13c1.547 0 2.956-.899 3.632-2.268.122-.247.02-.547-.228-.67-.248-.121-.547-.02-.67.228C10.227 11.322 9.162 12 8 12c-.74 0-1.436-.286-1.976-.754.135-.007.267-.064.36-.176.177-.212.148-.527-.064-.704l-1.5-1.25c-.005-.005-.012-.006-.017-.011l-.04-.024c-.04-.025-.08-.045-.124-.057zM8 5c-1.57 0-2.992.906-3.653 2.291-.119.25-.013.548.236.667.25.118.548.013.667-.236C5.746 6.682 6.817 6 8 6c.769 0 1.477.287 2.017.758-.149-.005-.298.048-.401.172-.177.212-.148.527.064.704l1.5 1.25.011.007c.01.008.023.013.034.02.04.028.083.05.127.063l.04.01c.054.012.11.017.163.01.005 0 .009.002.013.001.063-.01.118-.031.17-.059.014-.007.025-.016.038-.024.04-.027.076-.059.107-.097l.02-.021c.034-.047.06-.1.077-.158.003-.01.002-.02.004-.03.008-.034.016-.068.016-.106v-2c0-.276-.224-.5-.5-.5-.226 0-.41.152-.471.357C10.284 5.523 9.196 5 7.999 5z"/>
         </g>
     </g>
-</symbol><symbol id="sync" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M16 7.2V3c0-.6-.4-1-1-1-.5 0-.8.3-.9.7A8.09 8.09 0 0 0 8 0C4.9 0 2 1.8.7 4.6c-.2.5 0 1.1.5 1.3.5.2 1.1 0 1.3-.5C3.5 3.4 5.6 2 8 2c1.5 0 3 .6 4 1.5-.3 0-.6.1-.8.3-.4.4-.3 1.1.1 1.4l3 2.5h.1c.1.1.2.1.3.1h.4c.1 0 .2-.1.3-.1h.1c.1-.1.2-.1.2-.2.2 0 .2-.1.3-.3 0 .1 0 0 0 0m-1.2 2.9c-.5-.2-1.1 0-1.3.5A6 6 0 0 1 8 14c-1.5 0-2.9-.6-4-1.5.3 0 .5-.1.7-.4.4-.4.3-1.1-.1-1.4l-3-2.5h-.1L1.3 8h-.1c-.2 0-.5 0-.7.1H.4c-.1.1-.1.2-.2.3-.1.1-.1.2-.2.3V13c0 .6.4 1 1 1 .5 0 .9-.3 1-.8C3.5 14.9 5.6 16 8 16c3.1 0 5.9-1.8 7.3-4.5.2-.5 0-1.1-.5-1.4"/></symbol><symbol id="target" viewBox="0 0 16 16">
+</symbol><symbol id="sync" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M16 7.2V3c0-.6-.4-1-1-1-.5 0-.8.3-.9.7A8.09 8.09 0 0 0 8 0C4.9 0 2 1.8.7 4.6c-.2.5 0 1.1.5 1.3.5.2 1.1 0 1.3-.5C3.5 3.4 5.6 2 8 2c1.5 0 3 .6 4 1.5-.3 0-.6.1-.8.3-.4.4-.3 1.1.1 1.4l3 2.5h.1c.1.1.2.1.3.1h.4c.1 0 .2-.1.3-.1h.1c.1-.1.2-.1.2-.2.2 0 .2-.1.3-.3 0 .1 0 0 0 0m-1.2 2.9c-.5-.2-1.1 0-1.3.5A6 6 0 0 1 8 14c-1.5 0-2.9-.6-4-1.5.3 0 .5-.1.7-.4.4-.4.3-1.1-.1-1.4l-3-2.5h-.1L1.3 8h-.1c-.2 0-.5 0-.7.1H.4c-.1.1-.1.2-.2.3-.1.1-.1.2-.2.3V13c0 .6.4 1 1 1 .5 0 .9-.3 1-.8C3.5 14.9 5.6 16 8 16c3.1 0 5.9-1.8 7.3-4.5.2-.5 0-1.1-.5-1.4"/></symbol><symbol id="tag" viewBox="0 0 16 16"><path d="M5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/><path clip-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v5.89a2 2 0 0 0 .586 1.415l5.98 5.973a2.462 2.462 0 0 0 3.481 0l5.236-5.237.002-.002a2.461 2.461 0 0 0 0-3.47L9.303.587A2 2 0 0 0 7.888 0H2Zm0 2h5.888l5.978 5.98a.461.461 0 0 1 0 .649l-5.234 5.236a.46.46 0 0 1-.652 0L2 7.89V2Z"/></symbol><symbol id="target" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M9 12.899V12a1 1 0 0 0-2 0v.899A5.016 5.016 0 0 1 3.101 9H4a1 1 0 0 0 0-2h-.899A5.016 5.016 0 0 1 7 3.101V4a1 1 0 0 0 2 0v-.899A5.016 5.016 0 0 1 12.899 7H12a1 1 0 0 0 0 2h.899A5.016 5.016 0 0 1 9 12.899zM16 7h-1.08A7.005 7.005 0 0 0 9 1.08V1a1 1 0 0 0-2 0v.08A7.005 7.005 0 0 0 1.08 7H1a1 1 0 0 0 0 2h.08A7.004 7.004 0 0 0 7 14.92V15a1 1 0 0 0 2 0v-.08A7.004 7.004 0 0 0 14.92 9H16V7z"/>
 </symbol><symbol id="team" viewBox="0 0 16 16">
     <path fill-rule="evenodd" d="M11.145 7.75C10.263 7.285 9.647 6.23 9.647 5c0-1.657 1.12-3 2.5-3 1.381 0 2.5 1.343 2.5 3 0 1.231-.618 2.29-1.502 2.752V9l1.105.553c.49.245 1.095.848 1.342 1.342l.106.21c.245.49 0 .895-.55.895H9.142c-.544 0-.797-.4-.55-.895l.106-.21c.245-.49.848-1.095 1.342-1.342L11.145 9V7.75zM4.647 10.8c-1.165-.48-2-1.776-2-3.3 0-1.933 1.343-3.5 3-3.5s3 1.567 3 3.5c0 1.524-.835 2.82-2 3.3V12l2.051.684c.532.177 1.15.717 1.397 1.21l.105.211c.245.49.002.895-.548.895h-8.01c-.539 0-.794-.4-.547-.895l.105-.21c.245-.49.872-1.037 1.397-1.211L4.647 12v-1.2z"/>

package/react/Icons/Tag.jsx

@@ -0,0 +1,16 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/tag.svg` to regenerate;
+import React from 'react'
+
+function SvgTag(props) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" {...props}>
+      <path d="M5 6a1 1 0 100-2 1 1 0 000 2z" />
+      <path
+        clipRule="evenodd"
+        d="M2 0a2 2 0 00-2 2v5.89a2 2 0 00.586 1.415l5.98 5.973a2.462 2.462 0 003.481 0l5.236-5.237.002-.002a2.461 2.461 0 000-3.47L9.303.587A2 2 0 007.888 0H2zm0 2h5.888l5.978 5.98a.461.461 0 010 .649l-5.234 5.236a.46.46 0 01-.652 0L2 7.89V2z"
+      />
+    </svg>
+  )
+}
+
+export default SvgTag

package/react/Overlay/index.jsx

@@ -7,7 +7,7 @@ import { RemoveScroll } from 'react-remove-scroll'
 
 const ESC_KEYCODE = 27
 
-const nonDOMProps = ['onEscape', 'children', 'className']
+const nonDOMProps = ['onEscape', 'children', 'className', 'innerRef']
 
 const bodyTallerThanWindow = () => {
   return document.body.getBoundingClientRect().height > window.innerHeight
@@ -45,7 +45,7 @@ class Overlay extends Component {
   }
 
   render() {
-    const { children, className } = this.props
+    const { children, className, innerRef } = this.props
     const domProps = omit(this.props, nonDOMProps)
     // We use Overlay when opening an ActionMenu.
     // We don't want to block the scroll on Desktop if the ActionMenu
@@ -53,10 +53,12 @@ class Overlay extends Component {
     // @todo Overlay should not RemoveScroll by itself. It should
     // be done by lower component (like ActionMenu / Dialog / Modal...)
     const Wrapper = bodyTallerThanWindow() ? React.Fragment : RemoveScroll
+
     return (
       <div
-        onClick={this.handleClick}
+        ref={innerRef}
         className={cx(styles['c-overlay'], className)}
+        onClick={this.handleClick}
         {...domProps}
       >
         <Wrapper>{children}</Wrapper>
@@ -71,4 +73,6 @@ Overlay.propTypes = {
   onEscape: PropTypes.func
 }
 
-export default Overlay
+export default React.forwardRef((props, ref) => (
+  <Overlay innerRef={ref} {...props} />
+))