diff --git a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx index fb28b8628f6c0..cd654ba7f2abc 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx @@ -69,7 +69,7 @@ export const BooleanType: Story = { }, }; -export const OptionsType: Story = { +export const Options: Story = { args: { value: "first_option", id: "options_parameter", @@ -81,19 +81,61 @@ export const OptionsType: Story = { { name: "First option", value: "first_option", - description: "This is option 1", - icon: "", + description: "", + icon: "/icon/fedora.svg", + }, + { + name: "Second option", + value: "second_option", + description: "", + icon: "/icon/database.svg", + }, + { + name: "Third option", + value: "third_option", + description: "", + icon: "/icon/aws.png", + }, + ], + }), + }, +}; + +export const OptionsWithDescriptions: Story = { + args: { + value: "first_option", + id: "options_parameter", + parameter: createTemplateVersionParameter({ + name: "options_parameter", + type: "string", + description: "Parameter with options", + options: [ + { + name: "First option", + value: "first_option", + description: "This is a short description.", + icon: "/icon/fedora.svg", }, { name: "Second option", value: "second_option", - description: "This is option 2", + description: + "This description is a little bit longer, but still not very long.", icon: "/icon/database.svg", }, { name: "Third option", value: "third_option", - description: "This is option 3", + description: ` +In this description, we will explore the various ways in which this description +is a big long boy. We'll discuss such things as, lots of words wow it's long, and +boy howdy that's a number of sentences that this description contains. By the conclusion +of this essay, I hope to reveal to you, the reader, that this description is just an +absolute chonker. Just way longer than it actually needs to be. Absolutely massive. +Very big. + +> Wow, that description is straight up large. –Some guy, probably +`, icon: "/icon/aws.png", }, ], @@ -217,9 +259,16 @@ export const SmallBooleanType: Story = { }, }; -export const SmallOptionsType: Story = { +export const SmallOptions: Story = { + args: { + ...Options.args, + size: "small", + }, +}; + +export const SmallOptionsWithDescriptions: Story = { args: { - ...OptionsType.args, + ...OptionsWithDescriptions.args, size: "small", }, }; diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx index d2b2436c966dd..a59f55d884041 100644 --- a/site/src/components/RichParameterInput/RichParameterInput.tsx +++ b/site/src/components/RichParameterInput/RichParameterInput.tsx @@ -1,15 +1,16 @@ +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 Box from "@mui/material/Box"; -import { FC } from "react"; +import Tooltip from "@mui/material/Tooltip"; +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 { Interpolation, Theme } from "@emotion/react"; const isBoolean = (parameter: TemplateVersionParameter) => { return parameter.type === "bool"; @@ -85,12 +86,8 @@ const styles = { height: "100%", objectFit: "contain", }, - radioOption: (theme) => ({ - display: "flex", - alignItems: "center", - gap: theme.spacing(1.5), - }), optionIcon: { + pointerEvents: "none", maxHeight: 20, width: 20, @@ -178,6 +175,9 @@ const RichParameterField: React.FC = ({ size, ...props }) => { + const theme = useTheme(); + const small = size === "small"; + if (isBoolean(parameter)) { return ( = ({ value={option.value} control={} label={ - + {option.icon && ( Parameter icon )} - {option.name} - + {option.description ? ( + + {small ? ( + + {option.description} + + } + > + {option.name} + + ) : ( + <> + {option.name} + + {option.description} + + + )} + + ) : ( + option.name + )} + } /> ))}