Add design polish to TextField, SearchField, and Select

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

@@ -27,6 +27,8 @@
 import type { AllowedProps } from "./AllowedProps";
 import { getControlState, useInputValues } from "./inputUtils";
 
+export const searchVariantValues = ["outline", "filled"] as const;
+
 export type SearchFieldProps = {
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
@@ -78,6 +80,10 @@
    * The value of the `input` element, to use when controlled.
    */
   value?: string;
+  /**
+   * Whether the SearchField has a gray or white background
+   */
+  variant?: (typeof searchVariantValues)[number];
 } & Pick<FieldComponentProps, "id" | "isDisabled" | "name" | "isFullWidth"> &
   AllowedProps;
 
@@ -100,6 +106,7 @@
       testId,
       translate,
       value,
+      variant = "outline",
     },
     ref
   ) => {
@@ -151,6 +158,8 @@
             )
           }
           id={id}
+          data-ods-type="search"
+          data-ods-variant={variant}
           name={nameOverride ?? id}
           onBlur={onBlur}
           onChange={onChange}
@@ -166,7 +175,7 @@
           type="search"
         />
       ),
       [
         autoCompleteType,
         defaultValue,
         hasInitialFocus,

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

@@ -20,19 +20,20 @@
   useImperativeHandle,
 } from "react";
 import {
-  Box,
+  Box as MuiBox,
   Checkbox as MuiCheckbox,
-  Chip,
+  Chip as MuiChip,
   ListItemSecondaryAction,
   ListSubheader,
-  MenuItem,
+  MenuItem as MuiMenuItem,
   Select as MuiSelect,
+  SelectChangeEvent,
 } from "@mui/material";
 import { SelectProps as MuiSelectProps } from "@mui/material";
 
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
-import { CheckIcon } from "./icons.generated";
+import { CheckIcon, CloseCircleFilledIcon } from "./icons.generated";
 import type { AllowedProps } from "./AllowedProps";
 import {
   ComponentControlledState,
@@ -204,6 +205,25 @@
     [onChangeProp]
   );
 
+  const handleDelete = useCallback(
+    (itemToDelete: string) => {
+      if (!Array.isArray(internalSelectedValues)) {
+        return;
+      }
+
+      const newValue = internalSelectedValues!.filter(
+        (item: string) => item !== itemToDelete
+      );
+
+      const syntheticEvent = {
+        target: { value: newValue },
+      } as SelectChangeEvent<Value>;
+
+      onChange(syntheticEvent, null);
+    },
+    [internalSelectedValues, onChange]
+  );
+
   // Normalize the options array to accommodate the various
   // data types that might be passed
   const normalizedOptions = useMemo(
@@ -221,7 +241,13 @@
   );
 
   const renderValue = useCallback(
-    (selected: Value) => {
+    ({
+      selected,
+      isPlaceholder = false,
+    }: {
+      selected: Value;
+      isPlaceholder?: boolean;
+    }) => {
       // If the selected value isn't an array, then we don't need to display
       // chips and should fall back to the default render behavior
       if (typeof selected === "string") {
@@ -239,21 +265,74 @@
             return null;
           }
 
-          return <Chip key={item} label={selectedOption.text} />;
+          return (
+            <MuiChip
+              key={item}
+              label={
+                <>
+                  {selectedOption.text}
+                  {!isPlaceholder &&
+                    controlledStateRef.current === CONTROLLED &&
+                    hasMultipleChoices && (
+                      <CloseCircleFilledIcon
+                        sx={{
+                          marginInlineStart: 2,
+                          fontSize: "1em",
+                          marginInlineEnd: -1,
+                        }}
+                      />
+                    )}
+                </>
+              }
+              tabIndex={-1}
+              onDelete={
+                isPlaceholder
+                  ? controlledStateRef.current === CONTROLLED
+                    ? () => handleDelete(item)
+                    : undefined
+                  : undefined
+              }
+              deleteIcon={
+                // We need to stop event propagation on mouse down to prevent the deletion
+                // from being blocked by the Select list opening, and also ensure that
+                // the pointerEvent is registered even when the parent's are not
+                <CloseCircleFilledIcon
+                  sx={{ pointerEvents: "auto" }}
+                  onMouseDown={(event) => event.stopPropagation()}
+                />
+              }
+            />
+          );
         })
         .filter(Boolean);
 
       if (renderedChips.length === 0) {
         return null;
       }
 
-      // We need the <Box> to surround the <Chip>s for
-      // proper styling
-      return <Box>{renderedChips}</Box>;
+      // We need the <Box> to surround the <Chip>s for proper styling
+      // and disable
+      if (hasMultipleChoices && controlledStateRef.current === CONTROLLED) {
+        return (
+          <MuiBox
+            sx={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 1,
+              pointerEvents: "none",
+              opacity: isPlaceholder ? 1 : 0,
+            }}
+          >
+            {renderedChips}
+          </MuiBox>
+        );
+      }
+
+      return <MuiBox>{renderedChips}</MuiBox>;
     },
-    [normalizedOptions]
+    [normalizedOptions, handleDelete]
   );
 
   // Convert the options into the ReactNode children
   // that will populate the <Select>
   const children = useMemo(
@@ -262,49 +341,66 @@
         if (option.type === "heading") {
           return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
         }
+
+        const isSelected = hasMultipleChoices
+          ? internalSelectedValues?.includes(option.value)
+          : internalSelectedValues === option.value;
+
         return (
-          <MenuItem key={option.value} value={option.value}>
-            {hasMultipleChoices && (
-              <MuiCheckbox
-                checked={internalSelectedValues?.includes(option.value)}
-              />
-            )}
+          <MuiMenuItem
+            key={option.value}
+            value={option.value}
+            selected={isSelected}
+          >
+            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}
             {option.text}
-            {internalSelectedValues === option.value && (
+            {isSelected && !hasMultipleChoices && (
               <ListItemSecondaryAction>
                 <CheckIcon />
               </ListItemSecondaryAction>
             )}
-          </MenuItem>
+          </MuiMenuItem>
         );
       }),
     [hasMultipleChoices, normalizedOptions, internalSelectedValues]
   );
 
   const renderFieldComponent = useCallback(
     ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
-      <MuiSelect
-        {...inputValues}
-        aria-describedby={ariaDescribedBy}
-        aria-errormessage={errorMessageElementId}
-        children={children}
-        data-se={testId}
-        id={id}
-        inputRef={inputRef}
-        labelId={labelElementId}
-        multiple={hasMultipleChoices}
-        name={nameOverride ?? id}
-        onBlur={onBlur}
-        onChange={onChange}
-        onFocus={onFocus}
-        renderValue={hasMultipleChoices ? renderValue : undefined}
-        translate={translate}
-      />
+      <div className="OdsSelect-container">
+        <MuiSelect
+          {...inputValues}
+          aria-describedby={ariaDescribedBy}
+          aria-errormessage={errorMessageElementId}
+          children={children}
+          data-se={testId}
+          id={id}
+          inputRef={inputRef}
+          labelId={labelElementId}
+          multiple={hasMultipleChoices}
+          name={nameOverride ?? id}
+          onBlur={onBlur}
+          onChange={onChange}
+          onFocus={onFocus}
+          renderValue={
+            hasMultipleChoices
+              ? (value) => renderValue({ selected: value })
+              : undefined
+          }
+          translate={translate}
+        />
+        {hasMultipleChoices && value && (
+          <div className="OdsSelect-placeholderValues">
+            {renderValue({ selected: value, isPlaceholder: true })}
+          </div>
+        )}
+      </div>
     ),
     [
       children,
       inputValues,
       hasMultipleChoices,
+      normalizedOptions,
       nameOverride,
       onBlur,
       onChange,

packages/odyssey-react-mui/src/theme/components.tsx

@@ -1553,6 +1553,25 @@ export const components = ({
           [`& .${formGroupClasses.root}`]: {
             marginBlockStart: odysseyTokens.Spacing1,
           },
+
+          ["& .OdsSelect-container"]: {
+            position: "relative",
+            width: "100%",
+            display: "flex",
+          },
+
+          ["& .OdsSelect-placeholderValues"]: {
+            position: "absolute",
+            top: odysseyTokens.Spacing0,
+            bottom: odysseyTokens.Spacing0,
+            left: odysseyTokens.Spacing1,
+            marginInlineStart: odysseyTokens.BorderWidthMain,
+            right: odysseyTokens.Spacing5,
+            opacity: 1,
+            pointerEvents: "none",
+            display: "flex",
+            alignItems: "center",
+          },
         }),
       },
     },
@@ -1684,7 +1703,7 @@ export const components = ({
           whiteSpace: "nowrap",
           color: odysseyTokens.TypographyColorSubordinate,
           ...(ownerState.position === "start" && {
-            marginInlineStart: odysseyTokens.Spacing2,
+            marginInlineStart: odysseyTokens.Spacing3,
           }),
           ...(ownerState.position === "end" && {
             marginInlineEnd: odysseyTokens.Spacing2,
@@ -1719,6 +1738,29 @@ export const components = ({
             }
           ),
 
+          ["&[data-ods-type='search']"]: {
+            borderColor: odysseyTokens.HueNeutral400,
+
+            [`& .${inputBaseClasses.input}::placeholder`]: {
+              color: odysseyTokens.TypographyColorSupport,
+              opacity: 1,
+            },
+          },
+
+          ["&[data-ods-variant='filled']"]: {
+            backgroundColor: odysseyTokens.HueNeutral50,
+            borderColor: odysseyTokens.HueNeutral50,
+
+            [`&:hover`]: {
+              borderColor: odysseyTokens.HueNeutral400,
+            },
+
+            [`&.${inputBaseClasses.focused}`]: {
+              borderColor: odysseyTokens.FocusOutlineColorPrimary,
+              boxShadow: `0 0 0 1px ${odysseyTokens.FocusOutlineColorPrimary}`,
+            },
+          },
+
           ...(ownerState.fullWidth && {
             width: "100%",
           }),
@@ -1744,12 +1786,12 @@ export const components = ({
           },
 
           [`&.${inputBaseClasses.error}:hover`]: {
-            borderColor: odysseyTokens.BorderColorDangerDark,
+            borderColor: odysseyTokens.HueNeutral900,
           },
 
           [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: {
-            borderColor: odysseyTokens.BorderColorDangerControl,
-            boxShadow: `0 0 0 1px ${odysseyTokens.PaletteDangerMain}`,
+            borderColor: odysseyTokens.FocusOutlineColorPrimary,
+            boxShadow: `0 0 0 1px ${odysseyTokens.FocusOutlineColorPrimary}`,
           },
 
           [`&.${inputBaseClasses.disabled}`]: {
@@ -1761,12 +1803,17 @@ export const components = ({
           },
         }),
         input: {
-          boxSizing: "border-box",
-          height: "auto",
+          // Set total height to 40px, factoring in borders on outer container
+          height: `calc(${odysseyTokens.Spacing4} - (${odysseyTokens.BorderWidthMain} * 2))`,
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing3,
           boxShadow: "none",
 
+          // TODO: Consider if we want manual resizing.
+          // [`.${inputBaseClasses.multiline} &`]: {
+          //   resize: "vertical",
+          // },
+
           [`.${inputBaseClasses.disabled} &`]: {
             pointerEvents: "auto",
             cursor: "not-allowed",
@@ -1778,7 +1825,7 @@ export const components = ({
 
           [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: {
             "&::placeholder": {
-              color: odysseyTokens.TypographyColorSubordinate,
+              color: odysseyTokens.TypographyColorSupport,
               opacity: "1 !important",
             },
           },
@@ -2185,6 +2232,7 @@ export const components = ({
         select: {
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing3,
+          minHeight: 0,
 
           "&:focus": {
             backgroundColor: "transparent",