@atlaskit/smart-card 19.1.3 → 19.1.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 19.1.4
+
+### Patch Changes
+
+- [`cd2e7183aa5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd2e7183aa5) - Flexible UI: Fix action tooltips not displayed on hover
+
 ## 19.1.3
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -68,6 +68,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Updated on {context}',
     description: 'Indicated when entity was modified (absolute form)'
   },
+  more_actions: {
+    id: 'fabric.linking.more_actions',
+    defaultMessage: 'More actions',
+    description: 'Allows the users to see more link actions'
+  },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',
     defaultMessage: 'Blocker',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.1.3",
+	"version": "19.1.4",
 	"sideEffects": false
 }

package/dist/cjs/view/FlexibleCard/components/actions/action/index.js

@@ -126,7 +126,8 @@ var Action = function Action(_ref2) {
     }, content);
   } else {
     return (0, _core.jsx)(_tooltip.default, {
-      content: tooltipMessage
+      content: tooltipMessage,
+      testId: "".concat(testId, "-tooltip")
     }, (0, _core.jsx)("div", {
       css: [getButtonStyle(size, iconOnly), overrideCss],
       "data-testid": "".concat(testId, "-button-wrapper")

package/dist/cjs/view/FlexibleCard/components/actions/utils.js

@@ -50,7 +50,7 @@ var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actio
     icon: /*#__PURE__*/_react.default.createElement(_cross.default, {
       label: "Delete"
     }),
-    toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
+    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
   }
 }), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.EditAction, {
   component: _action.default,
@@ -60,7 +60,7 @@ var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actio
     icon: /*#__PURE__*/_react.default.createElement(_edit.default, {
       label: "Edit"
     }),
-    toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit)
+    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit)
   }
 }), _actionMappings);
 

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -13,10 +13,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _core = require("@emotion/core");
 
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
 var _utils = require("../utils");
 
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
@@ -31,6 +35,8 @@ var _action = require("../../actions/action");
 
 var _token = require("../../../../../utils/token");
 
+var _messages = require("../../../../../messages");
+
 var _excluded = ["triggerRef"];
 
 var _templateObject;
@@ -52,7 +58,8 @@ var ActionGroup = function ActionGroup(_ref) {
       appearance = _ref.appearance,
       _ref$visibleButtonsNu = _ref.visibleButtonsNum,
       visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
-      onDropdownOpenChange = _ref.onDropdownOpenChange;
+      onDropdownOpenChange = _ref.onDropdownOpenChange,
+      testId = _ref.testId;
   var isMoreThenTwoItems = items.length > visibleButtonsNum;
   var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
   var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
@@ -67,14 +74,18 @@ var ActionGroup = function ActionGroup(_ref) {
     trigger: function trigger(_ref3) {
       var triggerRef = _ref3.triggerRef,
           props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-      return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
+      return (0, _core.jsx)(_tooltip.default, {
+        content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions),
+        testId: "action-group-more-button-tooltip",
+        tag: "span"
+      }, (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
         spacing: _action.sizeToSpacing[size],
         testId: "action-group-more-button",
         iconBefore: (0, _core.jsx)(_more.default, {
           label: "more"
         }),
         ref: triggerRef
-      }));
+      })));
     }
   }, (0, _utils.renderActionItems)(restActions, size, appearance, true)) : null));
 };

package/dist/es2019/messages.js

@@ -60,6 +60,11 @@ export const messages = defineMessages({
     defaultMessage: 'Updated on {context}',
     description: 'Indicated when entity was modified (absolute form)'
   },
+  more_actions: {
+    id: 'fabric.linking.more_actions',
+    defaultMessage: 'More actions',
+    description: 'Allows the users to see more link actions'
+  },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',
     defaultMessage: 'Blocker',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.1.3",
+	"version": "19.1.4",
 	"sideEffects": false
 }

package/dist/es2019/view/FlexibleCard/components/actions/action/index.js

@@ -129,7 +129,8 @@ const Action = ({
     }, content);
   } else {
     return jsx(Tooltip, {
-      content: tooltipMessage
+      content: tooltipMessage,
+      testId: `${testId}-tooltip`
     }, jsx("div", {
       css: [getButtonStyle(size, iconOnly), overrideCss],
       "data-testid": `${testId}-button-wrapper`

package/dist/es2019/view/FlexibleCard/components/actions/utils.js

@@ -20,7 +20,7 @@ const actionMappings = {
       icon: /*#__PURE__*/React.createElement(CrossIcon, {
         label: "Delete"
       }),
-      toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
+      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
     }
   },
   [ActionName.EditAction]: {
@@ -31,7 +31,7 @@ const actionMappings = {
       icon: /*#__PURE__*/React.createElement(EditIcon, {
         label: "Edit"
       }),
-      toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
+      tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
     }
   }
 };

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
+import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
+import Tooltip from '@atlaskit/tooltip';
 import { renderActionItems } from '../utils';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { SmartLinkSize } from '../../../../../constants';
@@ -10,6 +12,7 @@ import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToSpacing } from '../../actions/action';
 import { tokens } from '../../../../../utils/token';
+import { messages } from '../../../../../messages';
 const styles = css`
   display: inline-flex;
   line-height: 1rem;
@@ -39,7 +42,8 @@ const ActionGroup = ({
   size = SmartLinkSize.Medium,
   appearance,
   visibleButtonsNum = 2,
-  onDropdownOpenChange
+  onDropdownOpenChange,
+  testId
 }) => {
   const isMoreThenTwoItems = items.length > visibleButtonsNum;
   const firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
@@ -54,14 +58,18 @@ const ActionGroup = ({
     trigger: ({
       triggerRef,
       ...props
-    }) => jsx(Button, _extends({}, props, {
+    }) => jsx(Tooltip, {
+      content: jsx(FormattedMessage, messages.more_actions),
+      testId: "action-group-more-button-tooltip",
+      tag: "span"
+    }, jsx(Button, _extends({}, props, {
       spacing: sizeToSpacing[size],
       testId: "action-group-more-button",
       iconBefore: jsx(MoreIcon, {
         label: "more"
       }),
       ref: triggerRef
-    }))
+    })))
   }, renderActionItems(restActions, size, appearance, true)) : null));
 };
 

package/dist/esm/messages.js

@@ -60,6 +60,11 @@ export var messages = defineMessages({
     defaultMessage: 'Updated on {context}',
     description: 'Indicated when entity was modified (absolute form)'
   },
+  more_actions: {
+    id: 'fabric.linking.more_actions',
+    defaultMessage: 'More actions',
+    description: 'Allows the users to see more link actions'
+  },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',
     defaultMessage: 'Blocker',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.1.3",
+	"version": "19.1.4",
 	"sideEffects": false
 }

package/dist/esm/view/FlexibleCard/components/actions/action/index.js

@@ -107,7 +107,8 @@ var Action = function Action(_ref2) {
     }, content);
   } else {
     return jsx(Tooltip, {
-      content: tooltipMessage
+      content: tooltipMessage,
+      testId: "".concat(testId, "-tooltip")
     }, jsx("div", {
       css: [getButtonStyle(size, iconOnly), overrideCss],
       "data-testid": "".concat(testId, "-button-wrapper")

package/dist/esm/view/FlexibleCard/components/actions/utils.js

@@ -26,7 +26,7 @@ var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, Act
     icon: /*#__PURE__*/React.createElement(CrossIcon, {
       label: "Delete"
     }),
-    toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
   }
 }), _defineProperty(_actionMappings, ActionName.EditAction, {
   component: Action,
@@ -36,7 +36,7 @@ var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, Act
     icon: /*#__PURE__*/React.createElement(EditIcon, {
       label: "Edit"
     }),
-    toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
+    tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
   }
 }), _actionMappings);
 

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -6,8 +6,10 @@ var _excluded = ["triggerRef"];
 var _templateObject;
 
 /** @jsx jsx */
+import { FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
+import Tooltip from '@atlaskit/tooltip';
 import { renderActionItems } from '../utils';
 import DropdownMenu from '@atlaskit/dropdown-menu';
 import { SmartLinkSize } from '../../../../../constants';
@@ -15,6 +17,7 @@ import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToSpacing } from '../../actions/action';
 import { tokens } from '../../../../../utils/token';
+import { messages } from '../../../../../messages';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), tokens.focus);
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
@@ -32,7 +35,8 @@ var ActionGroup = function ActionGroup(_ref) {
       appearance = _ref.appearance,
       _ref$visibleButtonsNu = _ref.visibleButtonsNum,
       visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
-      onDropdownOpenChange = _ref.onDropdownOpenChange;
+      onDropdownOpenChange = _ref.onDropdownOpenChange,
+      testId = _ref.testId;
   var isMoreThenTwoItems = items.length > visibleButtonsNum;
   var firstActions = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
   var restActions = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
@@ -48,14 +52,18 @@ var ActionGroup = function ActionGroup(_ref) {
       var triggerRef = _ref3.triggerRef,
           props = _objectWithoutProperties(_ref3, _excluded);
 
-      return jsx(Button, _extends({}, props, {
+      return jsx(Tooltip, {
+        content: jsx(FormattedMessage, messages.more_actions),
+        testId: "action-group-more-button-tooltip",
+        tag: "span"
+      }, jsx(Button, _extends({}, props, {
         spacing: sizeToSpacing[size],
         testId: "action-group-more-button",
         iconBefore: jsx(MoreIcon, {
           label: "more"
         }),
         ref: triggerRef
-      }));
+      })));
     }
   }, renderActionItems(restActions, size, appearance, true)) : null));
 };

package/dist/types/messages.d.ts

@@ -1,5 +1,5 @@
 import { MessageDescriptor } from 'react-intl-next';
-export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
+export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
 declare type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "19.1.3",
+  "version": "19.1.4",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"