@atlaskit/smart-card 21.0.2 → 21.0.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 21.0.3
+
+### Patch Changes
+
+- [`a657fbfe5e1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a657fbfe5e1) - [ux] Flexible UI: Fix action menu and its tooltip not disappear after an action is clicked
+
 ## 21.0.2
 
 ### Patch Changes

package/dist/cjs/version.json

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

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _constants = require("../../../../../../constants");
+
+var _utils = require("../../../utils");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var getButtonStyle = function getButtonStyle(size, iconOnly) {
+  switch (size) {
+    case _constants.SmartLinkSize.Large:
+      return iconOnly ? (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n            button,\n            button:hover,\n            button:focus,\n            button:active {\n              padding: 0;\n              > span {\n                margin: 0;\n              }\n            }\n          "]))) : '';
+
+    case _constants.SmartLinkSize.Small:
+      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        line-height: 1rem;\n        button,\n        button:hover,\n        button:focus,\n        button:active {\n          line-height: 1rem;\n          ", "\n        }\n      "])), iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          ");
+
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Medium:
+    default:
+      return '';
+  }
+};
+
+var ActionButton = function ActionButton(_ref) {
+  var appearance = _ref.appearance,
+      content = _ref.content,
+      iconAfter = _ref.iconAfter,
+      iconBefore = _ref.iconBefore,
+      onClick = _ref.onClick,
+      overrideCss = _ref.overrideCss,
+      size = _ref.size,
+      testId = _ref.testId,
+      tooltipMessage = _ref.tooltipMessage;
+  var iconOnly = !content;
+  var onButtonClick = (0, _react.useCallback)(function (handler) {
+    return function (e) {
+      e.preventDefault();
+      handler();
+    };
+  }, []);
+  var onContainerClick = (0, _react.useCallback)(function (e) {
+    // Stop button on click event from propagate into parent container.
+    e.stopPropagation();
+  }, []);
+  return (0, _core.jsx)("div", {
+    css: [getButtonStyle(size, iconOnly), overrideCss],
+    "data-testid": "".concat(testId, "-button-wrapper"),
+    onClick: onContainerClick
+  }, (0, _core.jsx)(_tooltip.default, {
+    content: tooltipMessage,
+    hideTooltipOnClick: true,
+    testId: "".concat(testId, "-tooltip")
+  }, (0, _core.jsx)(_customThemeButton.default, {
+    appearance: appearance,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    onClick: onButtonClick(onClick),
+    spacing: _utils.sizeToButtonSpacing[size],
+    testId: testId
+  }, content)));
+};
+
+var _default = ActionButton;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/actions/action/action-button/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _dropdownMenu = require("@atlaskit/dropdown-menu");
+
+var _utils = require("../../../../../../utils");
+
+var ActionDropdownItem = function ActionDropdownItem(_ref) {
+  var content = _ref.content,
+      iconAfter = _ref.iconAfter,
+      iconBefore = _ref.iconBefore,
+      onClick = _ref.onClick,
+      testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
+    elemAfter: iconAfter,
+    elemBefore: iconBefore,
+    onClick: (0, _utils.handleOnClick)(onClick),
+    testId: testId
+  }, content);
+};
+
+var _default = ActionDropdownItem;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/actions/action/action-dropdown-item/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _constants = require("../../../../../../constants");
+
+var _token = require("../../../../../../utils/token");
+
+var _utils = require("../../../utils");
+
+var _templateObject;
+
+var getIconWidth = function getIconWidth(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+    case _constants.SmartLinkSize.Large:
+      return '1.5rem';
+
+    case _constants.SmartLinkSize.Medium:
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '1rem';
+  }
+};
+
+var getIconStyles = function getIconStyles(size) {
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), _token.tokens.actionIcon, (0, _utils.getIconSizeStyles)(getIconWidth(size)));
+};
+
+var ActionIcon = function ActionIcon(_ref) {
+  var size = _ref.size,
+      testId = _ref.testId,
+      icon = _ref.icon;
+  return (0, _core.jsx)("span", {
+    css: getIconStyles(size),
+    "data-testid": "".concat(testId, "-icon")
+  }, icon);
+};
+
+var _default = ActionIcon;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/actions/action/action-icon/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -5,75 +5,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeToSpacing = exports.default = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@emotion/core");
 
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-
 var _constants = require("../../../../../constants");
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
-var _dropdownMenu = require("@atlaskit/dropdown-menu");
-
-var _utils = require("../../utils");
-
-var _token = require("../../../../../utils/token");
-
-var _utils2 = require("../../../../../utils");
+var _actionButton = _interopRequireDefault(require("./action-button"));
 
-var _templateObject, _templateObject2, _templateObject3, _sizeToSpacing;
-
-var getIconWidth = function getIconWidth(size) {
-  switch (size) {
-    case _constants.SmartLinkSize.XLarge:
-    case _constants.SmartLinkSize.Large:
-      return '1.5rem';
-
-    case _constants.SmartLinkSize.Medium:
-    case _constants.SmartLinkSize.Small:
-    default:
-      return '1rem';
-  }
-};
-
-var getIconStyles = function getIconStyles(size) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), _token.tokens.actionIcon, (0, _utils.getIconSizeStyles)(getIconWidth(size)));
-};
+var _actionDropdownItem = _interopRequireDefault(require("./action-dropdown-item"));
 
-var getButtonStyle = function getButtonStyle(size, iconOnly) {
-  switch (size) {
-    case _constants.SmartLinkSize.Large:
-      return iconOnly ? (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n            button,\n            button:hover,\n            button:focus,\n            button:active {\n              padding: 0;\n              > span {\n                margin: 0;\n              }\n            }\n          "]))) : '';
+var _actionIcon = _interopRequireDefault(require("./action-icon"));
 
-    case _constants.SmartLinkSize.Small:
-      return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.75rem;\n        font-weight: 500;\n        line-height: 1rem;\n        button,\n        button:hover,\n        button:focus,\n        button:active {\n          line-height: 1rem;\n          ", "\n        }\n      "])), iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          ");
+/** @jsx jsx */
 
-    case _constants.SmartLinkSize.XLarge:
-    case _constants.SmartLinkSize.Medium:
-    default:
-      return '';
-  }
-};
-
-var ActionIcon = function ActionIcon(_ref) {
-  var size = _ref.size,
-      testId = _ref.testId,
-      icon = _ref.icon;
-  return (0, _core.jsx)("span", {
-    css: getIconStyles(size),
-    "data-testid": "".concat(testId, "-icon")
-  }, icon);
-};
-
-var sizeToSpacing = (_sizeToSpacing = {}, (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Small, 'none'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Medium, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.Large, 'compact'), (0, _defineProperty2.default)(_sizeToSpacing, _constants.SmartLinkSize.XLarge, 'default'), _sizeToSpacing);
 /**
  * A base action that can be triggered with an on click.
  * @internal
@@ -82,63 +29,54 @@ var sizeToSpacing = (_sizeToSpacing = {}, (0, _defineProperty2.default)(_sizeToS
  * @see EditAction
  * @see CustomAction
  */
-
-exports.sizeToSpacing = sizeToSpacing;
-
-var Action = function Action(_ref2) {
-  var _ref2$appearance = _ref2.appearance,
-      appearance = _ref2$appearance === void 0 ? 'subtle' : _ref2$appearance,
-      content = _ref2.content,
-      onClick = _ref2.onClick,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? _constants.SmartLinkSize.Medium : _ref2$size,
-      _ref2$testId = _ref2.testId,
-      testId = _ref2$testId === void 0 ? 'smart-action' : _ref2$testId,
-      icon = _ref2.icon,
-      _ref2$iconPosition = _ref2.iconPosition,
-      iconPosition = _ref2$iconPosition === void 0 ? 'before' : _ref2$iconPosition,
-      tooltipMessage = _ref2.tooltipMessage,
-      asDropDownItem = _ref2.asDropDownItem,
-      overrideCss = _ref2.overrideCss;
+var Action = function Action(_ref) {
+  var _ref$appearance = _ref.appearance,
+      appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
+      content = _ref.content,
+      onClick = _ref.onClick,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-action' : _ref$testId,
+      icon = _ref.icon,
+      _ref$iconPosition = _ref.iconPosition,
+      iconPosition = _ref$iconPosition === void 0 ? 'before' : _ref$iconPosition,
+      tooltipMessage = _ref.tooltipMessage,
+      asDropDownItem = _ref.asDropDownItem,
+      overrideCss = _ref.overrideCss;
 
   if (!onClick) {
     return null;
   }
 
-  var iconBefore = icon && iconPosition === 'before' ? (0, _core.jsx)(ActionIcon, {
-    size: size,
-    testId: testId,
-    icon: icon
-  }) : undefined;
-  var iconAfter = icon && iconPosition === 'after' ? (0, _core.jsx)(ActionIcon, {
+  var actionIcon = icon && (0, _core.jsx)(_actionIcon.default, {
+    icon: icon,
     size: size,
-    testId: testId,
-    icon: icon
-  }) : undefined;
-  var iconOnly = !content;
+    testId: testId
+  });
+  var iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
+  var iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
 
   if (asDropDownItem) {
-    return (0, _core.jsx)(_dropdownMenu.DropdownItem, {
-      elemBefore: iconBefore,
-      elemAfter: iconAfter,
-      testId: testId,
-      onClick: (0, _utils2.handleOnClick)(onClick)
-    }, content);
+    return (0, _core.jsx)(_actionDropdownItem.default, {
+      content: content,
+      iconAfter: iconAfter,
+      iconBefore: iconBefore,
+      onClick: onClick,
+      testId: testId
+    });
   } else {
-    return (0, _core.jsx)(_tooltip.default, {
-      content: tooltipMessage,
-      testId: "".concat(testId, "-tooltip")
-    }, (0, _core.jsx)("div", {
-      css: [getButtonStyle(size, iconOnly), overrideCss],
-      "data-testid": "".concat(testId, "-button-wrapper")
-    }, (0, _core.jsx)(_customThemeButton.default, {
-      spacing: sizeToSpacing[size],
+    return (0, _core.jsx)(_actionButton.default, {
       appearance: appearance,
-      testId: testId,
-      onClick: (0, _utils2.handleOnClick)(onClick),
+      content: content,
+      iconAfter: iconAfter,
       iconBefore: iconBefore,
-      iconAfter: iconAfter
-    }, content)));
+      onClick: onClick,
+      overrideCss: overrideCss,
+      size: size,
+      testId: testId,
+      tooltipMessage: tooltipMessage
+    });
   }
 };
 

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

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = require("react");
@@ -33,7 +35,7 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 
 var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/more"));
 
-var _action = require("../../actions/action");
+var _utils2 = require("../../utils");
 
 var _token = require("../../../../../utils/token");
 
@@ -62,39 +64,66 @@ var ActionGroup = function ActionGroup(_ref) {
       visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
       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) : []; // Stop AK dropdown menu to propagate event on click.
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var isMoreThenTwoItems = items.length > visibleButtonsNum;
+    var buttons = isMoreThenTwoItems ? items.slice(0, visibleButtonsNum - 1) : items;
+    var dropdownItems = isMoreThenTwoItems ? items.slice(visibleButtonsNum - 1) : [];
+    return [buttons, dropdownItems];
+  }, [items, visibleButtonsNum]),
+      _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
+      buttonActions = _useMemo2[0],
+      dropdownItemActions = _useMemo2[1]; // Stop AK dropdown menu to propagate event on click.
+
 
   var onClick = (0, _react.useCallback)(function (e) {
     return e.stopPropagation();
   }, []);
+  var onOpenChange = (0, _react.useCallback)(function (attrs) {
+    setIsOpen(attrs.isOpen);
+
+    if (onDropdownOpenChange) {
+      onDropdownOpenChange(attrs.isOpen);
+    }
+  }, [onDropdownOpenChange]);
+  var onActionClick = (0, _react.useCallback)(function () {
+    if (isOpen) {
+      onOpenChange({
+        isOpen: false
+      });
+    }
+  }, [isOpen, onOpenChange]);
   return (0, _core.jsx)("div", {
     css: styles,
     className: "actions-button-group",
     onClick: onClick
-  }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(firstActions, size, appearance), restActions.length > 0 ? (0, _core.jsx)(_dropdownMenu.default, {
-    onOpenChange: function onOpenChange(_ref2) {
-      var isOpen = _ref2.isOpen;
-      return onDropdownOpenChange && onDropdownOpenChange(isOpen);
-    },
-    trigger: function trigger(_ref3) {
-      var triggerRef = _ref3.triggerRef,
-          props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(buttonActions, size, appearance, false, onActionClick), dropdownItemActions.length > 0 ? (0, _core.jsx)(_dropdownMenu.default, {
+    isOpen: isOpen,
+    onOpenChange: onOpenChange,
+    trigger: function trigger(_ref2) {
+      var triggerRef = _ref2.triggerRef,
+          props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
       return (0, _core.jsx)(_tooltip.default, {
         content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions),
+        hideTooltipOnClick: true,
         testId: "action-group-more-button-tooltip",
         tag: "span"
       }, (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
-        spacing: _action.sizeToSpacing[size],
+        spacing: _utils2.sizeToButtonSpacing[size],
         testId: "action-group-more-button",
         iconBefore: (0, _core.jsx)(_more.default, {
           label: "more"
         }),
         ref: triggerRef
       })));
-    }
-  }, (0, _utils.renderActionItems)(restActions, size, appearance, true)) : null));
+    },
+    testId: "action-group-dropdown"
+  }, (0, _utils.renderActionItems)(dropdownItemActions, size, appearance, true, onActionClick)) : null));
 };
 
 var _default = ActionGroup;

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

@@ -155,6 +155,7 @@ var renderActionItems = function renderActionItems() {
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.SmartLinkSize.Medium;
   var appearance = arguments.length > 2 ? arguments[2] : undefined;
   var asDropDownItems = arguments.length > 3 ? arguments[3] : undefined;
+  var onActionItemClick = arguments.length > 4 ? arguments[4] : undefined;
   var actions = items.reduce(function (acc, curr, idx) {
     var name = curr.name,
         hideContent = curr.hideContent,
@@ -174,12 +175,22 @@ var renderActionItems = function renderActionItems() {
     }
 
     if (Action) {
+      var handleOnClick = function handleOnClick() {
+        if (onActionItemClick) {
+          onActionItemClick();
+        }
+
+        if (onClick) {
+          onClick();
+        }
+      };
+
       return [].concat((0, _toConsumableArray2.default)(acc), [/*#__PURE__*/_react.default.createElement(Action, (0, _extends2.default)({
         asDropDownItem: asDropDownItems,
         size: size,
         key: idx,
         appearance: appearance,
-        onClick: onClick
+        onClick: handleOnClick
       }, actionProps))]);
     }
 

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

@@ -5,12 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+exports.sizeToButtonSpacing = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@emotion/core");
@@ -19,7 +21,10 @@ var _reactIntlNext = require("react-intl-next");
 
 var _constants = require("../../../constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _sizeToButtonSpacing, _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var sizeToButtonSpacing = (_sizeToButtonSpacing = {}, (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Small, 'none'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Medium, 'compact'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Large, 'compact'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.XLarge, 'default'), _sizeToButtonSpacing);
+exports.sizeToButtonSpacing = sizeToButtonSpacing;
 
 var getFormattedMessage = function getFormattedMessage(message) {
   if (message) {

package/dist/es2019/version.json

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

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

@@ -0,0 +1,88 @@
+/** @jsx jsx */
+import React, { useCallback } from 'react';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import Tooltip from '@atlaskit/tooltip';
+import { SmartLinkSize } from '../../../../../../constants';
+import { sizeToButtonSpacing } from '../../../utils';
+
+const getButtonStyle = (size, iconOnly) => {
+  switch (size) {
+    case SmartLinkSize.Large:
+      return iconOnly ? css`
+            button,
+            button:hover,
+            button:focus,
+            button:active {
+              padding: 0;
+              > span {
+                margin: 0;
+              }
+            }
+          ` : '';
+
+    case SmartLinkSize.Small:
+      return css`
+        font-size: 0.75rem;
+        font-weight: 500;
+        line-height: 1rem;
+        button,
+        button:hover,
+        button:focus,
+        button:active {
+          line-height: 1rem;
+          ${iconOnly ? `
+            padding: 0.125rem;
+          ` : `
+            padding-left: 0.25rem;
+            padding-right: 0.25rem;
+          `}
+        }
+      `;
+
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Medium:
+    default:
+      return '';
+  }
+};
+
+const ActionButton = ({
+  appearance,
+  content,
+  iconAfter,
+  iconBefore,
+  onClick,
+  overrideCss,
+  size,
+  testId,
+  tooltipMessage
+}) => {
+  const iconOnly = !content;
+  const onButtonClick = useCallback(handler => e => {
+    e.preventDefault();
+    handler();
+  }, []);
+  const onContainerClick = useCallback(e => {
+    // Stop button on click event from propagate into parent container.
+    e.stopPropagation();
+  }, []);
+  return jsx("div", {
+    css: [getButtonStyle(size, iconOnly), overrideCss],
+    "data-testid": `${testId}-button-wrapper`,
+    onClick: onContainerClick
+  }, jsx(Tooltip, {
+    content: tooltipMessage,
+    hideTooltipOnClick: true,
+    testId: `${testId}-tooltip`
+  }, jsx(Button, {
+    appearance: appearance,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    onClick: onButtonClick(onClick),
+    spacing: sizeToButtonSpacing[size],
+    testId: testId
+  }, content)));
+};
+
+export default ActionButton;

package/dist/es2019/view/FlexibleCard/components/actions/action/action-button/types.js

@@ -0,0 +1 @@
+export {};