frontend: Adding delete option on Chip inside Multi select component (#…

…2943) Scope: Adding a way to delete a Chip option for the Multi select component without having to open the list and select the option again. Before: <img width="511" alt="Screenshot 2024-02-29 at 12 34 49 p m" src="https://github.com/lyft/clutch/assets/25833665/1d2cbc88-e843-4dea-87dd-786937823c19"> After: <img width="510" alt="Screenshot 2024-02-29 at 12 33 19 p m" src="https://github.com/lyft/clutch/assets/25833665/2ea5a283-2082-4135-b3d1-77a108c4e3e3">
lyft · Mar 1, 2024 · b3178ac · b3178ac
1 parent d6e9842
commit b3178ac
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/frontend/packages/core/src/Input/select.tsx b/frontend/packages/core/src/Input/select.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled from "@emotion/styled";
+import CancelIcon from "@mui/icons-material/Cancel";
 import ErrorIcon from "@mui/icons-material/Error";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import type { SelectProps as MuiSelectProps, Theme } from "@mui/material";
@@ -369,6 +370,12 @@ const MultiSelect = ({
     setSelectedOptions(value.map(val => findIndex(val)));
   };
 
+  const onDeleteChip = value => () => {
+    const findIndex = val => flatOptions.findIndex(opt => opt.value === val || opt.label === val);
+    const updatedOptions = selectedOptions.filter(option => option !== findIndex(value));
+    setSelectedOptions(updatedOptions);
+  };
+
   if (flatOptions.length === 0) {
     return null;
   }
@@ -387,7 +394,14 @@ const MultiSelect = ({
             renderValue: (selected: string[]) => (
               <div style={{ display: "flex", gap: "4px" }}>
                 {selected.sort().map(value => (
-                  <Chip variant="neutral" label={value} key={value} size="small" />
+                  <Chip
+                    variant="neutral"
+                    label={value}
+                    key={value}
+                    size="small"
+                    onDelete={onDeleteChip(value)}
+                    deleteIcon={<CancelIcon onMouseDown={event => event.stopPropagation()} />}
+                  />
                 ))}
               </div>
             ),

diff --git a/frontend/packages/core/src/Input/stories/multi-select.stories.tsx b/frontend/packages/core/src/Input/stories/multi-select.stories.tsx
@@ -75,3 +75,23 @@ WithGrouping.args = {
     },
   ],
 };
+
+export const WithChips = Template.bind({});
+WithChips.args = {
+  label: "My Label",
+  selectOptions: [
+    {
+      label: "Option 1",
+    },
+    {
+      label: "Option 2",
+    },
+    {
+      label: "Option 3",
+    },
+    {
+      label: "Option 4",
+    },
+  ],
+  chipDisplay: true,
+};
diff --git a/frontend/packages/core/src/chip.tsx b/frontend/packages/core/src/chip.tsx
@@ -30,6 +30,8 @@ export interface ChipProps
    */
   variant: typeof CHIP_VARIANTS[number];
   filled?: boolean;
+  onDelete?: (e: any) => void;
+  deleteIcon?: any;
 }
 
 const StyledChip = styled(MuiChip)<{
@@ -97,8 +99,22 @@ const StyledChip = styled(MuiChip)<{
   }
 );
 
-const Chip = ({ variant, filled = false, size = "medium", ...props }: ChipProps) => (
-  <StyledChip $variant={variant} $filled={filled} size={size} {...props} />
+const Chip = ({
+  variant,
+  filled = false,
+  size = "medium",
+  onDelete,
+  deleteIcon,
+  ...props
+}: ChipProps) => (
+  <StyledChip
+    $variant={variant}
+    $filled={filled}
+    size={size}
+    onDelete={onDelete}
+    deleteIcon={deleteIcon}
+    {...props}
+  />
 );
 
 export { Chip, CHIP_VARIANTS };