@atlaskit/page-layout 1.0.7 → 1.2.1

package/dist/cjs/components/slots/main.js

@@ -9,26 +9,73 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = require("react");
+
 var _core = require("@emotion/core");
 
+var _accessibility = require("@atlaskit/motion/accessibility");
+
+var _curves = require("@atlaskit/motion/curves");
+
+var _constants = require("../../common/constants");
+
+var _hooks = require("../../common/hooks");
+
 var _utils = require("../../common/utils");
 
 var _controllers = require("../../controllers");
 
-var _styles = require("./styles");
+var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 
 /** @jsx jsx */
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var prefersReducedMotionStyles = (0, _core.css)((0, _accessibility.prefersReducedMotion)());
+var mainStyles = (0, _core.css)({
+  minWidth: 0,
+  marginLeft: 0,
+  // Prevent flex container from blowing up when there's super wide content.
+  flexGrow: 1,
+  // Transition negative margin on main in sync with the increase in width of leftSidebar.
+  transition: "margin-left ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_curves.easeOut, " 0s")
+});
+var draggingStyles = (0, _core.css)({
+  cursor: 'ew-resize',
+  // Make sure drag to resize remains snappy.
+  transition: 'none'
+});
+/**
+ * Adds a negative left margin to main,
+ * which transitions at the same speed as the left sidebar's width increase.
+ * This give an illusion that the flyout is appearing on top of the main content,
+ * while main remains in place.
+ */
+
+var flyoutStyles = (0, _core.css)({
+  marginLeft: "calc(-1 * var(--".concat(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
+});
+
 var Main = function Main(props) {
   var children = props.children,
       testId = props.testId,
       id = props.id,
       skipLinkTitle = props.skipLinkTitle;
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    "data-testid": testId,
-    css: _styles.mainStyles,
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('main')), children);
+  var isDragging = (0, _hooks.useIsSidebarDragging)();
+
+  var _useContext = (0, _react.useContext)(_controllers.SidebarResizeContext),
+      _useContext$leftSideb = _useContext.leftSidebarState,
+      isFlyoutOpen = _useContext$leftSideb.isFlyoutOpen,
+      isFixed = _useContext$leftSideb.isFixed;
+
+  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      "data-testid": testId,
+      css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
+      className: className,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('main')), children);
+  });
 };
 
 var _default = Main;

package/dist/cjs/components/slots/page-layout.js

@@ -21,10 +21,17 @@ var _controllers = require("../../controllers");
 
 var _skipLinks = require("../skip-links");
 
-var _styles = require("./styles");
-
 /** @jsx jsx */
 var pageLayoutSelector = (0, _defineProperty2.default)({}, _constants.PAGE_LAYOUT_CONTAINER_SELECTOR, true);
+var gridTemplateAreas = "\n  \"".concat(_constants.LEFT_PANEL, " ").concat(_constants.BANNER, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.TOP_NAVIGATION, " ").concat(_constants.RIGHT_PANEL, "\"\n  \"").concat(_constants.LEFT_PANEL, " ").concat(_constants.CONTENT, " ").concat(_constants.RIGHT_PANEL, "\"\n ");
+var gridStyles = (0, _core.css)({
+  display: 'grid',
+  height: '100%',
+  gridTemplateAreas: gridTemplateAreas,
+  gridTemplateColumns: "".concat(_constants.LEFT_PANEL_WIDTH, " minmax(0, 1fr) ").concat(_constants.RIGHT_PANEL_WIDTH),
+  gridTemplateRows: "".concat(_constants.BANNER_HEIGHT, " ").concat(_constants.TOP_NAVIGATION_HEIGHT, " auto"),
+  outline: 'none'
+});
 
 var PageLayout = function PageLayout(_ref) {
   var _ref$skipLinksLabel = _ref.skipLinksLabel,
@@ -37,7 +44,7 @@ var PageLayout = function PageLayout(_ref) {
     skipLinksLabel: skipLinksLabel
   }), (0, _core.jsx)("div", (0, _extends2.default)({}, pageLayoutSelector, {
     "data-testid": testId,
-    css: _styles.gridStyles,
+    css: gridStyles,
     tabIndex: -1
   }), (0, _core.jsx)(_controllers.SidebarResizeController, {
     onLeftSidebarCollapse: onLeftSidebarCollapse,

package/dist/cjs/components/slots/right-panel.js

@@ -21,11 +21,22 @@ var _utils = require("../../common/utils");
 
 var _controllers = require("../../controllers");
 
-var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 
-var _styles = require("./styles");
+var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
+var baseStyles = (0, _core.css)({
+  gridArea: _constants.RIGHT_PANEL
+});
+var fixedStyles = (0, _core.css)({
+  width: _constants.RIGHT_PANEL_WIDTH,
+  position: 'fixed',
+  top: 0,
+  right: 0,
+  bottom: 0
+});
+
 var RightPanel = function RightPanel(props) {
   var children = props.children,
       isFixed = props.isFixed,
@@ -40,17 +51,21 @@ var RightPanel = function RightPanel(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_PANEL_WIDTH, rightPanelWidth));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_PANEL_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [rightPanelWidth]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: (0, _styles.rightPanelStyles)(isFixed),
-    "data-testid": testId,
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('right-panel')), (0, _core.jsx)(_slotDimensions.default, {
-    variableName: _constants.VAR_RIGHT_PANEL_WIDTH,
-    value: rightPanelWidth
-  }), children);
+  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      css: [baseStyles, isFixed && fixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('right-panel')), (0, _core.jsx)(_slotDimensions.default, {
+      variableName: _constants.VAR_RIGHT_PANEL_WIDTH,
+      value: rightPanelWidth
+    }), children);
+  });
 };
 
 var _default = RightPanel;

package/dist/cjs/components/slots/right-sidebar.js

@@ -21,11 +21,49 @@ var _utils = require("../../common/utils");
 
 var _controllers = require("../../controllers");
 
-var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 
-var _styles = require("./styles");
+var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
+
+/**
+ * This inner wrapper is required to allow the sidebar to be `position: fixed`.
+ *
+ * If we were to apply `position: fixed` to the outer wrapper, it will be popped
+ * out of its flex container and Main would stretch to occupy all the space.
+ */
+var fixedInnerStyles = (0, _core.css)({
+  /**
+   * This width on the inner wrapper is required when it is using fixed
+   * positioning. Otherwise its width is slightly off.
+   */
+  width: _constants.RIGHT_SIDEBAR_WIDTH,
+  position: 'fixed',
+  top: "calc(".concat(_constants.BANNER_HEIGHT, " + ").concat(_constants.TOP_NAVIGATION_HEIGHT, ")"),
+  right: "calc(".concat(_constants.RIGHT_PANEL_WIDTH, ")"),
+  bottom: 0
+});
+var staticInnerStyles = (0, _core.css)({
+  height: '100%'
+});
+var outerStyles = (0, _core.css)({
+  width: _constants.RIGHT_SIDEBAR_WIDTH
+});
+/**
+ * In fixed mode this element's child is taken out of the document flow.
+ * It doesn't take up the width as expected,
+ * so the pseudo element forces it to take up the necessary width.
+ */
+
+var fixedOuterStyles = (0, _core.css)({
+  '&::after': {
+    display: 'inline-block',
+    width: _constants.RIGHT_SIDEBAR_WIDTH,
+    content: "''"
+  }
+});
+
 var RightSidebar = function RightSidebar(props) {
   var children = props.children,
       _props$width = props.width,
@@ -40,19 +78,25 @@ var RightSidebar = function RightSidebar(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_SIDEBAR_WIDTH, rightSidebarWidth));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_RIGHT_SIDEBAR_WIDTH, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [rightSidebarWidth, id]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    "data-testid": testId,
-    css: (0, _styles.rightSidebarStyles)(isFixed),
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _core.jsx)(_slotDimensions.default, {
-    variableName: _constants.VAR_RIGHT_SIDEBAR_WIDTH,
-    value: rightSidebarWidth
-  }), (0, _core.jsx)("div", {
-    css: (0, _styles.fixedRightSidebarInnerStyles)(isFixed)
-  }, children));
+  return (0, _core.jsx)(_slotFocusRing.default, {
+    isSidebar: true
+  }, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      "data-testid": testId,
+      css: [outerStyles, isFixed && fixedOuterStyles],
+      className: className,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('right-sidebar')), (0, _core.jsx)(_slotDimensions.default, {
+      variableName: _constants.VAR_RIGHT_SIDEBAR_WIDTH,
+      value: rightSidebarWidth
+    }), (0, _core.jsx)("div", {
+      css: [isFixed && fixedInnerStyles, !isFixed && staticInnerStyles]
+    }, children));
+  });
 };
 
 var _default = RightSidebar;

package/dist/cjs/components/slots/top-navigation.js

@@ -21,11 +21,23 @@ var _utils = require("../../common/utils");
 
 var _controllers = require("../../controllers");
 
-var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
+var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"));
 
-var _styles = require("./styles");
+var _slotDimensions = _interopRequireDefault(require("./slot-dimensions"));
 
 /** @jsx jsx */
+var topNavigationStyles = (0, _core.css)({
+  height: _constants.TOP_NAVIGATION_HEIGHT,
+  gridArea: _constants.TOP_NAVIGATION
+});
+var fixedStyles = (0, _core.css)({
+  position: 'fixed',
+  zIndex: 2,
+  top: _constants.BANNER_HEIGHT,
+  right: _constants.RIGHT_PANEL_WIDTH,
+  left: _constants.LEFT_PANEL_WIDTH
+});
+
 var TopNavigation = function TopNavigation(props) {
   var children = props.children,
       _props$height = props.height,
@@ -41,17 +53,21 @@ var TopNavigation = function TopNavigation(props) {
     (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_TOP_NAVIGATION_HEIGHT, topNavigationHeight));
     return function () {
       (0, _controllers.publishGridState)((0, _defineProperty2.default)({}, _constants.VAR_TOP_NAVIGATION_HEIGHT, 0));
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, [topNavigationHeight]);
   (0, _controllers.useSkipLink)(id, skipLinkTitle);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: (0, _styles.topNavigationStyles)(isFixed),
-    "data-testid": testId,
-    id: id
-  }, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _core.jsx)(_slotDimensions.default, {
-    variableName: _constants.VAR_TOP_NAVIGATION_HEIGHT,
-    value: topNavigationHeight
-  }), children);
+  return (0, _core.jsx)(_slotFocusRing.default, null, function (_ref) {
+    var className = _ref.className;
+    return (0, _core.jsx)("div", (0, _extends2.default)({
+      css: [topNavigationStyles, isFixed && fixedStyles],
+      className: className,
+      "data-testid": testId,
+      id: id
+    }, (0, _utils.getPageLayoutSlotSelector)('top-navigation')), (0, _core.jsx)(_slotDimensions.default, {
+      variableName: _constants.VAR_TOP_NAVIGATION_HEIGHT,
+      value: topNavigationHeight
+    }), children);
+  });
 };
 
 var _default = TopNavigation;

package/dist/cjs/controllers/sidebar-resize-context.js

@@ -27,7 +27,8 @@ var leftSidebarState = {
   isLeftSidebarCollapsed: false,
   leftSidebarWidth: 0,
   lastLeftSidebarWidth: 0,
-  flyoutLockCount: 0
+  flyoutLockCount: 0,
+  isFixed: true
 };
 var SidebarResizeContext = /*#__PURE__*/(0, _react.createContext)({
   isLeftSidebarCollapsed: false,

package/dist/cjs/controllers/sidebar-resize-controller.js

@@ -46,7 +46,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
     isLeftSidebarCollapsed: false,
     leftSidebarWidth: 0,
     lastLeftSidebarWidth: 0,
-    flyoutLockCount: 0
+    flyoutLockCount: 0,
+    isFixed: true
   }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       leftSidebarState = _useState2[0],
@@ -74,7 +75,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
   var expandLeftSidebar = (0, _react.useCallback)(function () {
     var lastLeftSidebarWidth = leftSidebarState.lastLeftSidebarWidth,
         isResizing = leftSidebarState.isResizing,
-        flyoutLockCount = leftSidebarState.flyoutLockCount;
+        flyoutLockCount = leftSidebarState.flyoutLockCount,
+        isFixed = leftSidebarState.isFixed;
 
     if (isResizing) {
       return;
@@ -87,7 +89,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
       leftSidebarWidth: width,
       lastLeftSidebarWidth: lastLeftSidebarWidth,
       isResizing: isResizing,
-      flyoutLockCount: flyoutLockCount
+      flyoutLockCount: flyoutLockCount,
+      isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion
 
@@ -98,7 +101,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
   var collapseLeftSidebar = (0, _react.useCallback)(function (event, collapseWithoutTransition) {
     var leftSidebarWidth = leftSidebarState.leftSidebarWidth,
         isResizing = leftSidebarState.isResizing,
-        flyoutLockCount = leftSidebarState.flyoutLockCount;
+        flyoutLockCount = leftSidebarState.flyoutLockCount,
+        isFixed = leftSidebarState.isFixed;
 
     if (isResizing) {
       return;
@@ -113,7 +117,8 @@ var SidebarResizeController = function SidebarResizeController(_ref) {
       leftSidebarWidth: _constants.COLLAPSED_LEFT_SIDEBAR_WIDTH,
       lastLeftSidebarWidth: leftSidebarWidth,
       isResizing: isResizing,
-      flyoutLockCount: flyoutLockCount
+      flyoutLockCount: flyoutLockCount,
+      isFixed: isFixed
     };
     setLeftSidebarState(updatedLeftSidebarState); // onTransitionEnd isn't triggered when a user prefers reduced motion
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/page-layout",
-	"version": "1.0.7",
+	"version": "1.2.1",
 	"sideEffects": false
 }

package/dist/es2019/common/hooks/index.js

@@ -0,0 +1,2 @@
+export { default as useIsSidebarCollapsing } from './use-is-sidebar-collapsing';
+export { default as useIsSidebarDragging } from './use-is-sidebar-dragging';

package/dist/es2019/common/hooks/use-is-sidebar-collapsing.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { IS_SIDEBAR_COLLAPSING } from '../constants';
+
+const getIsCollapsing = () => {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(IS_SIDEBAR_COLLAPSING) === 'true';
+};
+
+const useIsSidebarCollapsing = () => {
+  const [isCollapsing, setIsCollapsing] = useState(getIsCollapsing);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsCollapsing(getIsCollapsing);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [IS_SIDEBAR_COLLAPSING]
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return isCollapsing;
+};
+
+export default useIsSidebarCollapsing;

package/dist/es2019/common/hooks/use-is-sidebar-dragging.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { IS_SIDEBAR_DRAGGING } from '../constants';
+
+const getIsDragging = () => {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(IS_SIDEBAR_DRAGGING) === 'true';
+};
+
+const useIsSidebarDragging = () => {
+  const [isDragging, setIsDragging] = useState(getIsDragging);
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsDragging(getIsDragging);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [IS_SIDEBAR_DRAGGING]
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return isDragging;
+};
+
+export default useIsSidebarDragging;

package/dist/es2019/components/resize-control/grab-area.js

@@ -1,9 +1,51 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { B100, B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
-import { grabAreaCSS, lineCSS } from './styles';
+
+/**
+ * Determines the color of the grab line.
+ *
+ * Used on internal leaf node, so naming collisions won't matter.
+ */
+const varLineColor = '--ds-line';
+const grabAreaStyles = css({
+  width: 24,
+  height: '100%',
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'ew-resize',
+  '&::-moz-focus-inner': {
+    border: 0
+  },
+  ':focus': {
+    outline: 0
+  },
+  ':enabled': {
+    ':hover': {
+      [varLineColor]: `var(--ds-border-selected, ${B100})`
+    },
+    ':active, :focus': {
+      [varLineColor]: `var(--ds-border-selected, ${B200})`
+    }
+  }
+});
+const grabAreaCollapsedStyles = css({
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'default'
+});
+const lineStyles = css({
+  display: 'block',
+  width: 2,
+  height: '100%',
+  backgroundColor: `var(${varLineColor})`,
+  transition: 'background-color 200ms'
+});
 const grabAreaLineSelector = {
   [GRAB_AREA_LINE_SELECTOR]: true
 };
@@ -18,9 +60,9 @@ const GrabArea = ({
 }) => jsx("button", _extends({}, grabAreaSelector, {
   "data-testid": testId,
   type: "button",
-  css: grabAreaCSS(isLeftSidebarCollapsed)
+  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
 }, rest), jsx("span", _extends({
-  css: lineCSS(isLeftSidebarCollapsed)
+  css: lineStyles
 }, grabAreaLineSelector)));
 
 export default GrabArea;

package/dist/es2019/components/resize-control/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { useCallback, useContext, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import rafSchd from 'raf-schd';
 import { COLLAPSED_LEFT_SIDEBAR_WIDTH, DEFAULT_LEFT_SIDEBAR_WIDTH, IS_SIDEBAR_DRAGGING, MIN_LEFT_SIDEBAR_DRAG_THRESHOLD, RESIZE_BUTTON_SELECTOR, RESIZE_CONTROL_SELECTOR, VAR_LEFT_SIDEBAR_WIDTH } from '../../common/constants';
 import { getLeftPanelWidth, getLeftSidebarPercentage } from '../../common/utils';
@@ -11,16 +11,19 @@ import { SidebarResizeContext } from '../../controllers/sidebar-resize-context';
 
 import GrabArea from './grab-area';
 import ResizeButton from './resize-button';
-import { resizeControlCSS, shadowCSS } from './styles';
+import Shadow from './shadow';
 const cssSelector = {
   [RESIZE_CONTROL_SELECTOR]: true
 };
-
-const Shadow = ({
-  testId
-}) => jsx("div", {
-  "data-testid": testId,
-  css: shadowCSS
+const resizeControlStyles = css({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: '100%',
+  outline: 'none'
+});
+const showResizeButtonStyles = css({
+  '--ds--resize-button--opacity': 1
 });
 
 const ResizeControl = ({
@@ -236,7 +239,7 @@ const ResizeControl = ({
   /* eslint-disable jsx-a11y/role-supports-aria-props */
 
   return jsx("div", _extends({}, cssSelector, {
-    css: resizeControlCSS(isGrabAreaFocused, isLeftSidebarCollapsed)
+    css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
   }), jsx(Shadow, {
     testId: testId && `${testId}-shadow`
   }), jsx(GrabArea, {

package/dist/es2019/components/resize-control/resize-button.js

@@ -1,10 +1,67 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import ChevronRight from '@atlaskit/icon/glyph/chevron-right';
+import { easeOut } from '@atlaskit/motion/curves';
+import { mediumDurationMs, smallDurationMs } from '@atlaskit/motion/durations';
+import { B100, B200, N0, N200, N30A } from '@atlaskit/theme/colors';
 import { RESIZE_BUTTON_SELECTOR } from '../../common/constants';
-import { increaseHitArea, resizeIconButtonCSS } from './styles';
+const increaseHitAreaStyles = css({
+  position: 'absolute',
+  top: -8,
+  right: -12,
+  bottom: -8,
+  left: -8
+});
+const resizeIconButtonStyles = css({
+  width: 24,
+  height: 24,
+  padding: 0,
+  position: 'absolute',
+  top: 32,
+  left: 0,
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  border: 0,
+  borderRadius: '50%',
+
+  /**
+   * TODO: https://product-fabric.atlassian.net/browse/DSP-3392
+   * This shadow needs further investigation,
+   * along with the hover and active background colors.
+   */
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  boxShadow: `0 0 0 1px ${N30A}, 0 2px 4px 1px ${N30A}`,
+  color: `var(--ds-text-subtle, ${N200})`,
+  cursor: 'pointer',
+
+  /**
+   * The fallback value of 0 ensures that the button is hidden by default,
+   * unless some parent (or the button itself) overrides it.
+   */
+  opacity: `var(--ds--resize-button--opacity,0)`,
+  outline: 0,
+  transform: 'translateX(-50%)',
+  transition: `
+    background-color ${smallDurationMs}ms linear,
+    color ${smallDurationMs}ms linear,
+    opacity ${mediumDurationMs}ms ${easeOut}
+  `,
+  ':hover': {
+    backgroundColor: `var(--ds-background-selected-bold, ${B100})`,
+    color: `var(--ds-text-inverse, ${N0})`,
+    opacity: 1
+  },
+  ':active, :focus': {
+    backgroundColor: `var(--ds-background-selected-bold-hovered, ${B200})`,
+    color: `var(--ds-text-inverse, ${N0})`,
+    opacity: 1
+  }
+});
+const resizeIconButtonExpandedStyles = css({
+  transform: 'rotate(180deg)',
+  transformOrigin: 7
+});
 
 const preventDefault = event => event.preventDefault();
 
@@ -22,7 +79,7 @@ const ResizeButton = ({
   "aria-expanded": !isLeftSidebarCollapsed,
   "aria-label": label,
   type: "button",
-  css: resizeIconButtonCSS(isLeftSidebarCollapsed),
+  css: [resizeIconButtonStyles, !isLeftSidebarCollapsed && resizeIconButtonExpandedStyles],
   "data-testid": testId // Prevents focus staying attached to the button
   // when pressed
   ,
@@ -30,7 +87,7 @@ const ResizeButton = ({
 }, props), jsx(ChevronRight, {
   label: ""
 }), jsx("div", {
-  css: increaseHitArea
+  css: increaseHitAreaStyles
 }));
 
 export default ResizeButton;