@khanacademy/wonder-blocks-tooltip 1.3.22 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-tooltip
 
+## 1.4.0
+
+### Minor Changes
+
+-   b784d7a8: Allow Tooltip to be open/closed by its parent (controlled)
+
+## 1.3.23
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-modal@3.0.1
+
 ## 1.3.22
 
 ### Patch Changes

package/dist/es/index.js

@@ -781,6 +781,12 @@ class Tooltip extends React.Component {
     };
   }
 
+  static getDerivedStateFromProps(props, state) {
+    return {
+      active: typeof props.opened === "boolean" ? props.opened : state.active
+    };
+  }
+
   _updateAnchorElement(ref) {
     if (ref && ref !== this.state.anchorElement) {
       this.setState({

package/dist/index.js

@@ -845,6 +845,16 @@ class Tooltip extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     };
   }
 
+  /**
+   * Used to sync the `opened` state when Tooltip acts as a controlled
+   * component
+   */
+  static getDerivedStateFromProps(props, state) {
+    return {
+      active: typeof props.opened === "boolean" ? props.opened : state.active
+    };
+  }
+
   _updateAnchorElement(ref) {
     if (ref && ref !== this.state.anchorElement) {
       this.setState({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tooltip",
-  "version": "1.3.22",
+  "version": "1.4.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -19,7 +19,7 @@
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.5.0",
     "@khanacademy/wonder-blocks-layout": "^1.4.12",
-    "@khanacademy/wonder-blocks-modal": "^3.0.0",
+    "@khanacademy/wonder-blocks-modal": "^3.0.1",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-typography": "^1.1.34"
   },

package/src/components/__docs__/tooltip.stories.js

@@ -1,6 +1,10 @@
 // @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
+
+import {within, userEvent} from "@storybook/testing-library";
+import {expect} from "@storybook/jest";
+
 import Button from "@khanacademy/wonder-blocks-button";
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
@@ -27,15 +31,15 @@ export default {
         placement: "top",
     },
     parameters: {
-        // TODO(WB-1170): Reassess this after investigating more about Chromatic
-        // flakyness.
-        chromatic: {
-            disableSnapshot: true,
-        },
         componentSubtitle: ((
             <ComponentInfo name={name} version={version} />
         ): any),
     },
+    decorators: [
+        (Story: any): React.Node => (
+            <View style={styles.storyCanvas}>{Story()}</View>
+        ),
+    ],
 };
 
 const Template = (args) => <Tooltip {...args} />;
@@ -50,6 +54,22 @@ Default.args = {
     children: "some text",
 };
 
+Default.play = async ({canvasElement}) => {
+    // Arrange
+    // NOTE: Using `body` here to work with React Portals.
+    const canvas = within(canvasElement.ownerDocument.body);
+
+    // Act
+    // Triggers the hover state
+    const text = await canvas.findByText("some text");
+    await userEvent.hover(text);
+
+    // Assert
+    await expect(
+        await canvas.findByText("This is a text tooltip on the top"),
+    ).toBeInTheDocument();
+};
+
 /**
  * Complex anchor & title tooltip
  */
@@ -57,9 +77,10 @@ export const ComplexAnchorAndTitle: StoryComponentType = Template.bind({});
 
 ComplexAnchorAndTitle.args = {
     forceAnchorFocusivity: false,
+    placement: "bottom",
     id: "my-a11y-tooltip",
     title: "This tooltip has a title",
-    content: "I'm at the top!",
+    content: "I'm at the bottom!",
     children: (
         <View>
             Some text
@@ -73,6 +94,22 @@ ComplexAnchorAndTitle.args = {
     ),
 };
 
+ComplexAnchorAndTitle.play = async ({canvasElement}) => {
+    // Arrange
+    // NOTE: Using `body` here to work with React Portals.
+    const canvas = within(canvasElement.ownerDocument.body);
+
+    // Act
+    // Triggers the hover state
+    const text = await canvas.findByText("Some text");
+    await userEvent.hover(text);
+
+    // Assert
+    await expect(
+        await canvas.findByText("This tooltip has a title"),
+    ).toBeInTheDocument();
+};
+
 ComplexAnchorAndTitle.parameters = {
     docs: {
         description: {
@@ -102,6 +139,10 @@ export const AnchorInScrollableParent: StoryComponentType = () => (
 );
 
 AnchorInScrollableParent.parameters = {
+    // Disable Chromatic because it only shows the trigger element.
+    chromatic: {
+        disableSnapshot: true,
+    },
     docs: {
         description: {
             story: "In this example, we have the anchor in a scrollable parent. Notice how, when the anchor is focused but scrolled out of bounds, the tooltip disappears.",
@@ -139,6 +180,10 @@ export const TooltipInModal: StoryComponentType = () => {
 };
 
 TooltipInModal.parameters = {
+    // Disable Chromatic because it initially renders the modal offscreen.
+    chromatic: {
+        disableSnapshot: true,
+    },
     docs: {
         description: {
             story: "This checks that the tooltip works how we want inside a modal. Click the button to take a look.",
@@ -169,6 +214,10 @@ export const SideBySide: StoryComponentType = () => (
 SideBySide.storyName = "Side-by-side";
 
 SideBySide.parameters = {
+    // Disable Chromatic because it only shows the trigger element.
+    chromatic: {
+        disableSnapshot: true,
+    },
     docs: {
         description: {
             story: "Here, we can see that the first tooltip shown has an initial delay before it appears, as does the last tooltip shown, yet when moving between tooltipped items, the transition from one to another is instantaneous.",
@@ -213,7 +262,48 @@ TooltipOnButtons.parameters = {
     },
 };
 
+/**
+ * Opening a tooltip programatically (Controlled)
+ */
+export const Controlled: StoryComponentType = () => {
+    const [opened, setOpened] = React.useState(true);
+    const buttonText = `Click to ${opened ? "close" : "open"} tooltip`;
+
+    return (
+        <View style={[styles.centered, styles.row]}>
+            <Tooltip
+                content="You opened the tooltip with a button"
+                opened={opened}
+            >
+                tooltip
+            </Tooltip>
+            <Button onClick={() => setOpened(!opened)}>{buttonText}</Button>
+        </View>
+    );
+};
+
+Controlled.parameters = {
+    docs: {
+        description: {
+            story: `Sometimes you'll want to trigger a tooltip programmatically.
+               This can be done by setting the \`opened\` prop to \`true\`. In
+               this situation the \`Tooltip\` is a controlled component. The
+               parent is responsible for managing the opening/closing of the
+               tooltip when using this prop. This means that you'll also have
+               to update \`opened\` to \`false\` in response to the
+               \`onClose\` callback being triggered.`,
+        },
+    },
+};
+
 const styles = StyleSheet.create({
+    storyCanvas: {
+        // NOTE: This is needed for Chromatic to include the tooltip bubble.
+        minHeight: 280,
+        padding: Spacing.xxxLarge_64,
+        justifyContent: "center",
+        textAlign: "center",
+    },
     row: {
         flexDirection: "row",
     },

package/src/components/__tests__/__snapshots__/tooltip.test.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Tooltip Controlled can be opened programmatically: Similar to <TooltipContent>Content</TooltipContent> 1`] = `
+<TooltipContent>
+  Content
+</TooltipContent>
+`;
+
 exports[`Tooltip content is TooltipContent with title, overrides title of TooltipContent: Similar to <Body>Some custom content</Body> 1`] = `
 <Body
   tag="span"

package/src/components/__tests__/tooltip.test.js

@@ -399,4 +399,54 @@ describe("Tooltip", () => {
             });
         });
     });
+
+    describe("Controlled", () => {
+        test("can be opened programmatically", async () => {
+            // Arrange
+            await new Promise((resolve) => {
+                const nodes = (
+                    <View>
+                        <Tooltip id="tooltip" content="Content" opened={true}>
+                            <View ref={resolve}>Anchor</View>
+                        </Tooltip>
+                    </View>
+                );
+                mount(nodes);
+            });
+            jest.runOnlyPendingTimers();
+
+            // Act
+            // Flow doesn't like jest mocks
+            // $FlowFixMe[prop-missing]
+            const result = TooltipBubble.mock.instances[0].props["children"];
+
+            // Assert
+            expect(result).toMatchSnapshot(
+                `Similar to <TooltipContent>Content</TooltipContent>`,
+            );
+        });
+
+        test("can be closed programmatically", async () => {
+            // Arrange
+            await new Promise((resolve) => {
+                const nodes = (
+                    <View>
+                        <Tooltip id="tooltip" content="Content" opened={false}>
+                            <View ref={resolve}>Anchor</View>
+                        </Tooltip>
+                    </View>
+                );
+                mount(nodes);
+            });
+            jest.runOnlyPendingTimers();
+
+            // Act
+            // Flow doesn't like jest mocks
+            // $FlowFixMe[prop-missing]
+            const result = TooltipBubble.mock.instances[0];
+
+            // Assert
+            expect(result).toBeUndefined();
+        });
+    });
 });

package/src/components/tooltip.js

@@ -96,6 +96,15 @@ type Props = {|
      */
     placement: Placement,
 
+    /**
+     * Renders the tooltip when true, renders nothing when false.
+     *
+     * Using this prop makes the component behave as a controlled component. The
+     * parent is responsible for managing the opening/closing of the tooltip
+     * when using this prop.
+     */
+    opened?: boolean,
+
     /**
      * Test ID used for e2e testing.
      */
@@ -152,6 +161,20 @@ export default class Tooltip extends React.Component<Props, State> {
         placement: "top",
     };
 
+    /**
+     * Used to sync the `opened` state when Tooltip acts as a controlled
+     * component
+     */
+    static getDerivedStateFromProps(
+        props: Props,
+        state: State,
+    ): ?Partial<State> {
+        return {
+            active:
+                typeof props.opened === "boolean" ? props.opened : state.active,
+        };
+    }
+
     state: State = {
         active: false,
         activeBubble: false,