Merge pull request #1724 from cozy/breadcrumbs

cozy · Jan 29, 2021 · 41ec106 · 41ec106
2 parents 031332d + c48e2f6
commit 41ec106
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 52 deletions.
diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
@@ -20,6 +20,7 @@ module.exports = {
         '../react/InfosBadge/index.jsx',
         '../react/GhostFileBadge/index.jsx',
         '../react/Button/index.jsx',
+        '../react/MuiCozyTheme/Buttons',
         '../react/ButtonAction/index.jsx',
         '../react/Card/index.jsx',
         '../react/Chip/index.jsx',
@@ -30,7 +31,6 @@ module.exports = {
         '../react/IconStack/index.jsx',
         '../react/Paper/index.js',
         '../react/PercentageBar/index.jsx',
-        '../react/PercentageLine/index.jsx',
         '../react/Progress',
         '../react/ProgressionBanner',
         '../react/Spinner/index.jsx',
@@ -43,6 +43,8 @@ module.exports = {
         '../react/Checkbox/index.jsx',
         '../react/DateMonthPicker/index.jsx',
         '../react/Field/index.jsx',
+        '../react/MuiCozyTheme/TextField',
+        '../react/Labs/CollectionField',
         '../react/FileInput/index.jsx',
         '../react/Input/index.jsx',
         '../react/InputGroup/index.jsx',
@@ -60,6 +62,7 @@ module.exports = {
       components: () => [
         '../react/Circle/index.jsx',
         '../react/MuiCozyTheme/Divider/index.jsx',
+        '../react/MuiCozyTheme/ExpansionPanel',
         '../react/Hero/index.jsx',
         '../react/hooks/useBreakpoints/index.jsx',
         '../react/Layout/Layout.jsx',
@@ -82,14 +85,14 @@ module.exports = {
         '../react/Figure/Figure.jsx',
         '../react/Figure/FigureBlock.jsx',
         '../react/Filename/index.jsx',
+        '../react/MuiCozyTheme/Grid',
         '../react/Infos/index.jsx',
         '../react/InfosCarrousel/index.jsx',
         '../react/LoadMore/index.jsx',
         '../react/Media/Media.jsx',
         '../react/MidEllipsis/index.jsx',
         '../react/CozyDialogs',
         '../react/Dialog',
-        '../react/OrderedList/index.jsx',
         '../react/Table/index.jsx',
         '../react/Typography/index.jsx',
         '../react/Tooltip/index.jsx',
@@ -107,15 +110,19 @@ module.exports = {
     },
     {
       name: 'List',
-      components: () => ['../react/ListItemText/index.jsx']
+      components: () => [
+        '../react/MuiCozyTheme/List',
+        '../react/ListItemText/index.jsx',
+        '../react/OrderedList/index.jsx'
+      ]
     },
     {
       name: 'Navigation',
       components: () => [
         '../react/ActionMenu/index.jsx',
+        '../react/MuiCozyTheme/Menus',
         '../react/AppLinker/index.jsx',
         '../react/Breadcrumbs/index.jsx',
-        '../react/Menu/index.jsx',
         '../react/Tabs/index.jsx',
         '../react/NavigationList/index.jsx'
       ]
@@ -138,25 +145,11 @@ module.exports = {
         '../react/Viewer/index.jsx'
       ]
     },
-    {
-      name: 'Material-UI',
-      components: () => [
-        '../react/MuiCozyTheme/Buttons',
-        '../react/MuiCozyTheme/ExpansionPanel',
-        '../react/MuiCozyTheme/Grid',
-        '../react/MuiCozyTheme/index.jsx',
-        '../react/MuiCozyTheme/List',
-        '../react/MuiCozyTheme/Menus',
-        '../react/MuiCozyTheme/RaisedList',
-        '../react/MuiCozyTheme/TextField'
-      ]
-    },
     {
       name: 'Labs',
       components: () => [
         '../react/Labs/GridItem',
         '../react/Labs/IconGrid',
-        '../react/Labs/CollectionField',
         '../react/Labs/PasswordInput'
       ]
     },
@@ -175,10 +168,13 @@ module.exports = {
     {
       name: 'Deprecated',
       components: () => [
+        '../react/Menu/index.jsx',
         '../react/Modal/index.jsx',
         '../react/Text/index.jsx',
+        '../react/MuiCozyTheme/RaisedList',
         '../react/CompositeRow/index.jsx',
         '../react/InlineCard/index.jsx',
+        '../react/PercentageLine/index.jsx'
       ]
     }
   ],

diff --git a/react/Breadcrumbs/index.jsx b/react/Breadcrumbs/index.jsx
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types'
 import cx from 'classnames'
 import styles from './styles.styl'
 import Icon from '../Icon'
+import Typography from '../Typography'
+import IconButton from '@material-ui/core/IconButton'
+import LeftIcon from '../Icons/Left'
 
 const BreadcrumbSeparator = () => (
   <span className={styles.BreadcrumbSeparator}>/</span>
@@ -17,11 +20,7 @@ const BreadcrumbItem = ({
 }) => {
   const Tag = tag
   return (
-    <div
-      className={cx(styles.BreadcrumbItem, {
-        [styles['BreadcrumbItem--current']]: isCurrent
-      })}
-    >
+    <Typography variant={isCurrent ? 'h3' : 'body1'} gutterBottom={isCurrent}>
       <Tag
         onClick={onClick}
         className={cx({
@@ -31,7 +30,7 @@ const BreadcrumbItem = ({
         {name}
       </Tag>
       {showSeparator && <BreadcrumbSeparator />}
-    </div>
+    </Typography>
   )
 }
 
@@ -55,11 +54,12 @@ const Breadcrumbs = ({ items, className, style }) => {
   return (
     <div style={style} className={cx(styles.Breadcrumb, className)}>
       {items.length > 1 && (
-        <Icon
-          icon={'left'}
-          className={styles.Breadcrumb__previousButton}
+        <IconButton
           onClick={lastPreviousItem.onClick}
-        />
+          className={styles.Breadcrumb__previousButton}
+        >
+          <Icon icon={LeftIcon} />
+        </IconButton>
       )}
       <div className={styles.Breadcrumb__items}>
         <div className={styles.Breadcrumb__previousItems}>

diff --git a/react/Breadcrumbs/styles.styl b/react/Breadcrumbs/styles.styl
@@ -7,7 +7,9 @@
     color var(--primaryTextColor)
 
 .Breadcrumb__previousButton
-    margin-right (spacing_values.m)
+    // Tweak the margin-left to account for the IconButton wrapper
+    margin-left -(spacing_values.s)
+    margin-right (spacing_values.xs / 2)
     cursor pointer
 
 .Breadcrumb__items
@@ -16,15 +18,6 @@
 .Breadcrumb__previousItems
     display flex
 
-.BreadcrumbItem
-    font-size $small-font-size
-    line-height 1
-
-.BreadcrumbItem--current
-    font-size $h1-font-size
-    font-weight bold
-    line-height 1.67
-
 .BreadcrumbSeparator
     display inline-block
     margin-left (spacing_values.xs / 4)

diff --git a/react/Menu/index.jsx b/react/Menu/index.jsx
@@ -37,6 +37,10 @@ class MenuItem extends Component {
 }
 
 const logMenuDepecrated = createDepreciationLogger()
+
+/**
+ * @deprecated This component is deprecated, please use ActionMenu instead. See styleguide > Menu for more information on how to migrate.
+ */
 class Menu extends Component {
   constructor(props, context) {
     super(props, context)

diff --git a/react/MuiCozyTheme/RaisedList/README.md b/react/MuiCozyTheme/RaisedList/README.md
@@ -5,14 +5,13 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 
 <RaisedList>
-  <Divider />
   <ListItem button divider>
     <ListItemText primaryText="cozy.io" secondaryText="Claude Douillet" />
   </ListItem>
   <ListItem button divider>
     <ListItemText primaryText="cozy.io" secondaryText="Isabelle Durand" />
   </ListItem>
-  <ListItem button divider>
+  <ListItem button>
     <ListItemText primaryText="cozy.io" secondaryText="Geneviève Durand" />
   </ListItem>
 </RaisedList>

diff --git a/react/MuiCozyTheme/RaisedList/index.js b/react/MuiCozyTheme/RaisedList/index.js
@@ -1,14 +1,20 @@
-import BaseList from '@material-ui/core/List'
-import { withStyles } from '@material-ui/core/styles'
+import React from 'react'
+import List from '@material-ui/core/List'
+import Paper from '@material-ui/core/Paper'
+import createDepreciationLogger from '../../helpers/createDepreciationLogger'
 
-const styles = {
-  root: {
-    borderRadius: 8,
-    overflow: 'hidden',
-    borderLeft: '1px solid var(--silver)',
-    borderRight: '1px solid var(--silver)',
-    boxShadow: '0 4px 12px 0 rgba(0, 0, 0, 0.08)'
-  }
-}
+const logRaisedListDepecrated = createDepreciationLogger()
 
-export default withStyles(styles, 'RaisedList')(BaseList)
+/**
+ * @deprecated Please use a combination of List & Paper : <Paper elevation={4}><List /></Paper>
+ */
+export default props => {
+  logRaisedListDepecrated(
+    'RaisedList is deprecated, please use a combination of List & Paper : <Paper elevation={4}><List /></Paper>'
+  )
+  return (
+    <Paper elevation={2}>
+      <List {...props} />
+    </Paper>
+  )
+}