refactor: [M3-6374, M3-6344] - MUI v5 Migration - Components > Placeholder & H1Header

packages/manager/.changeset/pr-9131-tech-stories-1684293772869.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+[M3-6374] - MUI v5 Migration - `Components > Placeholder` ([#9131](https://github.com/linode/manager/pull/9131))

packages/manager/.changeset/pr-9131-tech-stories-1684293796866.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+[M3-6344] - MUI v5 Migration - `Components > H1Header` ([#9131](https://github.com/linode/manager/pull/9131))

packages/manager/src/components/Breadcrumb/FinalCrumb.tsx

@@ -5,7 +5,7 @@ import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
 import EditableText from 'src/components/EditableText';
-import H1Header from 'src/components/H1Header';
+import { H1Header } from 'src/components/H1Header/H1Header';
 import { EditableProps, LabelProps } from './types';
 
 const useStyles = makeStyles((theme: Theme) => ({

packages/manager/src/components/EditableText/EditableText.tsx

@@ -8,7 +8,7 @@ import ClickAwayListener from 'src/components/core/ClickAwayListener';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import { TextFieldProps } from 'src/components/core/TextField';
-import H1Header from 'src/components/H1Header';
+import { H1Header } from 'src/components/H1Header/H1Header';
 import TextField from '../TextField';
 
 const useStyles = makeStyles((theme: Theme) => ({

packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import DocsIcon from 'src/assets/icons/docs.svg';
 import ExternalLinkIcon from 'src/assets/icons/external-link.svg';
-import Placeholder from 'src/components/Placeholder';
+import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import PointerIcon from 'src/assets/icons/pointer.svg';
 import Typography from 'src/components/core/Typography';
 import YoutubeIcon from 'src/assets/icons/youtube.svg';

packages/manager/src/components/H1Header/H1Header.tsx

@@ -1,30 +1,21 @@
 import * as React from 'react';
-import { makeStyles } from '@mui/styles';
+import { SxProps } from '@mui/system';
 import Typography from 'src/components/core/Typography';
 
-interface Props {
-  title: string;
+interface H1HeaderProps {
   className?: string;
   dataQaEl?: string;
   renderAsSecondary?: boolean;
+  sx?: SxProps;
+  title: string;
 }
-
-const useStyles = makeStyles({
-  root: {
-    '&:focus': {
-      outline: 'none',
-    },
-  },
-});
-
 // Accessibility Feature:
 // The role of this component is to implement focus to the main content when navigating the application
 // Since it is a one page APP, we need to help users focus on the main content when switching views
 // It should serve as the only source for all H1s
-const H1Header: React.FC<Props> = (props) => {
+export const H1Header = (props: H1HeaderProps) => {
   const h1Header = React.useRef<HTMLDivElement>(null);
-  const { className, title, dataQaEl, renderAsSecondary } = props;
-  const classes = useStyles();
+  const { className, dataQaEl, renderAsSecondary, sx, title } = props;
 
   // React.useEffect(() => {
   //   if (h1Header.current !== null) {
@@ -34,17 +25,20 @@ const H1Header: React.FC<Props> = (props) => {
 
   return (
     <Typography
-      variant="h1"
+      className={className}
       component={renderAsSecondary ? 'h2' : 'h1'}
-      className={`${classes.root} ${className}`}
-      // If we're rendering as an h2, we want to remove the autofocus functionality
-      ref={renderAsSecondary ? null : h1Header}
-      tabIndex={0}
       data-qa-header={dataQaEl ? dataQaEl : ''}
+      ref={renderAsSecondary ? null : h1Header} // If we're rendering as an h2, we want to remove the autofocus functionality
+      tabIndex={0}
+      sx={{
+        '&:focus': {
+          outline: 'none',
+        },
+        ...sx,
+      }}
+      variant="h1"
     >
       {title}
     </Typography>
   );
 };
-
-export default H1Header;

packages/manager/src/components/NotFound.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
 
-import Placeholder from 'src/components/Placeholder';
+import { Placeholder } from 'src/components/Placeholder/Placeholder';
 
 interface Props {
   className?: string;

packages/manager/src/components/Placeholder/.Placeholder.stories.mdx

@@ -1,5 +1,5 @@
 import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import Placeholder from '/src/components/Placeholder';
+import { Placeholder } from 'src/components/Placeholder/Placeholder';
 
 <Meta
   title="Features/Entity Landing Page/Placeholders"