cozy-ui 82.11.0 → 82.12.0

package/.nvmrc

@@ -1 +1 @@
-16
+16.13.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [82.12.0](https://github.com/cozy/cozy-ui/compare/v82.11.0...v82.12.0) (2023-04-06)
+
+
+### Features
+
+* Update Fab component ([cd4f0a6](https://github.com/cozy/cozy-ui/commit/cd4f0a6))
+
 # [82.11.0](https://github.com/cozy/cozy-ui/compare/v82.10.0...v82.11.0) (2023-04-05)
 
 

package/package.json

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

package/react/Fab/Readme.md

@@ -1,18 +1,79 @@
 See [Material UI documentation](https://material-ui.com/components/floating-action-button/) to learn more about Floating Action Button (Fab).
 
+### Default
+
+```jsx
+import Fab from 'cozy-ui/transpiled/react/Fab'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Variants from 'cozy-ui/docs/components/Variants'
+
+const props = [{ color: 'primary' }, { color: 'secondary' }, { color: 'inherit', default: true }]
+const initialVariants = [{ small: false, medium: false, large: true }]
+
+;
+<Variants initialVariants={initialVariants} radio screenshotAllVariants>
+  {variant => (
+    <Grid container>
+      {props.map(prop =>
+        <Grid item xs={12} sm={4} className="u-mb-1" key={Object.values(prop)[0]}>
+          <Stack spacing="s">
+            <div className="u-mb-half u-mt-1">{prop.color} {prop.default && '(default)'}</div>
+            <Fab aria-label="add" {...prop} size={Object.keys(variant).find(key => variant[key])}>
+              <Icon icon={PlusIcon} />
+            </Fab>
+          </Stack>
+        </Grid>
+      )}
+      {props.map(prop =>
+        <Grid item xs={12} sm={4} className="u-mb-1" key={Object.values(prop)[0]}>
+          <Stack spacing="s">
+            <Fab aria-label="add" {...prop} variant="extended" size={Object.keys(variant).find(key => variant[key])}>
+              <Icon icon={PlusIcon} className='u-mr-half' />
+              Extended
+            </Fab>
+          </Stack>
+        </Grid>
+      )}
+    </Grid>
+  )}
+</Variants>
+```
+
+### Disabled colors
+
 ```jsx
 import Fab from 'cozy-ui/transpiled/react/Fab'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
-import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
+import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+
+const props = [{ color: 'primary' }, { color: 'secondary' }, { color: 'inherit', default: true }]
 
 ;
-<>
-  <Fab color="primary" aria-label="add">
-    <Icon icon={PlusIcon} />
-  </Fab>
-  <Fab color="secondary" aria-label="edit">
-    <Icon icon={RenameIcon} />
-  </Fab>
-</>
+<Grid container>
+  {props.map(prop =>
+    <Grid item xs={12} sm={4} className="u-mb-1" key={Object.values(prop)[0]}>
+      <Stack spacing="s">
+        <div className="u-mb-half u-mt-1">{prop.color} {prop.default && '(default)'}</div>
+        <Fab aria-label="add" {...prop} disabled>
+          <Icon icon={PlusIcon} />
+        </Fab>
+      </Stack>
+    </Grid>
+  )}
+  {props.map(prop =>
+    <Grid item xs={12} sm={4} className="u-mb-1" key={Object.values(prop)[0]}>
+      <Stack spacing="s">
+        <Fab aria-label="add" {...prop} disabled variant="extended">
+          <Icon icon={PlusIcon} className='u-mr-half' />
+          Extended
+        </Fab>
+      </Stack>
+  </Grid>
+  )}
+</Grid>
 ```

package/react/MuiCozyTheme/makeOverrides.js

@@ -966,6 +966,36 @@ const makeOverrides = theme => ({
       padding: '4px 12px',
       backgroundColor: theme.palette.grey[600]
     }
+  },
+  MuiFab: {
+    root: {
+      color: theme.palette.text.primary,
+      backgroundColor: theme.palette.background.paper,
+      '&:hover': {
+        backgroundColor: theme.palette.action.hover,
+        '@media (hover: none)': {
+          backgroundColor: theme.palette.background.paper
+        }
+      }
+    },
+    extended: {
+      borderRadius: 56 / 2,
+      height: 56,
+      minWidth: 56,
+      padding: '0 20px',
+      '&$sizeSmall': {
+        borderRadius: 40 / 2,
+        height: 40,
+        minWidth: 40,
+        padding: '0 12px'
+      },
+      '&$sizeMedium': {
+        borderRadius: 48 / 2,
+        height: 48,
+        minWidth: 48,
+        padding: '0 16px'
+      }
+    }
   }
 })
 

package/transpiled/react/MuiCozyTheme/makeOverrides.js

@@ -884,6 +884,36 @@ var makeOverrides = function makeOverrides(theme) {
         padding: '4px 12px',
         backgroundColor: theme.palette.grey[600]
       }
+    },
+    MuiFab: {
+      root: {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.background.paper,
+        '&:hover': {
+          backgroundColor: theme.palette.action.hover,
+          '@media (hover: none)': {
+            backgroundColor: theme.palette.background.paper
+          }
+        }
+      },
+      extended: {
+        borderRadius: 56 / 2,
+        height: 56,
+        minWidth: 56,
+        padding: '0 20px',
+        '&$sizeSmall': {
+          borderRadius: 40 / 2,
+          height: 40,
+          minWidth: 40,
+          padding: '0 12px'
+        },
+        '&$sizeMedium': {
+          borderRadius: 48 / 2,
+          height: 48,
+          minWidth: 48,
+          padding: '0 16px'
+        }
+      }
     }
   };
 };