refactor: [M3-6798] - MUI v5 Migration - Components > Typography (#…

…9328)

* initial refactor and new storybook story

* Added changeset: MUI v5 Migration - Components > Typography

* fix unit tests by updated exports

---------

Co-authored-by: Banks Nussman <banks@nussman.us>

docs/development-guide/04-component-library.md

@@ -7,7 +7,7 @@ We use [Material-UI](https://mui.com/material-ui/getting-started/overview/) as t
 All MUI components have abstractions in the Cloud Manager codebase, meaning you will use relative imports to use them instead of importing from MUI directly:
 
 ```ts
-import Typography from "src/components/core/Typography"; // NOT from '@mui/material/Typography'
+import { Typography } from "src/components/Typography"; // NOT from '@mui/material/Typography'
 ```
 
 We do this because it gives us the ability to customize the component and still keep imports consistent. It also gives us flexibility if we ever wanted to change out the underlying component library.

packages/manager/.changeset/pr-9328-tech-stories-1687891912950.md

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

packages/manager/src/components/AbuseTicketBanner/AbuseTicketBanner.tsx

@@ -1,7 +1,7 @@
 import { DateTime } from 'luxon';
 import * as React from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import DismissibleBanner from 'src/components/DismissibleBanner';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useNotificationsQuery } from 'src/queries/accountNotifications';

packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx

@@ -4,7 +4,7 @@ import { Button } from 'src/components/Button/Button';
 import CheckBox from 'src/components/CheckBox';
 import { TableBody } from 'src/components/TableBody';
 import { TableHead } from 'src/components/TableHead';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { Table } from 'src/components/Table';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';

packages/manager/src/components/Accordion.tsx

@@ -10,7 +10,7 @@ import AccordionDetails, {
 import AccordionSummary, {
   AccordionSummaryProps,
 } from '@mui/material/AccordionSummary';
-import Typography, { TypographyProps } from 'src/components/core/Typography';
+import { Typography, TypographyProps } from 'src/components/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
 import { makeStyles } from 'tss-react/mui';
 import { Notice } from 'src/components/Notice/Notice';

packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx

@@ -2,7 +2,7 @@ import Warning from '@mui/icons-material/CheckCircle';
 import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail';
 import SupportTicketDrawer from 'src/features/Support/SupportTickets/SupportTicketDrawer';

packages/manager/src/components/BackupStatus/BackupStatus.tsx

@@ -3,7 +3,7 @@ import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import Tooltip from 'src/components/core/Tooltip';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import Link from 'src/components/Link';
 import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon';

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { FinalCrumb } from './FinalCrumb';
 import FinalCrumbPrefix from './FinalCrumbPrefix';
 import { EditableProps, LabelProps } from './types';

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

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { EditableText } from 'src/components/EditableText/EditableText';
 import { H1Header } from 'src/components/H1Header/H1Header';
 import { EditableProps, LabelProps } from './types';

packages/manager/src/components/CheckoutBar/CheckoutBar.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { DisplayPrice } from 'src/components/DisplayPrice';
 import {
   StyledButton,

packages/manager/src/components/CheckoutBar/DisplaySection.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { StyledCheckoutSection, SxTypography } from './styles';
 
 export interface DisplaySectionProps {

packages/manager/src/components/CheckoutSummary/CheckoutSummary.tsx

@@ -3,8 +3,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/styles';
 import * as React from 'react';
 import Paper from '../core/Paper';
-
-import Typography from '../core/Typography';
+import { Typography } from '../Typography';
 import Grid from '../Grid';
 import { SummaryItem } from './SummaryItem';
 

packages/manager/src/components/CheckoutSummary/SummaryItem.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
 import React from 'react';
-import Typography from '../core/Typography';
+import { Typography } from '../Typography';
 import Grid from '../Grid';
 import { SummaryItem as Props } from './CheckoutSummary';
 

packages/manager/src/components/ColorPalette/ColorPalette.tsx

@@ -3,7 +3,7 @@ import { useTheme } from '@mui/material';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
 
 interface Color {

packages/manager/src/components/DateTimeDisplay/DateTimeDisplay.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { useProfile } from 'src/queries/profile';
 import formatDate, { TimeInterval } from 'src/utilities/formatDate';
 

packages/manager/src/components/DeletionDialog/DeletionDialog.tsx

@@ -3,7 +3,7 @@ import ActionsPanel from 'src/components/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { useTheme } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm';
 import { Notice } from 'src/components/Notice/Notice';
 import { titlecase } from 'src/features/Linodes/presentation';

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

@@ -3,7 +3,7 @@ import { Button } from 'src/components/Button/Button';
 import DismissibleBanner from './DismissibleBanner';
 import Grid from '@mui/material/Unstable_Grid2';
 import Link from 'src/components/Link';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 
 <Meta
   title="Components/Notifications/Dismissible Banners"

packages/manager/src/components/DisplayPrice/DisplayPrice.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps, Theme, useTheme } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { Currency } from 'src/components/Currency';
 
 export interface DisplayPriceProps {

packages/manager/src/components/DownloadTooltip.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import FileDownload from 'src/assets/icons/download.svg';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import ToolTip from 'src/components/core/Tooltip';
 
 interface Props {

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

@@ -1,6 +1,6 @@
 import React from 'react';
+import { Typography } from 'src/components/Typography';
 import { Button } from 'src/components/Button/Button';
-import Typography from 'src/components/core/Typography';
 import ActionsPanel from '../ActionsPanel';
 import { TextField } from '../TextField';
 import Drawer from './Drawer';

packages/manager/src/components/Drawer/Drawer.tsx

@@ -4,7 +4,7 @@ import { Button } from 'src/components/Button/Button';
 import _Drawer, { DrawerProps } from 'src/components/core/Drawer';
 import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
 import { convertForAria } from 'src/utilities/stringUtils';
 

packages/manager/src/components/EditableEntityLabel/EditableEntityLabel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTheme, styled } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { EntityIcon } from 'src/components/EntityIcon/EntityIcon';
 import type { EntityVariants } from 'src/components/EntityIcon/EntityIcon';
 import Grid from '@mui/material/Unstable_Grid2';

packages/manager/src/components/EditableEntityLabel/EditableInput.tsx

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { styled } from '@mui/material/styles';
 
 interface ResourcesLinksSubSectionProps {

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

@@ -3,7 +3,7 @@ import DocsIcon from 'src/assets/icons/docs.svg';
 import ExternalLinkIcon from 'src/assets/icons/external-link.svg';
 import { Placeholder } from 'src/components/Placeholder/Placeholder';
 import PointerIcon from 'src/assets/icons/pointer.svg';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import YoutubeIcon from 'src/assets/icons/youtube.svg';
 import { ResourceLinks } from 'src/components/EmptyLandingPageResources/ResourcesLinks';
 import { ResourcesLinkIcon } from 'src/components/EmptyLandingPageResources/ResourcesLinkIcon';

packages/manager/src/components/EnhancedSelect/components/Guidance.tsx

@@ -1,7 +1,7 @@
 import HelpOutline from '@mui/icons-material/HelpOutline';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 
 interface GuidanceProps {
   text: string;

packages/manager/src/components/EnhancedSelect/components/NoOptionsMessage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { NoticeProps } from 'react-select/src/components/Menu';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 
 interface Props extends NoticeProps<any, any> {}
 

packages/manager/src/components/EnhancedSelect/components/SelectPlaceholder.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { PlaceholderProps } from 'react-select';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 
 interface Props extends PlaceholderProps<any, any> {}
 

packages/manager/src/components/EntityHeader/EntityHeader.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Typography, { TypographyProps } from 'src/components/core/Typography';
+import { Typography, TypographyProps } from 'src/components/Typography';
 import { styled } from '@mui/material/styles';
 
 export interface HeaderProps {

packages/manager/src/components/ErrorState/ErrorState.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 import { useTheme, styled } from '@mui/material/styles';

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

@@ -1,7 +1,7 @@
 import { Button } from 'src/components/Button/Button';
 import { styled } from '@mui/material/styles';
 import { isPropValid } from 'src/utilities/isPropValid';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 
 interface DropZoneClassProps {
   isDragActive: boolean;

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

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import Gauge from './GaugePercent';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 
 <Meta title="Components/Analytics & Graphs" component={Gauge} />
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 
 interface H1HeaderProps {
   className?: string;

packages/manager/src/components/HighlightedMarkdown/HighlightedMarkdown.tsx

@@ -2,7 +2,7 @@
 import * as hljs from 'highlight.js/lib/core';
 import * as React from 'react';
 import { Theme, useTheme } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import 'src/formatted-text.css';
 import { sanitizeHTML } from 'src/utilities/sanitize-html';
 import { unsafe_MarkdownIt } from 'src/utilities/markdown';

packages/manager/src/components/ImageSelect/ImageSelect.tsx

@@ -5,7 +5,7 @@ import { equals, groupBy } from 'ramda';
 import * as React from 'react';
 import { MAX_MONTHS_EOL_FILTER } from 'src/constants';
 import Paper from 'src/components/core/Paper';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import Select, { GroupType, Item } from 'src/components/EnhancedSelect';
 import { _SingleValue } from 'src/components/EnhancedSelect/components/SingleValue';
 import { BaseSelectProps } from 'src/components/EnhancedSelect/Select';

packages/manager/src/components/LineGraph/LineGraph.tsx

@@ -12,7 +12,7 @@ import * as React from 'react';
 import { useTheme, Theme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import AccessibleGraphData from './AccessibleGraphData';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { TableRow } from 'src/components/TableRow';
 import { TableCell } from 'src/components/TableCell';
 import { setUpCharts } from 'src/utilities/charts';

packages/manager/src/components/LineGraph/MetricsDisplay.test.tsx

@@ -1,6 +1,6 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import {
   metricsBySection,
   MetricsDisplay,

packages/manager/src/components/LineGraph/MetricsDisplay.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TableBody } from 'src/components/TableBody';
 import { TableHead } from 'src/components/TableHead';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { Table } from 'src/components/Table';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';

packages/manager/src/components/LongviewLineGraph/LongviewLineGraph.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Divider from 'src/components/core/Divider';
 import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import {
   DataSet,

packages/manager/src/components/MainContentBanner.tsx

@@ -3,7 +3,7 @@ import Close from '@mui/icons-material/Close';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { Link } from 'src/components/Link';
 import { useMutatePreferences, usePreferences } from 'src/queries/preferences';
 

packages/manager/src/components/MaintenanceBanner/MaintenanceBanner.tsx

@@ -1,7 +1,7 @@
 import { AccountMaintenance } from '@linode/api-v4/lib/account';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { Notice } from 'src/components/Notice/Notice';
 import { useProfile } from 'src/queries/profile';
 import { formatDate } from 'src/utilities/formatDate';

packages/manager/src/components/MaintenanceScreen.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Link from 'src/components/Link';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { Box } from 'src/components/Box';
 import Logo from 'src/assets/logo/akamai-logo.svg';
 import BuildIcon from '@mui/icons-material/Build';

packages/manager/src/components/MigrateError.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import { SupportLink } from 'src/components/SupportLink';
 
 export const MigrateError: React.FC<{}> = () => {

packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx

@@ -6,7 +6,7 @@ import { Button } from 'src/components/Button/Button';
 import InputLabel from 'src/components/core/InputLabel';
 import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
 import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon';
 import { Notice } from 'src/components/Notice/Notice';

packages/manager/src/components/Notice/Notice.tsx

@@ -6,7 +6,7 @@ import Error from 'src/assets/icons/alert.svg';
 import Check from 'src/assets/icons/check.svg';
 import Flag from 'src/assets/icons/flag.svg';
 import Warning from 'src/assets/icons/warning.svg';
-import Typography, { TypographyProps } from 'src/components/core/Typography';
+import { Typography, TypographyProps } from 'src/components/Typography';
 import { makeStyles } from 'tss-react/mui';
 
 export const useStyles = makeStyles<

packages/manager/src/components/PasswordInput/StrengthIndicator.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
-import Typography from 'src/components/core/Typography';
+import { Typography } from 'src/components/Typography';
 import Grid from '@mui/material/Unstable_Grid2';
 
 type StrengthValues = null | 0 | 1 | 2 | 3 | 4;