refactor: [M3-6331] - MUI v5 - Components > EnhancedNumberInput

packages/manager/.changeset/pr-9131-tech-stories-1684293772869.md

@@ -2,4 +2,4 @@
 "@linode/manager": Tech Stories
 ---
 
-[M3-6374] - MUI v5 Migration - `Components > Placeholder` ([#9131](https://github.com/linode/manager/pull/9131))
+MUI v5 Migration - `Components > Placeholder` ([#9131](https://github.com/linode/manager/pull/9131))

packages/manager/.changeset/pr-9131-tech-stories-1684293796866.md

@@ -2,4 +2,4 @@
 "@linode/manager": Tech Stories
 ---
 
-[M3-6344] - MUI v5 Migration - `Components > H1Header` ([#9131](https://github.com/linode/manager/pull/9131))
+MUI v5 Migration - `Components > H1Header` ([#9131](https://github.com/linode/manager/pull/9131))

packages/manager/.changeset/pr-9152-tech-stories-1684787293093.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 - `Components > EnhancedNumberInput` ([#9152](https://github.com/linode/manager/pull/9152))

packages/manager/src/components/EnhancedNumberInput/EnhancedNumberInput.stories.mdx

@@ -1,6 +1,6 @@
 import Typography from 'src/components/core/Typography';
 import Paper from 'src/components/core/Paper';
-import { EnhancedNumberInput } from './EnhancedNumberInput';
+import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput';
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import * as React from 'react';
 

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { wrapWithTheme } from 'src/utilities/testHelpers';
 
-import EnhancedNumberInput from './EnhancedNumberInput';
+import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput';
 
 const setValue = jest.fn();
 

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

@@ -1,80 +1,48 @@
-import classNames from 'classnames';
 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';
-import { makeStyles } from '@mui/styles';
+import { styled } from '@mui/material/styles';
 import TextField from 'src/components/TextField';
+import Box from '@mui/material/Box';
 
-const useStyles = makeStyles(() => ({
-  root: {
-    '& $button': {
-      width: 35,
-      height: 34,
-      minWidth: 30,
-      border: 'none',
-      '&:hover': {
-        backgroundColor: 'rgba(224, 224, 224, 0.69) !important',
-      },
-    },
-    '& $input': {
-      padding: '0 8px',
-    },
-    '& $textField': {
-      width: 53,
-      minWidth: 40,
-      height: 34,
-      minHeight: 30,
-    },
-    '& $plusIcon': {
-      width: 14,
-    },
-    '& $minusIcon': {
-      width: 12,
-    },
+const sxTextFieldBase = {
+  padding: '0 8px',
+  textAlign: 'right',
+  '-moz-appearance': 'textfield',
+  '&::-webkit-inner-spin-button': {
+    '-webkit-appearance': 'none',
+    margin: 0,
   },
-  button: {
-    width: 40,
-    height: 40,
-    minWidth: 40,
+  '&::-webkit-outer-spin-button': {
+    '-webkit-appearance': 'none',
+    margin: 0,
   },
-  textField: {
-    margin: '0 5px',
-    height: 40,
-    minHeight: 40,
-    width: 60,
-    minWidth: 50,
-    flexDirection: 'row',
-  },
-  input: {
-    textAlign: 'right',
-    '-moz-appearance': 'textfield',
-    '&::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0,
-    },
-    '&::-webkit-outer-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0,
-    },
-  },
-  plusIcon: {
-    width: 17,
-  },
-  minusIcon: {
-    width: 14,
-  },
-  inputGroup: {
-    display: 'flex',
-    position: 'relative',
-    '& button': {
-      borderRadius: 0,
-      minHeight: 'fit-content',
-    },
+};
+
+const sxTextField = {
+  flexDirection: 'row',
+  height: 34,
+  margin: '0 5px',
+  minHeight: 30,
+  minWidth: 40,
+  width: 53,
+};
+
+const sxButton = {
+  borderRadius: 0,
+  height: 34,
+  minHeight: 'fit-content',
+  minWidth: 30,
+  width: 35,
+  border: 'none',
+  '&:hover': {
+    backgroundColor: 'rgba(224, 224, 224, 0.69)',
+    border: 'none',
   },
-}));
+};
 
-interface Props {
+interface EnhancedNumberInputProps {
   inputLabel?: string;
   value: number;
   setValue: (value: number) => void;
@@ -83,87 +51,99 @@ interface Props {
   min?: number;
 }
 
-export const EnhancedNumberInput: React.FC<Props> = (props) => {
-  const { inputLabel, setValue, disabled } = props;
+export const EnhancedNumberInput = React.memo(
+  (props: EnhancedNumberInputProps) => {
+    const { inputLabel, setValue, disabled } = props;
 
-  const max = props.max ?? 100;
-  const min = props.min ?? 0;
+    const max = props.max ?? 100;
+    const min = props.min ?? 0;
 
-  let value = props.value;
-  if (value > max) {
-    value = max;
-  } else if (value < min) {
-    value = min;
-  }
-
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const parsedValue = +e.target.value;
-    if (parsedValue >= min && parsedValue <= max) {
-      setValue(+e.target.value);
+    let value = props.value;
+    if (value > max) {
+      value = max;
+    } else if (value < min) {
+      value = min;
     }
-  };
 
-  const incrementValue = () => {
-    if (value < max) {
-      setValue(value + 1);
-    }
-  };
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const parsedValue = +e.target.value;
+      if (parsedValue >= min && parsedValue <= max) {
+        setValue(+e.target.value);
+      }
+    };
 
-  const decrementValue = () => {
-    if (value > min) {
-      setValue(value - 1);
-    }
-  };
+    const incrementValue = () => {
+      if (value < max) {
+        setValue(value + 1);
+      }
+    };
 
-  // TODO add error prop for error handling
-  const classes = useStyles();
-  return (
-    <div className={`${classes.root} ${classes.inputGroup}`}>
-      <Button
-        buttonType="outlined"
-        className={classes.button}
-        compactX
-        disabled={disabled || value === min}
-        onClick={decrementValue}
-        name="Subtract 1"
-        aria-label="Subtract 1"
-        data-testid={'decrement-button'}
-      >
-        <Minus className={classes.minusIcon} />
-      </Button>
-      <TextField
-        className={classes.textField}
-        type="number"
-        label={inputLabel ? inputLabel : 'Edit Quantity'}
-        aria-live="polite"
-        name="Quantity"
-        hideLabel
-        value={value}
-        onChange={onChange}
-        inputProps={{
-          className: classNames({
-            [classes.input]: true,
-          }),
+    const decrementValue = () => {
+      if (value > min) {
+        setValue(value - 1);
+      }
+    };
+
+    // TODO add error prop for error handling
+
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          position: 'relative',
         }}
-        min={min}
-        max={max}
-        disabled={disabled}
-        data-testid={'quantity-input'}
-      />
-      <Button
-        buttonType="outlined"
-        className={classes.button}
-        compactX
-        disabled={disabled || value === max}
-        onClick={incrementValue}
-        name="Add 1"
-        aria-label="Add 1"
-        data-testid={'increment-button'}
       >
-        <Plus className={classes.plusIcon} />
-      </Button>
-    </div>
-  );
-};
+        <Button
+          buttonType="outlined"
+          compactX
+          disabled={disabled || value === min}
+          onClick={decrementValue}
+          name="Subtract 1"
+          aria-label="Subtract 1"
+          data-testid={'decrement-button'}
+          sx={sxButton}
+        >
+          <MinusIcon />
+        </Button>
+        <TextField
+          type="number"
+          label={inputLabel ? inputLabel : 'Edit Quantity'}
+          aria-live="polite"
+          name="Quantity"
+          hideLabel
+          value={value}
+          onChange={onChange}
+          min={min}
+          max={max}
+          disabled={disabled}
+          data-testid={'quantity-input'}
+          sx={{
+            ...sxTextField,
+            '.MuiInputBase-root': sxTextField,
+            '.MuiInputBase-input': sxTextFieldBase,
+          }}
+        />
+        <Button
+          buttonType="outlined"
+          compactX
+          disabled={disabled || value === max}
+          onClick={incrementValue}
+          name="Add 1"
+          aria-label="Add 1"
+          data-testid={'increment-button'}
+          sx={sxButton}
+        >
+          <PlusIcon />
+        </Button>
+      </Box>
+    );
+  }
+);
+
+const MinusIcon = styled(Minus)({
+  width: 12,
+});
 
-export default React.memo(EnhancedNumberInput);
+const PlusIcon = styled(Plus)({
+  width: 14,
+});

packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx

@@ -6,7 +6,7 @@ import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
 import { DisplayPrice } from 'src/components/DisplayPrice';
-import EnhancedNumberInput from 'src/components/EnhancedNumberInput';
+import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput';
 import { IconButton } from 'src/components/IconButton';
 import { ExtendedType } from 'src/utilities/extendType';
 import { pluralize } from 'src/utilities/pluralize';

packages/manager/src/features/Kubernetes/KubernetesClusterDetail/NodePoolsDisplay/ResizeNodePoolDrawer.tsx

@@ -7,7 +7,7 @@ import { makeStyles } from '@mui/styles';
 import { Theme } from '@mui/material/styles';
 import Typography from 'src/components/core/Typography';
 import Drawer from 'src/components/Drawer';
-import EnhancedNumberInput from 'src/components/EnhancedNumberInput';
+import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput';
 import { Notice } from 'src/components/Notice/Notice';
 import { useUpdateNodePoolMutation } from 'src/queries/kubernetes';
 import { useSpecificTypes } from 'src/queries/types';

packages/manager/src/features/linodes/LinodesCreate/SelectPlanQuantityPanel.tsx

@@ -10,7 +10,7 @@ import { Theme } from '@mui/material/styles';
 import { TableBody } from 'src/components/TableBody';
 import { TableHead } from 'src/components/TableHead';
 import Typography from 'src/components/core/Typography';
-import EnhancedNumberInput from 'src/components/EnhancedNumberInput';
+import { EnhancedNumberInput } from 'src/components/EnhancedNumberInput/EnhancedNumberInput';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Notice } from 'src/components/Notice/Notice';
 import SelectionCard from 'src/components/SelectionCard';
@@ -177,6 +177,9 @@ export class SelectPlanQuantityPanel extends React.Component<CombinedProps> {
             className={classNames({
               [classes.disabledRow]: disabled,
             })}
+            style={{
+              background: 'red !important',
+            }}
           >
             <TableCell data-qa-plan-name>
               <div className={classes.headingCellContainer}>