diff --git a/packages/manager/.changeset/pr-9310-tech-stories-1687550766529.md b/packages/manager/.changeset/pr-9310-tech-stories-1687550766529.md new file mode 100644 index 00000000000..2beeabb4b2a --- /dev/null +++ b/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)) diff --git a/packages/manager/src/components/.DragAndDrop.stories.mdx b/packages/manager/src/components/.DragAndDrop.stories.mdx deleted file mode 100644 index bb85b6cd935..00000000000 --- a/packages/manager/src/components/.DragAndDrop.stories.mdx +++ /dev/null @@ -1,5 +0,0 @@ -import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -# Drag and Drop diff --git a/packages/manager/src/components/BetaChip/BetaChip.tsx b/packages/manager/src/components/BetaChip/BetaChip.tsx index 7fa8d0d66c9..138f1c758e9 100644 --- a/packages/manager/src/components/BetaChip/BetaChip.tsx +++ b/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 diff --git a/packages/manager/src/components/Chip.stories.mdx b/packages/manager/src/components/Chip.stories.mdx deleted file mode 100644 index 6907703bb55..00000000000 --- a/packages/manager/src/components/Chip.stories.mdx +++ /dev/null @@ -1,149 +0,0 @@ -import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; -import Chip from '/src/components/core/Chip'; - - - -export const Template = (args) => { - return ; -}; - -# Chips - - - - - - - -## Clickable - -Actionable Chips indicate a state and allow users to take action. - -**Example:** An ‘Upgrade’ chip on a Kubernetes cluster shows the software is not current and allows a user to upgrade to a new version. - -**Visual style:** solid color background. - - - - - - - -## Outlined - -Static Chips are an indication of status and are intended to be informational. -No action is required or enabled. - -**Example:** ‘NVMe’ chip on a volume. - -**Visual style:** outline. - - - - - - - -## Custom - - - - - - - -## Component API - - - alert('Clicked!'), - variant: 'default', - color: 'default', - size: 'medium', - }} - argTypes={{ - label: { - description: 'The content of the label.', - table: { - defaultValue: { - summary: 'undefined', - }, - }, - }, - clickable: { - description: - 'If `true`, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not be clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. ', - table: { - defaultValue: { - summary: 'false', - }, - }, - }, - disabled: { - description: - 'If `true`, the chip should be displayed in a disabled state.', - table: { - defaultValue: { - summary: 'false', - }, - }, - }, - onClick: { - description: 'Function called when the object is clicked.', - table: { - defaultValue: { - summary: 'undefined', - }, - }, - }, - color: { - description: 'Color of the Chip `"default" | "primary" | "secondary"`', - options: ['default', 'primary', 'secondary'], - control: { type: 'radio' }, - table: { - defaultValue: { - summary: 'default', - }, - }, - }, - variant: { - description: 'Variant of the Chip `"default" | "outlined"`', - options: ['default', 'outlined'], - control: { type: 'radio' }, - table: { - defaultValue: { - summary: 'default', - }, - }, - }, - size: { - description: 'Size of the Chip `"small" | "medium"`', - options: ['small', 'medium'], - control: { type: 'radio' }, - table: { - defaultValue: { - summary: 'medium', - }, - }, - }, - component: { - description: - 'The component used for the root node. Either a string to use a HTML element or a component.', - }, - }} - > - {Template.bind({})} - - - - \ No newline at end of file diff --git a/packages/manager/src/components/Chip.stories.tsx b/packages/manager/src/components/Chip.stories.tsx new file mode 100644 index 00000000000..77e68c29061 --- /dev/null +++ b/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 = { + render: (args) => , +}; + +/** + * Actionable Chips indicate a state and allow users to take action.
+ * **Example:** An ‘Upgrade’ chip on a Kubernetes cluster shows the software is not current and allows a user to upgrade to a new version.
+ * **Visual style:** solid color background. + */ +export const Clickable: StoryObj = { + render: (args) => , +}; + +/** + * Static Chips are an indication of status and are intended to be informational.
+ * No action is required or enabled.
+ * **Example:** ‘NVMe’ chip on a volume.
+ * **Visual style:** outline. + */ +export const Outlined: StoryObj = { + render: (args) => , +}; + +export const Custom: StoryObj = { + render: (args) => ( + + ), +}; + +export const WithDeleteButton: StoryObj = { + render: (args) => { + const ChipWrapper = () => { + const [isDeleted, setIsDeleted] = React.useState(false); + + const handleDelete = () => { + setIsDeleted(true); + setTimeout(() => { + setIsDeleted(false); + }, 1000); + }; + + return ( +
+ {!isDeleted ? : null} +
+ ); + }; + + return ; + }, +}; + +const meta: Meta = { + title: 'Components/Core/Chip', + component: Chip, + args: { label: 'Chip', onDelete: undefined }, +}; +export default meta; diff --git a/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx b/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx index b38e635ca4e..8a25df357f4 100644 --- a/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx +++ b/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'; diff --git a/packages/manager/src/components/SelectionCard/SelectionCard.stories.mdx b/packages/manager/src/components/SelectionCard/SelectionCard.stories.mdx index ffb844b1e56..b6ff65b3e0f 100644 --- a/packages/manager/src/components/SelectionCard/SelectionCard.stories.mdx +++ b/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'; diff --git a/packages/manager/src/components/ShowMore/ShowMore.tsx b/packages/manager/src/components/ShowMore/ShowMore.tsx index 272db53185e..673ddea4696 100644 --- a/packages/manager/src/components/ShowMore/ShowMore.tsx +++ b/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'; diff --git a/packages/manager/src/components/StackScript/StackScript.tsx b/packages/manager/src/components/StackScript/StackScript.tsx index 14e7852b0f0..bf83eabe834 100644 --- a/packages/manager/src/components/StackScript/StackScript.tsx +++ b/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'; diff --git a/packages/manager/src/components/Tag/Tag.tsx b/packages/manager/src/components/Tag/Tag.tsx index 9e4d3f5bf36..f23ee999d45 100644 --- a/packages/manager/src/components/Tag/Tag.tsx +++ b/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'; diff --git a/packages/manager/src/components/core/Chip.tsx b/packages/manager/src/components/core/Chip.tsx index 4304adda2c7..fa384b4cc44 100644 --- a/packages/manager/src/components/core/Chip.tsx +++ b/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 = ({ +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', - })} + ); }; -export default Chip; +const StyledChip = styled(_Chip, { + label: 'StyledChip', +})(({ 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'}`, + }), +})); diff --git a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentMethodCard.tsx b/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentMethodCard.tsx index 48c5046f57d..788be00c171 100644 --- a/packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentMethodCard.tsx +++ b/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, diff --git a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx b/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx index c2786e73b55..240669e1e89 100644 --- a/packages/manager/src/features/Databases/DatabaseLanding/DatabaseRow.tsx +++ b/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'; diff --git a/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx b/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx index 5a1886efd64..529894035ff 100644 --- a/packages/manager/src/features/Kubernetes/ClusterList/KubernetesClusterRow.tsx +++ b/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'; diff --git a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx index 8fa81731a17..cd30a2d8066 100644 --- a/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx +++ b/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeSummaryPanel.tsx @@ -5,7 +5,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 Chip from 'src/components/core/Chip'; +import { Chip } from 'src/components/core/Chip'; import Paper from 'src/components/core/Paper'; import Grid from '@mui/material/Unstable_Grid2'; import { TagsPanel } from 'src/components/TagsPanel/TagsPanel'; diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx index 14927233cc6..c50a986c25c 100644 --- a/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx +++ b/packages/manager/src/features/Linodes/LinodeEntityDetail.tsx @@ -17,7 +17,7 @@ import { TableBody } from 'src/components/TableBody'; import { TableRow } from 'src/components/TableRow'; import { TagCell } from 'src/components/TagCell/TagCell'; import Box from 'src/components/core/Box'; -import Chip from 'src/components/core/Chip'; +import { Chip } from 'src/components/core/Chip'; import Hidden from 'src/components/core/Hidden'; import Typography, { TypographyProps } from 'src/components/core/Typography'; import { lishLaunch } from 'src/features/Lish/lishUtils'; diff --git a/packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx b/packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx index 62f9d204a6f..b9c60b3a91d 100644 --- a/packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx +++ b/packages/manager/src/features/Linodes/LinodesCreate/AppPanelSection.tsx @@ -6,7 +6,7 @@ import { styled } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; import Grid from '@mui/material/Unstable_Grid2'; import SelectionCardWrapper from 'src/features/Linodes/LinodesCreate/SelectionCardWrapper'; -import Chip from 'src/components/core/Chip'; +import { Chip } from 'src/components/core/Chip'; const AppPanelGrid = styled(Grid)(({ theme }) => ({ marginTop: theme.spacing(2), diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectPlanPanel/PlanSelection.styles.ts b/packages/manager/src/features/Linodes/LinodesCreate/SelectPlanPanel/PlanSelection.styles.ts index afc1749d6d1..739faf352fc 100644 --- a/packages/manager/src/features/Linodes/LinodesCreate/SelectPlanPanel/PlanSelection.styles.ts +++ b/packages/manager/src/features/Linodes/LinodesCreate/SelectPlanPanel/PlanSelection.styles.ts @@ -1,4 +1,4 @@ -import Chip from 'src/components/core/Chip'; +import { Chip } from 'src/components/core/Chip'; import { styled } from '@mui/material/styles'; import { TableCell } from 'src/components/TableCell'; diff --git a/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx b/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx index ef62725bf73..5923e5ca759 100644 --- a/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx +++ b/packages/manager/src/features/Longview/LongviewLanding/LongviewPlans.tsx @@ -7,7 +7,7 @@ import { APIError } from '@linode/api-v4/lib/types'; import classNames from 'classnames'; import * as React from 'react'; import Button from 'src/components/Button'; -import Chip from 'src/components/core/Chip'; +import { Chip } from 'src/components/core/Chip'; import CircularProgress from 'src/components/core/CircularProgress'; import Paper from 'src/components/core/Paper'; import { makeStyles } from '@mui/styles'; diff --git a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx index 87ecc1b056a..405d8b6a681 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; -import Chip from 'src/components/core/Chip'; import Divider from 'src/components/core/Divider'; import Grid from '@mui/material/Unstable_Grid2'; import MenuItem from 'src/components/core/MenuItem'; import TextField from 'src/components/TextField'; import Typography from 'src/components/core/Typography'; +import { Chip } from 'src/components/core/Chip'; import { ConfigNodeIPSelect } from './ConfigNodeIPSelect'; import { getErrorMap } from 'src/utilities/errorUtils'; import { NodeBalancerConfigNodeFields } from './types'; diff --git a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx index 3f69604c33b..072ab7108d8 100644 --- a/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx +++ b/packages/manager/src/features/Support/SupportTicketDetail/SupportTicketDetail.tsx @@ -3,7 +3,7 @@ import { isEmpty } from 'ramda'; import * as React from 'react'; import { Link, useHistory, useLocation, useParams } from 'react-router-dom'; import { CircleProgress } from 'src/components/CircleProgress'; -import Chip from 'src/components/core/Chip'; +import { Chip } from 'src/components/core/Chip'; import { makeStyles } from 'tss-react/mui'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography';