feat: Add ExtendableFab

react/Fab/ExtendableFab.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import Icon from '../Icon'
+import useScroll from '../hooks/useScroll'
+import Fab from '.'
+
+const ExtendableFab = ({
+  label,
+  icon,
+  follow,
+  topLimit = 50,
+  scrollOptions,
+  ...rest
+}) => {
+  const { scrollTop } = useScroll(follow, scrollOptions)
+  const isBelowTopLimit = scrollTop < topLimit
+
+  return (
+    <Fab
+      aria-label={label}
+      variant={isBelowTopLimit ? 'extended' : 'circular'}
+      {...rest}
+    >
+      <Icon icon={icon} {...(isBelowTopLimit && { className: 'u-mr-half' })} />
+      {isBelowTopLimit && label}
+    </Fab>
+  )
+}
+
+export default ExtendableFab

react/Fab/Readme.md

@@ -77,3 +77,41 @@ const props = [{ color: 'primary' }, { color: 'secondary' }, { color: 'inherit',
   )}
 </Grid>
 ```
+
+### ExtendableFab
+
+To increase discoverability, the FAB can be extended at first and then changed to standard when scrolling. The ExtendableFab will only revert to extended when the user has returned on to the top of the page.
+
+```jsx
+import { ExtendableFab } from 'cozy-ui/transpiled/react/Fab'
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import {useRef} from 'react'
+
+const Demo = ({ onClick, className }) => {
+  const box = useRef(null)
+
+  return (
+    <div className="u-h-4 u-ov-scroll" style={{border: '2px dotted red'}} ref={box}>
+      <ExtendableFab
+        label="Add"
+        follow={box}
+        color="primary"
+        className="u-mb-1"
+        icon={PlusIcon}
+        style={{position: 'sticky', top: 16, left: 16}}
+      />
+      <div className="u-p-1">Scroll Horizontally</div>
+      <div className="u-h-8"></div>
+    </div>
+  )
+};
+
+<DemoProvider>
+  <Demo />
+</DemoProvider>
+```
+
+**Note:**
+
+The element to follow for scrolling changes according to the screen size in general in Cozy applications. On mobile, the window should be targeted otherwhise it depends on the dom element that has a scroll overflow.

react/Fab/index.js

@@ -1,3 +1,4 @@
 import Fab from '@material-ui/core/Fab'
 
 export default Fab
+export { default as ExtendableFab } from './ExtendableFab'

react/index.js

@@ -97,7 +97,7 @@ export { default as UploadQueue } from './UploadQueue'
 export { default as CozyTheme } from './CozyTheme'
 export { default as Paper } from './Paper'
 export { default as ProgressionBanner } from './ProgressionBanner'
-export { default as Fab } from './Fab'
+export { default as Fab, ExtendableFab } from './Fab'
 export { default as SquareAppIcon } from './SquareAppIcon'
 export { default as FileImageLoader } from './FileImageLoader'
 export { default as Radios } from './Radios'