Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Jun 26, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions packages/manager/src/components/.DragAndDrop.stories.mdx
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Empty story i found. no need to keep this around

This file was deleted.

2 changes: 1 addition & 1 deletion packages/manager/src/components/BetaChip/BetaChip.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand Down
69 changes: 69 additions & 0 deletions packages/manager/src/components/Chip.stories.tsx
Original file line number Diff line number Diff line change
@@ -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};
abailly-akamai marked this conversation as resolved.
Show resolved Hide resolved
</div>
);
};

return <ChipWrapper />;
},
};
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this one shows how to use custom React state in our stories


const meta: Meta<ChipProps> = {
title: 'Components/Core/Chip',
component: Chip,
args: { label: 'Chip', onDelete: undefined },
};
export default meta;
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/components/ShowMore/ShowMore.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/manager/src/components/Tag/Tag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
65 changes: 34 additions & 31 deletions packages/manager/src/components/core/Chip.tsx
Original file line number Diff line number Diff line change
@@ -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'}`,
}),
}));
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down