refactor: [M3-6376] – MUI v5 - Components > PrimaryNav

CHANGELOG.md

@@ -30,6 +30,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - MUI v5 Migration - `Components > DownloadCSV` #9084
 - MUI v5 Migration - `Components > Notice` #9094
 - MUI v5 Migration - `Components > CheckoutSummary` #9100
+- MUI v5 Migration - `Components > PrimaryNav` #9090
 - React Query for Linodes Landing #9062
 
 ## [2023-05-01] - v1.92.0

packages/manager/src/components/PrimaryNav/AdditionalMenuItems.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { compose } from 'recompose';
-import NavItem, { PrimaryLink } from './NavItem';
+import { NavItem, PrimaryLink } from './NavItem';
 
 import Help from 'src/assets/icons/help.svg';
 
@@ -12,9 +11,7 @@ interface Props {
   isCollapsed?: boolean;
 }
 
-type CombinedProps = Props;
-
-const AdditionalMenuItems: React.FC<CombinedProps> = (props) => {
+export const AdditionalMenuItems = React.memo((props: Props) => {
   const { isCollapsed } = props;
   const links: PrimaryLink[] = [
     {
@@ -39,6 +36,4 @@ const AdditionalMenuItems: React.FC<CombinedProps> = (props) => {
       })}
     </React.Fragment>
   );
-};
-
-export default compose<CombinedProps, Props>(React.memo)(AdditionalMenuItems);
+});

packages/manager/src/components/PrimaryNav/NavItem.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { compose } from 'recompose';
 import Divider from 'src/components/core/Divider';
 import ListItem from 'src/components/core/ListItem';
 import ListItemText from 'src/components/core/ListItemText';
@@ -25,9 +24,7 @@ export interface PrimaryLink {
   isDisabled?: () => string;
 }
 
-type CombinedProps = Props;
-
-const NavItem: React.SFC<CombinedProps> = (props) => {
+export const NavItem = React.memo((props: Props) => {
   const {
     href,
     onClick,
@@ -96,6 +93,4 @@ const NavItem: React.SFC<CombinedProps> = (props) => {
       <Divider className={props.dividerClasses} />
     </React.Fragment>
   );
-};
-
-export default compose<CombinedProps, Props>(React.memo)(NavItem);
+});

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts

@@ -1,164 +1,170 @@
-import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
+import { keyframes } from 'tss-react';
+import { makeStyles } from 'tss-react/mui';
 
 const SLIDE_IN_TRANSFORM = 'matrix(0.01471, 0, 0, 1, 123.982745, 0.000015)';
 const SLIDE_OUT_TRANSFORM = 'translate(0)';
 
-const useStyles = makeStyles((theme: Theme) => ({
-  '@keyframes slideIn': {
-    from: {
-      transform: SLIDE_IN_TRANSFORM,
-    },
-    to: {
-      transform: SLIDE_OUT_TRANSFORM,
-    },
+const slideIn = keyframes`
+  from {
+    transform: ${SLIDE_IN_TRANSFORM};
+  }
+  to {
+    transform: ${SLIDE_OUT_TRANSFORM};
+  }
+`;
+
+const slideOut = keyframes`
+  from {
+    transform: ${SLIDE_OUT_TRANSFORM};
   },
-  '@keyframes slideOut': {
-    from: {
-      transform: SLIDE_OUT_TRANSFORM,
-    },
-    to: {
-      transform: SLIDE_IN_TRANSFORM,
-    },
+  to {
+    transform: ${SLIDE_IN_TRANSFORM};
   },
-  menuGrid: {
-    minHeight: 64,
-    height: '100%',
-    width: '100%',
-    margin: 0,
-    padding: 0,
-    [theme.breakpoints.up('sm')]: {
-      minHeight: 72,
+`;
+
+const useStyles = makeStyles<void, 'linkItem'>()(
+  (theme: Theme, _params, classes) => ({
+    menuGrid: {
+      minHeight: 64,
+      height: '100%',
+      width: '100%',
+      margin: 0,
+      padding: 0,
+      [theme.breakpoints.up('sm')]: {
+        minHeight: 72,
+      },
+      [theme.breakpoints.up('md')]: {
+        minHeight: 80,
+      },
+      '&:hover': {
+        '& path.akamai-clip-path': {
+          animation: `${slideIn} .33s ease-in-out`,
+        },
+      },
     },
-    [theme.breakpoints.up('md')]: {
-      minHeight: 80,
+    fadeContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: 'calc(100% - 90px)',
+      width: '100%',
     },
-    '&:hover': {
+    logoItemAkamai: {
+      paddingTop: 12,
+      paddingLeft: 12,
+      transition: 'padding-left .03s linear',
       '& path.akamai-clip-path': {
-        animation: '$slideIn .33s ease-in-out',
+        animation: `${slideIn} .33s ease-in-out`,
       },
     },
-  },
-  fadeContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: 'calc(100% - 90px)',
-    width: '100%',
-  },
-  logoItemAkamai: {
-    paddingTop: 12,
-    paddingLeft: 12,
-    transition: 'padding-left .03s linear',
-    '& path.akamai-clip-path': {
-      animation: '$slideIn .33s ease-in-out',
+    logoItemAkamaiCollapsed: {
+      paddingLeft: 8,
     },
-  },
-  logoItemAkamaiCollapsed: {
-    paddingLeft: 8,
-  },
-  logoAkamaiCollapsed: {
-    background: theme.bg.primaryNavPaper,
-    width: 96,
-    '& path.akamai-clip-path': {
-      animation: '$slideOut 0s ease-in-out 0s forwards',
+    logoAkamaiCollapsed: {
+      background: theme.bg.primaryNavPaper,
+      width: 96,
+      '& path.akamai-clip-path': {
+        animation: `${slideOut} 0s ease-in-out 0s forwards`,
+      },
     },
-  },
-  listItem: {
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    height: 36,
-    lineHeight: 0,
-    padding: '12px 16px',
-    position: 'relative',
-    transition: theme.transitions.create(['background-color']),
-    '& p': {
-      marginTop: 0,
-      marginBottom: 0,
+    listItem: {
+      display: 'flex',
+      alignItems: 'center',
+      cursor: 'pointer',
+      height: 36,
+      lineHeight: 0,
+      padding: '12px 16px',
+      position: 'relative',
+      transition: theme.transitions.create(['background-color']),
+      '& p': {
+        marginTop: 0,
+        marginBottom: 0,
+      },
+      '&:focus': {
+        textDecoration: 'none',
+      },
+      '&:hover': {
+        border: 'red',
+        backgroundImage: 'linear-gradient(98deg, #38584B 1%, #3A5049 166%)',
+        textDecoration: 'none',
+        [`& .${classes.linkItem}`]: {
+          color: 'white',
+        },
+        '& .icon': {
+          opacity: 1,
+        },
+        '& svg': {
+          color: theme.color.teal,
+          fill: theme.color.teal,
+        },
+      },
+      '& .icon': {
+        color: '#CFD0D2',
+        marginRight: theme.spacing(2),
+        opacity: 0.5,
+        '& svg': {
+          display: 'flex',
+          alignItems: 'center',
+          height: 20,
+          width: 20,
+          '&:not(.wBorder) circle, & .circle': {
+            display: 'none',
+          },
+        },
+      },
     },
-    '&:focus': {
-      textDecoration: 'none',
+    linkItem: {
+      display: 'flex',
+      alignItems: 'center',
+      color: '#fff',
+      fontFamily: 'LatoWebBold', // we keep this bold at all times
+      opacity: 1,
+      transition: theme.transitions.create(['color']),
+      whiteSpace: 'nowrap',
+      '&.hiddenWhenCollapsed': {
+        opacity: 0,
+      },
     },
-    '&:hover': {
-      border: 'red',
+    active: {
       backgroundImage: 'linear-gradient(98deg, #38584B 1%, #3A5049 166%)',
       textDecoration: 'none',
-      '& $linkItem': {
-        color: 'white',
-      },
       '& .icon': {
         opacity: 1,
       },
       '& svg': {
         color: theme.color.teal,
-        fill: theme.color.teal,
       },
     },
-    '& .icon': {
-      color: '#CFD0D2',
-      marginRight: theme.spacing(2),
-      opacity: 0.5,
-      '& svg': {
-        display: 'flex',
-        alignItems: 'center',
-        height: 20,
-        width: 20,
-        '&:not(.wBorder) circle, & .circle': {
-          display: 'none',
-        },
-      },
+    divider: {
+      backgroundColor: 'rgba(0, 0, 0, 0.12)',
+      color: '#222',
     },
-  },
-  linkItem: {
-    display: 'flex',
-    alignItems: 'center',
-    color: '#fff',
-    fontFamily: 'LatoWebBold', // we keep this bold at all times
-    opacity: 1,
-    transition: theme.transitions.create(['color']),
-    whiteSpace: 'nowrap',
-    '&.hiddenWhenCollapsed': {
-      opacity: 0,
+    chip: {
+      marginTop: 2,
     },
-  },
-  active: {
-    backgroundImage: 'linear-gradient(98deg, #38584B 1%, #3A5049 166%)',
-    textDecoration: 'none',
-    '& .icon': {
-      opacity: 1,
-    },
-    '& svg': {
-      color: theme.color.teal,
-    },
-  },
-  divider: {
-    backgroundColor: 'rgba(0, 0, 0, 0.12)',
-    color: '#222',
-  },
-  chip: {
-    marginTop: 2,
-  },
-  logoSvgCollapsed: {
-    // Hide 'Akamai Cloud Computing' when the navigation is collapsed and the nav is not hovered
-    '& > g ': {
-      display: 'none',
+    logoSvgCollapsed: {
+      // Hide 'Akamai' text when the navigation is collapsed and the nav is not hovered
+      '& > g ': {
+        display: 'none',
+      },
+      'nav:hover & > g ': {
+        display: 'unset',
+      },
+      // Make the logo 115px so that the Akamai logo is centered when the navigation is collapsed
+      width: 115,
     },
-    'nav:hover & > g ': {
-      display: 'unset',
+    logoContainer: {
+      // when the nav is collapsed, but hovered by the user, make the logo full sized
+      'nav:hover & > svg ': {
+        width: 128,
+      },
     },
-    // Make the logo 115px so that the Linode 'bug' is centered when the navigation is collapsed
-    width: 115,
-  },
-  logoContainer: {
-    // when the nav is collapsed, but hovered by the user, make the logo full sized
-    'nav:hover & > svg ': {
-      width: 128,
+    logo: {
+      // give the svg a transition so it smoothly resizes
+      transition: 'width .1s linear',
     },
-  },
-  logo: {
-    // give the svg a transition so it smoothly resizes
-    transition: 'width .1s linear',
-  },
-}));
+  })
+);
 
+// TODO jss-to-tss-react codemod: usages of this hook outside of this file will not be converted.
 export default useStyles;