fix as suggested

mui · Jun 7, 2021 · 0195818 · 0195818
1 parent e0bffb4
commit 0195818
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 77 deletions.
diff --git a/docs/src/pages/components/lists/CustomizedList.js b/docs/src/pages/components/lists/CustomizedList.js
@@ -9,6 +9,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import Paper from '@material-ui/core/Paper';
 import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
 import ArrowRight from '@material-ui/icons/ArrowRight';
 import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
 import Home from '@material-ui/icons/Home';
@@ -88,37 +89,39 @@ export default function CustomizedList() {
                   }}
                 />
               </ListItemButton>
-              <IconButton
-                sx={{
-                  '& svg': {
-                    color: 'rgba(255,255,255,0.8)',
-                    transition: '0.2s',
-                    transform: 'translateX(0) rotate(0)',
-                  },
-                  '&:hover': {
-                    bgcolor: 'unset',
-                    '& svg:first-of-type': {
-                      transform: 'translateX(-4px) rotate(-20deg)',
+              <Tooltip title="Project Settings">
+                <IconButton
+                  sx={{
+                    '& svg': {
+                      color: 'rgba(255,255,255,0.8)',
+                      transition: '0.2s',
+                      transform: 'translateX(0) rotate(0)',
                     },
-                    '& svg:last-of-type': {
-                      right: 0,
-                      opacity: 1,
+                    '&:hover, &:focus': {
+                      bgcolor: 'unset',
+                      '& svg:first-of-type': {
+                        transform: 'translateX(-4px) rotate(-20deg)',
+                      },
+                      '& svg:last-of-type': {
+                        right: 0,
+                        opacity: 1,
+                      },
                     },
-                  },
-                  '&:after': {
-                    content: '""',
-                    position: 'absolute',
-                    height: '80%',
-                    display: 'block',
-                    left: 0,
-                    width: '1px',
-                    bgcolor: 'divider',
-                  },
-                }}
-              >
-                <Settings />
-                <ArrowRight sx={{ position: 'absolute', right: 4, opacity: 0 }} />
-              </IconButton>
+                    '&:after': {
+                      content: '""',
+                      position: 'absolute',
+                      height: '80%',
+                      display: 'block',
+                      left: 0,
+                      width: '1px',
+                      bgcolor: 'divider',
+                    },
+                  }}
+                >
+                  <Settings />
+                  <ArrowRight sx={{ position: 'absolute', right: 4, opacity: 0 }} />
+                </IconButton>
+              </Tooltip>
             </ListItem>
             <Divider />
             <Box
@@ -134,7 +137,7 @@ export default function CustomizedList() {
                   px: 3,
                   pt: 2.5,
                   pb: open ? 0 : 2.5,
-                  '&:hover': { '& svg': { opacity: open ? 1 : 0 } },
+                  '&:hover, &:focus': { '& svg': { opacity: open ? 1 : 0 } },
                 }}
               >
                 <ListItemText

diff --git a/docs/src/pages/components/lists/CustomizedList.tsx b/docs/src/pages/components/lists/CustomizedList.tsx
@@ -9,6 +9,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import Paper from '@material-ui/core/Paper';
 import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
 import ArrowRight from '@material-ui/icons/ArrowRight';
 import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDown';
 import Home from '@material-ui/icons/Home';
@@ -88,37 +89,39 @@ export default function CustomizedList() {
                   }}
                 />
               </ListItemButton>
-              <IconButton
-                sx={{
-                  '& svg': {
-                    color: 'rgba(255,255,255,0.8)',
-                    transition: '0.2s',
-                    transform: 'translateX(0) rotate(0)',
-                  },
-                  '&:hover': {
-                    bgcolor: 'unset',
-                    '& svg:first-of-type': {
-                      transform: 'translateX(-4px) rotate(-20deg)',
+              <Tooltip title="Project Settings">
+                <IconButton
+                  sx={{
+                    '& svg': {
+                      color: 'rgba(255,255,255,0.8)',
+                      transition: '0.2s',
+                      transform: 'translateX(0) rotate(0)',
                     },
-                    '& svg:last-of-type': {
-                      right: 0,
-                      opacity: 1,
+                    '&:hover, &:focus': {
+                      bgcolor: 'unset',
+                      '& svg:first-of-type': {
+                        transform: 'translateX(-4px) rotate(-20deg)',
+                      },
+                      '& svg:last-of-type': {
+                        right: 0,
+                        opacity: 1,
+                      },
                     },
-                  },
-                  '&:after': {
-                    content: '""',
-                    position: 'absolute',
-                    height: '80%',
-                    display: 'block',
-                    left: 0,
-                    width: '1px',
-                    bgcolor: 'divider',
-                  },
-                }}
-              >
-                <Settings />
-                <ArrowRight sx={{ position: 'absolute', right: 4, opacity: 0 }} />
-              </IconButton>
+                    '&:after': {
+                      content: '""',
+                      position: 'absolute',
+                      height: '80%',
+                      display: 'block',
+                      left: 0,
+                      width: '1px',
+                      bgcolor: 'divider',
+                    },
+                  }}
+                >
+                  <Settings />
+                  <ArrowRight sx={{ position: 'absolute', right: 4, opacity: 0 }} />
+                </IconButton>
+              </Tooltip>
             </ListItem>
             <Divider />
             <Box
@@ -134,7 +137,7 @@ export default function CustomizedList() {
                   px: 3,
                   pt: 2.5,
                   pb: open ? 0 : 2.5,
-                  '&:hover': { '& svg': { opacity: open ? 1 : 0 } },
+                  '&:hover, &:focus': { '& svg': { opacity: open ? 1 : 0 } },
                 }}
               >
                 <ListItemText

diff --git a/packages/material-ui/src/ListItem/ListItem.d.ts b/packages/material-ui/src/ListItem/ListItem.d.ts
@@ -15,7 +15,7 @@ interface ListItemBaseProps {
    * If `true`, the list item is focused during the first mount.
    * Focus will also be triggered if the value changes from false to true.
    * @default false
-   * @deprecated will be removed in v6, checkout `ListItemButton` instead
+   * @deprecated checkout `ListItemButton` instead
    */
   autoFocus?: boolean;
   /**
@@ -30,13 +30,13 @@ interface ListItemBaseProps {
   /**
    * The container component used when a `ListItemSecondaryAction` is the last child.
    * @default 'li'
-   * @deprecated will be removed in v6
+   * @deprecated
    */
   ContainerComponent?: React.ElementType<React.HTMLAttributes<HTMLDivElement>>;
   /**
    * Props applied to the container component if used.
    * @default {}
-   * @deprecated will be removed in v6
+   * @deprecated
    */
   ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
   /**
@@ -48,7 +48,7 @@ interface ListItemBaseProps {
   /**
    * If `true`, the component is disabled.
    * @default false
-   * @deprecated will be removed in v6, checkout `ListItemButton` instead
+   * @deprecated checkout `ListItemButton` instead
    */
   disabled?: boolean;
   /**
@@ -73,7 +73,7 @@ interface ListItemBaseProps {
   /**
    * Use to apply selected styling.
    * @default false
-   * @deprecated will be removed in v6, checkout `ListItemButton` instead
+   * @deprecated checkout `ListItemButton` instead
    */
   selected?: boolean;
   /**
@@ -128,7 +128,7 @@ declare const ListItem: ExtendButtonBase<
        * If `true`, the list item is a button (using `ButtonBase`). Props intended
        * for `ButtonBase` can then be applied to `ListItem`.
        * @default false
-       * @deprecated will be removed in v6, checkout `ListItemButton` instead
+       * @deprecated checkout `ListItemButton` instead
        *
        */
       button: true;
@@ -143,7 +143,7 @@ declare const ListItem: ExtendButtonBase<
          * If `true`, the list item is a button (using `ButtonBase`). Props intended
          * for `ButtonBase` can then be applied to `ListItem`.
          * @default false
-         * @deprecated will be removed in v6, checkout `ListItemButton` instead
+         * @deprecated checkout `ListItemButton` instead
          */
         button?: false;
       },

diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js
@@ -15,10 +15,6 @@ import listItemClasses, { getListItemUtilityClass } from './listItemClasses';
 import { listItemButtonClasses } from '../ListItemButton';
 import ListItemSecondaryAction from '../ListItemSecondaryAction';
 
-// TODO remove these in v6
-// - button related (styling and logic) like autoFocus, focusVisible, disabled
-// - container
-
 export const overridesResolver = (props, styles) => {
   const { styleProps } = props;
 
@@ -333,14 +329,14 @@ ListItem.propTypes /* remove-proptypes */ = {
    * If `true`, the list item is focused during the first mount.
    * Focus will also be triggered if the value changes from false to true.
    * @default false
-   * @deprecated will be removed in v6, checkout `ListItemButton` instead
+   * @deprecated checkout `ListItemButton` instead
    */
   autoFocus: PropTypes.bool,
   /**
    * If `true`, the list item is a button (using `ButtonBase`). Props intended
    * for `ButtonBase` can then be applied to `ListItem`.
    * @default false
-   * @deprecated will be removed in v6, checkout `ListItemButton` instead
+   * @deprecated checkout `ListItemButton` instead
    */
   button: PropTypes.bool,
   /**
@@ -400,13 +396,13 @@ ListItem.propTypes /* remove-proptypes */ = {
   /**
    * The container component used when a `ListItemSecondaryAction` is the last child.
    * @default 'li'
-   * @deprecated will be removed in v6
+   * @deprecated
    */
   ContainerComponent: elementTypeAcceptingRef,
   /**
    * Props applied to the container component if used.
    * @default {}
-   * @deprecated will be removed in v6
+   * @deprecated
    */
   ContainerProps: PropTypes.object,
   /**
@@ -418,7 +414,7 @@ ListItem.propTypes /* remove-proptypes */ = {
   /**
    * If `true`, the component is disabled.
    * @default false
-   * @deprecated will be removed in v6, checkout `ListItemButton` instead
+   * @deprecated checkout `ListItemButton` instead
    */
   disabled: PropTypes.bool,
   /**
@@ -447,7 +443,7 @@ ListItem.propTypes /* remove-proptypes */ = {
   /**
    * Use to apply selected styling.
    * @default false
-   * @deprecated will be removed in v6, checkout `ListItemButton` instead
+   * @deprecated checkout `ListItemButton` instead
    */
   selected: PropTypes.bool,
   /**