Skip to content

Commit 632d05b

Browse files
aslilacaslilac
committed
emotion: RichParameterInput 
1 parent d995bcd commit 632d05b

File tree

1 file changed

+100
-104
lines changed

1 file changed

+100
-104
lines changed

‎site/src/components/RichParameterInput/RichParameterInput.tsx

Lines changed: 100 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,111 @@
11
import FormControlLabel from "@mui/material/FormControlLabel";
22
import Radio from "@mui/material/Radio";
33
import RadioGroup from "@mui/material/RadioGroup";
4-
import { makeStyles } from "@mui/styles";
54
import TextField, { TextFieldProps } from "@mui/material/TextField";
6-
import { Stack } from "components/Stack/Stack";
5+
import Box from "@mui/material/Box";
76
import { FC } from "react";
87
import { TemplateVersionParameter } from "api/typesGenerated";
9-
import { colors } from "theme/colors";
108
import { MemoizedMarkdown } from "components/Markdown/Markdown";
9+
import { Stack } from "components/Stack/Stack";
10+
import { colors } from "theme/colors";
1111
import { MultiTextField } from "./MultiTextField";
12-
import Box from "@mui/material/Box";
13-
import { Theme } from "@mui/material/styles";
12+
import { Interpolation, Theme } from "@emotion/react";
1413

1514
const isBoolean = (parameter: TemplateVersionParameter) => {
1615
return parameter.type === "bool";
1716
};
1817

18+
const styles = {
19+
label: (theme) => ({
20+
marginBottom: theme.spacing(0.5),
21+
}),
22+
labelCaption: (theme) => ({
23+
fontSize: 14,
24+
color: theme.palette.text.secondary,
25+
26+
".small &": {
27+
fontSize: 13,
28+
lineHeight: "140%",
29+
},
30+
}),
31+
labelPrimary: (theme) => ({
32+
fontSize: 16,
33+
color: theme.palette.text.primary,
34+
fontWeight: 600,
35+
36+
"& p": {
37+
margin: 0,
38+
lineHeight: "24px", // Keep the same as ParameterInput
39+
},
40+
41+
".small &": {
42+
fontSize: 14,
43+
},
44+
}),
45+
labelImmutable: (theme) => ({
46+
marginTop: theme.spacing(0.5),
47+
marginBottom: theme.spacing(0.5),
48+
color: colors.yellow[7],
49+
}),
50+
textField: {
51+
".small & .MuiInputBase-root": {
52+
height: 36,
53+
fontSize: 14,
54+
borderRadius: 6,
55+
},
56+
},
57+
radioGroup: (theme) => ({
58+
".small & .MuiFormControlLabel-label": {
59+
fontSize: 14,
60+
},
61+
".small & .MuiRadio-root": {
62+
padding: theme.spacing(0.75, "9px"), // 8px + 1px border
63+
},
64+
".small & .MuiRadio-root svg": {
65+
width: 16,
66+
height: 16,
67+
},
68+
}),
69+
checkbox: (theme) => ({
70+
display: "flex",
71+
alignItems: "center",
72+
gap: theme.spacing(1),
73+
}),
74+
labelIconWrapper: (theme) => ({
75+
width: theme.spacing(2.5),
76+
height: theme.spacing(2.5),
77+
display: "block",
78+
79+
".small &": {
80+
display: "none",
81+
},
82+
}),
83+
labelIcon: {
84+
width: "100%",
85+
height: "100%",
86+
objectFit: "contain",
87+
},
88+
radioOption: (theme) => ({
89+
display: "flex",
90+
alignItems: "center",
91+
gap: theme.spacing(1.5),
92+
}),
93+
optionIcon: {
94+
maxHeight: 20,
95+
width: 20,
96+
97+
".small &": {
98+
maxHeight: 16,
99+
width: 16,
100+
},
101+
},
102+
} satisfies Record<string, Interpolation<Theme>>;
103+
19104
export interface ParameterLabelProps {
20105
parameter: TemplateVersionParameter;
21106
}
22107

23108
const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {
24-
const styles = useStyles();
25109
const hasDescription = parameter.description && parameter.description !== "";
26110
const displayName = parameter.display_name
27111
? parameter.display_name
@@ -31,9 +115,9 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {
31115
<label htmlFor={parameter.name}>
32116
<Stack direction="row" alignItems="center">
33117
{parameter.icon && (
34-
<span className={styles.labelIconWrapper}>
118+
<span css={styles.labelIconWrapper}>
35119
<img
36-
className={styles.labelIcon}
120+
css={styles.labelIcon}
37121
alt="Parameter icon"
38122
src={parameter.icon}
39123
/>
@@ -42,13 +126,13 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter }) => {
42126

43127
{hasDescription ? (
44128
<Stack spacing={0}>
45-
<span className={styles.labelPrimary}>{displayName}</span>
46-
<MemoizedMarkdown className={styles.labelCaption}>
129+
<span css={styles.labelPrimary}>{displayName}</span>
130+
<MemoizedMarkdown css={styles.labelCaption}>
47131
{parameter.description}
48132
</MemoizedMarkdown>
49133
</Stack>
50134
) : (
51-
<span className={styles.labelPrimary}>{displayName}</span>
135+
<span css={styles.labelPrimary}>{displayName}</span>
52136
)}
53137
</Stack>
54138
</label>
@@ -94,14 +178,12 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
94178
size,
95179
...props
96180
}) => {
97-
const styles = useStyles();
98-
99181
if (isBoolean(parameter)) {
100182
return (
101183
<RadioGroup
102184
id={parameter.name}
103185
data-testid="parameter-field-bool"
104-
className={styles.radioGroup}
186+
css={styles.radioGroup}
105187
value={value}
106188
onChange={(_, value) => onChange(value)}
107189
>
@@ -126,7 +208,7 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
126208
<RadioGroup
127209
id={parameter.name}
128210
data-testid="parameter-field-options"
129-
className={styles.radioGroup}
211+
css={styles.radioGroup}
130212
value={value}
131213
onChange={(_, value) => onChange(value)}
132214
>
@@ -137,10 +219,10 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
137219
value={option.value}
138220
control={<Radio size="small" />}
139221
label={
140-
<span className={styles.radioOption}>
222+
<span css={styles.radioOption}>
141223
{option.icon && (
142224
<img
143-
className={styles.optionIcon}
225+
css={styles.optionIcon}
144226
alt="Parameter icon"
145227
src={option.icon}
146228
style={{
@@ -198,7 +280,7 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
198280
{...props}
199281
id={parameter.name}
200282
data-testid="parameter-field-text"
201-
className={styles.textField}
283+
css={styles.textField}
202284
type={parameter.type}
203285
disabled={disabled}
204286
required={parameter.required}
@@ -210,89 +292,3 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
210292
/>
211293
);
212294
};
213-
214-
const useStyles = makeStyles<Theme>((theme) => ({
215-
label: {
216-
marginBottom: theme.spacing(0.5),
217-
},
218-
labelCaption: {
219-
fontSize: 14,
220-
color: theme.palette.text.secondary,
221-
222-
".small &": {
223-
fontSize: 13,
224-
lineHeight: "140%",
225-
},
226-
},
227-
labelPrimary: {
228-
fontSize: 16,
229-
color: theme.palette.text.primary,
230-
fontWeight: 600,
231-
232-
"& p": {
233-
margin: 0,
234-
lineHeight: "24px", // Keep the same as ParameterInput
235-
},
236-
237-
".small &": {
238-
fontSize: 14,
239-
},
240-
},
241-
labelImmutable: {
242-
marginTop: theme.spacing(0.5),
243-
marginBottom: theme.spacing(0.5),
244-
color: colors.yellow[7],
245-
},
246-
textField: {
247-
".small & .MuiInputBase-root": {
248-
height: 36,
249-
fontSize: 14,
250-
borderRadius: 6,
251-
},
252-
},
253-
radioGroup: {
254-
".small & .MuiFormControlLabel-label": {
255-
fontSize: 14,
256-
},
257-
".small & .MuiRadio-root": {
258-
padding: theme.spacing(0.75, "9px"), // 8px + 1px border
259-
},
260-
".small & .MuiRadio-root svg": {
261-
width: 16,
262-
height: 16,
263-
},
264-
},
265-
checkbox: {
266-
display: "flex",
267-
alignItems: "center",
268-
gap: theme.spacing(1),
269-
},
270-
labelIconWrapper: {
271-
width: theme.spacing(2.5),
272-
height: theme.spacing(2.5),
273-
display: "block",
274-
275-
".small &": {
276-
display: "none",
277-
},
278-
},
279-
labelIcon: {
280-
width: "100%",
281-
height: "100%",
282-
objectFit: "contain",
283-
},
284-
radioOption: {
285-
display: "flex",
286-
alignItems: "center",
287-
gap: theme.spacing(1.5),
288-
},
289-
optionIcon: {
290-
maxHeight: 20,
291-
width: 20,
292-
293-
".small &": {
294-
maxHeight: 16,
295-
width: 16,
296-
},
297-
},
298-
}));

0 commit comments

Comments
 (0)