Merge branch 'main' into parameter-descriptions

coder · aslilac · Oct 5, 2023 · Oct 4, 2023 · Oct 5, 2023 · Oct 5, 2023
commit 7c7b88beeec82e54ce7dedb078a5f81d12b367c9
@@ -1,19 +1,17 @@
+import Box from "@mui/material/Box";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
-import { Stack } from "components/Stack/Stack";
+import Tooltip from "@mui/material/Tooltip";
+import InfoIcon from "@mui/icons-material/InfoOutlined";
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { type FC } from "react";
 import { TemplateVersionParameter } from "api/typesGenerated";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import { Stack } from "components/Stack/Stack";
 import { colors } from "theme/colors";
 import { MultiTextField } from "./MultiTextField";
-import Box from "@mui/material/Box";
-import { Theme } from "@mui/material/styles";
-import { useTheme } from "@emotion/react";
-import Tooltip from "@mui/material/Tooltip";
-import InfoIcon from "@mui/icons-material/InfoOutlined";
 
 const isBoolean = (parameter: TemplateVersionParameter) => {
   return parameter.type === "bool";
@@ -89,11 +87,6 @@ const styles = {
     height: "100%",
     objectFit: "contain",
   },
-  radioOption: (theme) => ({
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1.5),
-  }),
   optionIcon: {
     maxHeight: 20,
     width: 20,
@@ -182,13 +175,9 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
   size,
   ...props
 }) => {
-  const styles = useStyles();
   const theme = useTheme();
-
   const small = size === "small";
 
-  console.log(size);
-
   if (isBoolean(parameter)) {
     return (
       <RadioGroup
@@ -263,7 +252,7 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
                     ) : (
                       <>
                         <span>{option.name}</span>
-                        <MemoizedMarkdown className={styles.labelCaption}>
+                        <MemoizedMarkdown css={styles.labelCaption}>
                           {option.description}
                         </MemoizedMarkdown>
                       </>
@@ -333,84 +322,3 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
     />
   );
 };
-
-const useStyles = makeStyles<Theme>((theme) => ({
-  label: {
-    marginBottom: theme.spacing(0.5),
-  },
-  labelCaption: {
-    fontSize: 14,
-    color: theme.palette.text.secondary,
-
-    ".small &": {
-      fontSize: 13,
-      lineHeight: "140%",
-    },
-  },
-  labelPrimary: {
-    fontSize: 16,
-    color: theme.palette.text.primary,
-    fontWeight: 600,
-
-    "& p": {
-      margin: 0,
-      lineHeight: "24px", // Keep the same as ParameterInput
-    },
-
-    ".small &": {
-      fontSize: 14,
-    },
-  },
-  labelImmutable: {
-    marginTop: theme.spacing(0.5),
-    marginBottom: theme.spacing(0.5),
-    color: colors.yellow[7],
-  },
-  textField: {
-    ".small & .MuiInputBase-root": {
-      height: 36,
-      fontSize: 14,
-      borderRadius: 6,
-    },
-  },
-  radioGroup: {
-    ".small & .MuiFormControlLabel-label": {
-      fontSize: 14,
-    },
-    ".small & .MuiRadio-root": {
-      padding: theme.spacing(0.75, "9px"), // 8px + 1px border
-    },
-    ".small & .MuiRadio-root svg": {
-      width: 16,
-      height: 16,
-    },
-  },
-  checkbox: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.spacing(1),
-  },
-  labelIconWrapper: {
-    width: theme.spacing(2.5),
-    height: theme.spacing(2.5),
-    display: "block",
-
-    ".small &": {
-      display: "none",
-    },
-  },
-  labelIcon: {
-    width: "100%",
-    height: "100%",
-    objectFit: "contain",
-  },
-  optionIcon: {
-    maxHeight: 20,
-    width: 20,
-
-    ".small &": {
-      maxHeight: 16,
-      width: 16,
-    },
-  },
-}));