@atlaskit/tooltip 20.8.2 → 20.10.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/tooltip
 
+## 20.10.0
+
+### Minor Changes
+
+- [`e273fa0610764`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e273fa0610764) -
+  The keyboard shortcut `font` has been updated to use regular fonts instead of monospace fonts, for
+  improved readability and distinction between characters such as the letter O and number 0. It will
+  now use the `font.body.small` font token.
+
+  This change is behind the feature gate `platform-tooltip-shortcuts-regular-font`.
+
+## 20.9.0
+
+### Minor Changes
+
+- [`f4cdda6ef6ca0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f4cdda6ef6ca0) -
+  Removed FG that improves tooltip visibility behavior on focus
+
 ## 20.8.2
 
 ### Patch Changes

package/dist/cjs/tooltip-shortcut.compiled.css

@@ -1,3 +1,4 @@
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c81u0j{font:var(--ds-font-code,normal 400 .875em/1 ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._zulpv77o{gap:var(--ds-space-025,2px)}

package/dist/cjs/tooltip-shortcut.js

@@ -9,10 +9,12 @@ exports.TooltipShortcut = void 0;
 require("./tooltip-shortcut.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   shortcutSegmentsContainer: "_zulpv77o _1e0c1txw _1q511b66 _85i5v77o",
-  shortcutSegment: "_11c81u0j _2rkolb4i _1dqonqa1 _189ee4h9 _1h6d1ihb _1e0c1txw _4cvr1h6o _4t3i1k92 _vchhusvi _1q51v77o _85i5v77o _bozg12x7 _y4ti12x7 _16qsn7od _1254n7od _cgnln7od _syazn7od _ahbqn7od _12l2n7od _1pfhn7od _6rthn7od _1ul9n7od _w19jn7od _bfhk261p"
+  shortcutSegment: "_11c81u0j _2rkolb4i _1dqonqa1 _189ee4h9 _1h6d1ihb _1e0c1txw _4cvr1h6o _4t3i1k92 _vchhusvi _1q51v77o _85i5v77o _bozg12x7 _y4ti12x7 _16qsn7od _1254n7od _cgnln7od _syazn7od _ahbqn7od _12l2n7od _1pfhn7od _6rthn7od _1ul9n7od _w19jn7od _bfhk261p",
+  regularFont: "_11c81o8v"
 };
 /**
  * __Tooltip shortcut__
@@ -27,7 +29,7 @@ var TooltipShortcut = exports.TooltipShortcut = function TooltipShortcut(_ref) {
   }, shortcut.map(function (segment, index) {
     return /*#__PURE__*/React.createElement("kbd", {
       key: "".concat(segment, "-").concat(index),
-      className: (0, _runtime.ax)([styles.shortcutSegment])
+      className: (0, _runtime.ax)([styles.shortcutSegment, (0, _platformFeatureFlags.fg)('platform-tooltip-shortcuts-regular-font') && styles.regularFont])
     }, segment);
   }));
 };

package/dist/cjs/tooltip.js

@@ -17,7 +17,6 @@ var _useCloseOnEscapePress = _interopRequireDefault(require("@atlaskit/ds-lib/us
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
 var _motion = require("@atlaskit/motion");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
@@ -33,7 +32,7 @@ var tooltipZIndex = _constants.layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "0.0.0-development"
+  packageVersion: "20.9.0"
 };
 
 // Inverts motion direction
@@ -379,7 +378,7 @@ function Tooltip(_ref) {
     // Prevents tooltips from showing when focus is not visible,
     // i.e., when focus is moved onto tooltip trigger inside a popup on open
     try {
-      if (!e.target.matches(':focus-visible') && (0, _platformFeatureFlags.fg)('platform-tooltip-focus-visible-new')) {
+      if (!e.target.matches(':focus-visible')) {
         return;
       }
     } catch (_) {

package/dist/es2019/tooltip-shortcut.compiled.css

@@ -1,3 +1,4 @@
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c81u0j{font:var(--ds-font-code,normal 400 .875em/1 ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._zulpv77o{gap:var(--ds-space-025,2px)}

package/dist/es2019/tooltip-shortcut.js

@@ -2,9 +2,11 @@
 import "./tooltip-shortcut.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 const styles = {
   shortcutSegmentsContainer: "_zulpv77o _1e0c1txw _1q511b66 _85i5v77o",
-  shortcutSegment: "_11c81u0j _2rkolb4i _1dqonqa1 _189ee4h9 _1h6d1ihb _1e0c1txw _4cvr1h6o _4t3i1k92 _vchhusvi _1q51v77o _85i5v77o _bozg12x7 _y4ti12x7 _16qsn7od _1254n7od _cgnln7od _syazn7od _ahbqn7od _12l2n7od _1pfhn7od _6rthn7od _1ul9n7od _w19jn7od _bfhk261p"
+  shortcutSegment: "_11c81u0j _2rkolb4i _1dqonqa1 _189ee4h9 _1h6d1ihb _1e0c1txw _4cvr1h6o _4t3i1k92 _vchhusvi _1q51v77o _85i5v77o _bozg12x7 _y4ti12x7 _16qsn7od _1254n7od _cgnln7od _syazn7od _ahbqn7od _12l2n7od _1pfhn7od _6rthn7od _1ul9n7od _w19jn7od _bfhk261p",
+  regularFont: "_11c81o8v"
 };
 /**
  * __Tooltip shortcut__
@@ -19,6 +21,6 @@ export const TooltipShortcut = ({
     className: ax([styles.shortcutSegmentsContainer])
   }, shortcut.map((segment, index) => /*#__PURE__*/React.createElement("kbd", {
     key: `${segment}-${index}`,
-    className: ax([styles.shortcutSegment])
+    className: ax([styles.shortcutSegment, fg('platform-tooltip-shortcuts-regular-font') && styles.regularFont])
   }, segment)));
 };

package/dist/es2019/tooltip.js

@@ -7,7 +7,6 @@ import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -20,7 +19,7 @@ const tooltipZIndex = layers.tooltip();
 const analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "0.0.0-development"
+  packageVersion: "20.9.0"
 };
 
 // Inverts motion direction
@@ -355,7 +354,7 @@ function Tooltip({
     // Prevents tooltips from showing when focus is not visible,
     // i.e., when focus is moved onto tooltip trigger inside a popup on open
     try {
-      if (!e.target.matches(':focus-visible') && fg('platform-tooltip-focus-visible-new')) {
+      if (!e.target.matches(':focus-visible')) {
         return;
       }
     } catch (_) {

package/dist/esm/tooltip-shortcut.compiled.css

@@ -1,3 +1,4 @@
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._11c81u0j{font:var(--ds-font-code,normal 400 .875em/1 ui-monospace,Menlo,"Segoe UI Mono","Ubuntu Mono",monospace)}
 ._2rkolb4i{border-radius:var(--ds-radius-xsmall,2px)}
 ._zulpv77o{gap:var(--ds-space-025,2px)}

package/dist/esm/tooltip-shortcut.js

@@ -2,9 +2,11 @@
 import "./tooltip-shortcut.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 var styles = {
   shortcutSegmentsContainer: "_zulpv77o _1e0c1txw _1q511b66 _85i5v77o",
-  shortcutSegment: "_11c81u0j _2rkolb4i _1dqonqa1 _189ee4h9 _1h6d1ihb _1e0c1txw _4cvr1h6o _4t3i1k92 _vchhusvi _1q51v77o _85i5v77o _bozg12x7 _y4ti12x7 _16qsn7od _1254n7od _cgnln7od _syazn7od _ahbqn7od _12l2n7od _1pfhn7od _6rthn7od _1ul9n7od _w19jn7od _bfhk261p"
+  shortcutSegment: "_11c81u0j _2rkolb4i _1dqonqa1 _189ee4h9 _1h6d1ihb _1e0c1txw _4cvr1h6o _4t3i1k92 _vchhusvi _1q51v77o _85i5v77o _bozg12x7 _y4ti12x7 _16qsn7od _1254n7od _cgnln7od _syazn7od _ahbqn7od _12l2n7od _1pfhn7od _6rthn7od _1ul9n7od _w19jn7od _bfhk261p",
+  regularFont: "_11c81o8v"
 };
 /**
  * __Tooltip shortcut__
@@ -19,7 +21,7 @@ export var TooltipShortcut = function TooltipShortcut(_ref) {
   }, shortcut.map(function (segment, index) {
     return /*#__PURE__*/React.createElement("kbd", {
       key: "".concat(segment, "-").concat(index),
-      className: ax([styles.shortcutSegment])
+      className: ax([styles.shortcutSegment, fg('platform-tooltip-shortcuts-regular-font') && styles.regularFont])
     }, segment);
   }));
 };

package/dist/esm/tooltip.js

@@ -11,7 +11,6 @@ import useCloseOnEscapePress from '@atlaskit/ds-lib/use-close-on-escape-press';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
@@ -24,7 +23,7 @@ var tooltipZIndex = layers.tooltip();
 var analyticsAttributes = {
   componentName: 'tooltip',
   packageName: "@atlaskit/tooltip",
-  packageVersion: "0.0.0-development"
+  packageVersion: "20.9.0"
 };
 
 // Inverts motion direction
@@ -370,7 +369,7 @@ function Tooltip(_ref) {
     // Prevents tooltips from showing when focus is not visible,
     // i.e., when focus is moved onto tooltip trigger inside a popup on open
     try {
-      if (!e.target.matches(':focus-visible') && fg('platform-tooltip-focus-visible-new')) {
+      if (!e.target.matches(':focus-visible')) {
         return;
       }
     } catch (_) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/tooltip",
-	"version": "20.8.2",
+	"version": "20.10.0",
 	"description": "A tooltip describes an interactive element on mouse hover or keyboard focus.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/ds-lib": "^5.2.0",
-		"@atlaskit/layering": "^3.3.0",
+		"@atlaskit/layering": "^3.4.0",
 		"@atlaskit/motion": "^5.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
@@ -93,15 +93,15 @@
 	},
 	"homepage": "https://atlassian.design/components/tooltip/",
 	"platform-feature-flags": {
-		"platform-tooltip-focus-visible-new": {
-			"type": "boolean"
-		},
 		"platform-component-visual-refresh": {
 			"type": "boolean",
 			"referenceOnly": true
 		},
 		"should-render-to-parent-should-be-true-design-syst": {
 			"type": "boolean"
+		},
+		"platform-tooltip-shortcuts-regular-font": {
+			"type": "boolean"
 		}
 	}
 }