Merge pull request #158 from apollographql/justin/menus/AP-1335-help-…

…truncation

AP-1335 Fix `MenuItem`s not being truncated properly

src/ConfirmationTooltip/ConfirmationTooltip.story.tsx

@@ -1,21 +1,33 @@
 import React from "react";
+import userEvent from "@testing-library/user-event";
 import { Button } from "../Button";
 import { ConfirmationTooltip } from "../ConfirmationTooltip";
+import { findByText } from "@testing-library/dom";
+import { PerformUserInteraction } from "../shared/PerformUserInteraction";
 import { storiesOf } from "@storybook/react";
 
 storiesOf("ConfirmationTooltip", module)
-  .add("forced visible", () => {
-    return (
-      <div style={{ padding: 50 }}>
-        <ConfirmationTooltip
-          content="default content"
-          forceVisibleForTestingOnly
+  .add(
+    "forced visible",
+    () => {
+      return (
+        <PerformUserInteraction
+          callback={async () => {
+            userEvent.click(await findByText(document.body, "click"));
+          }}
         >
-          <Button>click</Button>
-        </ConfirmationTooltip>
-      </div>
-    );
-  })
+          <div style={{ padding: 50 }}>
+            <ConfirmationTooltip content="default content">
+              <Button>click</Button>
+            </ConfirmationTooltip>
+          </div>
+        </PerformUserInteraction>
+      );
+    },
+    {
+      chromatic: { delay: 500 },
+    }
+  )
   .add("interactive", () => {
     return (
       <div style={{ padding: 50 }}>

src/Menu/Menu.story.mdx

@@ -3,7 +3,7 @@ import { findByText } from "@testing-library/dom";
 import { Button } from "../Button";
 import { colors } from "../colors";
 import { Menu } from "../Menu";
-import { PerformUserInteraction } from "./menuStory/PerformUserInteraction";
+import { PerformUserInteraction } from "../shared/PerformUserInteraction";
 import { MenuItem } from "../MenuItem";
 import { MenuDivider } from "../MenuDivider";
 import { MenuHeading } from "../MenuHeading";
@@ -413,6 +413,90 @@ information and provide a nice visual grouping.
   </Story>
 </Preview>
 
+## Truncation
+
+Items should be truncated properly
+
+export const MenuItemWithContentHuggingSides = ({
+  startContent,
+  endContent,
+}) => {
+  return (
+    <div style={{ width: "100%", display: "flex" }}>
+      <span
+        style={{
+          flex: 1,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {startContent}
+      </span>
+      <span
+        style={{
+          marginLeft: ".5rem",
+          flex: "none",
+          color: colors.grey.light,
+        }}
+      >
+        {endContent}
+      </span>
+    </div>
+  );
+};
+
+<Preview>
+  <Story name="flexbox truncation">
+    <PerformUserInteraction
+      callback={async () => {
+        userEvent.click(await findByText(document.body, /open menu/i));
+      }}
+    >
+      <Menu
+        placement="bottom-start"
+        iconSize="small"
+        maxWidth={280}
+        content={
+          <React.Fragment>
+            <MenuHeading startIcon={null}>mdg-private-graphs</MenuHeading>
+            <MenuItem startIcon={null}>
+              <MenuItemWithContentHuggingSides
+                startContent="really_long_test_name_really_long_test_name"
+                endContent="0 rpm"
+              />
+            </MenuItem>
+            <MenuItem startIcon={null} selected>
+              <MenuItemWithContentHuggingSides
+                startContent="engine"
+                endContent="1.9k rm"
+              />
+            </MenuItem>
+            <MenuItem
+              startIcon={
+                <IconCheck
+                  style={{
+                    color: colors.blue.base,
+                    width: "100%",
+                    height: "100%",
+                  }}
+                />
+              }
+            >
+              <MenuItemWithContentHuggingSides
+                startContent="galaxy-eu-west"
+                endContent="0 rm"
+              />
+            </MenuItem>
+          </React.Fragment>
+        }
+      >
+        <Button>Open Menu</Button>
+      </Menu>
+    </PerformUserInteraction>
+  </Story>
+</Preview>
+
 ## Props
 
 ### `Menu`

src/MenuItem/index.tsx

@@ -155,6 +155,8 @@ export const MenuItem = React.forwardRef<
         <div
           css={css({
             flex: "1",
+            /* This is weird but it's necessary to truncate menu items */
+            minWidth: 0,
           })}
         >
           {children}