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 @@ import {
   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,60 @@ import {
   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 ChipsPositioningContainer = styled.div<{
+  odysseyDesignTokens: DesignTokens;
+}>`
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};
+  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};
+  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};
+  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};
+  margin-inline-start: ${({ odysseyDesignTokens }) =>
+    odysseyDesignTokens.BorderWidthMain};
+  opacity: 1;
+  pointer-events: none;
+`;
+
+const NonInteractiveIcon = styled(CloseCircleFilledIcon)<{
+  odysseyDesignTokens: DesignTokens;
+}>`
+  font-size: 1em;
+  margin-inline-start: ${({ odysseyDesignTokens }) =>
+    odysseyDesignTokens.Spacing2};
+  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};
+`;
+
+const ChipsInnerContainer = styled(MuiBox)<{
+  isInteractive?: boolean;
+  odysseyDesignTokens: DesignTokens;
+}>`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};
+  pointer-events: ${({ isInteractive }) => (isInteractive ? "auto" : "none")};
+  opacity: ${({ isInteractive }) => (isInteractive ? 1 : 0)};
+`;
+
 export type SelectValueType<HasMultipleChoices> =
   HasMultipleChoices extends true ? string[] : string;
 
@@ -168,6 +216,7 @@ const Select = <
     controlledStateRef.current === CONTROLLED ? value : defaultValue
   );
   const localInputRef = useRef<HTMLSelectElement>(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
 
   useImperativeHandle(
     inputRef,
@@ -208,6 +257,23 @@ const Select = <
     [onChangeProp]
   );
 
+  const removeSelection = useCallback(
+    (itemToRemove: string) => {
+      if (Array.isArray(internalSelectedValues)) {
+        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(
@@ -232,38 +298,52 @@ const Select = <
     [options]
   );
 
-  const renderValue = useCallback(
-    (selected: Value) => {
-      // 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") {
-        return undefined;
-      }
-
-      // Convert the selected options array into <Chip>s
-      const renderedChips = selected
-        .map((item: string) => {
-          const selectedOption = normalizedOptions.find(
-            (option) => option.value === item
-          );
-
-          if (!selectedOption) {
-            return null;
+  const Chips = ({
+    selection,
+    isInteractive,
+  }: {
+    selection: string[];
+    isInteractive: boolean;
+  }) => (
+    <ChipsInnerContainer
+      isInteractive={isInteractive}
+      odysseyDesignTokens={odysseyDesignTokens}
+    >
+      {selection.map((item: string) => (
+        <MuiChip
+          key={item}
+          label={
+            <>
+              {item}
+              {!isInteractive &&
+                controlledStateRef.current === CONTROLLED &&
+                hasMultipleChoices && (
+                  <NonInteractiveIcon
+                    odysseyDesignTokens={odysseyDesignTokens}
+                  />
+                )}
+            </>
           }
-
-          return <Chip key={item} label={selectedOption.text} />;
-        })
-        .filter(Boolean);
-
-      if (renderedChips.length === 0) {
-        return null;
-      }
-
-      // We need the <Box> to surround the <Chip>s for
-      // proper styling
-      return <Box>{renderedChips}</Box>;
-    },
-    [normalizedOptions]
+          tabIndex={-1}
+          onDelete={
+            isInteractive
+              ? controlledStateRef.current === CONTROLLED
+                ? () => removeSelection(item)
+                : undefined
+              : undefined
+          }
+          deleteIcon={
+            <CloseCircleFilledIcon
+              sx={{ pointerEvents: "auto" }}
+              // 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
+              onMouseDown={(event) => event.stopPropagation()}
+            />
+          }
+        />
+      ))}
+    </ChipsInnerContainer>
   );
 
   // Convert the options into the ReactNode children
@@ -272,21 +352,22 @@ const Select = <
     () =>
       normalizedOptions.map((option, index) => {
         if (option.type === "heading") {
-          return <ListSubheader key={option.text}>{option.text}</ListSubheader>;
+          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,45 +376,55 @@ const Select = <
                   <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: Value) =>
+                  Array.isArray(value) && (
+                    <Chips selection={value} isInteractive={false} />
+                  )
+              : undefined
+          }
+          translate={translate}
+        />
+        {hasMultipleChoices && Array.isArray(value) && (
+          <ChipsPositioningContainer odysseyDesignTokens={odysseyDesignTokens}>
+            <Chips selection={value} isInteractive={true} />
+          </ChipsPositioningContainer>
+        )}
+      </SelectContainer>
     ),
     [
       children,
       inputValues,
       hasMultipleChoices,
+      normalizedOptions,
       nameOverride,
       onBlur,
       onChange,
       onFocus,
-      renderValue,
       testId,
       translate,
     ]