@atlaskit/tooltip 18.1.3 → 18.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tooltip
 
+## 18.2.1
+
+### Patch Changes
+
+- [#88717](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88717) [`d92770eae702`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d92770eae702) - Adding internal eslint opt outs for a new rule `@atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop`.
+
+## 18.2.0
+
+### Minor Changes
+
+- [#87879](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87879) [`40c7b496eacd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/40c7b496eacd) - [ux] Internal changes to typography, small visual change to tooltip text line height.
+
 ## 18.1.3
 
 ### Patch Changes

package/dist/cjs/Tooltip.js

@@ -32,7 +32,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.1.3"
+  packageVersion: "18.2.1"
 };
 
 // Inverts motion direction

package/dist/cjs/TooltipContainer.js

@@ -18,8 +18,7 @@ var baseStyles = (0, _react2.css)({
   insetBlockStart: "var(--ds-space-0, 0px)",
   insetInlineStart: "var(--ds-space-0, 0px)",
   borderRadius: "var(--ds-border-radius, 3px)",
-  fontSize: "var(--ds-font-size-075, 12px)",
-  lineHeight: 1.3,
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   overflowWrap: 'break-word',
   wordWrap: 'break-word',
   backgroundColor: "var(--ds-background-neutral-bold, ".concat(_colors.N800, ")"),

package/dist/cjs/internal/drag-manager.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.register = register;
 var _bindEventListener = require("bind-event-listener");
+/* eslint-disable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
 /**
  * We are listening directly to drag events instead of using a monitor from
  * `@atlaskit/pragmatic-drag-and-drop` to avoid the bundle size cost, as it

package/dist/es2019/Tooltip.js

@@ -18,7 +18,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.1.3"
+  packageVersion: "18.2.1"
 };
 
 // Inverts motion direction

package/dist/es2019/TooltipContainer.js

@@ -10,8 +10,7 @@ const baseStyles = css({
   insetBlockStart: "var(--ds-space-0, 0px)",
   insetInlineStart: "var(--ds-space-0, 0px)",
   borderRadius: "var(--ds-border-radius, 3px)",
-  fontSize: "var(--ds-font-size-075, 12px)",
-  lineHeight: 1.3,
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   overflowWrap: 'break-word',
   wordWrap: 'break-word',
   backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,

package/dist/es2019/internal/drag-manager.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
 /**
  * We are listening directly to drag events instead of using a monitor from
  * `@atlaskit/pragmatic-drag-and-drop` to avoid the bundle size cost, as it

package/dist/esm/Tooltip.js

@@ -22,7 +22,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "18.1.3"
+  packageVersion: "18.2.1"
 };
 
 // Inverts motion direction

package/dist/esm/TooltipContainer.js

@@ -10,8 +10,7 @@ var baseStyles = css({
   insetBlockStart: "var(--ds-space-0, 0px)",
   insetInlineStart: "var(--ds-space-0, 0px)",
   borderRadius: "var(--ds-border-radius, 3px)",
-  fontSize: "var(--ds-font-size-075, 12px)",
-  lineHeight: 1.3,
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   overflowWrap: 'break-word',
   wordWrap: 'break-word',
   backgroundColor: "var(--ds-background-neutral-bold, ".concat(N800, ")"),

package/dist/esm/internal/drag-manager.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop */
 /**
  * We are listening directly to drag events instead of using a monitor from
  * `@atlaskit/pragmatic-drag-and-drop` to avoid the bundle size cost, as it

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from './Tooltip';
 export { default as TooltipPrimitive } from './TooltipPrimitive';
 export type { TooltipPrimitiveProps } from './TooltipPrimitive';
-export type { PositionType, TooltipProps } from './types';
+export type { PositionType, TooltipProps, TriggerProps } from './types';

package/dist/types/types.d.ts

@@ -20,7 +20,6 @@ export interface TooltipProps {
      * The content of the tooltip. It can be either a:
      * 1. `ReactNode`
      * 2. Function which returns a `ReactNode`
-  
      * The benefit of the second approach is that it allows you to consume the `update` render prop.
      * This `update` function can be called to manually recalculate the position of the tooltip.
      */
@@ -36,8 +35,7 @@ export interface TooltipProps {
      */
     delay?: number;
     /**
-     * Hide the tooltip when the click event is triggered. This should be
-     * used when tooltip should be hidden if `onClick` react synthetic event
+     * Hide the tooltip when the click event is triggered. Use this when the tooltip should be hidden if `onClick` react synthetic event
      * is triggered, which happens after `onMouseDown` event.
      */
     hideTooltipOnClick?: boolean;
@@ -49,36 +47,36 @@ export interface TooltipProps {
     hideTooltipOnMouseDown?: boolean;
     /**
      * Where the tooltip should appear relative to the mouse pointer.
-     * Only used when the `position` prop is set to `"mouse"`.
-     * When interacting with the target element using the keyboard will use this position against the target element instead.
+     * Only use this when the `position` prop is set to `"mouse"`.
+     * When interacting with the target element using a keyboard, it will use this position against the target element instead.
      */
     mousePosition?: PositionTypeBase;
     /**
-     * Function to be called when the tooltip will be shown. It is called when the
+     * Function to be called when the tooltip will be shown. It's called when the
      * tooltip begins to animate in.
      */
     onShow?: (analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Function to be called when the tooltip will be hidden. It is called after the
+     * Function to be called when the tooltip will be hidden. It's called after the
      * delay, when the tooltip begins to animate out.
      */
     onHide?: (analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Where the tooltip should appear relative to its target.
-     * If set to `"mouse"` the tooltip will display next to the mouse pointer instead.
+     * Where the tooltip should appear relative to its' target.
+     * If set to `"mouse"`, the tooltip will display next to the mouse pointer instead.
      * Make sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.
      */
     position?: PositionType;
     /**
      * Replace the wrapping element. This accepts the name of a html tag which will
      * be used to wrap the element.
-     * If you provide a component it needs to support a ref prop which is used by popper for positioning.
+     * If you provide a component, it needs to support a ref prop which is used by popper for positioning.
      */
     tag?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement> & {
         ref: React.Ref<HTMLElement>;
     }>;
     /**
-     * Used to show only one line of text, and truncate when too long. Avoid this wherever possible, as any important information that is truncated will be visually hidden to the person reading the tooltip.
+     * Use this to show only one line of text, and truncate the text when it's too long. We no longer support truncating text in the tooltip as it's inaccessible, and this will be removed in a future release.
      */
     truncate?: boolean;
     /**
@@ -96,7 +94,7 @@ export interface TooltipProps {
     /** Analytics context metadata. */
     analyticsContext?: Record<string, any>;
     /**
-     * Used to define the strategy of popper.
+     * Use this to define the strategy of popper.
      */
     strategy?: 'absolute' | 'fixed' | undefined;
 }

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from './Tooltip';
 export { default as TooltipPrimitive } from './TooltipPrimitive';
 export type { TooltipPrimitiveProps } from './TooltipPrimitive';
-export type { PositionType, TooltipProps } from './types';
+export type { PositionType, TooltipProps, TriggerProps } from './types';

package/dist/types-ts4.5/types.d.ts

@@ -20,7 +20,6 @@ export interface TooltipProps {
      * The content of the tooltip. It can be either a:
      * 1. `ReactNode`
      * 2. Function which returns a `ReactNode`
-  
      * The benefit of the second approach is that it allows you to consume the `update` render prop.
      * This `update` function can be called to manually recalculate the position of the tooltip.
      */
@@ -36,8 +35,7 @@ export interface TooltipProps {
      */
     delay?: number;
     /**
-     * Hide the tooltip when the click event is triggered. This should be
-     * used when tooltip should be hidden if `onClick` react synthetic event
+     * Hide the tooltip when the click event is triggered. Use this when the tooltip should be hidden if `onClick` react synthetic event
      * is triggered, which happens after `onMouseDown` event.
      */
     hideTooltipOnClick?: boolean;
@@ -49,36 +47,36 @@ export interface TooltipProps {
     hideTooltipOnMouseDown?: boolean;
     /**
      * Where the tooltip should appear relative to the mouse pointer.
-     * Only used when the `position` prop is set to `"mouse"`.
-     * When interacting with the target element using the keyboard will use this position against the target element instead.
+     * Only use this when the `position` prop is set to `"mouse"`.
+     * When interacting with the target element using a keyboard, it will use this position against the target element instead.
      */
     mousePosition?: PositionTypeBase;
     /**
-     * Function to be called when the tooltip will be shown. It is called when the
+     * Function to be called when the tooltip will be shown. It's called when the
      * tooltip begins to animate in.
      */
     onShow?: (analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Function to be called when the tooltip will be hidden. It is called after the
+     * Function to be called when the tooltip will be hidden. It's called after the
      * delay, when the tooltip begins to animate out.
      */
     onHide?: (analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Where the tooltip should appear relative to its target.
-     * If set to `"mouse"` the tooltip will display next to the mouse pointer instead.
+     * Where the tooltip should appear relative to its' target.
+     * If set to `"mouse"`, the tooltip will display next to the mouse pointer instead.
      * Make sure to utilize the `mousePosition` if you want to customize where the tooltip will show in relation to the mouse.
      */
     position?: PositionType;
     /**
      * Replace the wrapping element. This accepts the name of a html tag which will
      * be used to wrap the element.
-     * If you provide a component it needs to support a ref prop which is used by popper for positioning.
+     * If you provide a component, it needs to support a ref prop which is used by popper for positioning.
      */
     tag?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement> & {
         ref: React.Ref<HTMLElement>;
     }>;
     /**
-     * Used to show only one line of text, and truncate when too long. Avoid this wherever possible, as any important information that is truncated will be visually hidden to the person reading the tooltip.
+     * Use this to show only one line of text, and truncate the text when it's too long. We no longer support truncating text in the tooltip as it's inaccessible, and this will be removed in a future release.
      */
     truncate?: boolean;
     /**
@@ -96,7 +94,7 @@ export interface TooltipProps {
     /** Analytics context metadata. */
     analyticsContext?: Record<string, any>;
     /**
-     * Used to define the strategy of popper.
+     * Use this to define the strategy of popper.
      */
     strategy?: 'absolute' | 'fixed' | undefined;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tooltip",
-  "version": "18.1.3",
+  "version": "18.2.1",
   "description": "A tooltip is a floating, non-actionable label used to explain a user interface element or feature.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -47,8 +47,8 @@
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.11.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",