Add design polish to TextField, SearchField, and Select

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

@@ -28,6 +28,8 @@ import { FieldComponentProps } from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
 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.
@@ -81,6 +83,10 @@ export type SearchFieldProps = {
    * 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,
   "ariaDescribedBy" | "id" | "isDisabled" | "name" | "isFullWidth"
@@ -108,6 +114,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
       testId,
       translate,
       value,
+      variant = "outline",
     },
     ref
   ) => {
@@ -162,6 +169,8 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
             )
           }
           id={id}
+          data-ods-type="search"
+          data-ods-variant={variant}
           name={nameOverride ?? id}
           onBlur={onBlur}
           onChange={onChange}
@@ -193,6 +202,7 @@ const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(
         tabIndex,
         testId,
         translate,
+        variant,
       ]
     );
 

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 { HtmlProps } from "./HtmlProps";
 import {
   ComponentControlledState,
@@ -41,13 +42,58 @@
   getControlState,
 } from "./inputUtils";
 import { normalizedKey } from "./useNormalizedKey";
+import styled from "@emotion/styled";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "./OdysseyDesignTokensContext";
 
 export type SelectOption = {
   text: string;
   type?: "heading" | "option";
   value?: string;
 };
 
+const SelectContainer = styled.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+`;
+
+const PlaceholderValuesContainer = styled.div<{
+  odysseyDesignTokens: DesignTokens;
+}>`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: ${(props) => props.odysseyDesignTokens.Spacing0};
+  right: ${(props) => props.odysseyDesignTokens.Spacing5};
+  bottom: ${(props) => props.odysseyDesignTokens.Spacing0};
+  left: ${(props) => props.odysseyDesignTokens.Spacing1};
+  margin-inline-start: ${(props) => props.odysseyDesignTokens.BorderWidthMain};
+  opacity: 1;
+  pointer-events: none;
+`;
+
+const PlaceholderIcon = styled(CloseCircleFilledIcon)<{
+  odysseyDesignTokens: DesignTokens;
+}>`
+  font-size: 1em;
+  margin-inline-start: ${(props) => props.odysseyDesignTokens.Spacing2};
+  margin-inline-end: -${(props) => props.odysseyDesignTokens.Spacing1};
+`;
+
+const ChipContainer = styled(MuiBox)<{
+  isPlaceholder?: boolean;
+  odysseyDesignTokens: DesignTokens;
+}>`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${(props) => props.odysseyDesignTokens.Spacing1};
+  pointer-events: none;
+  opacity: ${(props) => (props.isPlaceholder ? 1 : 0)};
+`;
+
 export type SelectValueType<HasMultipleChoices> =
   HasMultipleChoices extends true ? string[] : string;
 
@@ -168,6 +214,7 @@
     controlledStateRef.current === CONTROLLED ? value : defaultValue
   );
   const localInputRef = useRef<HTMLSelectElement>(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
 
   useImperativeHandle(
     inputRef,
@@ -208,6 +255,25 @@
     [onChangeProp]
   );
 
+  const removeSelection = useCallback(
+    (itemToRemove: string) => {
+      if (!Array.isArray(internalSelectedValues)) {
+        return;
+      }
+
+      const newValue = internalSelectedValues!.filter(
+        (item: string) => item !== itemToRemove
+      );
+
+      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(
@@ -233,7 +299,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") {
@@ -251,19 +323,63 @@
             return null;
           }
 
-          return <Chip key={item} label={selectedOption.text} />;
+          return (
+            <MuiChip
+              key={item}
+              label={
+                <>
+                  {selectedOption.text}
+                  {!isPlaceholder &&
+                    controlledStateRef.current === CONTROLLED &&
+                    hasMultipleChoices && (
+                      <PlaceholderIcon
+                        odysseyDesignTokens={odysseyDesignTokens}
+                      />
+                    )}
+                </>
+              }
+              tabIndex={-1}
+              onDelete={
+                isPlaceholder
+                  ? controlledStateRef.current === CONTROLLED
+                    ? () => removeSelection(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 (
+          <ChipContainer
+            isPlaceholder={isPlaceholder}
+            odysseyDesignTokens={odysseyDesignTokens}
+          >
+            {renderedChips}
+          </ChipContainer>
+        );
+      }
+
+      return <MuiBox>{renderedChips}</MuiBox>;
     },
-    [normalizedOptions]
+    [normalizedOptions, removeSelection]
   );
 
   // Convert the options into the ReactNode children
@@ -274,19 +390,18 @@
         if (option.type === "heading") {
           return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
         }
+
+        const isSelected = hasMultipleChoices
+          ? internalSelectedValues?.includes(option.value)
+          : internalSelectedValues === option.value;
+
         return (
-          <MenuItem
+          <MuiMenuItem
             key={normalizedKey(option.text, index.toString())}
             value={option.value}
+            selected={isSelected}
           >
-            {hasMultipleChoices && (
-              <MuiCheckbox
-                checked={
-                  option.value !== undefined &&
-                  internalSelectedValues?.includes(option.value)
-                }
-              />
-            )}
+            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}
             {option.text}
             {!hasMultipleChoices &&
               (internalSelectedValues?.includes(option.value) ||
@@ -295,40 +410,48 @@
                   <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}
-        displayEmpty={
-          inputValues?.value === "" || inputValues?.defaultValue === ""
-        }
-        id={id}
-        inputProps={{ "data-se": testId }}
-        inputRef={localInputRef}
-        labelId={labelElementId}
-        multiple={hasMultipleChoices}
-        name={nameOverride ?? id}
-        onBlur={onBlur}
-        onChange={onChange}
-        onFocus={onFocus}
-        renderValue={hasMultipleChoices ? renderValue : undefined}
-        translate={translate}
-      />
+      <SelectContainer>
+        <MuiSelect
+          {...inputValues}
+          aria-describedby={ariaDescribedBy}
+          aria-errormessage={errorMessageElementId}
+          children={children}
+          id={id}
+          inputProps={{ "data-se": testId }}
+          inputRef={localInputRef}
+          labelId={labelElementId}
+          multiple={hasMultipleChoices}
+          name={nameOverride ?? id}
+          onBlur={onBlur}
+          onChange={onChange}
+          onFocus={onFocus}
+          renderValue={
+            hasMultipleChoices
+              ? (value) => renderValue({ selected: value })
+              : undefined
+          }
+          translate={translate}
+        />
+        {hasMultipleChoices && value && (
+          <PlaceholderValuesContainer odysseyDesignTokens={odysseyDesignTokens}>
+            {renderValue({ selected: value, isPlaceholder: true })}
+          </PlaceholderValuesContainer>
+        )}
+      </SelectContainer>
     ),
     [
       children,
       inputValues,
       hasMultipleChoices,
+      normalizedOptions,
       nameOverride,
       onBlur,
       onChange,