Refactor: [M3-6522] Chip: MUI refactor + v7 story

packages/manager/.changeset/pr-9310-tech-stories-1687550766529.md

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

packages/manager/src/components/BetaChip/BetaChip.tsx

@@ -1,6 +1,6 @@
 import { Theme } from '@mui/material/styles';
 import * as React from 'react';
-import Chip, { ChipProps } from 'src/components/core/Chip';
+import { Chip, ChipProps } from 'src/components/core/Chip';
 import { makeStyles } from 'tss-react/mui';
 
 interface BetaChipProps

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Chip } from 'src/components/core/Chip';
+import type { ChipProps } from './core/Chip';
+import type { Meta, StoryObj } from '@storybook/react';
+
+export const Default: StoryObj<ChipProps> = {
+  render: (args) => <Chip {...args} />,
+};
+
+/**
+ * Actionable Chips indicate a state and allow users to take action.<br />
+ * **Example:** An ‘Upgrade’ chip on a Kubernetes cluster shows the software is not current and allows a user to upgrade to a new version.<br />
+ * **Visual style:** solid color background.
+ */
+export const Clickable: StoryObj<ChipProps> = {
+  render: (args) => <Chip {...args} label="Upgrade" clickable />,
+};
+
+/**
+ * Static Chips are an indication of status and are intended to be informational.<br />
+ * No action is required or enabled.<br />
+ * **Example:** ‘NVMe’ chip on a volume.<br />
+ * **Visual style:** outline.
+ */
+export const Outlined: StoryObj<ChipProps> = {
+  render: (args) => <Chip {...args} variant="outlined" />,
+};
+
+export const Custom: StoryObj<ChipProps> = {
+  render: (args) => (
+    <Chip
+      {...args}
+      label="NVMe"
+      variant="outlined"
+      outlineColor="green"
+      size="small"
+    />
+  ),
+};
+
+export const WithDeleteButton: StoryObj<ChipProps> = {
+  render: (args) => {
+    const ChipWrapper = () => {
+      const [isDeleted, setIsDeleted] = React.useState(false);
+
+      const handleDelete = () => {
+        setIsDeleted(true);
+        setTimeout(() => {
+          setIsDeleted(false);
+        }, 1000);
+      };
+
+      return (
+        <div style={{ height: 20 }}>
+          {!isDeleted ? <Chip {...args} onDelete={handleDelete} /> : null}
+        </div>
+      );
+    };
+
+    return <ChipWrapper />;
+  },
+};
+
+const meta: Meta<ChipProps> = {
+  title: 'Components/Core/Chip',
+  component: Chip,
+  args: { label: 'Chip', onDelete: undefined },
+};
+export default meta;

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx

@@ -4,7 +4,7 @@ import { PaymentMethod } from '@linode/api-v4/lib/account/types';
 import { useTheme } from '@mui/material/styles';
 import Paper from 'src/components/core/Paper';
 import Box from '@mui/material/Box';
-import Chip from 'src/components/core/Chip';
+import { Chip } from 'src/components/core/Chip';
 import CreditCard from 'src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/CreditCard';
 import ThirdPartyPayment from './ThirdPartyPayment';
 import ActionMenu, { Action } from 'src/components/ActionMenu';

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

@@ -3,7 +3,7 @@ import Alarm from '@mui/icons-material/Alarm';
 import InsertPhoto from '@mui/icons-material/InsertPhoto';
 import DE from 'flag-icons/flags/4x3/de.svg';
 import US from 'flag-icons/flags/4x3/us.svg';
-import Chip from '/src/components/core/Chip';
+import { Chip } from '/src/components/core/Chip';
 import SelectionCard from '/src/components/SelectionCard/SelectionCard';
 
 <Meta title="Components/Selection Card" component={SelectionCard} />

packages/manager/src/components/ShowMore/ShowMore.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Chip, { ChipProps } from 'src/components/core/Chip';
+import { Chip, ChipProps } from 'src/components/core/Chip';
 import Popover from '@mui/material/Popover';
 import { styled, useTheme } from '@mui/material/styles';
 

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

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

packages/manager/src/components/Tag/Tag.tsx

@@ -2,7 +2,7 @@ import Close from '@mui/icons-material/Close';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
-import Chip, { ChipProps } from 'src/components/core/Chip';
+import { Chip, ChipProps } from 'src/components/core/Chip';
 import { truncateEnd } from 'src/utilities/truncate';
 
 type Variants = 'blue' | 'lightBlue';

packages/manager/src/components/core/Chip.tsx

@@ -1,49 +1,52 @@
 import * as React from 'react';
-import classNames from 'classnames';
-import { makeStyles } from '@mui/styles';
-import { Theme } from '@mui/material/styles';
 import { default as _Chip, ChipProps as _ChipProps } from '@mui/material/Chip';
-
-const useStyles = makeStyles((theme: Theme) => ({
-  inTable: {
-    marginTop: 0,
-    marginBottom: 0,
-    marginLeft: theme.spacing(2),
-    minHeight: theme.spacing(2),
-    paddingLeft: theme.spacing(0.5),
-    paddingRight: theme.spacing(0.5),
-  },
-  ['outline-gray']: {
-    border: '1px solid #ccc',
-  },
-  ['outline-green']: {
-    border: '1px solid #02B159',
-  },
-}));
+import { styled } from '@mui/material/styles';
 
 export interface ChipProps extends _ChipProps {
-  outlineColor?: 'green' | 'gray';
+  /**
+   * Optional component to render instead of a span.
+   */
   component?: string;
+  /**
+   * If true, the chip will inherit styles to allow for use in a table.
+   * @default false
+   */
   inTable?: boolean;
+  /**
+   * The color of the outline when the variant is outlined.
+   * @default 'gray'
+   */
+  outlineColor?: 'green' | 'gray';
 }
 
-const Chip: React.FC<ChipProps> = ({
+export const Chip = ({
   outlineColor = 'gray',
   className,
   inTable,
   ...props
-}) => {
-  const classes = useStyles();
-
+}: ChipProps) => {
   return (
-    <_Chip
-      className={classNames(className, {
-        [classes.inTable]: inTable,
-        [classes[`outline-${outlineColor}`]]: props.variant === 'outlined',
-      })}
+    <StyledChip
+      inTable={inTable}
+      outlineColor={outlineColor}
+      className={className}
       {...props}
     />
   );
 };
 
-export default Chip;
+const StyledChip = styled(_Chip, {
+  label: 'StyledChip',
+})<ChipProps>(({ theme, ...props }) => ({
+  ...(props.inTable && {
+    marginTop: 0,
+    marginBottom: 0,
+    marginLeft: theme.spacing(2),
+    minHeight: theme.spacing(2),
+    paddingLeft: theme.spacing(0.5),
+    paddingRight: theme.spacing(0.5),
+  }),
+  ...(props.variant === 'outlined' && {
+    border: `1px solid ${props.outlineColor === 'green' ? '#02B159' : '#ccc'}`,
+  }),
+}));

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

@@ -1,6 +1,6 @@
 import { PaymentMethod, PaymentType } from '@linode/api-v4';
 import * as React from 'react';
-import Chip from 'src/components/core/Chip';
+import { Chip } from 'src/components/core/Chip';
 import Grid from '@mui/material/Unstable_Grid2';
 import {
   getIcon as getTPPIcon,

packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx

@@ -5,7 +5,7 @@ import {
 } from '@linode/api-v4/lib/databases/types';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import Chip from 'src/components/core/Chip';
+import { Chip } from 'src/components/core/Chip';
 import Hidden from 'src/components/core/Hidden';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { Status } from 'src/components/StatusIcon/StatusIcon';

packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Chip from 'src/components/core/Chip';
+import { Chip } from 'src/components/core/Chip';
 import Hidden from 'src/components/core/Hidden';
 import Grid from '@mui/material/Unstable_Grid2';
 import { DateTimeDisplay } from 'src/components/DateTimeDisplay';