diff --git a/packages/manager/.changeset/pr-9338-tech-stories-1687997394786.md b/packages/manager/.changeset/pr-9338-tech-stories-1687997394786.md new file mode 100644 index 00000000000..efabe9910aa --- /dev/null +++ b/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)) diff --git a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx b/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx index ca18b01465f..a22d506fa7f 100644 --- a/packages/manager/src/components/AccessPanel/UserSSHKeyPanel.tsx +++ b/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 ( - onToggle(profile.username)} @@ -162,7 +162,7 @@ const UserSSHKeyPanel = (props: Props) => { return users?.data.map((user) => ( - onToggle(user.username)} diff --git a/packages/manager/src/components/CheckBox/CheckBox.stories.mdx b/packages/manager/src/components/CheckBox/CheckBox.stories.mdx deleted file mode 100644 index feeb85108b8..00000000000 --- a/packages/manager/src/components/CheckBox/CheckBox.stories.mdx +++ /dev/null @@ -1,78 +0,0 @@ -import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; -import { useArgs } from '@storybook/client-api'; -import CheckBox from './CheckBox'; - - - -export const Template = (args) => { - const [localArgs, setLocalArgs] = useArgs(); - const onChange = () => { - setLocalArgs({ checked: !localArgs.checked }); - }; - return ; -}; - -# CheckBox - -## Usage - -- Used when there are lists of options and the user may select any number of choices, including none, one, or many. -- A stand-alone checkbox is used for a single option that the user can turn on or off (ie. 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. - - - - {Template.bind({})} - - - - diff --git a/packages/manager/src/components/CheckBox/CheckBox.tsx b/packages/manager/src/components/CheckBox/CheckBox.tsx deleted file mode 100644 index b62822c7f71..00000000000 --- a/packages/manager/src/components/CheckBox/CheckBox.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { styled } from '@mui/material/styles'; -import { SxProps } from '@mui/system'; -import * as React from 'react'; -import CheckboxIcon from 'src/assets/icons/checkbox.svg'; -import CheckboxCheckedIcon from 'src/assets/icons/checkboxChecked.svg'; -import Checkbox, { CheckboxProps } from 'src/components/core/Checkbox'; -import FormControlLabel from 'src/components/core/FormControlLabel'; -import { TooltipIcon } from 'src/components/TooltipIcon/TooltipIcon'; - -interface Props extends CheckboxProps { - text?: string | JSX.Element; - toolTipText?: string | JSX.Element; - toolTipInteractive?: boolean; - sxFormLabel?: SxProps; -} - -const LinodeCheckBox = (props: Props) => { - const { toolTipInteractive, toolTipText, text, sxFormLabel, ...rest } = props; - - if (props.text) { - return ( - <> - } - checkedIcon={} - data-qa-checked={props.checked} - {...rest} - /> - } - label={text} - sx={sxFormLabel} - /> - {toolTipText ? ( - - ) : null} - - ); - } - - return ( - } - checkedIcon={} - data-qa-checked={props.checked} - {...rest} - /> - ); -}; - -export default LinodeCheckBox; - -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, -})); diff --git a/packages/manager/src/components/CheckBox/index.ts b/packages/manager/src/components/CheckBox/index.ts deleted file mode 100644 index fb06f8fa800..00000000000 --- a/packages/manager/src/components/CheckBox/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import CheckBox from './CheckBox'; -export default CheckBox; diff --git a/packages/manager/src/components/Checkbox.stories.tsx b/packages/manager/src/components/Checkbox.stories.tsx new file mode 100644 index 00000000000..e7fa15406aa --- /dev/null +++ b/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 = { + title: 'Components/Checkbox', + component: Checkbox, +}; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => , + args: { + checked: false, + }, + argTypes: { + toolTipText: { + control: { + type: 'text', + }, + }, + text: { + control: { + type: 'text', + }, + }, + }, +}; + +export const Checked: Story = { + render: (args) => , + args: { + checked: true, + }, +}; + +export const Unchecked: Story = { + render: (args) => , + args: { + checked: false, + }, +}; + +export const Label: Story = { + render: (args) => , + args: { + text: 'This Checkbox has a label', + }, +}; + +export const Tooltip: Story = { + render: (args) => , + args: { + toolTipText: 'This is the tooltip!', + }, +}; + +export const LabelAndTooltip: Story = { + render: (args) => , + args: { + text: 'This Checkbox has a tooltip', + toolTipText: 'This is the tooltip!', + }, +}; + +export default meta; diff --git a/packages/manager/src/components/Checkbox.tsx b/packages/manager/src/components/Checkbox.tsx new file mode 100644 index 00000000000..0919de824df --- /dev/null +++ b/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; +} + +/** + * ## 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 = ( + } + checkedIcon={} + data-qa-checked={props.checked} + {...rest} + /> + ); + + const CheckboxComponent = props.text ? ( + + ) : ( + BaseCheckbox + ); + + return ( + <> + {CheckboxComponent} + {toolTipText ? ( + + ) : 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, +})); diff --git a/packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx b/packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx index c7e0f1f000c..05090bd4b0f 100644 --- a/packages/manager/src/components/SelectableTableRow/SelectableTableRow.tsx +++ b/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( }} > - { alignItems={centerCheckbox ? 'center' : 'flex-start'} className={className} > - + I have read and agree to the{' '} diff --git a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferTable.tsx b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferTable.tsx index 9a834eb3a76..44d629d372f 100644 --- a/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferTable.tsx +++ b/packages/manager/src/features/EntityTransfers/EntityTransfersCreate/TransferTable.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import CheckBox from 'src/components/CheckBox'; +import { Checkbox } from 'src/components/Checkbox'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import { TableBody } from 'src/components/TableBody'; @@ -106,7 +106,7 @@ export const TransferTable: React.FC = (props) => { - = React.memo((props) => { {timeRemaining} ) : null}
- = (props) => { /> {flags.metadata && hasMetadataCustomerTag ? (
- = (props) => { {isRawDisk ? rawDiskWarning : null} {flags.metadata && hasMetadataCustomerTag ? ( - = (props) => { return ( - { - = (props) => { paginatedData.map((config: Config) => ( - = (props) => { return ( - { { { { } renderCheckbox={ - { + } />