diff --git a/packages/manager/.changeset/pr-9339-tech-stories-1688002163233.md b/packages/manager/.changeset/pr-9339-tech-stories-1688002163233.md new file mode 100644 index 00000000000..37225ba68a3 --- /dev/null +++ b/packages/manager/.changeset/pr-9339-tech-stories-1688002163233.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tech Stories +--- + +MUI v5 Migration - Components > Chip ([#9339](https://github.com/linode/manager/pull/9339)) diff --git a/packages/manager/src/components/BetaChip/BetaChip.tsx b/packages/manager/src/components/BetaChip/BetaChip.tsx index 138f1c758e9..1ea01e6160d 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/Chip'; import { makeStyles } from 'tss-react/mui'; interface BetaChipProps diff --git a/packages/manager/src/components/Chip.stories.tsx b/packages/manager/src/components/Chip.stories.tsx index 77e68c29061..bb5ec20692d 100644 --- a/packages/manager/src/components/Chip.stories.tsx +++ b/packages/manager/src/components/Chip.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Chip } from 'src/components/core/Chip'; -import type { ChipProps } from './core/Chip'; +import { Chip } from './Chip'; +import type { ChipProps } from './Chip'; import type { Meta, StoryObj } from '@storybook/react'; export const Default: StoryObj = { @@ -62,7 +62,7 @@ export const WithDeleteButton: StoryObj = { }; const meta: Meta = { - title: 'Components/Core/Chip', + title: 'Components/Chip', component: Chip, args: { label: 'Chip', onDelete: undefined }, }; diff --git a/packages/manager/src/components/core/Chip.tsx b/packages/manager/src/components/Chip.tsx similarity index 90% rename from packages/manager/src/components/core/Chip.tsx rename to packages/manager/src/components/Chip.tsx index fa384b4cc44..ddc7563e31b 100644 --- a/packages/manager/src/components/core/Chip.tsx +++ b/packages/manager/src/components/Chip.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { default as _Chip, ChipProps as _ChipProps } from '@mui/material/Chip'; import { styled } from '@mui/material/styles'; +import { isPropValid } from 'src/utilities/isPropValid'; export interface ChipProps extends _ChipProps { /** @@ -37,6 +38,7 @@ export const Chip = ({ const StyledChip = styled(_Chip, { label: 'StyledChip', + shouldForwardProp: (prop) => isPropValid(['inTable', 'outlineColor'], prop), })(({ theme, ...props }) => ({ ...(props.inTable && { marginTop: 0, diff --git a/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx b/packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx index 8a25df357f4..66b81542dac 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/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.tsx b/packages/manager/src/components/SelectionCard/SelectionCard.stories.tsx index 5bcd8e51b26..8dcca7752c2 100644 --- a/packages/manager/src/components/SelectionCard/SelectionCard.stories.tsx +++ b/packages/manager/src/components/SelectionCard/SelectionCard.stories.tsx @@ -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/Chip'; import { SelectionCard } from './SelectionCard'; import type { Meta, StoryObj } from '@storybook/react'; import type { SelectionCardProps } from './SelectionCard'; diff --git a/packages/manager/src/components/ShowMore/ShowMore.tsx b/packages/manager/src/components/ShowMore/ShowMore.tsx index 673ddea4696..5999b7ad260 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/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 eba8f6b6bff..14f21abb455 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/Button'; import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; -import { Chip } from 'src/components/core/Chip'; +import { Chip } from 'src/components/Chip'; import Divider from 'src/components/core/Divider'; import { Typography } from 'src/components/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 f23ee999d45..c7fd768fe0f 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/Chip'; import { truncateEnd } from 'src/utilities/truncate'; type Variants = 'blue' | 'lightBlue'; 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 4af3c7cf1d2..c546506b92d 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/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 3e17acb7cd5..20f5616f7ef 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/Chip'; import { Hidden } from 'src/components/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 4685012b83b..4b907469c1a 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/Chip'; import { Hidden } from 'src/components/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 6c532299c8a..0cd52785cb2 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/Button'; import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog'; -import { Chip } from 'src/components/core/Chip'; +import { Chip } from 'src/components/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 2f13cc725df..4407f0cabce 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/Box'; -import { Chip } from 'src/components/core/Chip'; +import { Chip } from 'src/components/Chip'; import { Typography, TypographyProps } from 'src/components/Typography'; import { Hidden } from 'src/components/Hidden'; 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 a7dcbb05e50..3123ef7f74a 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/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/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 739faf352fc..5b4e8b1ed7a 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/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 787be915670..5920e8cdd70 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/Button'; -import { Chip } from 'src/components/core/Chip'; +import { Chip } from 'src/components/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 97cd5120f2f..577cade1109 100644 --- a/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx +++ b/packages/manager/src/features/NodeBalancers/NodeBalancerConfigNode.tsx @@ -6,7 +6,7 @@ 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/Typography'; -import { Chip } from 'src/components/core/Chip'; +import { Chip } from 'src/components/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 9e98ce49441..87cc44236d3 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/Chip'; import { makeStyles } from 'tss-react/mui'; import { Theme } from '@mui/material/styles'; import { Typography } from 'src/components/Typography';