refactor: M3-6195 - Add tss-react and refactor Button to styled API

packages/manager/package.json

@@ -90,6 +90,7 @@
     "search-string": "^3.1.0",
     "stream-browserify": "^3.0.0",
     "throttle-debounce": "^2.0.0",
+    "tss-react": "^4.6.1",
     "typescript-fsa": "^3.0.0",
     "typescript-fsa-reducers": "^1.2.0",
     "url-parse": "^1.5.9",

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Button from './Button';
+import { render } from '@testing-library/react';
+
+describe('Button', () => {
+  it('should render', () => {
+    const { getByText } = render(<Button>Test</Button>);
+    getByText('Test');
+  });
+
+  it('should render the loading state', () => {
+    const { getByTestId } = render(<Button loading>Test</Button>);
+
+    const loadingIcon = getByTestId('loadingIcon');
+    expect(loadingIcon).toBeInTheDocument();
+  });
+
+  it('should render the HelpIcon when tooltipText is true', () => {
+    const { getByTestId } = render(<Button tooltipText="Test">Test</Button>);
+
+    const helpIcon = getByTestId('HelpOutlineIcon');
+    expect(helpIcon).toBeInTheDocument();
+  });
+});

packages/manager/src/components/Button/Button.tsx

@@ -1,121 +1,101 @@
-import classNames from 'classnames';
-import { always, cond, propEq } from 'ramda';
 import * as React from 'react';
 import Reload from 'src/assets/icons/reload.svg';
-import _Button, { ButtonProps } from 'src/components/core/Button';
-import { makeStyles, Theme } from 'src/components/core/styles';
+import _Button, { ButtonProps } from '@mui/material/Button';
 import HelpIcon from 'src/components/HelpIcon';
+import { useTheme, styled } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+import { isPropValid } from '../../utilities/isPropValid';
+import { rotate360 } from '../../styles/keyframes';
 
 export interface Props extends ButtonProps {
   buttonType?: 'primary' | 'secondary' | 'outlined';
   className?: string;
+  sx?: SxProps;
   compactX?: boolean;
   compactY?: boolean;
   loading?: boolean;
   tooltipText?: string;
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  '@keyframes rotate': {
-    from: {
-      transform: 'rotate(0deg)',
-    },
-    to: {
-      transform: 'rotate(360deg)',
-    },
-  },
-  loading: {
+const StyledButton = styled(_Button, {
+  shouldForwardProp: (prop) =>
+    isPropValid(['compactX', 'compactY', 'loading', 'buttonType'], prop),
+})<Props>(({ theme, ...props }) => ({
+  ...(props.buttonType === 'secondary' &&
+    props.compactX && {
+      minWidth: 50,
+      paddingRight: 0,
+      paddingLeft: 0,
+    }),
+  ...(props.buttonType === 'secondary' &&
+    props.compactY && {
+      minHeight: 20,
+      paddingTop: 0,
+      paddingBottom: 0,
+    }),
+  ...(props.loading && {
     '& svg': {
-      animation: '$rotate 2s linear infinite',
+      animation: `${rotate360} 2s linear infinite`,
       margin: '0 auto',
-      height: `${theme.spacing(2)} !important`,
-      width: `${theme.spacing(2)} !important`,
+      height: `${theme.spacing(2)}`,
+      width: `${theme.spacing(2)}`,
     },
-  },
-  compactX: {
-    minWidth: 50,
-    paddingRight: 0,
-    paddingLeft: 0,
-  },
-  compactY: {
-    minHeight: 20,
-    paddingTop: 0,
-    paddingBottom: 0,
-  },
-  reg: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  '@supports (-moz-appearance: none)': {
-    /* Fix text alignment for Firefox */
-    reg: {
-      marginTop: 2,
+    '&:disabled': {
+      backgroundColor:
+        props.buttonType === 'primary' && theme.palette.text.primary,
     },
-  },
-  helpIcon: {
-    marginLeft: `-${theme.spacing()}`,
-  },
+  }),
 }));
 
-type CombinedProps = Props;
-
-const getVariant = cond([
-  [propEq('buttonType', 'primary'), always('contained')],
-  [propEq('buttonType', 'secondary'), always('contained')],
-  [propEq('buttonType', 'outlined'), always('outlined')],
-  [() => true, always(undefined)],
-]);
-
-const getColor = cond([
-  [propEq('buttonType', 'primary'), always('primary')],
-  [propEq('buttonType', 'secondary'), always('secondary')],
-  [() => true, always(undefined)],
-]);
+const Span = styled('span')({
+  display: 'flex',
+  alignItems: 'center',
+  '@supports (-moz-appearance: none)': {
+    /* Fix text alignment for Firefox */
+    marginTop: 2,
+  },
+});
 
-export const Button: React.FC<CombinedProps> = (props) => {
-  const classes = useStyles();
+const Button = ({
+  buttonType,
+  children,
+  className,
+  compactX,
+  compactY,
+  disabled,
+  loading,
+  sx,
+  tooltipText,
+  ...rest
+}: Props) => {
+  const theme = useTheme();
+  const color = buttonType === 'primary' ? 'primary' : 'secondary';
+  const sxHelpIcon = { marginLeft: `-${theme.spacing()}` };
 
-  const {
-    buttonType,
-    className,
-    compactX,
-    compactY,
-    loading,
-    tooltipText,
-    ...rest
-  } = props;
+  const variant =
+    buttonType === 'primary' || buttonType === 'secondary'
+      ? 'contained'
+      : buttonType === 'outlined'
+      ? 'outlined'
+      : 'text';
 
   return (
     <React.Fragment>
-      <_Button
+      <StyledButton
         {...rest}
-        className={classNames(
-          buttonType,
-          {
-            [classes.compactX]: buttonType === 'secondary' ? compactX : false,
-            [classes.compactY]: buttonType === 'secondary' ? compactY : false,
-            [classes.loading]: loading,
-            disabled: props.disabled,
-            loading,
-          },
-          className
-        )}
-        color={getColor(props)}
-        disabled={props.disabled || loading}
-        variant={getVariant(props)}
+        buttonType={buttonType}
+        className={className}
+        color={color}
+        compactX={compactX}
+        compactY={compactY}
+        disabled={disabled || loading}
+        loading={loading}
+        sx={sx}
+        variant={variant}
       >
-        <span
-          className={classNames({
-            [classes.reg]: true,
-          })}
-          data-qa-loading={loading}
-        >
-          {loading ? <Reload /> : props.children}
-        </span>
-      </_Button>
-      {tooltipText && (
-        <HelpIcon className={classes.helpIcon} text={tooltipText} />
-      )}
+        <Span data-testid="loadingIcon">{loading ? <Reload /> : children}</Span>
+      </StyledButton>
+      {tooltipText && <HelpIcon sx={sxHelpIcon} text={tooltipText} />}
     </React.Fragment>
   );
 };

packages/manager/src/components/HelpIcon/HelpIcon.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import IconButton from 'src/components/core/IconButton';
 import { makeStyles } from 'src/components/core/styles';
 import Tooltip, { TooltipProps } from 'src/components/core/Tooltip';
+import { SxProps } from '@mui/system';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -20,6 +21,7 @@ const useStyles = makeStyles(() => ({
 
 interface Props
   extends Omit<TooltipProps, 'leaveDelay' | 'title' | 'children'> {
+  sx?: SxProps;
   text: string | JSX.Element;
   className?: string;
   interactive?: boolean;
@@ -56,10 +58,12 @@ const HelpIcon: React.FC<CombinedProps> = (props) => {
     leaveDelay,
     classes,
     onMouseEnter,
+    sx,
   } = props;
 
   return (
     <Tooltip
+      sx={sx}
       title={text}
       data-qa-help-tooltip
       enterTouchDelay={0}

packages/manager/src/features/ObjectStorage/BucketDetail/CreateFolderDrawer.tsx

@@ -4,7 +4,7 @@ import TextField from 'src/components/TextField';
 import ActionsPanel from 'src/components/ActionsPanel';
 import { useFormik } from 'formik';
 import { useCreateObjectUrlMutation } from 'src/queries/objectStorage';
-import { Button } from 'src/components/Button/Button';
+import Button from 'src/components/Button';
 
 interface Props {
   open: boolean;

packages/manager/src/features/Profile/APITokens/RevokeTokenDialog.tsx

@@ -3,7 +3,7 @@ import ConfirmationDialog from 'src/components/ConfirmationDialog';
 import ActionsPanel from 'src/components/ActionsPanel';
 import Typography from 'src/components/core/Typography';
 import { Token } from '@linode/api-v4/lib/profile/types';
-import { Button } from 'src/components/Button/Button';
+import Button from 'src/components/Button';
 import { APITokenType } from './APITokenTable';
 import {
   useRevokeAppAccessTokenMutation,

packages/manager/src/styles/index.ts

@@ -0,0 +1 @@
+export { rotate360 } from './keyframes';

packages/manager/src/styles/keyframes.ts

@@ -0,0 +1,10 @@
+import { keyframes } from 'tss-react';
+
+export const rotate360 = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;

packages/manager/src/themeFactory.ts

@@ -488,6 +488,7 @@ export const base: ThemeOptions = {
           '&:disabled': {
             color: 'white',
           },
+          // TODO: We can remove this after migration since we can define variants
           '&.loading': {
             backgroundColor: primaryColors.text,
           },
@@ -509,6 +510,7 @@ export const base: ThemeOptions = {
             borderColor: '#c9cacb',
             color: '#c9cacb',
           },
+          // TODO: We can remove this after migration since we can define variants
           '&.loading': {
             color: primaryColors.text,
           },

packages/manager/src/utilities/isPropValid/index.ts

@@ -0,0 +1 @@
+export { isPropValid } from './isPropValid';

packages/manager/src/utilities/isPropValid/isPropValid.ts

@@ -0,0 +1,18 @@
+/**
+ * Helper to filter out props that are not valid for a component to avoid
+ * passing them down to the DOM. This is to avoid the verbose API presented by
+ * MUI and Emotion and to provide type safety.
+ * @param props Array of props to filter out
+ * @param prop The prop to check
+ * @returns Boolean indicating whether the prop is valid
+ * @see https://mui.com/material-ui/customization/how-to-customize/#dynamic-overrides
+ * @Usage
+ *    const MyComponent = styled(Button, {
+ *      shouldForwardProp: (prop) =>
+ *      isPropValid(['compactX', 'compactY'], prop),
+ *    })<Props>(({ theme, ...props }) => ({ ... }));
+ */
+export const isPropValid = <CustomProps extends Record<string, unknown>>(
+  props: Array<keyof CustomProps>,
+  prop: PropertyKey
+): boolean => !props.includes(prop as string);