@atlaskit/tooltip 17.6.8 → 17.7.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/tooltip
 
+## 17.7.0
+
+### Minor Changes
+
+- [`03114fe5942`](https://bitbucket.org/atlassian/atlassian-frontend/commits/03114fe5942) - [ux] Ensures tooltips are read correctly on screen readers.
+
+## 17.6.9
+
+### Patch Changes
+
+- [`6cb57eb428d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6cb57eb428d) - Update examples for Tooltip to use render props API to aid in eventual deprecation of wrapping children.
+- Updated dependencies
+
 ## 17.6.8
 
 ### Patch Changes

package/codemods_wip/__tests__/change-wrapped-to-render-prop.ts_

@@ -0,0 +1,198 @@
+jest.autoMockOff();
+
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { changeWrappedToRenderProp } from '../migrates/change-wrapped-to-render-prop';
+
+// This stays as require() since changing to import will trigger a linter error
+const { defineInlineTest } = require('jscodeshift/dist/testUtils');
+
+const transformer = createTransformer([changeWrappedToRenderProp]);
+
+describe('Modify Tooltips that use wrapped children to use the render prop API instead', () => {
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => (
+      <Tooltip content="Hello World">
+        {(tooltipProps) => <Button {...tooltipProps}>Hover Over Me</Button>}
+      </Tooltip>
+    );
+    `, // -----
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => (
+      <Tooltip content="Hello World">
+        {(tooltipProps) => <Button {...tooltipProps}>Hover Over Me</Button>}
+      </Tooltip>
+    );
+    `, // -----
+    'do nothing if already using the render prop API',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => (
+      <Tooltip content="Hello World">
+        <Button>Hover Over Me</Button>
+      </Tooltip>
+    );
+    `, // -----
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => (
+      <Tooltip content="Hello World">
+        {(tooltipProps) => <Button {...tooltipProps}>Hover Over Me</Button>}
+      </Tooltip>
+    );
+    `, // -----
+    'modifies Tooltip that is using wrapped children to use the render prop API',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => (
+      <Tooltip content="Hello World">
+        <Button exampleProp="test">Hover Over Me</Button>
+      </Tooltip>
+    );
+    `, // -----
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => (
+      <Tooltip content="Hello World">
+        {(tooltipProps) => <Button {...tooltipProps} exampleProp="test">Hover Over Me</Button>}
+      </Tooltip>
+    );
+    `, // -----
+    'does not alter existing props on the target element',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => (
+      <Tooltip content="Hello World">
+        <Button>
+          <span>💸</span>
+        </Button>
+      </Tooltip>
+    );
+    `, // -----
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => (
+      <Tooltip content="Hello World">
+        {(tooltipProps) => <Button {...tooltipProps}>
+          <span>💸</span>
+        </Button>}
+      </Tooltip>
+    );
+    `, // -----
+    'does not alter nested children on the target element',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => <Tooltip content="Hello World" />;
+    `, // -----
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => <Tooltip content="Hello World" />;
+    `, // -----
+    'does nothing with a badly formed Tooltip component',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => (
+      <Tooltip content="Hello World">Test</Tooltip>
+    );
+    `, // -----
+    `
+    import React from 'react';
+
+    import Button from '@atlaskit/button/standard-button';
+
+    import Tooltip from '../src';
+
+    export default () => (
+      <Tooltip content="Hello World">{(tooltipProps) => <span {...tooltipProps}>Test</span>}</Tooltip>
+    );
+    `, // -----
+    'adds a span to wrapped bare text nodes',
+  );
+
+  // converts custom tags on the wrapped method into elements with props passed in
+});

package/codemods_wip/migrates/change-wrapped-to-render-prop.ts_

@@ -0,0 +1,72 @@
+import core, { ASTPath, JSXElement } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+/**
+ * Changes all Tooltip implementations using the wrapped children approach to
+ * the render prop API.
+ */
+const createTooltipImplementationTransform = () => {
+  return (j: core.JSCodeshift, source: Collection<any>) => {
+    // Handle any children that are JSX elements
+    // (e.g. <Tooltip><Button/></Tooltip>)
+    source
+      .find(j.JSXElement)
+      .filter((path) => path.parent.value.type === 'JSXElement')
+      .filter(
+        (path) => path.parent.value.openingElement.name.name === 'Tooltip',
+      )
+      .forEach((element: ASTPath<JSXElement>) => {
+        const newComponent = j.jsxElement(
+          j.jsxOpeningElement(element.node.openingElement.name, [
+            j.jsxSpreadAttribute(j.identifier('tooltipProps')),
+            ...element.node.openingElement.attributes,
+          ]),
+          element.node.closingElement,
+          element.node.children,
+        );
+
+        j(element).replaceWith(
+          j.jsxExpressionContainer(
+            j.arrowFunctionExpression(
+              // Added parens for Prettier styling
+              [j.identifier('(tooltipProps)')],
+              newComponent,
+            ),
+          ),
+        );
+      });
+
+    // Handle any direct children that are raw text
+    // (e.g. <Tooltip>Test</Tooltip>)
+    source
+      .find(j.JSXText)
+      // Need to ensure that it has this property for TS's sake
+      .filter((path) => !!path.value.raw)
+      .filter(
+        (path) =>
+          path.parent.value.openingElement.name.name === 'Tooltip' &&
+          path.value.raw!.trim().length > 0, // Adding bang because we are checking in the above filter
+      )
+      .forEach((element) => {
+        const newComponent = j.jsxElement(
+          j.jsxOpeningElement(j.jsxIdentifier('span'), [
+            j.jsxSpreadAttribute(j.identifier('tooltipProps')),
+          ]),
+          j.jsxClosingElement(j.jsxIdentifier('span')),
+          [j.jsxText(element.value.raw ? element.value.raw.trim() : '')],
+        );
+
+        j(element).replaceWith(
+          j.jsxExpressionContainer(
+            j.arrowFunctionExpression(
+              [j.identifier('(tooltipProps)')],
+              newComponent,
+            ),
+          ),
+        );
+      });
+    return source.toSource();
+  };
+};
+
+export const changeWrappedToRenderProp = createTooltipImplementationTransform();

package/codemods_wip/next-tooltip-release.ts_

@@ -0,0 +1,7 @@
+import { createTransformer } from '@atlaskit/codemod-utils';
+
+import { changeWrappedToRenderProp } from './migrates/change-wrapped-to-render-prop';
+
+const transformer = createTransformer([changeWrappedToRenderProp]);
+
+export default transformer;

package/codemods_wip/wip.md

@@ -0,0 +1,7 @@
+To continue work on the codemod:
+
+- Add `"jscodeshift": "0.14.0",` to devDependncies
+- Add `"@atlaskit/codemod-utils": "^4.1.3",` to dependencies
+- Change folder from `codemod_wip` to `codemod`
+- Add `"./codemods/**/*.ts",` to `include` in `tsconfig`
+- Rename all `ts_` file extensions in the codemod folders to `ts`

package/dist/cjs/Tooltip.js

@@ -32,7 +32,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.6.8"
+  packageVersion: "17.7.0"
 };
 
 // Inverts motion direction
@@ -358,8 +358,7 @@ function Tooltip(_ref) {
     onClick: onClick,
     onFocus: onFocus,
     onBlur: onBlur,
-    ref: setRef,
-    'aria-describedby': tooltipId
+    ref: setRef
   };
 
   // Don't set `data-testid` unless it's defined, as it's not in the interface.
@@ -367,7 +366,33 @@ function Tooltip(_ref) {
     // @ts-expect-error - Adding `data-testid` to the TriggerProps interface breaks Buttons.
     tooltipTriggerProps['data-testid'] = "".concat(testId, "--container");
   }
-  return (0, _react2.jsx)(_react.default.Fragment, null, typeof children === 'function' ? children(tooltipTriggerProps) : (0, _react2.jsx)(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
+
+  // This useEffect is purely for managing the aria attribute when using the
+  // wrapped children approach.
+  (0, _react.useEffect)(function () {
+    // If there is no container element, we should exit early, because that
+    // means they are using the render prop API, and that is implemented in a
+    // different way. If there is no target element yet or tooltipId, we also
+    // shouldn't do anything because there is nothing to operate on or with.
+    if (!containerRef.current || !targetRef.current || !tooltipId) {
+      return;
+    }
+
+    // Necessary for TS to know that it has the attribute methods
+    var target = targetRef.current;
+    if (shouldRenderTooltipContainer) {
+      target.setAttribute('aria-describedby', tooltipId);
+    } else {
+      target.removeAttribute('aria-describedby');
+    }
+  }, [shouldRenderTooltipContainer, tooltipId]);
+  return (0, _react2.jsx)(_react.default.Fragment, null, typeof children === 'function' ?
+  // once we deprecate the wrapped approach, we can put the aria
+  // attribute back into the tooltipTriggerProps and make it required
+  // instead of optional in `types`
+  children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
+    'aria-describedby': tooltipId
+  })) : (0, _react2.jsx)(CastTargetContainer, (0, _extends2.default)({}, tooltipTriggerProps, {
     role: "presentation"
   }), children), shouldRenderTooltipContainer ? (0, _react2.jsx)(_portal.default, {
     zIndex: tooltipZIndex

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.6.8",
+	"version": "17.7.0",
 	"sideEffects": false
 }

package/dist/es2019/Tooltip.js

@@ -20,7 +20,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.6.8"
+  packageVersion: "17.7.0"
 };
 
 // Inverts motion direction
@@ -335,8 +335,7 @@ function Tooltip({
     onClick,
     onFocus,
     onBlur,
-    ref: setRef,
-    'aria-describedby': tooltipId
+    ref: setRef
   };
 
   // Don't set `data-testid` unless it's defined, as it's not in the interface.
@@ -344,7 +343,34 @@ function Tooltip({
     // @ts-expect-error - Adding `data-testid` to the TriggerProps interface breaks Buttons.
     tooltipTriggerProps['data-testid'] = `${testId}--container`;
   }
-  return jsx(React.Fragment, null, typeof children === 'function' ? children(tooltipTriggerProps) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
+
+  // This useEffect is purely for managing the aria attribute when using the
+  // wrapped children approach.
+  useEffect(() => {
+    // If there is no container element, we should exit early, because that
+    // means they are using the render prop API, and that is implemented in a
+    // different way. If there is no target element yet or tooltipId, we also
+    // shouldn't do anything because there is nothing to operate on or with.
+    if (!containerRef.current || !targetRef.current || !tooltipId) {
+      return;
+    }
+
+    // Necessary for TS to know that it has the attribute methods
+    const target = targetRef.current;
+    if (shouldRenderTooltipContainer) {
+      target.setAttribute('aria-describedby', tooltipId);
+    } else {
+      target.removeAttribute('aria-describedby');
+    }
+  }, [shouldRenderTooltipContainer, tooltipId]);
+  return jsx(React.Fragment, null, typeof children === 'function' ?
+  // once we deprecate the wrapped approach, we can put the aria
+  // attribute back into the tooltipTriggerProps and make it required
+  // instead of optional in `types`
+  children({
+    ...tooltipTriggerProps,
+    'aria-describedby': tooltipId
+  }) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
     role: "presentation"
   }), children), shouldRenderTooltipContainer ? jsx(Portal, {
     zIndex: tooltipZIndex

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.6.8",
+	"version": "17.7.0",
 	"sideEffects": false
 }

package/dist/esm/Tooltip.js

@@ -24,7 +24,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "17.6.8"
+  packageVersion: "17.7.0"
 };
 
 // Inverts motion direction
@@ -350,8 +350,7 @@ function Tooltip(_ref) {
     onClick: onClick,
     onFocus: onFocus,
     onBlur: onBlur,
-    ref: setRef,
-    'aria-describedby': tooltipId
+    ref: setRef
   };
 
   // Don't set `data-testid` unless it's defined, as it's not in the interface.
@@ -359,7 +358,33 @@ function Tooltip(_ref) {
     // @ts-expect-error - Adding `data-testid` to the TriggerProps interface breaks Buttons.
     tooltipTriggerProps['data-testid'] = "".concat(testId, "--container");
   }
-  return jsx(React.Fragment, null, typeof children === 'function' ? children(tooltipTriggerProps) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
+
+  // This useEffect is purely for managing the aria attribute when using the
+  // wrapped children approach.
+  useEffect(function () {
+    // If there is no container element, we should exit early, because that
+    // means they are using the render prop API, and that is implemented in a
+    // different way. If there is no target element yet or tooltipId, we also
+    // shouldn't do anything because there is nothing to operate on or with.
+    if (!containerRef.current || !targetRef.current || !tooltipId) {
+      return;
+    }
+
+    // Necessary for TS to know that it has the attribute methods
+    var target = targetRef.current;
+    if (shouldRenderTooltipContainer) {
+      target.setAttribute('aria-describedby', tooltipId);
+    } else {
+      target.removeAttribute('aria-describedby');
+    }
+  }, [shouldRenderTooltipContainer, tooltipId]);
+  return jsx(React.Fragment, null, typeof children === 'function' ?
+  // once we deprecate the wrapped approach, we can put the aria
+  // attribute back into the tooltipTriggerProps and make it required
+  // instead of optional in `types`
+  children(_objectSpread(_objectSpread({}, tooltipTriggerProps), {}, {
+    'aria-describedby': tooltipId
+  })) : jsx(CastTargetContainer, _extends({}, tooltipTriggerProps, {
     role: "presentation"
   }), children), shouldRenderTooltipContainer ? jsx(Portal, {
     zIndex: tooltipZIndex

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "17.6.8",
+	"version": "17.7.0",
 	"sideEffects": false
 }

package/dist/types/types.d.ts

@@ -13,7 +13,7 @@ export interface TriggerProps {
     onFocus: (event: React.FocusEvent<HTMLElement>) => void;
     onBlur: (event: React.FocusEvent<HTMLElement>) => void;
     ref: (node: HTMLElement | null) => void;
-    'aria-describedby': string | undefined;
+    'aria-describedby'?: string | undefined;
 }
 export interface TooltipProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "17.6.8",
+  "version": "17.7.0",
   "description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,6 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -32,13 +31,13 @@
     "./utilities": "./src/utilities.ts"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.2.0",
+    "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/motion": "^1.3.0",
     "@atlaskit/popper": "^5.4.0",
     "@atlaskit/portal": "^4.1.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.0.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -80,8 +79,10 @@
       "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "design-tokens": "spacing",
-      "theming": "tokens",
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "deprecation": "no-deprecated-imports",
       "styling": [
         "emotion",

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -123,6 +124,8 @@ export interface TooltipProps {
 
 // @public (undocumented)
 interface TriggerProps {
+  // (undocumented)
+  'aria-describedby'?: string | undefined;
   // (undocumented)
   onBlur: (event: React.FocusEvent<HTMLElement>) => void;
   // (undocumented)
@@ -132,6 +135,8 @@ interface TriggerProps {
   // (undocumented)
   onMouseDown: (event: React.MouseEvent<HTMLElement>) => void;
   // (undocumented)
+  onMouseMove: ((event: React.MouseEvent<HTMLElement>) => void) | undefined;
+  // (undocumented)
   onMouseOut: (event: React.MouseEvent<HTMLElement>) => void;
   // (undocumented)
   onMouseOver: (event: React.MouseEvent<HTMLElement>) => void;
@@ -143,3 +148,16 @@ interface TriggerProps {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0",
+  "react-dom": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->