@atlaskit/drawer 6.0.9 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @atlaskit/drawer
 
+## 7.1.0
+
+### Minor Changes
+
+- [`d19fa028010`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d19fa028010) - Instrumented `@atlaskit/drawer` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+## 7.0.1
+
+### Patch Changes
+
+- [`3fced6aa641`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fced6aa641) - Bumped `react-focus-lock` to version `^2.2.1`.
+
+## 7.0.0
+
+### Major Changes
+
+- [`cf853e39278`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cf853e39278) - [ux] Breaking changes:
+
+  The following components have been removed from `@atlaskit/drawer`:
+
+  - `DrawerItemTheme`
+  - `DrawerSkeletonHeader`
+  - `DrawerSkeletonItem`
+  - `DrawerItemGroup`
+  - `DrawerItem`
+
+  These components wrap the much older, now deprecated package `@atlaskit/item` and had little to no usage. If you really need the functionality
+  captured by these components; we'd encourage you to try `@atlaskit/menu`
+  which matches and extends all of the functionality of `@atlaskit/item` in
+  a more accessible and performant way.
+
+  Housekeeping:
+
+  - Now exposes a `testId` property as a hook for automated testing.
+  - Package no longer depends on `styled-components` for styling
+  - Package no longer depends on `chromatism`
+  - Package no longer depends on `@atlaskit/item`
+  - Package no longer depends on `@atlaskit/avatar`
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.0.10
+
+### Patch Changes
+
+- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
+
 ## 6.0.9
 
 ### Patch Changes

package/dist/cjs/components/index.js

@@ -7,31 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "DrawerSkeletonHeader", {
-  enumerable: true,
-  get: function get() {
-    return _skeletons.DrawerSkeletonHeader;
-  }
-});
-Object.defineProperty(exports, "DrawerSkeletonItem", {
-  enumerable: true,
-  get: function get() {
-    return _skeletons.DrawerSkeletonItem;
-  }
-});
-Object.defineProperty(exports, "DrawerItemGroup", {
-  enumerable: true,
-  get: function get() {
-    return _itemGroup.DrawerItemGroup;
-  }
-});
-Object.defineProperty(exports, "DrawerItem", {
-  enumerable: true,
-  get: function get() {
-    return _item.DrawerItem;
-  }
-});
-exports.default = exports.DrawerItemTheme = exports.DrawerBase = void 0;
+exports.default = exports.DrawerBase = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -53,8 +29,6 @@ var _exenv = require("exenv");
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var _styledComponents = require("styled-components");
-
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
@@ -63,20 +37,12 @@ var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 
 var _constants = require("../constants");
 
-var _drawerItemTheme = _interopRequireDefault(require("../theme/drawer-item-theme"));
-
 var _focusLock = _interopRequireDefault(require("./focus-lock"));
 
 var _primitives = _interopRequireDefault(require("./primitives"));
 
 var _transitions = require("./transitions");
 
-var _skeletons = require("./skeletons");
-
-var _itemGroup = require("./item-group");
-
-var _item = require("./item");
-
 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; }
@@ -86,7 +52,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/drawer";
-var packageVersion = "6.0.9";
+var packageVersion = "7.1.0";
 
 var OnlyChild = function OnlyChild(_ref) {
   var children = _ref.children;
@@ -194,6 +160,7 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
       }
 
       var _this$props3 = this.props,
+          testId = _this$props3.testId,
           isOpen = _this$props3.isOpen,
           children = _this$props3.children,
           icon = _this$props3.icon,
@@ -227,6 +194,7 @@ var DrawerBase = /*#__PURE__*/function (_Component) {
         isFocusLockEnabled: isFocusLockEnabled,
         shouldReturnFocus: shouldReturnFocus
       }, /*#__PURE__*/_react.default.createElement(_primitives.default, {
+        testId: testId,
         icon: icon,
         in: isOpen,
         onClose: this.handleBackButtonClick,
@@ -249,14 +217,6 @@ exports.DrawerBase = DrawerBase;
   autoFocusFirstElem: false
 });
 
-var DrawerItemTheme = function DrawerItemTheme(props) {
-  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: _drawerItemTheme.default
-  }, props.children);
-};
-
-exports.DrawerItemTheme = DrawerItemTheme;
-
 var _default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'drawer',
   packageName: packageName,

package/dist/cjs/components/primitives/content.js

@@ -36,6 +36,7 @@ var Content = function Content(_ref) {
      * guide suggested as it made more sense as a transformer of the current styles rather than
      * a complete override with no chance of partially changing styles.
      */
+    // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     (0, _core.jsx)("div", (0, _extends2.default)({
       css: cssFn(defaultStyles)
     }, props))

package/dist/cjs/components/primitives/icon-button.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _core = require("@emotion/core");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+/** @jsx jsx */
+var gridSize = (0, _constants.gridSize)();
+var iconButtonStyles = (0, _core.css)({
+  display: 'flex',
+  width: 5 * gridSize,
+  height: 5 * gridSize,
+  marginBottom: 2 * gridSize,
+  padding: 0,
+  alignItems: 'center',
+  justifyContent: 'center',
+  background: 0,
+  border: 0,
+  borderRadius: '50%',
+  color: 'inherit',
+  cursor: 'pointer',
+  fontSize: 'inherit',
+  lineHeight: 1,
+  '&:hover': {
+    backgroundColor: "var(--ds-background-transparentNeutral-hover, ".concat(_colors.N30A, ")")
+  },
+  '&:active': {
+    backgroundColor: "var(--ds-background-transparentNeutral-pressed, ".concat(_colors.B50, ")"),
+    outline: 0
+  }
+});
+
+var IconButton = function IconButton(_ref) {
+  var children = _ref.children,
+      onClick = _ref.onClick,
+      testId = _ref.testId;
+  return (0, _core.jsx)("button", {
+    type: "button",
+    css: iconButtonStyles,
+    onClick: onClick,
+    "data-testid": testId
+  }, children);
+};
+
+var _default = IconButton;
+exports.default = _default;

package/dist/cjs/components/primitives/index.js

@@ -19,6 +19,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = require("react");
@@ -37,12 +39,18 @@ var _utils = require("../utils");
 
 var _content = _interopRequireDefault(require("./content"));
 
+var _iconButton = _interopRequireDefault(require("./icon-button"));
+
 var _sidebar = _interopRequireDefault(require("./sidebar"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 // Misc.
 // ------------------------------
 var widths = {
@@ -51,55 +59,29 @@ var widths = {
   narrow: 45 * (0, _constants.gridSize)(),
   medium: 60 * (0, _constants.gridSize)(),
   wide: 75 * (0, _constants.gridSize)()
-}; // Wrapper
-// ------------------------------
+};
+var wrapperStyles = (0, _core.css)({
+  display: 'flex',
+  height: '100vh',
+  position: 'fixed',
+  zIndex: _constants.layers.blanket() + 1,
+  top: 0,
+  left: 0,
+  backgroundColor: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
+  overflow: 'hidden'
+});
 
 var Wrapper = function Wrapper(_ref) {
   var _ref$width = _ref.width,
       width = _ref$width === void 0 ? 'narrow' : _ref$width,
       shouldUnmountOnExit = _ref.shouldUnmountOnExit,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["width", "shouldUnmountOnExit"]);
+      style = _ref.style,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["width", "shouldUnmountOnExit", "style"]);
   return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: {
-      backgroundColor: _colors.N0,
-      display: 'flex',
-      height: '100vh',
-      left: 0,
-      overflow: 'hidden',
-      position: 'fixed',
-      top: 0,
-      width: widths[width],
-      zIndex: _constants.layers.blanket() + 1
-    }
-  }, props));
-};
-
-var IconWrapper = function IconWrapper(props) {
-  return (0, _core.jsx)("button", (0, _extends2.default)({
-    type: "button",
-    css: {
-      alignItems: 'center',
-      background: 0,
-      border: 0,
-      borderRadius: '50%',
-      color: 'inherit',
-      cursor: props.onClick ? 'pointer' : undefined,
-      display: 'flex',
-      fontSize: 'inherit',
-      height: 5 * (0, _constants.gridSize)(),
-      justifyContent: 'center',
-      lineHeight: 1,
-      marginBottom: 2 * (0, _constants.gridSize)(),
-      padding: 0,
-      width: 5 * (0, _constants.gridSize)(),
-      '&:hover': {
-        backgroundColor: props.onClick ? _colors.N30A : undefined
-      },
-      '&:active': {
-        backgroundColor: props.onClick ? _colors.B50 : undefined,
-        outline: 0
-      }
-    }
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      width: widths[width]
+    }),
+    css: wrapperStyles
   }, props));
 };
 
@@ -128,7 +110,8 @@ var DrawerPrimitive = /*#__PURE__*/function (_Component) {
           onCloseComplete = _this$props.onCloseComplete,
           onOpenComplete = _this$props.onOpenComplete,
           overrides = _this$props.overrides,
-          props = (0, _objectWithoutProperties2.default)(_this$props, ["children", "icon", "onClose", "onCloseComplete", "onOpenComplete", "overrides"]);
+          testId = _this$props.testId,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["children", "icon", "onClose", "onCloseComplete", "onOpenComplete", "overrides", "testId"]);
       var getOverrides = (0, _utils.createExtender)(defaults, overrides);
 
       var _getOverrides = getOverrides('Sidebar'),
@@ -142,10 +125,11 @@ var DrawerPrimitive = /*#__PURE__*/function (_Component) {
       return (0, _core.jsx)(_transitions.Slide, (0, _extends2.default)({
         component: Wrapper,
         onExited: onCloseComplete,
-        onEntered: onOpenComplete
-      }, props), (0, _core.jsx)(Sidebar, sideBarOverrides, (0, _core.jsx)(IconWrapper, {
+        onEntered: onOpenComplete,
+        "data-testid": testId
+      }, props), (0, _core.jsx)(Sidebar, sideBarOverrides, (0, _core.jsx)(_iconButton.default, {
         onClick: onClose,
-        "data-test-selector": "DrawerPrimitiveSidebarCloseButton"
+        testId: testId && 'DrawerPrimitiveSidebarCloseButton'
       }, Icon ? (0, _core.jsx)(Icon, {
         size: "large"
       }) : (0, _core.jsx)(_arrowLeft.default, {

package/dist/cjs/components/primitives/sidebar.js

@@ -21,7 +21,7 @@ var _constants = require("@atlaskit/theme/constants");
 var defaultStyle = {
   alignItems: 'center',
   boxSizing: 'border-box',
-  color: _colors.N500,
+  color: "var(--ds-text-mediumEmphasis, ".concat(_colors.N500, ")"),
   display: 'flex',
   flexShrink: 0,
   flexDirection: 'column',
@@ -38,6 +38,7 @@ var sidebarCSS = function sidebarCSS() {
 var Sidebar = function Sidebar(_ref) {
   var cssFn = _ref.cssFn,
       props = (0, _objectWithoutProperties2.default)(_ref, ["cssFn"]);
+  // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
   return (0, _core.jsx)("div", (0, _extends2.default)({
     css: cssFn(defaultStyle)
   }, props));

package/dist/cjs/components/types.js

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

package/dist/cjs/components/utils.js

@@ -3,16 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createExtender = exports.defaultAttributesFn = void 0;
-
-// This file is a copy paste from @atlaskit/checkbox/src/utils
-// This duplicate code should be handled by the following issue
-// https://ecosystem.atlassian.net/jira/servicedesk/projects/DS/issue/DS-7036
-var defaultAttributesFn = function defaultAttributesFn(p) {
-  return {};
-};
-
-exports.defaultAttributesFn = defaultAttributesFn;
+exports.createExtender = void 0;
 
 var createExtender = function createExtender(defaults) {
   var overrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Object.create(Object.prototype);

package/dist/cjs/constants.js

@@ -3,22 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.darkDrawerItemActiveBackground = exports.darkDrawerItemHoverBackground = exports.gridSize = exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = void 0;
-
-var _constants = require("@atlaskit/theme/constants");
-
+exports.widths = exports.transitionTimingFunction = exports.transitionDurationMs = exports.transitionDuration = void 0;
 var transitionDuration = '0.22s';
 exports.transitionDuration = transitionDuration;
 var transitionDurationMs = 220;
 exports.transitionDurationMs = transitionDurationMs;
 var transitionTimingFunction = 'cubic-bezier(0.2, 0, 0, 1)';
 exports.transitionTimingFunction = transitionTimingFunction;
-var widths = ['narrow', 'medium', 'wide', 'extended', 'full']; // default theme
-
-exports.widths = widths;
-var gridSize = (0, _constants.gridSize)();
-exports.gridSize = gridSize;
-var darkDrawerItemHoverBackground = '#313F57';
-exports.darkDrawerItemHoverBackground = darkDrawerItemHoverBackground;
-var darkDrawerItemActiveBackground = '#2B374D';
-exports.darkDrawerItemActiveBackground = darkDrawerItemActiveBackground;
+var widths = ['narrow', 'medium', 'wide', 'extended', 'full'];
+exports.widths = widths;

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -11,39 +11,5 @@ Object.defineProperty(exports, "default", {
     return _components.default;
   }
 });
-Object.defineProperty(exports, "DrawerItemTheme", {
-  enumerable: true,
-  get: function get() {
-    return _components.DrawerItemTheme;
-  }
-});
-Object.defineProperty(exports, "DrawerSkeletonHeader", {
-  enumerable: true,
-  get: function get() {
-    return _components.DrawerSkeletonHeader;
-  }
-});
-Object.defineProperty(exports, "DrawerSkeletonItem", {
-  enumerable: true,
-  get: function get() {
-    return _components.DrawerSkeletonItem;
-  }
-});
-Object.defineProperty(exports, "DrawerItemGroup", {
-  enumerable: true,
-  get: function get() {
-    return _components.DrawerItemGroup;
-  }
-});
-Object.defineProperty(exports, "DrawerItem", {
-  enumerable: true,
-  get: function get() {
-    return _components.DrawerItem;
-  }
-});
-
-var _components = _interopRequireWildcard(require("./components"));
-
-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 _components = _interopRequireDefault(require("./components"));

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/drawer",
-	"version": "6.0.9",
+	"version": "7.1.0",
 	"sideEffects": false
 }

package/dist/es2019/components/index.js

@@ -2,17 +2,15 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Children, Component, Fragment } from 'react';
 import { canUseDOM } from 'exenv';
 import { Transition, TransitionGroup } from 'react-transition-group';
-import { ThemeProvider } from 'styled-components';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Blanket from '@atlaskit/blanket';
 import Portal from '@atlaskit/portal';
 import { transitionDurationMs } from '../constants';
-import drawerItemTheme from '../theme/drawer-item-theme';
 import FocusLock from './focus-lock';
 import DrawerPrimitive from './primitives';
 import { Fade } from './transitions';
 const packageName = "@atlaskit/drawer";
-const packageVersion = "6.0.9";
+const packageVersion = "7.1.0";
 
 const OnlyChild = ({
   children
@@ -111,6 +109,7 @@ export class DrawerBase extends Component {
     }
 
     const {
+      testId,
       isOpen,
       children,
       icon,
@@ -145,6 +144,7 @@ export class DrawerBase extends Component {
       isFocusLockEnabled: isFocusLockEnabled,
       shouldReturnFocus: shouldReturnFocus
     }, /*#__PURE__*/React.createElement(DrawerPrimitive, {
+      testId: testId,
       icon: icon,
       in: isOpen,
       onClose: this.handleBackButtonClick,
@@ -165,12 +165,6 @@ _defineProperty(DrawerBase, "defaultProps", {
   autoFocusFirstElem: false
 });
 
-export const DrawerItemTheme = props => /*#__PURE__*/React.createElement(ThemeProvider, {
-  theme: drawerItemTheme
-}, props.children);
-export { DrawerSkeletonHeader, DrawerSkeletonItem } from './skeletons';
-export { DrawerItemGroup } from './item-group';
-export { DrawerItem } from './item';
 export default withAnalyticsContext({
   componentName: 'drawer',
   packageName,

package/dist/es2019/components/primitives/content.js

@@ -21,6 +21,7 @@ const Content = ({
  * guide suggested as it made more sense as a transformer of the current styles rather than
  * a complete override with no chance of partially changing styles.
  */
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 jsx("div", _extends({
   css: cssFn(defaultStyles)
 }, props));

package/dist/es2019/components/primitives/icon-button.js

@@ -0,0 +1,41 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { B50, N30A } from '@atlaskit/theme/colors';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+const gridSize = getGridSize();
+const iconButtonStyles = css({
+  display: 'flex',
+  width: 5 * gridSize,
+  height: 5 * gridSize,
+  marginBottom: 2 * gridSize,
+  padding: 0,
+  alignItems: 'center',
+  justifyContent: 'center',
+  background: 0,
+  border: 0,
+  borderRadius: '50%',
+  color: 'inherit',
+  cursor: 'pointer',
+  fontSize: 'inherit',
+  lineHeight: 1,
+  '&:hover': {
+    backgroundColor: `var(--ds-background-transparentNeutral-hover, ${N30A})`
+  },
+  '&:active': {
+    backgroundColor: `var(--ds-background-transparentNeutral-pressed, ${B50})`,
+    outline: 0
+  }
+});
+
+const IconButton = ({
+  children,
+  onClick,
+  testId
+}) => jsx("button", {
+  type: "button",
+  css: iconButtonStyles,
+  onClick: onClick,
+  "data-testid": testId
+}, children);
+
+export default IconButton;