refactor: [M3-6318] - MUI v5 - Components > DeletionDialog

CHANGELOG.md

@@ -26,6 +26,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - MUIv5 Migration - Components > TagsInput, TagsPanel #8995
 - MUIv5 Migration - Grid v2 for Features #8985
 - MUIv5 Migration - Components > Dialog #9020
+- MUIv5 Migration - Components > DeletionDialog #9047
 - MUIv5 Migration - Components > Currency #9030
 - MUIv5 Migration - Components > DisplayPrice #9022
 - MUIv5 Migration - Components > CreateLinodeDisabled #9015

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import DeletionDialog from 'src/components/DeletionDialog';
+import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 

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

@@ -2,8 +2,7 @@ import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Button from 'src/components/Button';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
 import TypeToConfirm from 'src/components/TypeToConfirm';
 import Notice from 'src/components/Notice';
@@ -12,7 +11,7 @@ import { capitalize } from 'src/utilities/capitalize';
 import { DialogProps } from '../Dialog/Dialog';
 import { usePreferences } from 'src/queries/preferences';
 
-interface Props extends Omit<DialogProps, 'title'> {
+interface DeletionDialogProps extends Omit<DialogProps, 'title'> {
   open: boolean;
   error?: string;
   entity: string;
@@ -23,15 +22,8 @@ interface Props extends Omit<DialogProps, 'title'> {
   typeToConfirm?: boolean;
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  text: {
-    paddingTop: theme.spacing(2),
-    paddingBottom: theme.spacing(),
-  },
-}));
-
-const DeletionDialog: React.FC<Props> = (props) => {
-  const classes = useStyles();
+const _DeletionDialog = (props: DeletionDialogProps) => {
+  const theme = useTheme();
   const {
     entity,
     error,
@@ -96,7 +88,13 @@ const DeletionDialog: React.FC<Props> = (props) => {
         placeholder={label}
         visible={typeToConfirmRequired}
         confirmationText={
-          <Typography component={'span'} className={classes.text}>
+          <Typography
+            component={'span'}
+            sx={{
+              paddingTop: theme.spacing(2),
+              paddingBottom: theme.spacing(),
+            }}
+          >
             To confirm deletion, type the name of the {entity} (
             <strong>{label}</strong>) in the field below:
           </Typography>
@@ -106,4 +104,6 @@ const DeletionDialog: React.FC<Props> = (props) => {
   );
 };
 
-export default React.memo(DeletionDialog);
+const DeletionDialog = React.memo(_DeletionDialog);
+
+export { DeletionDialog };

packages/manager/src/features/Domains/DeleteDomain.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Button from 'src/components/Button';
-import DeletionDialog from 'src/components/DeletionDialog';
+import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import { useDeleteDomainMutation } from 'src/queries/domains';

packages/manager/src/features/Domains/DomainsLanding.tsx

@@ -8,7 +8,7 @@ import { CircleProgress } from 'src/components/CircleProgress';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
-import DeletionDialog from 'src/components/DeletionDialog';
+import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import ErrorState from 'src/components/ErrorState';
 import LandingHeader from 'src/components/LandingHeader';

packages/manager/src/features/Managed/Contacts/Contacts.tsx

@@ -8,7 +8,7 @@ import { Theme } from '@mui/material/styles';
 import TableBody from 'src/components/core/TableBody';
 import TableHead from 'src/components/core/TableHead';
 import Typography from 'src/components/core/Typography';
-import DeletionDialog from 'src/components/DeletionDialog';
+import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import Grid from '@mui/material/Unstable_Grid2';
 import OrderBy from 'src/components/OrderBy';

packages/manager/src/features/Managed/Credentials/CredentialList.tsx

@@ -9,7 +9,7 @@ import { Theme } from '@mui/material/styles';
 import TableBody from 'src/components/core/TableBody';
 import TableHead from 'src/components/core/TableHead';
 import Typography from 'src/components/core/Typography';
-import DeletionDialog from 'src/components/DeletionDialog';
+import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import Grid from '@mui/material/Unstable_Grid2';
 import OrderBy from 'src/components/OrderBy';

packages/manager/src/features/Managed/Monitors/MonitorTable.tsx

@@ -8,7 +8,7 @@ import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import TableBody from 'src/components/core/TableBody';
 import TableHead from 'src/components/core/TableHead';
-import DeletionDialog from 'src/components/DeletionDialog';
+import { DeletionDialog } from 'src/components/DeletionDialog/DeletionDialog';
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
 import Grid from '@mui/material/Unstable_Grid2';
 import OrderBy from 'src/components/OrderBy';