Merge pull request #244 from apollographql/justin/button-focus

package.json

@@ -72,9 +72,11 @@
     "@react-stately/toggle": "^3.1.0",
     "@tippyjs/react": "^4.2.0",
     "@types/classnames": "^2.2.9",
+    "@types/lodash": "^4.14.157",
     "@types/tinycolor2": "^1.4.2",
     "classnames": "^2.2.6",
     "csstype": "^3.0.3",
+    "lodash": "*",
     "tinycolor2": "^1.4.1",
     "tslib": "^2.0.1"
   },

rollup.config.js

@@ -47,6 +47,8 @@ function CJS() {
     external: [
       "@emotion/cache",
       "@emotion/core",
+      "@react-aria/focus",
+      "@react-aria/utils",
       "@tippyjs/react",
       "@popperjs/core",
       "@popperjs/core/lib/utils/computeAutoPlacement",
@@ -61,6 +63,7 @@ function CJS() {
       "classnames",
       "framer-motion",
       "prop-types",
+      "lodash/omit",
       "react",
       "tinycolor2",
     ],

src/Button/Button.spec.tsx

@@ -1,7 +1,7 @@
 import "@testing-library/jest-dom";
 import * as faker from "faker";
 import { Button } from "./Button";
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import { IconShip2 } from "../icons/IconShip2";
 import React from "react";
 import userEvent from "@testing-library/user-event";
@@ -41,7 +41,7 @@ test("when passed an icon, endIcon, and text; all are rendered", () => {
   screen.getByTestId("endIcon");
 });
 
-test("wyhen passed an icon and no children, should render an icon and no text content", () => {
+test("when passed an icon and no children, should render an icon and no text content", () => {
   render(<Button icon={<IconShip2 data-testid="icon" />} />);
 
   expect(screen.getByRole("button")).toHaveTextContent("");
@@ -145,6 +145,17 @@ test("when passed onClick props to the element and the `as` prop, they should bo
   expect(rootElementOnClick).toHaveBeenCalled();
 });
 
+test("given a top-level `className` and an `as` prop with it's own `className`, `className` props are merged", () => {
+  render(
+    <Button className="testClassA" as={<button className="testClassB" />} />
+  );
+
+  const button = screen.getByRole("button");
+
+  expect(button).toHaveClass("testClassA");
+  expect(button).toHaveClass("testClassB");
+});
+
 test("when passed unrecognized props, they should be rendered in the dom", () => {
   render(
     <Button
@@ -178,37 +189,3 @@ test("ref is forwarded", () => {
 
   expect(ref.current).toBe(screen.getByRole("button"));
 });
-
-test("when mouseOut event occurs and button is pressed, button isn't focused", () => {
-  render(<Button>{faker.lorem.word()}</Button>);
-
-  const button = screen.getByRole("button");
-
-  // This is hacky. We are really just testing that the focus is removed when
-  // there's a mouseout event with a button pressed.
-  button.focus();
-
-  act(() => {
-    fireEvent(
-      button,
-      new MouseEvent("mouseout", {
-        buttons: 1,
-        bubbles: true,
-        cancelable: true,
-      })
-    );
-  });
-
-  act(() => {
-    fireEvent(
-      button,
-      new MouseEvent("mouseup", {
-        buttons: 1,
-        bubbles: true,
-        cancelable: true,
-      })
-    );
-  });
-
-  expect(button).not.toHaveFocus();
-});

src/Button/Button.stories.mdx

@@ -447,7 +447,7 @@ In space constrained places or for floating action buttons (FAB), we can show an
 
 ### End Icons
 
-You can specify that a button has an additional icon at the end of the row
+You can specify that a button has an additional icon at the end of the row. This will be assumed to be a menu selector and will change the button's right padding.
 
 <Canvas>
   <Story name="light end icon">