@khanacademy/wonder-blocks-tooltip 1.3.5 → 1.3.6

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @khanacademy/wonder-blocks-tooltip
+
+## 1.3.6
+### Patch Changes
+
+- Updated dependencies [e7bbf149]
+  - @khanacademy/wonder-blocks-modal@2.2.0

package/dist/es/index.js

@@ -1,8 +1,8 @@
-import { Component, createElement, cloneElement, Fragment } from 'react';
-import { findDOMNode, createPortal } from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { Text as Text$1, View, UniqueIDProvider } from '@khanacademy/wonder-blocks-core';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
-import { css, StyleSheet } from 'aphrodite';
+import { StyleSheet, css } from 'aphrodite';
 import Colors from '@khanacademy/wonder-blocks-color';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import _extends from '@babel/runtime/helpers/extends';
@@ -118,7 +118,7 @@ const TooltipDisappearanceDelay = 75;
  * positioning and displaying tooltips.
  */
 const TRACKER = new ActiveTracker();
-class TooltipAnchor extends Component {
+class TooltipAnchor extends React.Component {
   constructor(props) {
     super(props);
 
@@ -182,7 +182,7 @@ class TooltipAnchor extends Component {
   }
 
   componentDidMount() {
-    const anchorNode = findDOMNode(this); // This should never happen, but we have this check here to make flow
+    const anchorNode = ReactDOM.findDOMNode(this); // This should never happen, but we have this check here to make flow
     // happy and ensure that if this does happen, we'll know about it.
 
     if (anchorNode instanceof Text) {
@@ -327,13 +327,13 @@ class TooltipAnchor extends Component {
     const {
       children
     } = this.props;
-    return typeof children === "string" ? /*#__PURE__*/createElement(Text$1, null, children) : children;
+    return typeof children === "string" ? /*#__PURE__*/React.createElement(Text$1, null, children) : children;
   }
 
   _renderAccessibleChildren(ids) {
     const anchorableChildren = this._renderAnchorableChildren();
 
-    return /*#__PURE__*/cloneElement(anchorableChildren, {
+    return /*#__PURE__*/React.cloneElement(anchorableChildren, {
       "aria-describedby": ids.get(TooltipAnchor.ariaContentId)
     });
   }
@@ -359,7 +359,7 @@ TooltipAnchor.ariaContentId = "aria-content";
 // TODO(somewhatabstract): Replace this really basic unique ID work with
 // something SSR-friendly and more robust.
 let tempIdCounter = 0;
-class TooltipTail extends Component {
+class TooltipTail extends React.Component {
   _calculateDimensionsFromPlacement() {
     const {
       placement
@@ -476,7 +476,7 @@ class TooltipTail extends Component {
       offsetShadowX
     } = position;
     const dropShadowFilterId = `tooltip-dropshadow-${placement}-${tempIdCounter++}`;
-    return [/*#__PURE__*/createElement("filter", {
+    return [/*#__PURE__*/React.createElement("filter", {
       key: "filter",
       id: dropShadowFilterId // Height and width tell the filter how big of a canvas to
       // draw based on its parent size. i.e. 2 times bigger.
@@ -491,10 +491,10 @@ class TooltipTail extends Component {
       ,
       x: x,
       y: y
-    }, /*#__PURE__*/createElement("feGaussianBlur", {
+    }, /*#__PURE__*/React.createElement("feGaussianBlur", {
       in: "SourceAlpha",
       stdDeviation: Spacing.xxSmall_6 / 2
-    }), /*#__PURE__*/createElement("feComponentTransfer", null, /*#__PURE__*/createElement("feFuncA", {
+    }), /*#__PURE__*/React.createElement("feComponentTransfer", null, /*#__PURE__*/React.createElement("feFuncA", {
       type: "linear",
       slope: "0.3"
     }))),
@@ -512,10 +512,10 @@ class TooltipTail extends Component {
      *
      * See styles below for why we offset the arrow.
      */
-    createElement("g", {
+    React.createElement("g", {
       key: "dropshadow",
       transform: `translate(${offsetShadowX},5.5)`
-    }, /*#__PURE__*/createElement("polyline", {
+    }, /*#__PURE__*/React.createElement("polyline", {
       fill: Colors.offBlack16,
       points: points.join(" "),
       stroke: Colors.offBlack32,
@@ -656,23 +656,23 @@ class TooltipTail extends Component {
     const {
       color
     } = this.props;
-    return /*#__PURE__*/createElement("svg", {
-      className: css(styles.arrow),
+    return /*#__PURE__*/React.createElement("svg", {
+      className: css(styles$2.arrow),
       style: this._getArrowStyle(),
       width: width,
       height: height
-    }, this._maybeRenderDropshadow(points), /*#__PURE__*/createElement("polyline", {
+    }, this._maybeRenderDropshadow(points), /*#__PURE__*/React.createElement("polyline", {
       fill: Colors[color],
       stroke: Colors[color],
       points: points.join(" ")
-    }), /*#__PURE__*/createElement("polyline", {
+    }), /*#__PURE__*/React.createElement("polyline", {
       // Redraw the stroke on top of the background color,
       // so that the ends aren't extra dark where they meet
       // the border of the tooltip.
       fill: Colors[color],
       points: points.join(" "),
       stroke: Colors.offBlack16
-    }), /*#__PURE__*/createElement("polyline", {
+    }), /*#__PURE__*/React.createElement("polyline", {
       stroke: Colors[color],
       points: trimlinePoints.join(" ")
     }));
@@ -684,8 +684,8 @@ class TooltipTail extends Component {
       placement,
       updateRef
     } = this.props;
-    return /*#__PURE__*/createElement(View, {
-      style: [styles.tailContainer, _extends({}, offset), this._getContainerStyle()],
+    return /*#__PURE__*/React.createElement(View, {
+      style: [styles$2.tailContainer, _extends({}, offset), this._getContainerStyle()],
       "data-placement": placement,
       ref: updateRef
     }, this._renderArrow());
@@ -706,7 +706,7 @@ const DISTANCE_FROM_ANCHOR = Spacing.xSmall_8;
 const MIN_DISTANCE_FROM_CORNERS = Spacing.xSmall_8;
 const ARROW_WIDTH = Spacing.large_24;
 const ARROW_HEIGHT = Spacing.small_12;
-const styles = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   /**
    * Container
    */
@@ -724,7 +724,7 @@ const styles = StyleSheet.create({
   }
 });
 
-class TooltipBubble extends Component {
+class TooltipBubble extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -758,7 +758,7 @@ class TooltipBubble extends Component {
       updateTailRef,
       tailOffset
     } = this.props;
-    return /*#__PURE__*/createElement(View, {
+    return /*#__PURE__*/React.createElement(View, {
       id: id,
       role: "tooltip",
       "data-placement": placement,
@@ -766,9 +766,9 @@ class TooltipBubble extends Component {
       onMouseLeave: this.handleMouseLeave,
       ref: updateBubbleRef,
       style: [isReferenceHidden && styles$1.hide, styles$1.bubble, styles$1[`content-${placement}`], style]
-    }, /*#__PURE__*/createElement(View, {
+    }, /*#__PURE__*/React.createElement(View, {
       style: styles$1.content
-    }, children), /*#__PURE__*/createElement(TooltipTail, {
+    }, children), /*#__PURE__*/React.createElement(TooltipTail, {
       updateRef: updateTailRef,
       placement: placement,
       offset: tailOffset
@@ -823,7 +823,7 @@ const styles$1 = StyleSheet.create({
  * This component is used to provide the content that is to be rendered in the
  * tooltip bubble.
  */
-class TooltipContent extends Component {
+class TooltipContent extends React.Component {
   _renderTitle() {
     const {
       title
@@ -831,7 +831,7 @@ class TooltipContent extends Component {
 
     if (title) {
       if (typeof title === "string") {
-        return /*#__PURE__*/createElement(HeadingSmall, null, title);
+        return /*#__PURE__*/React.createElement(HeadingSmall, null, title);
       } else {
         return title;
       }
@@ -846,7 +846,7 @@ class TooltipContent extends Component {
     } = this.props;
 
     if (typeof children === "string") {
-      return /*#__PURE__*/createElement(LabelMedium, null, children);
+      return /*#__PURE__*/React.createElement(LabelMedium, null, children);
     } else {
       return children;
     }
@@ -857,16 +857,16 @@ class TooltipContent extends Component {
 
     const children = this._renderChildren();
 
-    const containerStyle = title ? styles$2.withTitle : styles$2.withoutTitle;
-    return /*#__PURE__*/createElement(View, {
+    const containerStyle = title ? styles.withTitle : styles.withoutTitle;
+    return /*#__PURE__*/React.createElement(View, {
       style: containerStyle
-    }, title, title && children && /*#__PURE__*/createElement(Strut, {
+    }, title, title && children && /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }), children);
   }
 
 }
-const styles$2 = StyleSheet.create({
+const styles = StyleSheet.create({
   withoutTitle: {
     padding: `10px ${Spacing.medium_16}px`
   },
@@ -888,7 +888,7 @@ class RefTracker {
         // We only want to update the reference if it is
         // actually changed. Otherwise, we can trigger another render that
         // would then update the reference again and just keep looping.
-        const domNode = findDOMNode(ref);
+        const domNode = ReactDOM.findDOMNode(ref);
 
         if (domNode instanceof HTMLElement && domNode !== this._lastRef) {
           this._lastRef = domNode;
@@ -918,7 +918,7 @@ class RefTracker {
  * This component is a light wrapper for react-popper, allowing us to position
  * and control the tooltip bubble location and visibility as we need.
  */
-class TooltipPopper extends Component {
+class TooltipPopper extends React.Component {
   constructor(...args) {
     super(...args);
     this._bubbleRefTracker = new RefTracker();
@@ -975,7 +975,7 @@ class TooltipPopper extends Component {
       anchorElement,
       placement
     } = this.props;
-    return /*#__PURE__*/createElement(Popper, {
+    return /*#__PURE__*/React.createElement(Popper, {
       referenceElement: anchorElement,
       strategy: "fixed",
       placement: placement,
@@ -1009,7 +1009,7 @@ class TooltipPopper extends Component {
  *     - TooltipTail (renders the callout tail and shadow that points from the
  *                     callout to the anchor content)
  */
-class Tooltip extends Component {
+class Tooltip extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -1034,11 +1034,11 @@ class Tooltip extends Component {
     } = this.props;
 
     if (typeof content === "string") {
-      return /*#__PURE__*/createElement(TooltipContent, {
+      return /*#__PURE__*/React.createElement(TooltipContent, {
         title: title
       }, content);
     } else if (title) {
-      return /*#__PURE__*/cloneElement(content, {
+      return /*#__PURE__*/React.cloneElement(content, {
         title
       });
     } else {
@@ -1059,10 +1059,10 @@ class Tooltip extends Component {
     const {
       placement
     } = this.props;
-    return /*#__PURE__*/createElement(TooltipPopper, {
+    return /*#__PURE__*/React.createElement(TooltipPopper, {
       anchorElement: this.state.anchorElement,
       placement: placement
-    }, props => /*#__PURE__*/createElement(TooltipBubble, {
+    }, props => /*#__PURE__*/React.createElement(TooltipBubble, {
       id: bubbleId,
       style: props.style,
       tailOffset: props.tailOffset,
@@ -1096,14 +1096,14 @@ class Tooltip extends Component {
     const popperHost = this._getHost(); // TODO(kevinb): update to use ReactPopper's React 16-friendly syntax
 
 
-    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(TooltipAnchor, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipAnchor, {
       forceAnchorFocusivity: forceAnchorFocusivity,
       anchorRef: r => this._updateAnchorElement(r),
       onActiveChanged: active => this.setState({
         active
       }),
       ids: ids
-    }, children), popperHost && (active || activeBubble) && /*#__PURE__*/createPortal(this._renderPopper(ids), popperHost));
+    }, children), popperHost && (active || activeBubble) && /*#__PURE__*/ReactDOM.createPortal(this._renderPopper(ids), popperHost));
   }
 
   render() {
@@ -1116,7 +1116,7 @@ class Tooltip extends Component {
       // need it.
       return this._renderTooltipAnchor();
     } else {
-      return /*#__PURE__*/createElement(UniqueIDProvider, {
+      return /*#__PURE__*/React.createElement(UniqueIDProvider, {
         scope: "tooltip",
         mockOnFirstRender: true
       }, ids => this._renderTooltipAnchor(ids));
@@ -1130,5 +1130,4 @@ Tooltip.defaultProps = {
 };
 Tooltip.ariaContentId = "aria-content";
 
-export default Tooltip;
-export { TooltipContent, TooltipPopper, TooltipTail };
+export { TooltipContent, TooltipPopper, TooltipTail, Tooltip as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tooltip",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -19,7 +19,7 @@
     "@khanacademy/wonder-blocks-color": "^1.1.20",
     "@khanacademy/wonder-blocks-core": "^4.0.0",
     "@khanacademy/wonder-blocks-layout": "^1.4.6",
-    "@khanacademy/wonder-blocks-modal": "^2.1.45",
+    "@khanacademy/wonder-blocks-modal": "^2.2.0",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
@@ -32,6 +32,5 @@
   },
   "devDependencies": {
     "wb-dev-build-settings": "^0.2.0"
-  },
-  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
+  }
 }

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -142,8 +142,8 @@ exports[`wonder-blocks-tooltip example 3 1`] = `
 
 exports[`wonder-blocks-tooltip example 4 1`] = `
 <button
+  aria-disabled={false}
   className=""
-  disabled={false}
   onBlur={[Function]}
   onClick={[Function]}
   onDragStart={[Function]}
@@ -400,8 +400,8 @@ exports[`wonder-blocks-tooltip example 6 1`] = `
 >
   <button
     aria-describedby="uid-tooltip-6-aria-content"
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}

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

@@ -4,6 +4,7 @@
 import * as React from "react";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import TooltipAnchor from "../tooltip-anchor.js";
 import {

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

@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 

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

@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 

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

@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Body, HeadingSmall} from "@khanacademy/wonder-blocks-typography";

package/src/components/tooltip.stories.js

@@ -2,7 +2,10 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {View} from "@khanacademy/wonder-blocks-core";
+import Button from "@khanacademy/wonder-blocks-button";
 import {TextField} from "@khanacademy/wonder-blocks-form";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
 import Tooltip from "@khanacademy/wonder-blocks-tooltip";
 
 import type {Placement} from "@khanacademy/wonder-blocks-tooltip";
@@ -10,6 +13,13 @@ import type {StoryComponentType} from "@storybook/react";
 
 export default {
     title: "Floating/Tooltip",
+    parameters: {
+        // TODO(WB-1170): Reassess this after investigating more about Chromatic
+        // flakyness.
+        chromatic: {
+            delay: 400,
+        },
+    },
 };
 
 const BaseTooltipExample = ({placement}: {|placement: Placement|}) => {
@@ -41,19 +51,44 @@ const BaseTooltipExample = ({placement}: {|placement: Placement|}) => {
     );
 };
 
-export const tooltipRight: StoryComponentType = () => (
+export const TooltipOnButtons: StoryComponentType = () => {
+    return (
+        <View style={styles.centered}>
+            <View>
+                <Tooltip content={"This is a tooltip on a button."}>
+                    <Button disabled={false}>Example 1</Button>
+                </Tooltip>
+                <Strut size={Spacing.medium_16} />
+                <Tooltip
+                    content="This is a tooltip on a disabled button."
+                    placement="bottom"
+                >
+                    <Button disabled={true}>Example 2</Button>
+                </Tooltip>
+            </View>
+        </View>
+    );
+};
+
+TooltipOnButtons.parameters = {
+    chromatic: {
+        disableSnapshot: true,
+    },
+};
+
+export const TooltipRight: StoryComponentType = () => (
     <BaseTooltipExample placement="right" />
 );
 
-export const tooltipLeft: StoryComponentType = () => (
+export const TooltipLeft: StoryComponentType = () => (
     <BaseTooltipExample placement="left" />
 );
 
-export const tooltipTop: StoryComponentType = () => (
+export const TooltipTop: StoryComponentType = () => (
     <BaseTooltipExample placement="top" />
 );
 
-export const tooltipBottom: StoryComponentType = () => (
+export const TooltipBottom: StoryComponentType = () => (
     <BaseTooltipExample placement="bottom" />
 );
 

package/src/util/__tests__/ref-tracker.test.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.