@atlaskit/page-layout 1.0.6 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/page-layout
 
+## 1.2.0
+
+### Minor Changes
+
+- [`21534d3647e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/21534d3647e) - [ux] Update theme colours and remove shadow from resize bar
+
+### Patch Changes
+
+- [`ac9343c3ed4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac9343c3ed4) - Replaces usage of deprecated design tokens. No visual or functional changes
+- [`ad0e912661a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ad0e912661a) - Styles have been rewritten to be static, in preparation for compiled adoption.
+- [`8940901481d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8940901481d) - [ux] The width of right sidebars with fixed positioning (`<RightSidebar isFixed />`) has been fixed. Previously they had automatic sizing, which led to inconsistencies in appearance between static and fixed positioning.
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
+## 1.1.0
+
+### Minor Changes
+
+- [`567a96da90e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/567a96da90e) - [ux] Instrumented page-layout 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.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.0.7
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump raf-schd to latest (4.0.3), including better TS typings.
+
 ## 1.0.6
 
 ### Patch Changes

package/README.md

@@ -10,7 +10,7 @@ yarn add @atlaskit/page-layout
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/page-layout).
+Detailed docs and example usage can be found [here](https://atlassian.design/components/page-layout/).
 
-To add side navigation, use [@atlaskit/side-navigation](https://atlaskit.atlassian.com/packages/navigation/side-navigation)
-To add top/global navigation, use [@atlaskit/atlassian-navigation](https://atlaskit.atlassian.com/packages/navigation/atlassian-navigation)
+To add side navigation, use [@atlaskit/side-navigation](https://atlassian.design/components/side-navigation/)
+To add top/global navigation, use [@atlaskit/atlassian-navigation](https://atlassian.design/components/atlassian-navigation/)

package/__perf__/utils/perf-example.tsx

@@ -2,6 +2,8 @@
 
 import { css, jsx } from '@emotion/core';
 
+import { token } from '@atlaskit/tokens';
+
 import {
   Content,
   LeftSidebar,
@@ -13,6 +15,15 @@ import {
 import JiraIntegrationExample from './product-integration/AtlassianNavigation';
 import Sidebar from './product-integration/SideNavigation';
 
+const wrapperStyles = css({
+  boxSizing: 'border-box',
+  height: '100%',
+  padding: 8,
+  backgroundColor: token('color.background.neutral.subtle', 'white'),
+  outlineOffset: -4,
+  overflowY: 'auto',
+});
+
 const Wrapper = ({
   borderColor,
   children,
@@ -25,21 +36,27 @@ const Wrapper = ({
   noHorizontalScrollbar?: boolean;
 }) => (
   <div
-    css={{
+    css={wrapperStyles}
+    style={{
       outline: noOutline ? 'none' : `2px dashed ${borderColor}`,
-      outlineOffset: -4,
-      padding: 8,
-      height: '100%',
-      boxSizing: 'border-box',
-      overflowY: 'auto',
       overflowX: noHorizontalScrollbar ? 'hidden' : 'auto',
-      backgroundColor: 'white',
     }}
   >
     {children}
   </div>
 );
 
+const sidebarWrapperStyles = css({
+  height: '100%',
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  nav: {
+    minWidth: 20,
+    overflowX: 'hidden',
+  },
+});
+
+const slotLabelStyles = css({ textAlign: 'center' });
+
 const BasicGrid = () => {
   return (
     <PageLayout>
@@ -48,21 +65,13 @@ const BasicGrid = () => {
       </TopNavigation>
       <Content testId="content">
         <LeftSidebar testId="left-sidebar" isFixed={false} width={450}>
-          <div
-            css={css`
-              height: 100%;
-              & nav {
-                min-width: 20px;
-                overflow-x: hidden;
-              }
-            `}
-          >
+          <div css={sidebarWrapperStyles}>
             <Sidebar />
           </div>
         </LeftSidebar>
         <Main>
-          <Wrapper noOutline borderColor="black">
-            <h3 css={{ textAlign: 'center' }}>Main</h3>
+          <Wrapper noOutline borderColor={token('color.border', 'black')}>
+            <h3 css={slotLabelStyles}>Main</h3>
           </Wrapper>
         </Main>
       </Content>

package/__perf__/utils/product-integration/Create.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 
 import { Create } from '@atlaskit/atlassian-navigation';
+import { token } from '@atlaskit/tokens';
 
 const StyledTooltip = () => (
   <span>
     Create
-    <span style={{ color: 'orange' }}> [c]</span>
+    <span style={{ color: token('color.text.accent.orange', 'orange') }}>
+      {' '}
+      [c]
+    </span>
   </span>
 );
 

package/__perf__/utils/product-integration/NotificationsPopup.tsx

@@ -1,23 +1,24 @@
 /** @jsx jsx */
 import { useState } from 'react';
 
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 
 import { Notifications } from '@atlaskit/atlassian-navigation';
 import { Notifications as NotificationsIframe } from '@atlaskit/atlassian-notifications';
 import { NotificationIndicator } from '@atlaskit/notification-indicator';
 import { NotificationLogClient } from '@atlaskit/notification-log-client';
 import Popup from '@atlaskit/popup';
-const wrapperCSS = {
+
+const wrapperStyles = css({
+  display: 'flex',
   width: 540,
   height: 'calc(100vh - 200px)',
   paddingTop: 18,
   paddingLeft: 18,
-  display: 'flex',
-};
+});
 
 const NotificationsContent = () => (
-  <div css={wrapperCSS}>
+  <div css={wrapperStyles}>
     <NotificationsIframe
       // _url="https://start.stg.atlassian.com/notificationsDrawer/iframe.html?scope=user&product=uchi&locale=en"
       _url="https://start.stg.atlassian.com/notificationsDrawer/iframe.html"

package/__perf__/utils/product-integration/SampleFooter.tsx

@@ -1,38 +1,39 @@
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 
 import { CustomItemComponentProps } from '@atlaskit/menu';
 import { Footer } from '@atlaskit/side-navigation';
 import { B400, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 
 const Container: React.FC<CustomItemComponentProps> = (props) => {
   return <div {...props} />;
 };
 
+const linkStyles = css({
+  color: token('color.text.subtle', N200),
+  fontSize: 12,
+  ':hover': {
+    color: token('color.link', B400),
+    cursor: 'pointer',
+    textDecoration: 'none',
+  },
+});
+
 // This example footer conforms to a design taken from Jira designs found at
 // https://www.figma.com/file/GA22za6unqO2WsBWM0Ddxk/Jira-navigation-3?node-id=124%3A7194
 const ExampleFooter = () => {
-  const linkCSS = {
-    fontSize: 12,
-    color: N200,
-    '&:hover': {
-      color: B400,
-      textDecoration: 'none',
-      cursor: 'pointer',
-    },
-  };
-
   return (
     <Footer
       component={Container}
       description={
         <Fragment>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a css={linkCSS}>Give feedback</a> {' ∙ '}
+          <a css={linkStyles}>Give feedback</a> {' ∙ '}
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <a css={linkCSS}>Learn more</a>
+          <a css={linkStyles}>Learn more</a>
         </Fragment>
       }
     >

package/dist/cjs/common/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LEFT_SIDEBAR_FLYOUT_WIDTH = exports.BANNER_HEIGHT = exports.TOP_NAVIGATION_HEIGHT = exports.RIGHT_SIDEBAR_WIDTH = exports.LEFT_SIDEBAR_WIDTH = exports.RIGHT_PANEL_WIDTH = exports.LEFT_PANEL_WIDTH = exports.PAGE_LAYOUT_CONTAINER_SELECTOR = exports.DEFAULT_I18N_PROPS_SKIP_LINKS = exports.PAGE_LAYOUT_SLOT_SELECTOR = exports.RESIZE_CONTROL_SELECTOR = exports.RESIZE_BUTTON_SELECTOR = exports.GRAB_AREA_SELECTOR = exports.GRAB_AREA_LINE_SELECTOR = exports.IS_FLYOUT_OPEN = exports.IS_SIDEBAR_COLLAPSING = exports.IS_SIDEBAR_DRAGGING = exports.PAGE_LAYOUT_LS_KEY = exports.LEFT_SIDEBAR_EXPANDED_WIDTH = exports.FLYOUT_DELAY = exports.TRANSITION_DURATION = exports.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = exports.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = exports.MIN_LEFT_SIDEBAR_WIDTH = exports.COLLAPSED_LEFT_SIDEBAR_WIDTH = exports.DEFAULT_LEFT_PANEL_WIDTH = exports.DEFAULT_RIGHT_PANEL_WIDTH = exports.DEFAULT_RIGHT_SIDEBAR_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_WIDTH = exports.DEFAULT_TOP_NAVIGATION_HEIGHT = exports.DEFAULT_BANNER_HEIGHT = exports.RIGHT_SIDEBAR = exports.LEFT_SIDEBAR = exports.MAIN = exports.CONTENT = exports.TOP_NAVIGATION = exports.BANNER = exports.RIGHT_PANEL = exports.LEFT_PANEL = exports.DIMENSIONS = exports.VAR_LEFT_SIDEBAR_FLYOUT = exports.VAR_BANNER_HEIGHT = exports.VAR_TOP_NAVIGATION_HEIGHT = exports.VAR_RIGHT_PANEL_WIDTH = exports.VAR_RIGHT_SIDEBAR_WIDTH = exports.VAR_LEFT_SIDEBAR_WIDTH = exports.VAR_LEFT_PANEL_WIDTH = void 0;
+exports.VAR_TOP_NAVIGATION_HEIGHT = exports.VAR_RIGHT_SIDEBAR_WIDTH = exports.VAR_RIGHT_PANEL_WIDTH = exports.VAR_LEFT_SIDEBAR_WIDTH = exports.VAR_LEFT_SIDEBAR_FLYOUT = exports.VAR_LEFT_PANEL_WIDTH = exports.VAR_BANNER_HEIGHT = exports.TRANSITION_DURATION = exports.TOP_NAVIGATION_HEIGHT = exports.TOP_NAVIGATION = exports.RIGHT_SIDEBAR_WIDTH = exports.RIGHT_SIDEBAR = exports.RIGHT_PANEL_WIDTH = exports.RIGHT_PANEL = exports.RESIZE_CONTROL_SELECTOR = exports.RESIZE_BUTTON_SELECTOR = exports.PAGE_LAYOUT_SLOT_SELECTOR = exports.PAGE_LAYOUT_LS_KEY = exports.PAGE_LAYOUT_CONTAINER_SELECTOR = exports.MIN_LEFT_SIDEBAR_WIDTH = exports.MIN_LEFT_SIDEBAR_DRAG_THRESHOLD = exports.MAIN = exports.LEFT_SIDEBAR_WIDTH = exports.LEFT_SIDEBAR_FLYOUT_WIDTH = exports.LEFT_SIDEBAR_EXPANDED_WIDTH = exports.LEFT_SIDEBAR = exports.LEFT_PANEL_WIDTH = exports.LEFT_PANEL = exports.IS_SIDEBAR_DRAGGING = exports.IS_SIDEBAR_COLLAPSING = exports.IS_FLYOUT_OPEN = exports.GRAB_AREA_SELECTOR = exports.GRAB_AREA_LINE_SELECTOR = exports.FLYOUT_DELAY = exports.DIMENSIONS = exports.DEFAULT_TOP_NAVIGATION_HEIGHT = exports.DEFAULT_RIGHT_SIDEBAR_WIDTH = exports.DEFAULT_RIGHT_PANEL_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_WIDTH = exports.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH = exports.DEFAULT_LEFT_PANEL_WIDTH = exports.DEFAULT_I18N_PROPS_SKIP_LINKS = exports.DEFAULT_BANNER_HEIGHT = exports.CONTENT = exports.COLLAPSED_LEFT_SIDEBAR_WIDTH = exports.BANNER_HEIGHT = exports.BANNER = void 0;
 // dimension vars
 var VAR_LEFT_PANEL_WIDTH = 'leftPanelWidth';
 exports.VAR_LEFT_PANEL_WIDTH = VAR_LEFT_PANEL_WIDTH;

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

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useIsSidebarCollapsing", {
+  enumerable: true,
+  get: function get() {
+    return _useIsSidebarCollapsing.default;
+  }
+});
+Object.defineProperty(exports, "useIsSidebarDragging", {
+  enumerable: true,
+  get: function get() {
+    return _useIsSidebarDragging.default;
+  }
+});
+
+var _useIsSidebarCollapsing = _interopRequireDefault(require("./use-is-sidebar-collapsing"));
+
+var _useIsSidebarDragging = _interopRequireDefault(require("./use-is-sidebar-dragging"));

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _constants = require("../constants");
+
+var getIsCollapsing = function getIsCollapsing() {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(_constants.IS_SIDEBAR_COLLAPSING) === 'true';
+};
+
+var useIsSidebarCollapsing = function useIsSidebarCollapsing() {
+  var _useState = (0, _react.useState)(getIsCollapsing),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isCollapsing = _useState2[0],
+      setIsCollapsing = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var observer = new MutationObserver(function () {
+      setIsCollapsing(getIsCollapsing);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [_constants.IS_SIDEBAR_COLLAPSING]
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return isCollapsing;
+};
+
+var _default = useIsSidebarCollapsing;
+exports.default = _default;

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _constants = require("../constants");
+
+var getIsDragging = function getIsDragging() {
+  // SSR bail-out because document is undefined on the server
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  return document.documentElement.getAttribute(_constants.IS_SIDEBAR_DRAGGING) === 'true';
+};
+
+var useIsSidebarDragging = function useIsSidebarDragging() {
+  var _useState = (0, _react.useState)(getIsDragging),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isDragging = _useState2[0],
+      setIsDragging = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var observer = new MutationObserver(function () {
+      setIsDragging(getIsDragging);
+    });
+    observer.observe(document.documentElement, {
+      attributeFilter: [_constants.IS_SIDEBAR_DRAGGING]
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return isDragging;
+};
+
+var _default = useIsSidebarDragging;
+exports.default = _default;

package/dist/cjs/common/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPageLayoutSlotCSSSelector = exports.getPageLayoutSlotSelector = exports.getLeftSidebarPercentage = exports.getLeftPanelWidth = exports.resolveDimension = exports.removeFromGridStateInStorage = exports.getGridStateFromStorage = exports.mergeGridStateIntoStorage = exports.emptyGridState = void 0;
+exports.resolveDimension = exports.removeFromGridStateInStorage = exports.mergeGridStateIntoStorage = exports.getPageLayoutSlotSelector = exports.getPageLayoutSlotCSSSelector = exports.getLeftSidebarPercentage = exports.getLeftPanelWidth = exports.getGridStateFromStorage = exports.emptyGridState = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -15,9 +15,9 @@ var _constants = require("./constants");
 
 var _safeLocalStorage = _interopRequireDefault(require("./safe-local-storage"));
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var emptyGridState = _constants.DIMENSIONS.reduce(function (acc, currentValue) {
   return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, currentValue, 0));

package/dist/cjs/components/index.js

@@ -5,70 +5,70 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "PageLayout", {
+Object.defineProperty(exports, "Banner", {
   enumerable: true,
   get: function get() {
-    return _pageLayout.default;
+    return _banner.default;
   }
 });
-Object.defineProperty(exports, "Main", {
+Object.defineProperty(exports, "Content", {
   enumerable: true,
   get: function get() {
-    return _main.default;
+    return _content.default;
   }
 });
-Object.defineProperty(exports, "RightPanel", {
+Object.defineProperty(exports, "LeftPanel", {
   enumerable: true,
   get: function get() {
-    return _rightPanel.default;
+    return _leftPanel.default;
   }
 });
-Object.defineProperty(exports, "LeftPanel", {
+Object.defineProperty(exports, "LeftSidebar", {
   enumerable: true,
   get: function get() {
-    return _leftPanel.default;
+    return _leftSidebar.default;
   }
 });
-Object.defineProperty(exports, "RightSidebar", {
+Object.defineProperty(exports, "LeftSidebarWithoutResize", {
   enumerable: true,
   get: function get() {
-    return _rightSidebar.default;
+    return _leftSidebarWithoutResize.default;
   }
 });
-Object.defineProperty(exports, "LeftSidebar", {
+Object.defineProperty(exports, "Main", {
   enumerable: true,
   get: function get() {
-    return _leftSidebar.default;
+    return _main.default;
   }
 });
-Object.defineProperty(exports, "LeftSidebarWithoutResize", {
+Object.defineProperty(exports, "PageLayout", {
   enumerable: true,
   get: function get() {
-    return _leftSidebarWithoutResize.default;
+    return _pageLayout.default;
   }
 });
-Object.defineProperty(exports, "Banner", {
+Object.defineProperty(exports, "ResizeControl", {
   enumerable: true,
   get: function get() {
-    return _banner.default;
+    return _resizeControl.default;
   }
 });
-Object.defineProperty(exports, "TopNavigation", {
+Object.defineProperty(exports, "RightPanel", {
   enumerable: true,
   get: function get() {
-    return _topNavigation.default;
+    return _rightPanel.default;
   }
 });
-Object.defineProperty(exports, "Content", {
+Object.defineProperty(exports, "RightSidebar", {
   enumerable: true,
   get: function get() {
-    return _content.default;
+    return _rightSidebar.default;
   }
 });
-Object.defineProperty(exports, "ResizeControl", {
+Object.defineProperty(exports, "TopNavigation", {
   enumerable: true,
   get: function get() {
-    return _resizeControl.default;
+    return _topNavigation.default;
   }
 });
 Object.defineProperty(exports, "useCustomSkipLink", {

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

@@ -15,24 +15,62 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _core = require("@emotion/core");
 
+var _colors = require("@atlaskit/theme/colors");
+
 var _constants = require("../../common/constants");
 
-var _styles = require("./styles");
+var _excluded = ["testId", "isLeftSidebarCollapsed"];
 
-/** @jsx jsx */
+/**
+ * Determines the color of the grab line.
+ *
+ * Used on internal leaf node, so naming collisions won't matter.
+ */
+var varLineColor = '--ds-line';
+var grabAreaStyles = (0, _core.css)({
+  width: 24,
+  height: '100%',
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'ew-resize',
+  '&::-moz-focus-inner': {
+    border: 0
+  },
+  ':focus': {
+    outline: 0
+  },
+  ':enabled': {
+    ':hover': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B100, ")")),
+    ':active, :focus': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
+  }
+});
+var grabAreaCollapsedStyles = (0, _core.css)({
+  padding: 0,
+  backgroundColor: 'transparent',
+  border: 0,
+  cursor: 'default'
+});
+var lineStyles = (0, _core.css)({
+  display: 'block',
+  width: 2,
+  height: '100%',
+  backgroundColor: "var(".concat(varLineColor, ")"),
+  transition: 'background-color 200ms'
+});
 var grabAreaLineSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_LINE_SELECTOR, true);
 var grabAreaSelector = (0, _defineProperty2.default)({}, _constants.GRAB_AREA_SELECTOR, true); // TODO: Consider allowing this to be controlled using arrow keys
 
 var GrabArea = function GrabArea(_ref) {
   var testId = _ref.testId,
       isLeftSidebarCollapsed = _ref.isLeftSidebarCollapsed,
-      rest = (0, _objectWithoutProperties2.default)(_ref, ["testId", "isLeftSidebarCollapsed"]);
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _core.jsx)("button", (0, _extends2.default)({}, grabAreaSelector, {
     "data-testid": testId,
     type: "button",
-    css: (0, _styles.grabAreaCSS)(isLeftSidebarCollapsed)
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles]
   }, rest), (0, _core.jsx)("span", (0, _extends2.default)({
-    css: (0, _styles.lineCSS)(isLeftSidebarCollapsed)
+    css: lineStyles
   }, grabAreaLineSelector)));
 };
 

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

@@ -29,31 +29,33 @@ var _grabArea = _interopRequireDefault(require("./grab-area"));
 
 var _resizeButton2 = _interopRequireDefault(require("./resize-button"));
 
-var _styles = require("./styles");
+var _shadow = _interopRequireDefault(require("./shadow"));
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var cssSelector = (0, _defineProperty2.default)({}, _constants.RESIZE_CONTROL_SELECTOR, true);
+var resizeControlStyles = (0, _core.css)({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: '100%',
+  outline: 'none'
+});
+var showResizeButtonStyles = (0, _core.css)({
+  '--ds--resize-button--opacity': 1
+});
 
-var Shadow = function Shadow(_ref) {
-  var testId = _ref.testId;
-  return (0, _core.jsx)("div", {
-    "data-testid": testId,
-    css: _styles.shadowCSS
-  });
-};
-
-var ResizeControl = function ResizeControl(_ref2) {
-  var testId = _ref2.testId,
-      overrides = _ref2.overrides,
-      _ref2$resizeButtonLab = _ref2.resizeButtonLabel,
-      resizeButtonLabel = _ref2$resizeButtonLab === void 0 ? '' : _ref2$resizeButtonLab,
-      _ref2$resizeGrabAreaL = _ref2.resizeGrabAreaLabel,
-      resizeGrabAreaLabel = _ref2$resizeGrabAreaL === void 0 ? 'Resize' : _ref2$resizeGrabAreaL,
-      onResizeStart = _ref2.onResizeStart,
-      onResizeEnd = _ref2.onResizeEnd;
+var ResizeControl = function ResizeControl(_ref) {
+  var testId = _ref.testId,
+      overrides = _ref.overrides,
+      _ref$resizeButtonLabe = _ref.resizeButtonLabel,
+      resizeButtonLabel = _ref$resizeButtonLabe === void 0 ? '' : _ref$resizeButtonLabe,
+      _ref$resizeGrabAreaLa = _ref.resizeGrabAreaLabel,
+      resizeGrabAreaLabel = _ref$resizeGrabAreaLa === void 0 ? 'Resize' : _ref$resizeGrabAreaLa,
+      onResizeStart = _ref.onResizeStart,
+      onResizeEnd = _ref.onResizeEnd;
 
   var _useContext = (0, _react.useContext)(_sidebarResizeContext.SidebarResizeContext),
       expandLeftSidebar = _useContext.expandLeftSidebar,
@@ -263,8 +265,8 @@ var ResizeControl = function ResizeControl(_ref2) {
   /* eslint-disable jsx-a11y/role-supports-aria-props */
 
   return (0, _core.jsx)("div", (0, _extends2.default)({}, cssSelector, {
-    css: (0, _styles.resizeControlCSS)(isGrabAreaFocused, isLeftSidebarCollapsed)
-  }), (0, _core.jsx)(Shadow, {
+    css: [resizeControlStyles, (isGrabAreaFocused || isLeftSidebarCollapsed) && showResizeButtonStyles]
+  }), (0, _core.jsx)(_shadow.default, {
     testId: testId && "".concat(testId, "-shadow")
   }), (0, _core.jsx)(_grabArea.default, {
     role: "separator",