@sproutsocial/racine 8.6.1-collapsible-fix.0 → 8.6.3-dar10.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 8.6.2
+
+### Patch Changes
+
+- 039da3f: Address visual bug on collapsible shadow
+
+## 8.6.1
+
+### Patch Changes
+
+- c46c79d: Pressing space on a filter input in listbox triggers a submit, preventing users from entering text with spaces. This fix changes the behavior such that if the input is in focus, the space won't trigger a select.
+- b34b463: Invert the icon colors in menu items to mirror the text behavior.
+
 ## 8.6.0
 
 ### Minor Changes

package/__flow__/Collapsible/index.js

@@ -103,7 +103,7 @@ const Panel = ({ children, ...rest }) => {
 
   return (
     <CollapsingBox
-      className={collapsedHeight > 0 ? "minimum" : ""}
+      hasShadow={collapsedHeight || openHeight > 0}
       scrollable={isOpen}
       maxHeight={isOpen ? maxHeight : collapsedHeight}
       minHeight={collapsedHeight}

package/__flow__/Collapsible/styles.js

@@ -10,8 +10,9 @@ export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
   will-change: max-height;
   position: relative;
   overflow: auto;
-  &.minimum {
-    background:  /* Shadow covers */ linear-gradient(
+  ${({ hasShadow, theme, scrollable }) =>
+    hasShadow
+      ? `background:  /* Shadow covers */ linear-gradient(
         transparent 30%,
         rgba(255, 255, 255, 0)
       ),
@@ -31,6 +32,6 @@ export const CollapsingBox = styled<typeof Box, TypeTheme, *>(Box)`
     background-repeat: no-repeat;
     background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
     background-attachment: local, local, scroll, scroll;
-    ${({ scrollable }) => (scrollable ? `overflow: auto` : `overflow: hidden`)};
-  }
+    ${scrollable ? `overflow: auto` : `overflow: hidden`};`
+      : ""}
 `;

package/__flow__/Listbox/__snapshots__/index.test.js.snap

@@ -142,7 +142,7 @@ html .c5 {
         class="c1 c2"
         data-qa-button=""
         data-qa-button-isdisabled="false"
-        id="MenuButton-8"
+        id="MenuButton-20"
         type="button"
       >
         Select a fruit
@@ -436,6 +436,10 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
   background-color: #364141;
 }
 
+.c4 .Icon-svg {
+  color: #FFFFFF;
+}
+
 .c4:focus,
 .c4:hover {
   color: #364141;
@@ -535,7 +539,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
 
 <div>
     <ul
-      aria-activedescendant="MenuItem-16"
+      aria-activedescendant="MenuItem-28"
       aria-multiselectable="true"
       class="c0 c1"
       overflow="hidden"
@@ -552,7 +556,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
           class="c2 c4"
           data-qa-menu-item="Apple"
           data-value="Apple"
-          id="MenuItem-16"
+          id="MenuItem-28"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Apple"
@@ -565,10 +569,10 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
               class="c5"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-16"
+                data-qa-checkbox="Checkbox-MenuItem-28"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-16"
+                id="Checkbox-MenuItem-28"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -586,7 +590,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
           class="c2 c6"
           data-qa-menu-item="Banana"
           data-value="Banana"
-          id="MenuItem-17"
+          id="MenuItem-29"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Banana"
@@ -599,10 +603,10 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
               class="c5"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-17"
+                data-qa-checkbox="Checkbox-MenuItem-29"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-17"
+                id="Checkbox-MenuItem-29"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -620,7 +624,7 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
           class="c2 c6"
           data-qa-menu-item="Orange"
           data-value="Orange"
-          id="MenuItem-18"
+          id="MenuItem-30"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Orange"
@@ -633,10 +637,10 @@ exports[`Listbox AsListbox with checkboxes should match snapshot 1`] = `
               class="c5"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-18"
+                data-qa-checkbox="Checkbox-MenuItem-30"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-18"
+                id="Checkbox-MenuItem-30"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -717,6 +721,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
   background-color: #364141;
 }
 
+.c5 .Icon-svg {
+  color: #FFFFFF;
+}
+
 .c5:focus,
 .c5:hover {
   color: #364141;
@@ -873,7 +881,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
 
 <div>
     <ul
-      aria-activedescendant="MenuItem-22"
+      aria-activedescendant="MenuItem-34"
       aria-multiselectable="true"
       class="c0 c1"
       overflow="hidden"
@@ -906,7 +914,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c5"
           data-qa-menu-item="Apple"
           data-value="Apple"
-          id="MenuItem-22"
+          id="MenuItem-34"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Apple"
@@ -919,10 +927,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-22"
+                data-qa-checkbox="Checkbox-MenuItem-34"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-22"
+                id="Checkbox-MenuItem-34"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -940,7 +948,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Banana"
           data-value="Banana"
-          id="MenuItem-23"
+          id="MenuItem-35"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Banana"
@@ -953,10 +961,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-23"
+                data-qa-checkbox="Checkbox-MenuItem-35"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-23"
+                id="Checkbox-MenuItem-35"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -974,7 +982,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Orange"
           data-value="Orange"
-          id="MenuItem-24"
+          id="MenuItem-36"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Orange"
@@ -987,10 +995,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-24"
+                data-qa-checkbox="Checkbox-MenuItem-36"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-24"
+                id="Checkbox-MenuItem-36"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1008,7 +1016,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Tomato"
           data-value="Tomato"
-          id="MenuItem-25"
+          id="MenuItem-37"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Tomato"
@@ -1021,10 +1029,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-25"
+                data-qa-checkbox="Checkbox-MenuItem-37"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-25"
+                id="Checkbox-MenuItem-37"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1042,7 +1050,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Cucumber"
           data-value="Cucumber"
-          id="MenuItem-26"
+          id="MenuItem-38"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Cucumber"
@@ -1055,10 +1063,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-26"
+                data-qa-checkbox="Checkbox-MenuItem-38"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-26"
+                id="Checkbox-MenuItem-38"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1076,7 +1084,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Squash"
           data-value="Squash"
-          id="MenuItem-27"
+          id="MenuItem-39"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Squash"
@@ -1089,10 +1097,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-27"
+                data-qa-checkbox="Checkbox-MenuItem-39"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-27"
+                id="Checkbox-MenuItem-39"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1110,7 +1118,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Cantaloupe"
           data-value="Cantaloupe"
-          id="MenuItem-28"
+          id="MenuItem-40"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Cantaloupe"
@@ -1123,10 +1131,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-28"
+                data-qa-checkbox="Checkbox-MenuItem-40"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-28"
+                id="Checkbox-MenuItem-40"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1144,7 +1152,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Jackalope"
           data-value="Jackalope"
-          id="MenuItem-29"
+          id="MenuItem-41"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Jackalope"
@@ -1157,10 +1165,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-29"
+                data-qa-checkbox="Checkbox-MenuItem-41"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-29"
+                id="Checkbox-MenuItem-41"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1178,7 +1186,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Lingonberry"
           data-value="Lingonberry"
-          id="MenuItem-30"
+          id="MenuItem-42"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Lingonberry"
@@ -1191,10 +1199,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-30"
+                data-qa-checkbox="Checkbox-MenuItem-42"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-30"
+                id="Checkbox-MenuItem-42"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1212,7 +1220,7 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
           class="c2 c7"
           data-qa-menu-item="Dingleberry"
           data-value="Dingleberry"
-          id="MenuItem-31"
+          id="MenuItem-43"
           role="menuitemcheckbox"
           tabindex="-1"
           value="Dingleberry"
@@ -1225,10 +1233,10 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
               class="c6"
             >
               <input
-                data-qa-checkbox="Checkbox-MenuItem-31"
+                data-qa-checkbox="Checkbox-MenuItem-43"
                 data-qa-checkbox-ischecked="false"
                 data-qa-checkbox-isdisabled="false"
-                id="Checkbox-MenuItem-31"
+                id="Checkbox-MenuItem-43"
                 tabindex="-1"
                 type="checkbox"
                 value=""
@@ -1241,6 +1249,40 @@ exports[`Listbox AsListbox with filter input should match snapshot 1`] = `
             </div>
           </div>
         </li>
+        <li
+          aria-checked="false"
+          class="c2 c7"
+          data-qa-menu-item="Kaffir Lime"
+          data-value="Kaffir Lime"
+          id="MenuItem-44"
+          role="menuitemcheckbox"
+          tabindex="-1"
+          value="Kaffir Lime"
+        >
+          <div
+            style="display: flex; align-items: center; justify-content: space-between;"
+          >
+            <span
+              aria-hidden="true"
+              class="c6"
+            >
+              <input
+                data-qa-checkbox="Checkbox-MenuItem-44"
+                data-qa-checkbox-ischecked="false"
+                data-qa-checkbox-isdisabled="false"
+                id="Checkbox-MenuItem-44"
+                tabindex="-1"
+                type="checkbox"
+                value=""
+              />
+            </span>
+            <div
+              style="flex-grow: 1; word-break: break-word; min-width: 0;"
+            >
+              Kaffir Lime
+            </div>
+          </div>
+        </li>
       </div>
     </ul>
   </div>

package/__flow__/Listbox/index.stories.js

@@ -196,3 +196,36 @@ export const BigVirtualizedExample = () => {
     </Box>
   );
 };
+
+const ListboxFilterInput = () => {
+  const { value, onChange } = useSelect({ initialValue: null });
+  const { inputValue } = useSelect({ initialValue: null });
+  return (
+    <>
+      <Text>{inputValue}</Text>
+      <ListboxButton
+        minWidth="200px"
+        aria-label="Favorite fruit"
+        content={
+          <Listbox onChange={onChange} value={value} width="200px">
+            <Listbox.Group>
+              <Listbox.FilterInput placeholder="Filter items" mb={300} />
+              <Listbox.Item value="Apple">Apple</Listbox.Item>
+              <Listbox.Item value="Orange">Orange</Listbox.Item>
+              <Listbox.Item value="Banana">Banana</Listbox.Item>
+              <Listbox.Item value="Kaffir Lime">Kaffir Lime</Listbox.Item>
+            </Listbox.Group>
+          </Listbox>
+        }
+      >
+        {value || "Select a fruit"}
+      </ListboxButton>
+    </>
+  );
+};
+
+export const FilterInput = () => <ListboxFilterInput />;
+
+FilterInput.story = {
+  name: "FilterInput",
+};

package/__flow__/Listbox/index.test.js

@@ -1,5 +1,10 @@
 import React from "react";
-import { render, fireEvent, cleanup } from "../utils/react-testing-library";
+import {
+  render,
+  fireEvent,
+  cleanup,
+  userEvent,
+} from "../utils/react-testing-library";
 import Listbox, { ListboxButton } from "./";
 import { useSelect, useMultiselect } from "../utils/hooks";
 import { MENU_ITEM_ROLES } from "../Menu/constants";
@@ -16,6 +21,7 @@ const lotsOfFruit = [
   "Jackalope",
   "Lingonberry",
   "Dingleberry",
+  "Kaffir Lime",
 ];
 const mockOnClick = jest.fn();
 
@@ -182,6 +188,26 @@ describe("Listbox", () => {
       expect(await findByText(fruit[1])).toBeInTheDocument();
       expect(mockOnClick).toHaveBeenCalledTimes(1);
     });
+
+    it("should trigger select on enter", async () => {
+      const { findByText, queryByLabelText } = render(<AsListbox />);
+      const button = queryByLabelText(/Select a fruit/);
+
+      fireEvent.click(button);
+      userEvent.keyboard("{enter}");
+      expect(await findByText(fruit[0])).toBeInTheDocument();
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("should trigger select on space", async () => {
+      const { findByText, queryByLabelText } = render(<AsListbox />);
+      const button = queryByLabelText(/Select a fruit/);
+
+      fireEvent.click(button);
+      userEvent.keyboard("{space}");
+      expect(await findByText(fruit[0])).toBeInTheDocument();
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe("AsListbox multiselect", () => {
@@ -252,9 +278,33 @@ describe("Listbox", () => {
         <AsListboxWithFilterInput />
       );
       const input = queryByLabelText("Search fruit...");
-      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(10);
+      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(11);
       fireEvent.change(input, { target: { value: "berry" } });
       expect(queryAllByRole("menuitemcheckbox")).toHaveLength(2);
     });
+
+    it("should allow spaces to be typed in the input", async () => {
+      const { queryByLabelText, queryAllByRole } = render(
+        <AsListboxWithFilterInput />
+      );
+
+      const input = queryByLabelText("Search fruit...");
+      userEvent.type(input, "Kaffir{space}L");
+      expect(queryAllByRole("menuitemcheckbox")).toHaveLength(1);
+    });
+
+    it("should trigger a submit on space if the input is not focused", async () => {
+      const { queryByRole } = render(<AsListboxWithFilterInput />);
+
+      // tab focus away from input
+      userEvent.tab();
+      userEvent.keyboard("{space}");
+      const firstItem = queryByRole(MENU_ITEM_ROLES.CHECKBOX, {
+        name: fruit[0],
+      });
+
+      expect(firstItem).toHaveAttribute("aria-checked", "true");
+      expect(mockOnClick).toHaveBeenCalledTimes(1);
+    });
   });
 });

package/__flow__/Menu/__snapshots__/index.test.js.snap

@@ -70,6 +70,10 @@ exports[`Menu AsMenu should match snapshot 1`] = `
   background-color: #364141;
 }
 
+.c6 .Icon-svg {
+  color: #FFFFFF;
+}
+
 .c6:focus,
 .c6:hover {
   color: #364141;

package/__flow__/Menu/hooks.js

@@ -24,6 +24,7 @@ export const MenuContext = createContext<TypeMenuContext>({
     selectionIndex: 0,
     filterQuery: "",
     filteredItems: null,
+    isFilterInputFocused: false,
   },
   setState: () => {},
   selectCallbacks: {
@@ -75,7 +76,7 @@ export function useMenuKeyDown() {
     selectCallbacks,
     setState,
     multiselect,
-    state: { filterQuery, selectionIndex, filteredItems },
+    state: { filterQuery, selectionIndex, filteredItems, isFilterInputFocused },
   } = useContext(MenuContext);
   const { closePopout, closeOnItemClick } = useContext(MenuButtonContext);
   const { descendants: items } = useContext(MenuDescendantContext);
@@ -142,10 +143,14 @@ export function useMenuKeyDown() {
     handleKeyDown: wrapEvent<SyntheticKeyboardEvent<>>(
       function (event) {
         const { key } = event;
-
         switch (key) {
-          case "Enter":
           case " ":
+            if (isFilterInputFocused) {
+              return;
+            }
+          // falls through
+          // eslint-disable-next-line no-fallthrough
+          case "Enter":
             const selected = items[selectionIndex];
 
             if (selected) {

package/__flow__/Menu/index.flow.js

@@ -12,6 +12,7 @@ export type TypeMenuState = {|
   selectionIndex: number,
   filterQuery: string,
   filteredItems: ?(number[]),
+  isFilterInputFocused: boolean,
 |};
 
 export type TypeMenuSharedProps = {|

package/__flow__/Menu/index.js

@@ -308,14 +308,40 @@ export const MenuDivider = (props: any) => (
 );
 
 const MenuFilterInput = (props: React$ElementConfig<typeof Input>) => {
+  const { onChange, onFocus, onBlur } = props;
   const { state, setState } = useContext(MenuContext);
-  const updateFilterQuery = useCallback(
-    (event) => setState({ filterQuery: event.currentTarget.value }),
-    [setState]
+  const handleOnChange = useCallback(
+    (event, value) => {
+      onChange && onChange(event, value);
+      setState({ filterQuery: value });
+    },
+    [setState, onChange]
+  );
+
+  const handleOnFocus = useCallback(
+    (event) => {
+      onFocus && onFocus(event);
+      setState({ isFilterInputFocused: true });
+    },
+    [setState, onFocus]
+  );
+
+  const handleOnBlur = useCallback(
+    (event) => {
+      onBlur && onBlur(event);
+      setState({ isFilterInputFocused: false });
+    },
+    [setState, onBlur]
   );
 
   return (
-    <Input {...props} value={state.filterQuery} onChange={updateFilterQuery} />
+    <Input
+      {...props}
+      value={state.filterQuery}
+      onChange={handleOnChange}
+      onFocus={handleOnFocus}
+      onBlur={handleOnBlur}
+    />
   );
 };
 
@@ -364,6 +390,7 @@ export const Menu = ({
     selectionIndex: 0,
     filterQuery: "",
     filteredItems: null,
+    isFilterInputFocused: false,
   });
   const selectCallbacks = useRef<(?(() => void))[]>([]);
   const menuRef = useRef(null);

package/__flow__/Menu/index.stories.js

@@ -203,3 +203,23 @@ export const MenuWithCheckboxes = (props) => {
     </Menu>
   );
 };
+
+// Specifically testing that icons with a color inverse when active like the text does.
+export const MenuWithIcons = (props) => {
+  return (
+    <Menu width="200px" {...props}>
+      <Menu.Item key="positive" onClick={() => alert("positive")}>
+        <Icon name="flat-positive-sentiment" mr={200} color="blue.600" />
+        Positive
+      </Menu.Item>
+      <Menu.Item key="negative" onClick={() => alert("negative")}>
+        <Icon name="flat-negative-sentiment" mr={200} color="red.500" />
+        Negative
+      </Menu.Item>
+      <Menu.Item key="neutral" onClick={() => alert("neutral")}>
+        <Icon name="flat-neutral-sentiment" mr={200} />
+        Neutral
+      </Menu.Item>
+    </Menu>
+  );
+};

package/__flow__/Menu/styles.js

@@ -41,6 +41,10 @@ export const MenuItemContainer = styled<
     css`
       color: ${(props) => props.theme.colors.text.inverse};
       background-color: ${props.theme.colors.listItem.background.selected};
+
+      .Icon-svg {
+        color: ${(props) => props.theme.colors.text.inverse};
+      }
     `}
 
   ${(props) =>