Clean up props (#1868)

* refactor: alphabetize all the things

* docs: add full documentation to props

* docs: add Field hasVisibleLabel prop

* fix: adjust comment placement in Tooltip

packages/odyssey-react-mui/src/Autocomplete.tsx

@@ -24,56 +24,89 @@ export type AutocompleteProps<
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 > = {
+  /**
+   * Enables multiple choice selection
+   */
   hasMultipleChoices?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["multiple"];
+  /**
+   * The hint text for the Autocomplete input
+   */
   hint?: string;
+  /**
+   * Allows the input of custom values
+   */
   isCustomValueAllowed?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["freeSolo"];
+  /**
+   * Disables the Autocomplete input
+   */
   isDisabled?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["disabled"];
+  /**
+   * Displays a loading indicator
+   */
   isLoading?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["loading"];
+  /**
+   * Makes the Autocomplete input read-only
+   */
   isReadOnly?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["readOnly"];
+  /**
+   * The label text for the autocomplete input
+   */
   label: string;
+  /**
+   * Callback fired when the value of the autocomplete input changes
+   */
   onChange?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["onChange"];
+  /**
+   * Callback fired when the input value of the autocomplete input changes
+   */
   onInputChange?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["onInputChange"];
+  /**
+   * The options for the Autocomplete input
+   */
   options: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["options"];
+  /**
+   * The value of the Autocomplete input
+   */
   value?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
@@ -87,8 +120,8 @@ const Autocomplete = <
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 >({
-  isCustomValueAllowed,
   hasMultipleChoices,
+  isCustomValueAllowed,
   isDisabled,
   isLoading,
   isReadOnly,

packages/odyssey-react-mui/src/Button.tsx

@@ -27,25 +27,64 @@ export const buttonVariantValues = [
 ] as const;
 
 export type ButtonProps = {
+  /**
+   * The ARIA label for the Button
+   */
+  ariaLabel?: string;
+  /**
+   * The ID of the element that labels the Button
+   */
+  ariaLabelledBy?: string;
+  /**
+   * The ID of the element that describes the Button
+   */
+  ariaDescribedBy?: string;
+  /**
+   * The icon element to display at the end of the Button
+   */
   endIcon?: ReactElement;
+  /**
+   * The ID of the Button
+   */
   id?: string;
+  /**
+   * Determines whether the Button is disabled
+   */
   isDisabled?: boolean;
+  /**
+   * Determines whether the Button should take up the full available width
+   */
   isFullWidth?: boolean;
+  /**
+   * The click event handler for the Button
+   */
   onClick?: MuiButtonProps["onClick"];
+  /**
+   * The size of the button
+   */
   size?: (typeof buttonSizeValues)[number];
+  /**
+   * The icon element to display at the start of the Button
+   */
   startIcon?: ReactElement;
+  /**
+   * The text content of the Button
+   */
   text?: string;
   /**
-   * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.
+   * The tooltip text for the Button if it's icon-only
    */
   tooltipText?: string;
+  /**
+   * The variant of the Button
+   */
   variant: (typeof buttonVariantValues)[number];
-  ariaLabel?: string;
-  ariaLabelledBy?: string;
-  ariaDescribedBy?: string;
 };
 
 const Button = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
   endIcon,
   id,
   isDisabled,
@@ -56,9 +95,6 @@ const Button = ({
   text,
   tooltipText,
   variant,
-  ariaLabel,
-  ariaLabelledBy,
-  ariaDescribedBy,
 }: ButtonProps) => {
   const muiProps = useContext(MuiPropsContext);
 

packages/odyssey-react-mui/src/Checkbox.tsx

@@ -19,29 +19,65 @@ import { ChangeEventHandler, memo, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 export type CheckboxProps = {
+  /**
+   * The ARIA label for the Checkbox
+   */
   ariaLabel?: string;
+  /**
+   * The ID of the element that labels the Checkbox
+   */
   ariaLabelledBy?: string;
-  isInvalid?: boolean;
-  isValid?: boolean;
+  /**
+   * Determines whether the Checkbox is checked
+   */
   isChecked?: boolean;
+  /**
+   * Determines whether the Checkbox is disabled
+   */
   isDisabled?: boolean;
+  /**
+   * Determines whether the Checkbox is in an indeterminate state
+   */
   isIndeterminate?: boolean;
+  /**
+   * Determines whether the Checkbox has an invalid value
+   */
+  isInvalid?: boolean;
+  /**
+   * Determines whether the Checkbox is required
+   */
   isRequired?: boolean;
+  /**
+   * Determines whether the Checkbox has a valid value
+   */
+  isValid?: boolean;
+  /**
+   * The label text for the Checkbox
+   */
   label?: string;
+  /**
+   * The name attribute of the Checkbox
+   */
   name?: string;
+  /**
+   * The change event handler for the Checkbox
+   */
   onChange?: ChangeEventHandler<EventTarget>;
+  /**
+   * The value attribute of the Checkbox
+   */
   value?: string;
 };
 
 const Checkbox = ({
   ariaLabel,
   ariaLabelledBy,
-  isInvalid,
-  isValid,
   isChecked,
   isDisabled,
   isIndeterminate,
+  isInvalid,
   isRequired,
+  isValid,
   label: labelProp,
   name,
   onChange,

packages/odyssey-react-mui/src/CheckboxGroup.tsx

@@ -17,26 +17,44 @@ import { Checkbox } from "./Checkbox";
 import { Field } from "./Field";
 
 export type CheckboxGroupProps = {
+  /**
+   * A single Checkbox element or an array of Checkbox elements
+   */
   children:
     | ReactElement<typeof Checkbox>
     | Array<ReactElement<typeof Checkbox>>;
+  /**
+   * The error message for the CheckboxGroup
+   */
   errorMessage?: string;
+  /**
+   * The hint text for the CheckboxGroup
+   */
   hint?: string;
   /**
    * The id of the `input` element. This will also be the input's `name` field.
    */
   id?: string;
+  /**
+   * If `true`, the CheckboxGroup is disabled
+   */
   isDisabled?: boolean;
+  /**
+   * If `true`, the CheckboxGroup is required
+   */
   isRequired?: boolean;
+  /**
+   * The label text for the CheckboxGroup
+   */
   label: string;
 };
 
 const CheckboxGroup = ({
   children,
-  isDisabled,
   errorMessage,
   hint,
   id: idOverride,
+  isDisabled,
   isRequired = false,
   label,
 }: CheckboxGroupProps) => {

packages/odyssey-react-mui/src/CircularProgress.tsx

@@ -13,13 +13,20 @@
 import { CircularProgress as MuiCircularProgress } from "@mui/material";
 
 export type CircularProgressProps = {
-  value?: number;
+  /**
+   * The ARIA label for the progress spinner
+   */
   ariaLabel?: string;
+  /**
+   * The percentage filled the spinner should be, as an integer.
+   * If undefined, the spinner will spin perpetually.
+   */
+  value?: number;
 };
 
 export const CircularProgress = ({
-  value,
   ariaLabel,
+  value,
 }: CircularProgressProps) => (
   <MuiCircularProgress
     value={value}

packages/odyssey-react-mui/src/Dialog.tsx

@@ -29,12 +29,33 @@ import {
 } from "react";
 
 export type DialogProps = {
+  /**
+   * An optional Button object to be situated in the Dialog footer. Should almost always be of variant `primary`.
+   */
   callToActionPrimaryComponent?: ReactElement<typeof Button>;
+  /**
+   * An optional Button object to be situated in the Dialog footer, alongside the `callToActionPrimaryComponent`.
+   */
   callToActionSecondaryComponent?: ReactElement<typeof Button>;
+  /**
+   * An optional Button object to be situated in the Dialog footer, alongside the other two `callToAction` components.
+   */
   callToActionTertiaryComponent?: ReactElement<typeof Button>;
+  /**
+   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.
+   */
   children: ReactNode;
-  onClose: () => void;
+  /**
+   * When set to `true`, the Dialog will be visible.
+   */
   isOpen: boolean;
+  /**
+   * Callback that controls what happens when the Dialog is dismissed
+   */
+  onClose: () => void;
+  /**
+   * The title of the Dialog
+   */
   title: string;
   ariaLabel: string;
 };

packages/odyssey-react-mui/src/Field.tsx

@@ -34,6 +34,9 @@ export type FieldProps = {
    * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).
    */
   fieldType: (typeof fieldTypeValues)[number];
+  /**
+   * If `true`, the Field label will be shown
+   */
   hasVisibleLabel: boolean;
   /**
    * The helper text content.