refactor: [M3-6299] - MUI v5 Migration - Components > Checkbox (part 2)

packages/manager/.changeset/pr-9338-tech-stories-1687997394786.md

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

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

@@ -1,7 +1,7 @@
 import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { Button } from 'src/components/Button/Button';
-import CheckBox from 'src/components/CheckBox';
+import { Checkbox } from 'src/components/Checkbox';
 import { TableBody } from 'src/components/TableBody';
 import { TableHead } from 'src/components/TableHead';
 import { Typography } from 'src/components/Typography';
@@ -130,7 +130,7 @@ const UserSSHKeyPanel = (props: Props) => {
       return (
         <TableRow>
           <TableCell className={classes.cellCheckbox}>
-            <CheckBox
+            <Checkbox
               disabled={disabled}
               checked={authorizedUsers.includes(profile.username)}
               onChange={() => onToggle(profile.username)}
@@ -162,7 +162,7 @@ const UserSSHKeyPanel = (props: Props) => {
     return users?.data.map((user) => (
       <TableRow key={user.username}>
         <TableCell className={classes.cellCheckbox}>
-          <CheckBox
+          <Checkbox
             disabled={disabled || user.ssh_keys.length === 0}
             checked={authorizedUsers.includes(user.username)}
             onChange={() => onToggle(user.username)}

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+};
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  render: (args) => <Checkbox {...args} />,
+  args: {
+    checked: false,
+  },
+  argTypes: {
+    toolTipText: {
+      control: {
+        type: 'text',
+      },
+    },
+    text: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+export const Checked: Story = {
+  render: (args) => <Checkbox {...args} />,
+  args: {
+    checked: true,
+  },
+};
+
+export const Unchecked: Story = {
+  render: (args) => <Checkbox {...args} />,
+  args: {
+    checked: false,
+  },
+};
+
+export const Label: Story = {
+  render: (args) => <Checkbox {...args} />,
+  args: {
+    text: 'This Checkbox has a label',
+  },
+};
+
+export const Tooltip: Story = {
+  render: (args) => <Checkbox {...args} />,
+  args: {
+    toolTipText: 'This is the tooltip!',
+  },
+};
+
+export const LabelAndTooltip: Story = {
+  render: (args) => <Checkbox {...args} />,
+  args: {
+    text: 'This Checkbox has a tooltip',
+    toolTipText: 'This is the tooltip!',
+  },
+};
+
+export default meta;

packages/manager/src/components/Checkbox.tsx

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { styled, Theme } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+import CheckboxIcon from 'src/assets/icons/checkbox.svg';
+import CheckboxCheckedIcon from 'src/assets/icons/checkboxChecked.svg';
+import _Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
+import FormControlLabel from 'src/components/core/FormControlLabel';
+import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon';
+
+interface Props extends CheckboxProps {
+  /**
+   * Renders a `FormControlLabel` that controls the underlying Checkbox with a label of `text`
+   */
+  text?: string | JSX.Element;
+  /**
+   * Renders a tooltip to the right of the Checkbox
+   */
+  toolTipText?: string | JSX.Element;
+  /**
+   * Whether or not the tooltip is interactive
+   * @default false
+   */
+  toolTipInteractive?: boolean;
+  /**
+   * Styles applied to the `FormControlLabel`. Only works when `text` is defined.
+   */
+  sxFormLabel?: SxProps<Theme>;
+}
+
+/**
+ * ## Usage
+ *
+ * - Used when there are lists of options and the user may select any number of choices, including none, one, or many.
+ * - A standalone checkbox is used for a single option that the user can turn on or off (i.e., accepting terms and conditions).
+ *
+ * ## Guidelines
+ *
+ * - Visually present groups of choices as groups, and clearly separate them from other groups on the same page.
+ * - Lay out lists vertically, with one choice per line.
+ * - Write checkbox labels so that users know what will happen if they check a particular box.
+ * - Checkboxes often default to having none of the options selected.
+ * - Changed settings should not take effect until the user clicks the action button.
+ * - If the user clicks the Back button, any changes made to checkboxes should be discarded and the original settings reinstated.
+ */
+export const Checkbox = (props: Props) => {
+  const { toolTipInteractive, toolTipText, text, sxFormLabel, ...rest } = props;
+
+  const BaseCheckbox = (
+    <StyledCheckbox
+      color="primary"
+      icon={<CheckboxIcon />}
+      checkedIcon={<CheckboxCheckedIcon />}
+      data-qa-checked={props.checked}
+      {...rest}
+    />
+  );
+
+  const CheckboxComponent = props.text ? (
+    <StyledFormControlLabel
+      control={BaseCheckbox}
+      label={text}
+      sx={sxFormLabel}
+    />
+  ) : (
+    BaseCheckbox
+  );
+
+  return (
+    <>
+      {CheckboxComponent}
+      {toolTipText ? (
+        <TooltipIcon
+          interactive={toolTipInteractive}
+          text={toolTipText}
+          status="help"
+        />
+      ) : null}
+    </>
+  );
+};
+
+const StyledCheckbox = styled(_Checkbox)(({ theme, ...props }) => ({
+  color: '#ccc',
+  transition: theme.transitions.create(['color']),
+  '& .defaultFill': {
+    transition: theme.transitions.create(['fill']),
+  },
+  '&:hover': {
+    color: theme.palette.primary.main,
+  },
+  ...(props.checked && {
+    color: theme.palette.primary.main,
+  }),
+  ...(props.disabled && {
+    color: '#ccc !important',
+    fill: `${theme.bg.main} !important`,
+    pointerEvents: 'none',
+    '& .defaultFill': {
+      opacity: 0.5,
+      fill: `${theme.bg.main}`,
+    },
+  }),
+}));
+
+const StyledFormControlLabel = styled(FormControlLabel)(() => ({
+  marginRight: 0,
+}));

packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import CheckBox from 'src/components/CheckBox';
+import { Checkbox } from 'src/components/Checkbox';
 import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 
@@ -23,7 +23,7 @@ export const SelectableTableRow = React.memo(
         }}
       >
         <StyledTableCell>
-          <CheckBox
+          <Checkbox
             checked={isChecked}
             onChange={handleToggleCheck}
             inputProps={{