Merge pull request #530 from buildo/select-field-mode

Select field mode

Author: federico-ercoles

Diff for: packages/bento-design-system/src/SelectField/Config.ts

@@ -1,3 +1,4 @@
+import { ChipProps } from "../Chip/Chip";
 import { IconProps } from "../Icons";
 import { BentoSprinkles } from "../internal";
 import { ListConfig } from "../List/Config";
@@ -11,4 +12,6 @@ export type DropdownConfig = {
   defaultMenuSize: "medium" | "large";
   openIndicatorIcon: (props: IconProps) => Children;
   openIndicatorIconSize: IconProps["size"];
+  chipColor: ChipProps["color"];
+  chipSpacing: BentoSprinkles["gap"];
 };

Diff for: packages/bento-design-system/src/SelectField/SelectField.tsx

@@ -4,7 +4,7 @@ import Select, {
   MultiValueProps,
   SingleValue as SingleValueT,
 } from "react-select";
-import { Body, ListSize, LocalizedString } from "..";
+import { Body, Chip, ListSize, LocalizedString } from "..";
 import { useField } from "@react-aria/label";
 import { useEffect, useMemo } from "react";
 import { FieldProps } from "../Field/FieldProps";
@@ -24,11 +24,20 @@ export type SelectOption<A> = Omit<
 
 type MultiProps<A> = {
   isMulti: true;
-  multiValueMessage?: (numberOfSelectedOptions: number) => LocalizedString;
   showMultiSelectBulkActions?: boolean;
   selectAllButtonLabel?: LocalizedString;
   clearAllButtonLabel?: LocalizedString;
-} & FieldProps<A[]>;
+} & FieldProps<A[]> &
+  (
+    | {
+        multiSelectMode?: "summary";
+        multiValueMessage?: (numberOfSelectedOptions: number) => LocalizedString;
+      }
+    | {
+        multiSelectMode: "chips";
+        multiValueMessage?: never;
+      }
+  );
 
 type SingleProps<A> = {
   isMulti?: false;
@@ -43,6 +52,8 @@ type Props<A> = {
   searchable?: boolean;
 } & (SingleProps<A> | MultiProps<A>);
 
+export type { Props as SelectFieldProps };
+
 declare module "react-select/dist/declarations/src/Select" {
   export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
     menuSize?: ListSize;
@@ -52,6 +63,7 @@ declare module "react-select/dist/declarations/src/Select" {
     showMultiSelectBulkActions?: boolean;
     selectAllButtonLabel?: LocalizedString;
     clearAllButtonLabel?: LocalizedString;
+    multiSelectMode?: "summary" | "chips";
   }
 }
 
@@ -165,7 +177,7 @@ export function SelectField<A>(props: Props<A>) {
           isClearable={false}
           noOptionsMessage={() => noOptionsMessage ?? defaultMessages.SelectField.noOptionsMessage}
           multiValueMessage={
-            isMulti
+            props.isMulti && (!props.multiSelectMode || props.multiSelectMode === "summary")
               ? props.multiValueMessage ?? defaultMessages.SelectField.multiOptionsSelected
               : undefined
           }
@@ -185,6 +197,7 @@ export function SelectField<A>(props: Props<A>) {
               ? props.selectAllButtonLabel ?? defaultMessages.SelectField.selectAllButtonLabel
               : undefined
           }
+          multiSelectMode={isMulti ? props.multiSelectMode : undefined}
         />
       </Field>
     </BentoConfigProvider>
@@ -194,23 +207,33 @@ export function SelectField<A>(props: Props<A>) {
 // NOTE(gabro): we override MultiValue instead of ValueContainer (which would be more natural)
 // because overriding ValueContainer breaks the logic for closing the menu when clicking away.
 // See: https://github.com/JedWatson/react-select/issues/2239#issuecomment-861848975
-function MultiValue<A>(props: MultiValueProps<A>) {
+function MultiValue<A extends SelectOption<unknown>>(props: MultiValueProps<A>) {
   const inputConfig = useBentoConfig().input;
-  const numberOfSelectedOptions = props.getValue().length;
+  const dropdownConfig = useBentoConfig().dropdown;
+  switch (props.selectProps.multiSelectMode ?? "summary") {
+    case "summary":
+      const numberOfSelectedOptions = props.getValue().length;
 
-  if (props.index > 0 || !props.selectProps.multiValueMessage) {
-    return null;
-  }
+      if (props.index > 0 || !props.selectProps.multiValueMessage) {
+        return null;
+      }
 
-  if (numberOfSelectedOptions === 1) {
-    return selectComponents.SingleValue(props);
-  }
+      if (numberOfSelectedOptions === 1) {
+        return selectComponents.SingleValue(props);
+      }
 
-  return (
-    <Body size={inputConfig.fontSize}>
-      {props.selectProps.multiValueMessage(numberOfSelectedOptions)}
-    </Body>
-  );
+      return (
+        <Body size={inputConfig.fontSize}>
+          {props.selectProps.multiValueMessage(numberOfSelectedOptions)}
+        </Body>
+      );
+    case "chips":
+      return (
+        <Chip
+          color={dropdownConfig.chipColor}
+          label={props.data.label as LocalizedString}
+          onDismiss={props.removeProps.onClick as () => void}
+        />
+      );
+  }
 }
-
-export type { Props as SelectFieldProps };

Diff for: packages/bento-design-system/src/SelectField/components.tsx

@@ -65,17 +65,20 @@ export function Control<A>({
 
 export function ValueContainer<A>(props: ValueContainerProps<A>) {
   const sprinkles = useSprinkles();
+  const dropdownConfig = useBentoConfig().dropdown;
   return (
     <defaultComponents.ValueContainer
       {...props}
       className={sprinkles({
-        gap: 8,
+        gap: dropdownConfig.chipSpacing,
+        overflowX: "auto",
+        flexWrap: "nowrap",
       })}
     />
   );
 }
 
-export function SingleValue<A>({ children, isDisabled, data }: SingleValueProps<A>) {
+export function SingleValue<A extends object>({ children, isDisabled, data }: SingleValueProps<A>) {
   const inputConfig = useBentoConfig().input;
 
   return (

Diff for: packages/bento-design-system/src/util/defaultConfigs.tsx

@@ -475,6 +475,8 @@ export const dropdown: DropdownConfig = {
   defaultMenuSize: "medium",
   openIndicatorIcon: IconChevronDown,
   openIndicatorIconSize: 16,
+  chipColor: "blue",
+  chipSpacing: 8,
 };
 
 export const table: TableConfig = {

Diff for: packages/storybook/stories/Components/SelectField.stories.tsx

@@ -102,6 +102,40 @@ export const MultiSelectMultipleOptionsSelected = createControlledStory([1, 2],
     `${numberOfSelectedOptions} options selected`,
 });
 
+const manyColors = [
+  "red",
+  "green",
+  "blue",
+  "yellow",
+  "orange",
+  "purple",
+  "pink",
+  "brown",
+  "black",
+  "white",
+  "gray",
+  "cyan",
+  "magenta",
+  "lime",
+  "maroon",
+  "navy",
+  "olive",
+  "teal",
+  "aqua",
+  "fuchsia",
+];
+
+export const MultiSelectModeChipsSelected = createControlledStory(manyColors, {
+  isMulti: true,
+  multiSelectMode: "chips",
+  showMultiSelectBulkActions: true,
+  options: manyColors.map((color) => ({
+    value: color,
+    label: color,
+    kind: "single-line",
+  })),
+});
+
 export const WithIconSelected = createControlledStory(1, {
   options: [
     { value: 1, label: "Idea", icon: IconIdea },