refactor: [M3-8642] - Migrate Button to UI package (#11250)

* Move Button to UI package

* Added changeset: Migrate `Button` component and styled variants

* Tweaks: fix cannibalistic imports, tests and more

* PR feedback @coliu-akamai: consolidate imports, fix comment

Author: hkhalil-akamai

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

@@ -1,4 +1,4 @@
-import { Paper } from '@linode/ui';
+import { Divider, Paper } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
@@ -21,7 +21,6 @@ import { Typography } from 'src/components/Typography';
 import { useRegionsQuery } from 'src/queries/regions/regions';
 import { doesRegionSupportFeature } from 'src/utilities/doesRegionSupportFeature';
 
-import { Divider } from '@linode/ui';
 import UserSSHKeyPanel from './UserSSHKeyPanel';
 
 import type { Theme } from '@mui/material/styles';

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

@@ -1,8 +1,8 @@
+import { Button } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Button } from 'src/components/Button/Button';
 import { Checkbox } from 'src/components/Checkbox';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';

packages/manager/src/components/AccountActivation/AccountActivationLanding.tsx

@@ -1,3 +1,4 @@
+import { StyledLinkButton } from '@linode/ui';
 import Warning from '@mui/icons-material/CheckCircle';
 import { createLazyRoute } from '@tanstack/react-router';
 import * as React from 'react';
@@ -7,8 +8,6 @@ import { ErrorState } from 'src/components/ErrorState/ErrorState';
 import { Typography } from 'src/components/Typography';
 import { SupportTicketDialog } from 'src/features/Support/SupportTickets/SupportTicketDialog';
 
-import { StyledLinkButton } from '../Button/StyledLinkButton';
-
 import type { AttachmentError } from 'src/features/Support/SupportTicketDetail/SupportTicketDetail';
 
 const AccountActivationLanding = () => {

packages/manager/src/components/ActionsPanel/ActionsPanel.tsx

@@ -1,12 +1,9 @@
-import { Box } from '@linode/ui';
+import { Box, Button } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useStyles } from 'tss-react/mui';
 
-import { Button } from 'src/components/Button/Button';
-
-import type { BoxProps } from '@linode/ui';
-import type { ButtonProps } from 'src/components/Button/Button';
+import type { BoxProps, ButtonProps } from '@linode/ui';
 
 interface ActionButtonsProps extends ButtonProps {
   'data-node-idx'?: number;

packages/manager/src/components/AkamaiBanner/AkamaiBanner.test.tsx

@@ -1,9 +1,9 @@
+import { Button } from '@linode/ui';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { Button } from '../Button/Button';
 import { AkamaiBanner } from './AkamaiBanner';
 
 import type { Flags } from 'src/featureFlags';

packages/manager/src/components/CheckoutBar/styles.ts

@@ -1,7 +1,6 @@
+import { Button } from '@linode/ui';
 import { styled, useTheme } from '@mui/material/styles';
 
-import { Button } from 'src/components/Button/Button';
-
 const StyledButton = styled(Button)(({ theme }) => ({
   marginTop: 18,
   [theme.breakpoints.up('lg')]: {

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

@@ -1,6 +1,6 @@
+import { Button } from '@linode/ui';
 import * as React from 'react';
 
-import { Button } from 'src/components/Button/Button';
 import { Link } from 'src/components/Link';
 import { Typography } from 'src/components/Typography';
 

packages/manager/src/components/DismissibleBanner/DismissibleBanner.styles.ts

@@ -1,8 +1,6 @@
-import { Notice } from '@linode/ui';
+import { Notice, StyledLinkButton } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import { StyledLinkButton } from '../Button/StyledLinkButton';
-
 export const StyledNotice = styled(Notice, { label: 'StyledNotice' })(
   ({ theme }) => ({
     '&&': {

packages/manager/src/components/DismissibleBanner/DismissibleBanner.test.tsx

@@ -1,7 +1,7 @@
+import { Button } from '@linode/ui';
 import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
-import { Button } from 'src/components/Button/Button';
 import { Typography } from 'src/components/Typography';
 import { renderWithTheme } from 'src/utilities/testHelpers';
 

packages/manager/src/components/DownloadCSV/DownloadCSV.tsx

@@ -1,12 +1,11 @@
+import { Button, StyledLinkButton } from '@linode/ui';
 import * as React from 'react';
 import { CSVLink } from 'react-csv';
 
 import DownloadIcon from 'src/assets/icons/lke-download.svg';
-import { Button } from 'src/components/Button/Button';
-import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 
+import type { ButtonType } from '@linode/ui';
 import type { SxProps, Theme } from '@mui/material/styles';
-import type { ButtonType } from 'src/components/Button/Button';
 
 interface DownloadCSVProps {
   buttonType?: 'styledLink' | ButtonType;

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

@@ -1,13 +1,14 @@
+import { Button } from '@linode/ui';
 import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { ActionsPanel } from './ActionsPanel/ActionsPanel';
-import { Button } from './Button/Button';
 import { Drawer } from './Drawer';
 import { TextField } from './TextField';
 import { Typography } from './Typography';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 const meta: Meta<typeof Drawer> = {
   component: Drawer,
   title: 'Components/Drawer',

packages/manager/src/components/EditableEntityLabel/EditableInput.styles.tsx

@@ -1,11 +1,9 @@
-import { Box } from '@linode/ui';
+import { Box, Button, fadeIn } from '@linode/ui';
 import Edit from '@mui/icons-material/Edit';
 import { styled } from '@mui/material/styles';
 
-import { Button } from 'src/components/Button/Button';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
-import { fadeIn } from 'src/styles/keyframes';
 
 import type { EditableTextVariant } from './EditableInput';
 import type { TextFieldProps } from 'src/components/TextField';

packages/manager/src/components/EditableText/EditableText.tsx

@@ -1,16 +1,18 @@
+import { Button } from '@linode/ui';
 import Check from '@mui/icons-material/Check';
 import Close from '@mui/icons-material/Close';
 import Edit from '@mui/icons-material/Edit';
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
-import { Button } from 'src/components/Button/Button';
 import { ClickAwayListener } from 'src/components/ClickAwayListener';
 import { H1Header } from 'src/components/H1Header/H1Header';
 
-import { TextField, TextFieldProps } from '../TextField';
+import { TextField } from '../TextField';
+
+import type { TextFieldProps } from '../TextField';
+import type { Theme } from '@mui/material/styles';
 
 const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
   (theme: Theme, _params, classes) => ({

packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.tsx

@@ -1,10 +1,9 @@
-import { Box } from '@linode/ui';
+import { Box, Button } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import Minus from 'src/assets/icons/LKEminusSign.svg';
 import Plus from 'src/assets/icons/LKEplusSign.svg';
-import { Button } from 'src/components/Button/Button';
 import { TextField } from 'src/components/TextField';
 
 const sxTextFieldBase = {

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

@@ -1,12 +1,11 @@
-import { Box } from '@linode/ui';
+import { Box, Button } from '@linode/ui';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 
 import { EntityHeader } from 'src/components/EntityHeader/EntityHeader';
 import { Hidden } from 'src/components/Hidden';
 import { LinodeActionMenu } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu/LinodeActionMenu';
 
-import { Button } from '../Button/Button';
 import { Link } from '../Link';
 
 import type { Meta, StoryObj } from '@storybook/react';

packages/manager/src/components/ErrorState/ErrorState.tsx

@@ -1,9 +1,9 @@
+import { Button } from '@linode/ui';
 import ErrorOutline from '@mui/icons-material/ErrorOutline';
 import { styled, useTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 
-import { Button } from 'src/components/Button/Button';
 import { Typography } from 'src/components/Typography';
 
 import type { SvgIconProps } from '../SvgIcon';

packages/manager/src/components/GenerateFirewallDialog/GenerateFirewallDialog.tsx

@@ -1,10 +1,9 @@
-import { Notice, Stack } from '@linode/ui';
+import { Button, Notice, Stack } from '@linode/ui';
 import React from 'react';
 
 import { useFlags } from 'src/hooks/useFlags';
 import { replaceNewlinesWithLineBreaks } from 'src/utilities/replaceNewlinesWithLineBreaks';
 
-import { Button } from '../Button/Button';
 import { Dialog } from '../Dialog/Dialog';
 import { ErrorMessage } from '../ErrorMessage';
 import { LinearProgress } from '../LinearProgress';

packages/manager/src/components/IconTextLink/IconTextLink.tsx

@@ -1,10 +1,10 @@
-import { Theme } from '@mui/material/styles';
+import { Button } from '@linode/ui';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { makeStyles } from 'tss-react/mui';
 
-import { Button } from 'src/components/Button/Button';
-import { SvgIcon } from 'src/components/SvgIcon';
+import type { Theme } from '@mui/material/styles';
+import type { SvgIcon } from 'src/components/SvgIcon';
 
 const useStyles = makeStyles()((theme: Theme) => ({
   active: {

packages/manager/src/components/InlineMenuAction/InlineMenuAction.tsx

@@ -1,10 +1,9 @@
 /* eslint-disable react/jsx-no-useless-fragment */
+import { StyledActionButton } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
-import { StyledActionButton } from 'src/components/Button/StyledActionButton';
-
 interface InlineMenuActionProps {
   /** Required action text */
   actionText: string;

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

@@ -1,7 +1,7 @@
+import { Button } from '@linode/ui';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 
-import { Button } from '../Button/Button';
 import { LandingHeader } from './LandingHeader';
 
 import type { Meta, StoryObj } from '@storybook/react';

packages/manager/src/components/LandingHeader/LandingHeader.tsx

@@ -1,16 +1,16 @@
-import { Theme, styled, useTheme } from '@mui/material/styles';
+import { Button } from '@linode/ui';
+import { styled, useTheme } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import * as React from 'react';
 
 import BetaFeedbackIcon from 'src/assets/icons/icon-feedback.svg';
-import {
-  Breadcrumb,
-  BreadcrumbProps,
-} from 'src/components/Breadcrumb/Breadcrumb';
-import { Button } from 'src/components/Button/Button';
+import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
 import { DocsLink } from 'src/components/DocsLink/DocsLink';
 
+import type { Theme } from '@mui/material/styles';
+import type { BreadcrumbProps } from 'src/components/Breadcrumb/Breadcrumb';
+
 export interface LandingHeaderProps {
   analyticsLabel?: string;
   betaFeedbackLink?: string;

packages/manager/src/components/LineGraph/LineGraph.styles.ts

@@ -1,7 +1,6 @@
-import { omittedProps } from '@linode/ui';
+import { Button, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import { Button } from 'src/components/Button/Button';
 import { Table } from 'src/components/Table';
 import { TableBody } from 'src/components/TableBody';
 import { TableCell } from 'src/components/TableCell';

packages/manager/src/components/LineGraph/MetricDisplay.styles.ts

@@ -1,7 +1,6 @@
-import { omittedProps } from '@linode/ui';
+import { Button, omittedProps } from '@linode/ui';
 import { styled } from '@mui/material/styles';
 
-import { Button } from 'src/components/Button/Button';
 import { Table } from 'src/components/Table';
 import { TableCell } from 'src/components/TableCell';
 

packages/manager/src/components/LinkButton.tsx

@@ -1,9 +1,7 @@
-import { Box, CircleProgress } from '@linode/ui';
+import { Box, CircleProgress, StyledLinkButton } from '@linode/ui';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { StyledLinkButton } from './Button/StyledLinkButton';
-
 import type { Theme } from '@mui/material/styles';
 
 const useStyles = makeStyles()((theme: Theme) => ({

packages/manager/src/components/MaintenanceScreen.tsx

@@ -1,5 +1,4 @@
-import { Stack } from '@linode/ui';
-import { Box } from '@linode/ui';
+import { Box, Stack } from '@linode/ui';
 import BuildIcon from '@mui/icons-material/Build';
 import { useTheme } from '@mui/material/styles';
 import * as React from 'react';

packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx

@@ -1,10 +1,9 @@
-import { InputLabel, Notice } from '@linode/ui';
+import { Button, InputLabel, Notice } from '@linode/ui';
 import Close from '@mui/icons-material/Close';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Button } from 'src/components/Button/Button';
 import { LinkButton } from 'src/components/LinkButton';
 import { StyledLinkButtonBox } from 'src/components/SelectFirewallPanel/SelectFirewallPanel';
 import { TextField } from 'src/components/TextField';

packages/manager/src/components/Placeholder/Placeholder.tsx

@@ -1,15 +1,14 @@
+import { Button, fadeIn } from '@linode/ui';
 import { styled, useTheme } from '@mui/material/styles';
 import * as React from 'react';
 
 import LinodeIcon from 'src/assets/addnewmenu/linode.svg';
-import { Button } from 'src/components/Button/Button';
 import { H1Header } from 'src/components/H1Header/H1Header';
 import { Typography } from 'src/components/Typography';
-import { fadeIn } from 'src/styles/keyframes';
 
 import { TransferDisplay } from '../TransferDisplay/TransferDisplay';
 
-import type { ButtonProps } from 'src/components/Button/Button';
+import type { ButtonProps } from '@linode/ui';
 
 export interface ExtendedButtonProps extends ButtonProps {
   target?: string;

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
+import { Button } from '@linode/ui';
 import * as React from 'react';
 
-import { Button } from '../Button/Button';
 import { RemovableSelectionsList } from './RemovableSelectionsList';
 
 import type { RemovableItem } from './RemovableSelectionsList';

packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.test.tsx

@@ -1,9 +1,9 @@
+import { Button } from '@linode/ui';
 import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 
 import { renderWithTheme } from 'src/utilities/testHelpers';
 
-import { Button } from '../Button/Button';
 import { RemovableSelectionsList } from './RemovableSelectionsList';
 
 const defaultList = Array.from({ length: 5 }, (_, index) => {

packages/manager/src/components/RemovableSelectionsList/RemovableSelectionsList.tsx

@@ -12,8 +12,8 @@ import {
   StyledScrollBox,
 } from './RemovableSelectionsList.style';
 
+import type { ButtonProps } from '@linode/ui';
 import type { SxProps, Theme } from '@mui/material';
-import type { ButtonProps } from 'src/components/Button/Button';
 
 export type RemovableItem = {
   // The remaining key-value pairs must have their values typed

packages/manager/src/components/ShowMoreExpansion/ShowMoreExpansion.tsx

@@ -1,10 +1,10 @@
+import { Button } from '@linode/ui';
 import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
 import Collapse from '@mui/material/Collapse';
-import { Theme } from '@mui/material/styles';
 import * as React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { Button } from 'src/components/Button/Button';
+import type { Theme } from '@mui/material/styles';
 
 const useStyles = makeStyles<void, 'caret'>()(
   (theme: Theme, _params, classes) => ({

packages/manager/src/components/Snackbar/ToastNotifications.stories.tsx

@@ -1,8 +1,7 @@
-import { Stack } from '@linode/ui';
+import { Button, Stack } from '@linode/ui';
 import { useSnackbar } from 'notistack';
 import React from 'react';
 
-import { Button } from 'src/components/Button/Button';
 import { Snackbar } from 'src/components/Snackbar/Snackbar';
 import { getEventMessage } from 'src/features/Events/utils';