Merge pull request #1176 from ARYANSHAH1567/aryanshah/add_custom_textfield

Add new component to fix the dynamic allocation for label space

Author: leecalcote

src/custom/StyledTextField/index.tsx

@@ -0,0 +1,57 @@
+import { TextField } from '../../base/TextField';
+import { styled } from '@mui/material/styles';
+import type { TextFieldProps } from '../../base/TextField';
+
+export const StyledTextField = styled(TextField)(({ theme }) => ({
+  '& .MuiOutlinedInput-root': {
+    backgroundColor: theme.palette.background.paper,
+    '& fieldset': {
+      borderColor: 'theme.palette.background.brand.default',
+      borderWidth: 1,
+    },
+    '&:hover fieldset': {
+      borderColor: 'theme.palette.background.brand.default',
+      borderWidth: 2,
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: 'theme.palette.background.brand.default',
+      borderWidth: 2,
+      borderLeftWidth: 4,
+      padding: '4px',
+    },
+  },
+  '& .MuiInputLabel-root': {
+    color: theme.palette.text.secondary,
+    '&.Mui-focused': {
+      color: 'theme.palette.background.brand.default',
+    },
+  },
+  '& .MuiInputLabel-asterisk': {
+    display: 'none',
+  },
+  '& .MuiInputBase-input': {
+    color: theme.palette.common.black,
+  },
+}));
+
+interface CustomTextFieldProps extends Omit<TextFieldProps, 'variant' | 'size'> {
+  minWidth?: number;
+  variant?: 'outlined' | 'filled' | 'standard';
+  size?: 'small' | 'medium';
+}
+
+export const CustomTextField = ({
+  minWidth = 150,
+  variant = 'outlined',
+  size = 'small',
+  ...props
+}: CustomTextFieldProps): JSX.Element => {
+  return (
+    <StyledTextField
+      variant={variant}
+      size={size}
+      sx={{ minWidth }}
+      {...props}
+    />
+  );
+};

src/custom/index.tsx

@@ -68,6 +68,7 @@ export {
 export { SetupPreReq } from './SetupPrerequisite';
 export { StyledChapter } from './StyledChapter';
 export { StyledSearchBar } from './StyledSearchBar';
+export { CustomTextField } from './StyledTextField';
 export { Terminal } from './Terminal';
 export { TOC } from './TOCChapter';
 export { TOCLearning } from './TOCLearning';