milestone 32: task-shaped configuration, file mode as a rendering, config status api

admin/src/ui/Select.tsx

@@ -11,7 +11,16 @@
  */
 
 import * as stylex from "@stylexjs/stylex";
-import { Button, Label, ListBox, ListBoxItem, Popover, Select as AriaSelect, SelectValue } from "react-aria-components";
+import {
+	Button,
+	Label,
+	ListBox,
+	ListBoxItem,
+	Popover,
+	Select as AriaSelect,
+	SelectValue,
+	Text,
+} from "react-aria-components";
 import { colors } from "./tokens.stylex";
 import { styles as shared } from "./styles";
 
@@ -27,6 +36,12 @@ interface Props {
 	/** The visible label. Omit it only when `aria-label` names the control. */
 	label?: string;
 	"aria-label"?: string;
+	/**
+	 * Text under the control that qualifies it. RAC gives it an id and points the
+	 * trigger's `aria-describedby` at it, which a sibling rendered by the caller
+	 * cannot be: the trigger is this file's, so only this file can name it.
+	 */
+	description?: string;
 	/**
 	 * `field` matches a full-width form input, `compactField` the smaller one a
 	 * dialog uses, `inline` a control sitting in a row of other controls.
@@ -70,6 +85,12 @@ const styles = stylex.create({
 	chevron: {
 		color: colors.textMuted,
 	},
+	description: {
+		display: "block",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		color: colors.textMuted,
+	},
 	popover: {
 		width: "var(--trigger-width)",
 		maxHeight: "16rem",
@@ -116,6 +137,7 @@ export default function Select({
 	onChange,
 	label,
 	"aria-label": ariaLabel,
+	description,
 	variant = "field",
 	isDisabled = false,
 }: Props) {
@@ -136,6 +158,11 @@ export default function Select({
 					▾
 				</span>
 			</Button>
+			{description !== undefined && (
+				<Text slot="description" {...stylex.props(styles.description)}>
+					{description}
+				</Text>
+			)}
 			<Popover className={() => stylex.props(styles.popover).className ?? ""}>
 				<ListBox {...stylex.props(styles.listBox)}>
 					{options.map((option) => (