✨ implement Menus

apollographql · Jan 27, 2020 · 2bed45d · 2bed45d
1 parent 2655270
commit 2bed45d
Show file tree

Hide file tree

Showing 9 changed files with 630 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -28,6 +28,7 @@ tsconfig.tsbuildinfo
 /SpaceKitProvider
 /Table
 /Tooltip
+/Menu*
 /typography
 
 # Generated icons stored in src directory 

diff --git a/rollup.config.js b/rollup.config.js
@@ -40,6 +40,7 @@ function CJS() {
             path.join("src", "illustrations", "scripts"),
             path.join("src", "shared"),
             path.join("src", "AbstractTooltip"),
+            path.join("src", "MenuIconSize"),
           ].some(excludedPathname => filename.includes(excludedPathname))
       ),
     external: [

diff --git a/src/Menu/Menu.story.mdx b/src/Menu/Menu.story.mdx
@@ -0,0 +1,231 @@
+import { Button } from "../Button";
+import { colors } from "../colors";
+import { Menu } from "../Menu";
+import { MenuItem } from "../MenuItem";
+import { MenuDivider } from "../MenuDivider";
+import { MenuHeading } from "../MenuHeading";
+import {
+  Description,
+  Meta,
+  Story,
+  Props,
+  Preview,
+} from "@storybook/addon-docs/blocks";
+import { IconAstronaut1 } from "../icons/IconAstronaut1";
+import { IconAstronaut2 } from "../icons/IconAstronaut2";
+import { IconAstronaut3 } from "../icons/IconAstronaut3";
+import { IconLander } from "../icons/IconLander";
+import { IconPlanet3 } from "../icons/IconPlanet3";
+import { IconShip3 } from "../icons/IconShip3";
+import { IconCheck } from "../icons/IconCheck";
+
+<Meta title="Components|Menu" />
+
+# Menu
+
+<Description
+  of={Menu}
+  markdown="**Menus** provide a way for sures to interact with the application by selecting from a set of options. While that’s simple in theory, menus can be complex and not eveything is detailed below. Menus can emerge from Select buttons or a simple button."
+/>
+
+## Simple Menu
+
+The simple menu provides a list of options for a user to choose from and updates the button or select button with the choice the user has selected.
+
+<Preview>
+  <Story name="basic">
+    <Menu
+      content={
+        <React.Fragment>
+          <MenuItem>Root</MenuItem>
+          <MenuItem selected>Objects</MenuItem>
+          <MenuItem>Inputs</MenuItem>
+          <MenuItem>Interfaces</MenuItem>
+          <MenuItem>Unions</MenuItem>
+          <MenuItem>Scalars and Enums</MenuItem>
+        </React.Fragment>
+      }
+      forceVisibleForTestingOnly
+    >
+      <Button>open menu</Button>
+    </Menu>
+  </Story>
+</Preview>
+
+## Segmented Menu
+
+The segmented menu provides a way to group related options. This can be achieved
+by a divider and in other cases, headers can be used to group similar
+information and provide a nice visual grouping.
+
+<Preview>
+  <Story name="divided">
+    <Menu
+      content={
+        <React.Fragment>
+          <MenuItem>All Types</MenuItem>
+          <MenuDivider />
+          <MenuItem>Root</MenuItem>
+          <MenuItem>Objects</MenuItem>
+          <MenuItem>Inputs</MenuItem>
+          <MenuItem>Interfaces</MenuItem>
+          <MenuItem>Unions</MenuItem>
+          <MenuItem>Scalars and Enums</MenuItem>
+          <MenuDivider />
+          <MenuItem>Deprecations</MenuItem>
+        </React.Fragment>
+      }
+      forceVisibleForTestingOnly
+    >
+      <Button>Test</Button>
+    </Menu>
+  </Story>
+</Preview>
+
+## Header
+
+<Preview>
+  <Story name="heading">
+    <Menu
+      content={
+        <React.Fragment>
+          <MenuHeading count={5}>Filter by</MenuHeading>
+          <MenuItem>Root</MenuItem>
+          <MenuItem>Objects</MenuItem>
+          <MenuItem>Inputs</MenuItem>
+          <MenuItem>Interfaces</MenuItem>
+          <MenuItem>Unions</MenuItem>
+          <MenuItem>Scalars and Enums</MenuItem>
+        </React.Fragment>
+      }
+      forceVisibleForTestingOnly
+    >
+      <Button>Test</Button>
+    </Menu>
+  </Story>
+</Preview>
+
+## Icons
+
+<Preview>
+  <Story name="icons">
+    <Menu
+      content={
+        <React.Fragment>
+          <MenuItem
+            icon={
+              <IconAstronaut1
+                style={{ width: "100%", height: "100%" }}
+                weight="thin"
+              />
+            }
+          >
+            Cones
+          </MenuItem>
+          <MenuItem
+            icon={
+              <IconAstronaut2
+                style={{ width: "100%", height: "100%" }}
+                weight="thin"
+              />
+            }
+          >
+            Rhomboid
+          </MenuItem>
+          <MenuItem
+            icon={
+              <IconAstronaut3
+                style={{ width: "100%", height: "100%" }}
+                weight="thin"
+              />
+            }
+          >
+            Cubes
+          </MenuItem>
+          <MenuItem
+            icon={
+              <IconLander
+                style={{ width: "100%", height: "100%" }}
+                weight="thin"
+              />
+            }
+          >
+            Diamonds
+          </MenuItem>
+          <MenuItem
+            icon={
+              <IconPlanet3
+                style={{ width: "100%", height: "100%" }}
+                weight="thin"
+              />
+            }
+          >
+            Cylinders
+          </MenuItem>
+          <MenuItem
+            icon={
+              <IconShip3
+                style={{ width: "100%", height: "100%" }}
+                weight="thin"
+              />
+            }
+          >
+            Pyramids
+          </MenuItem>
+        </React.Fragment>
+      }
+      forceVisibleForTestingOnly
+    >
+      <Button>Test</Button>
+    </Menu>
+  </Story>
+</Preview>
+
+## Icons with custom sizes
+
+<Preview>
+  <Story name="menu-icon-size">
+    <Menu
+      iconSize="small"
+      maxWidth={280}
+      content={
+        <React.Fragment>
+          <MenuHeading icon={null}>mdg-private-graphs</MenuHeading>
+          <MenuItem icon={null}>apollo-day-nyc</MenuItem>
+          <MenuItem icon={null} selected>
+            engine
+          </MenuItem>
+          <MenuItem icon={null}>galaxy-eu-west</MenuItem>
+          <MenuItem
+            icon={
+              <IconCheck
+                style={{
+                  color: colors.blue.base,
+                  width: "100%",
+                  height: "100%",
+                }}
+              />
+            }
+          >
+            galaxy-ties
+          </MenuItem>
+          <MenuItem icon={null}>space-explorer</MenuItem>
+          <MenuItem icon={null}>z-end-to-end-ingestion-20</MenuItem>
+        </React.Fragment>
+      }
+      forceVisibleForTestingOnly
+    >
+      <Button>Test</Button>
+    </Menu>
+  </Story>
+</Preview>
+
+## Props
+
+### `Menu`
+
+<Props of={Menu} />
+
+### `MenuItem`
+
+<Props of={MenuItem} />
diff --git a/src/Menu/index.tsx b/src/Menu/index.tsx
@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import React from "react";
+import { AbstractTooltip } from "../AbstractTooltip";
+import { TippyMenuStyles } from "./menu/TippyMenuStyles";
+import {
+  IconSize,
+  MenuIconSizeProvider,
+  useMenuIconSize,
+} from "../MenuIconSize";
+import { Instance, ReferenceElement } from "tippy.js";
+
+interface Props extends React.ComponentProps<typeof AbstractTooltip> {
+  // extends Pick<
+  //   React.ComponentProps<typeof AbstractTooltip>,
+  //   "content" | "children" | "trigger" | "maxWidth"
+  // > {
+  style?: React.CSSProperties;
+
+  /**
+   * Optionally set the icon size to use for all `MenuItem` descendents. This
+   * value will automatically be passed down via context and can be overriden by
+   * child `Menu` components
+   *
+   * Is inherited by antecedent definitions, or defaulted to `normal` if there
+   * are none
+   */
+  iconSize?: IconSize;
+}
+
+function calculateMaxHeight(instance: Instance) {
+  const parentHeight =
+    instance.props.appendTo === "parent"
+      ? (instance.reference as any).offsetParent.offsetHeight
+      : document.body.clientHeight;
+
+  const {
+    height: referenceHeight,
+    top: referenceTop,
+  } = instance.reference.getBoundingClientRect();
+
+  const {
+    height: arrowHeight,
+  } = instance.popperChildren.arrow?.getBoundingClientRect() ?? { height: 0 };
+
+  const { distance } = instance.props;
+
+  return (
+    parentHeight -
+    referenceTop -
+    referenceHeight -
+    arrowHeight -
+    parseFloat(getComputedStyle(instance.popperChildren.tooltip).paddingTop) -
+    parseFloat(
+      getComputedStyle(instance.popperChildren.tooltip).paddingBottom
+    ) -
+    (typeof distance === "number" ? distance : 0) -
+    // Margin from bottom of the page
+    5
+  );
+}
+
+function isReferenceObject(reference: any): reference is ReferenceElement {
+  return typeof (reference as ReferenceElement)._tippy !== "undefined";
+}
+
+export const Menu: React.FC<Props> = ({ children, iconSize, ...props }) => {
+  const inheritedIconSize = useMenuIconSize();
+
+  return (
+    <MenuIconSizeProvider iconSize={iconSize ?? inheritedIconSize}>
+      <TippyMenuStyles />
+      <AbstractTooltip
+        hideOnClick
+        theme="space-kit-menu"
+        appendTo="parent"
+        trigger="mouseenter"
+        popperOptions={{
+          modifiers: {
+            preventOverflow: {
+              boundariesElement: "window",
+            },
+            setMaxHeight: {
+              enabled: true,
+              order: 0,
+              fn: data => {
+                const reference = data.instance.reference;
+                if (isReferenceObject(reference) && reference._tippy) {
+                  const tippy = reference._tippy;
+                  const calculatedMaxHeight = calculateMaxHeight(tippy);
+                  tippy.popperChildren.content.style.maxHeight = `${calculatedMaxHeight}px`;
+                }
+                return data;
+              },
+            },
+          },
+        }}
+        {...props}
+        interactive
+      >
+        {children}
+      </AbstractTooltip>
+    </MenuIconSizeProvider>
+  );
+};
diff --git a/src/Menu/menu/TippyMenuStyles.tsx b/src/Menu/menu/TippyMenuStyles.tsx
@@ -0,0 +1,29 @@
+import "../../../node_modules/tippy.js/dist/tippy.css";
+import React from "react";
+import { base } from "../../typography";
+import { colors } from "../../colors";
+import { Global, css } from "@emotion/core";
+
+export const TippyMenuStyles: React.FC = () => (
+  <Global
+    styles={css({
+      ".tippy-tooltip": {
+        "&.space-kit-menu-theme": {
+          ...base.small,
+          backgroundColor: colors.white,
+          borderRadius: 4,
+          boxShadow:
+            "0 3px 4px 0 rgba(18, 21, 26, 0.04), 0 4px 8px 0 rgba(18, 21, 26, 0.08), 0 0 0 1px rgba(18, 21, 26, 0.08)",
+          color: colors.black.base,
+          padding: 8,
+          minWidth: 190,
+
+          ".tippy-content": {
+            padding: "0",
+            overflowY: "auto",
+          },
+        },
+      },
+    })}
+  />
+);