refactor: [M3-6790] – MUI v5 Migration - Components > Divider

packages/manager/.changeset/pr-9353-changed-1688145967385.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+MUI v5 Migration - `Components > Divider` ([#9353](https://github.com/linode/manager/pull/9353))

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

@@ -4,7 +4,7 @@ import Paper from 'src/components/core/Paper';
 import { Notice } from 'src/components/Notice/Notice';
 import SuspenseLoader from 'src/components/SuspenseLoader';
 import { makeStyles } from 'tss-react/mui';
-import Divider from '../core/Divider';
+import { Divider } from '../Divider';
 import UserSSHKeyPanel from './UserSSHKeyPanel';
 
 const PasswordInput = React.lazy(

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Divider from '../core/Divider';
+import { Divider } from '../Divider';
 import { DisplaySection } from './DisplaySection';
 
 interface DisplaySectionListProps {

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Divider } from 'src/components/Divider';
+
+const meta: Meta<typeof Divider> = {
+  title: 'Components/Divider',
+  component: Divider,
+};
+
+type Story = StoryObj<typeof Divider>;
+
+export const Default: Story = {
+  render: (args) => <Divider {...args} />,
+};
+
+export default meta;

packages/manager/src/components/Divider.tsx

@@ -0,0 +1,31 @@
+import _Divider, { DividerProps as _DividerProps } from '@mui/material/Divider';
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { isPropValid } from 'src/utilities/isPropValid';
+
+export interface DividerProps extends _DividerProps {
+  dark?: boolean;
+  light?: boolean;
+  spacingTop?: number;
+  spacingBottom?: number;
+}
+
+export const Divider = (props: DividerProps) => {
+  return <StyledDivider {...props} />;
+};
+
+const StyledDivider = styled(_Divider, {
+  label: 'StyledDivider',
+  shouldForwardProp: (prop) =>
+    isPropValid(['spacingTop', 'spacingBottom', 'light', 'dark'], prop),
+})<DividerProps>(({ theme, ...props }) => ({
+  borderColor: props.dark
+    ? theme.color.border2
+    : props.light
+    ? theme.name === 'light'
+      ? '#e3e5e8'
+      : '#2e3238'
+    : '',
+  marginTop: props.spacingTop,
+  marginBottom: props.spacingBottom,
+}));

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

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

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

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import ListItem from 'src/components/core/ListItem';
 import ListItemText from 'src/components/core/ListItemText';
 import Tooltip from 'src/components/core/Tooltip';

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

@@ -18,7 +18,7 @@ import TooltipIcon from 'src/assets/icons/get_help.svg';
 import Longview from 'src/assets/icons/longview.svg';
 import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
 import { BetaChip } from 'src/components/BetaChip/BetaChip';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import useAccountManagement from 'src/hooks/useAccountManagement';
 import useFlags from 'src/hooks/useFlags';
 import usePrefetch from 'src/hooks/usePreFetch';

packages/manager/src/components/StackScript/StackScript.tsx

@@ -6,7 +6,7 @@ import { Link, useHistory } from 'react-router-dom';
 import { Button } from 'src/components/Button/Button';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import { Chip } from 'src/components/core/Chip';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import { Typography } from 'src/components/Typography';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';
 import { H1Header } from 'src/components/H1Header/H1Header';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import { Currency } from 'src/components/Currency';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import Grid from '@mui/material/Unstable_Grid2';
 import PaymentDrawer from './PaymentDrawer';
 import PromoDialog from './PromoDialog';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx

@@ -4,7 +4,7 @@ import { APIWarning } from '@linode/api-v4/lib/types';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { Button } from 'src/components/Button/Button';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import InputAdornment from 'src/components/core/InputAdornment';
 import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';

packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddPaymentMethodDrawer.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { PaymentMethod } from '@linode/api-v4/lib/account';
 import { VariantType } from 'notistack';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import { Typography } from 'src/components/Typography';
 import Drawer from 'src/components/Drawer';
 import Grid from '@mui/material/Unstable_Grid2';

packages/manager/src/features/Databases/DatabaseCreate/DatabaseCreate.tsx

@@ -20,7 +20,7 @@ import PostgreSQLIcon from 'src/assets/icons/postgresql.svg';
 import { BetaChip } from 'src/components/BetaChip/BetaChip';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import FormControl from 'src/components/core/FormControl';
 import FormControlLabel from 'src/components/core/FormControlLabel';
 import Paper from 'src/components/core/Paper';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSettings/DatabaseSettings.tsx

@@ -1,6 +1,6 @@
 import { Database } from '@linode/api-v4/lib/databases/types';
 import * as React from 'react';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import Paper from 'src/components/core/Paper';
 import { Typography } from 'src/components/Typography';
 import { useProfile } from 'src/queries/profile';

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummary.tsx

@@ -1,6 +1,6 @@
 import { Database } from '@linode/api-v4/lib/databases/types';
 import * as React from 'react';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import Paper from 'src/components/core/Paper';
 import { Typography } from 'src/components/Typography';
 import Grid from '@mui/material/Unstable_Grid2';

packages/manager/src/features/Kubernetes/KubeCheckoutBar/KubeCheckoutBar.tsx

@@ -2,7 +2,7 @@ import { KubeNodePoolResponse } from '@linode/api-v4';
 import * as React from 'react';
 import { CheckoutBar } from 'src/components/CheckoutBar/CheckoutBar';
 import { CircleProgress } from 'src/components/CircleProgress';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import { Notice } from 'src/components/Notice/Notice';
 import renderGuard from 'src/components/RenderGuard';
 import EUAgreementCheckbox from 'src/features/Account/Agreements/EUAgreementCheckbox';

packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx

@@ -1,7 +1,7 @@
 import Close from '@mui/icons-material/Close';
 import * as React from 'react';
 import { Box } from 'src/components/Box';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import { Typography } from 'src/components/Typography';

packages/manager/src/features/Linodes/CloneLanding/Details.tsx

@@ -2,7 +2,7 @@ import { Disk, Linode } from '@linode/api-v4/lib/linodes';
 import Close from '@mui/icons-material/Close';
 import * as React from 'react';
 import { Button } from 'src/components/Button/Button';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import List from 'src/components/core/List';
 import ListItem from 'src/components/core/ListItem';
 import Paper from 'src/components/core/Paper';

packages/manager/src/features/Linodes/LinodesCreate/AddonsPanel.tsx

@@ -1,19 +1,19 @@
 import { Interface, Linode } from '@linode/api-v4/lib/linodes';
+import Grid from '@mui/material/Unstable_Grid2';
+import { Theme } from '@mui/material/styles';
+import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import CheckBox from 'src/components/CheckBox';
-import Divider from 'src/components/core/Divider';
-import FormControlLabel from 'src/components/core/FormControlLabel';
-import Paper from 'src/components/core/Paper';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
-import { Typography } from 'src/components/Typography';
 import { Currency } from 'src/components/Currency';
-import Grid from '@mui/material/Unstable_Grid2';
+import { Divider } from 'src/components/Divider';
 import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon';
+import { Typography } from 'src/components/Typography';
+import FormControlLabel from 'src/components/core/FormControlLabel';
+import Paper from 'src/components/core/Paper';
 import { CreateTypes } from 'src/store/linodeCreate/linodeCreate.actions';
-import AttachVLAN from './AttachVLAN';
 import { privateIPRegex } from 'src/utilities/ipUtils';
+import AttachVLAN from './AttachVLAN';
 
 const useStyles = makeStyles((theme: Theme) => ({
   vlan: {

packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx

@@ -1,12 +1,12 @@
 import { StackScript, UserDefinedField } from '@linode/api-v4/lib/stackscripts';
+import Grid from '@mui/material/Unstable_Grid2';
+import { styled } from '@mui/material/styles';
 import { decode } from 'he';
 import * as React from 'react';
-import Divider from 'src/components/core/Divider';
-import { styled } from '@mui/material/styles';
+import { Divider } from 'src/components/Divider';
 import { Typography } from 'src/components/Typography';
-import Grid from '@mui/material/Unstable_Grid2';
-import SelectionCardWrapper from 'src/features/Linodes/LinodesCreate/SelectionCardWrapper';
 import { Chip } from 'src/components/core/Chip';
+import SelectionCardWrapper from 'src/features/Linodes/LinodesCreate/SelectionCardWrapper';
 
 const AppPanelGrid = styled(Grid)(({ theme }) => ({
   marginTop: theme.spacing(2),

packages/manager/src/features/Linodes/LinodesDetail/LinodeConfigs/LinodeConfigDialog.tsx

@@ -11,7 +11,7 @@ import { StyledActionPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Box } from 'src/components/Box';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import FormControl from 'src/components/core/FormControl';
 import FormControlLabel from 'src/components/core/FormControlLabel';
 import FormGroup from 'src/components/core/FormGroup';

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx

@@ -7,7 +7,7 @@ import { StyledActionPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
 import { Link } from 'src/components/Link';
 import { CircleProgress } from 'src/components/CircleProgress';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
 import { Typography } from 'src/components/Typography';

packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx

@@ -16,7 +16,7 @@ import * as React from 'react';
 import { StyledActionPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
 import { CircleProgress } from 'src/components/CircleProgress';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
 import { Typography } from 'src/components/Typography';

packages/manager/src/features/Linodes/LinodesDetail/LinodeRebuild/RebuildFromImage.tsx

@@ -5,18 +5,18 @@ import {
 } from '@linode/api-v4/lib/linodes';
 import { RebuildLinodeSchema } from '@linode/validation/lib/linodes.schema';
 import { Theme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import { makeStyles } from '@mui/styles';
 import { Formik, FormikProps } from 'formik';
 import { useSnackbar } from 'notistack';
 import { isEmpty } from 'ramda';
 import * as React from 'react';
 import AccessPanel from 'src/components/AccessPanel/AccessPanel';
 import ActionsPanel from 'src/components/ActionsPanel';
+import { Box } from 'src/components/Box';
 import { Button } from 'src/components/Button/Button';
 import CheckBox from 'src/components/CheckBox';
-import { Box } from 'src/components/Box';
-import Divider from 'src/components/core/Divider';
-import Grid from '@mui/material/Unstable_Grid2';
+import { Divider } from 'src/components/Divider';
 import ImageSelect from 'src/components/ImageSelect';
 import { TypeToConfirm } from 'src/components/TypeToConfirm/TypeToConfirm';
 

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/AlertSection.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import FormControlLabel from 'src/components/core/FormControlLabel';
 import InputAdornment from 'src/components/core/InputAdornment';
 import { Typography } from 'src/components/Typography';

packages/manager/src/features/Linodes/LinodesDetail/LinodeSettings/InterfaceSelect.tsx

@@ -3,7 +3,7 @@ import {
   InterfacePurpose,
 } from '@linode/api-v4/lib/linodes/types';
 import * as React from 'react';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import { makeStyles } from '@mui/styles';
 import { Theme, useTheme } from '@mui/material/styles';
 import Select, { Item } from 'src/components/EnhancedSelect/Select';

packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import Grid from '@mui/material/Unstable_Grid2';
 import MenuItem from 'src/components/core/MenuItem';
 import { TextField } from 'src/components/TextField';

packages/manager/src/features/NodeBalancers/NodeBalancerConfigPanel.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ActionsPanel from 'src/components/ActionsPanel';
 import { Button } from 'src/components/Button/Button';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import FormHelperText from 'src/components/core/FormHelperText';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Link } from 'src/components/Link';

packages/manager/src/features/NotificationCenter/NotificationData/RenderEvent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Box } from 'src/components/Box';
 import classNames from 'classnames';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import { HighlightedMarkdown } from 'src/components/HighlightedMarkdown/HighlightedMarkdown';
 import { Typography } from 'src/components/Typography';
 import useEventInfo from './useEventInfo';

packages/manager/src/features/NotificationCenter/NotificationData/RenderNotification.tsx

@@ -2,7 +2,7 @@ import { NotificationType } from '@linode/api-v4/lib/account';
 import ErrorIcon from '@mui/icons-material/Error';
 import WarningIcon from '@mui/icons-material/Warning';
 import * as React from 'react';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import { useTheme, styled } from '@mui/material/styles';
 import { Typography } from 'src/components/Typography';
 import Box from '@mui/material/Box';

packages/manager/src/features/NotificationCenter/NotificationData/RenderProgressEvent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import BarPercent from 'src/components/BarPercent';
 import { Box } from 'src/components/Box';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import { Typography } from 'src/components/Typography';
 import { Duration } from 'luxon';
 import { Event } from '@linode/api-v4/lib/account/types';

packages/manager/src/features/ObjectStorage/BucketDetail/ObjectDetailsDrawer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import Drawer from 'src/components/Drawer';
 import ExternalLink from 'src/components/ExternalLink';
 import formatDate from 'src/utilities/formatDate';

packages/manager/src/features/ObjectStorage/BucketLanding/BucketDetailsDrawer.tsx

@@ -6,7 +6,7 @@ import {
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
-import Divider from 'src/components/core/Divider';
+import { Divider } from 'src/components/Divider';
 import { Typography } from 'src/components/Typography';
 import Drawer from 'src/components/Drawer';
 import ExternalLink from 'src/components/ExternalLink';