@atlaskit/page-layout 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/page-layout
 
+## 2.1.0
+
+### Minor Changes
+
+- [#64842](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64842) [`664ecae2338b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/664ecae2338b) - Add PFF to reduce height of side bar grab area when collapsed in order to give the resize button more room and prevent accidental hovers causing the side bar to fly out
+
+## 2.0.2
+
+### Patch Changes
+
+- [#61821](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61821) [`bd212363ecc2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bd212363ecc2) - Add role=main to main slot
+
 ## 2.0.1
 
 ### Patch Changes

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

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../common/constants");
 var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus", "ref"];
@@ -35,6 +36,11 @@ var grabAreaStyles = (0, _react.css)({
   },
   ':enabled:hover, :enabled:focus, :enabled:active': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
 });
+var grabAreaReducedHeightStyles = (0, _react.css)({
+  height: "calc(100% - ".concat("var(--ds-space-600, 3rem)", " * 2)"),
+  position: 'absolute',
+  insetBlockEnd: 0
+});
 var grabAreaCollapsedStyles = (0, _react.css)({
   padding: 0,
   backgroundColor: 'transparent',
@@ -76,7 +82,7 @@ var GrabArea = function GrabArea(_ref) {
     // usability.
     ,
     role: "slider",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.page-layout-resize-button-fix_u0qxv') && isLeftSidebarCollapsed && grabAreaReducedHeightStyles],
     "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,

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

@@ -21,10 +21,8 @@ var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"
 var prefersReducedMotionStyles = (0, _react2.css)((0, _accessibility.prefersReducedMotion)());
 var mainStyles = (0, _react2.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.
+  marginInlineStart: 0,
   transition: "margin-left ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_curves.easeOut, " 0s")
 });
 var draggingStyles = (0, _react2.css)({
@@ -40,7 +38,7 @@ var draggingStyles = (0, _react2.css)({
  */
 var flyoutStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  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)")
+  marginInlineStart: "calc(-1 * var(--".concat(_constants.VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(_constants.DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(_constants.COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
 
 /**
@@ -65,6 +63,8 @@ var Main = function Main(props) {
   return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
     var className = _ref.className;
     return (0, _react2.jsx)("div", (0, _extends2.default)({
+      // Using ARIA role instead of <main> tag to avoid any issues with downstream implementations.
+      role: "main",
       "data-testid": testId,
       css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
       className: className,

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
 /**
@@ -28,6 +29,11 @@ const grabAreaStyles = css({
     [varLineColor]: `var(--ds-border-selected, ${B200})`
   }
 });
+const grabAreaReducedHeightStyles = css({
+  height: `calc(100% - ${"var(--ds-space-600, 3rem)"} * 2)`,
+  position: 'absolute',
+  insetBlockEnd: 0
+});
 const grabAreaCollapsedStyles = css({
   padding: 0,
   backgroundColor: 'transparent',
@@ -72,7 +78,7 @@ const GrabArea = ({
   // usability.
   ,
   role: "slider",
-  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+  css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles, getBooleanFF('platform.design-system-team.page-layout-resize-button-fix_u0qxv') && isLeftSidebarCollapsed && grabAreaReducedHeightStyles],
   "aria-orientation": "vertical",
   "aria-valuenow": leftSidebarPercentageExpanded,
   "aria-valuemin": 0,

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

@@ -14,10 +14,8 @@ import SlotFocusRing from './internal/slot-focus-ring';
 const prefersReducedMotionStyles = css(prefersReducedMotion());
 const mainStyles = 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.
+  marginInlineStart: 0,
   transition: `margin-left ${TRANSITION_DURATION}ms ${easeOut} 0s`
 });
 const draggingStyles = css({
@@ -33,7 +31,7 @@ const draggingStyles = css({
  */
 const flyoutStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginLeft: `calc(-1 * var(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${COLLAPSED_LEFT_SIDEBAR_WIDTH}px)`
+  marginInlineStart: `calc(-1 * var(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${COLLAPSED_LEFT_SIDEBAR_WIDTH}px)`
 });
 
 /**
@@ -62,6 +60,8 @@ const Main = props => {
   return jsx(SlotFocusRing, null, ({
     className
   }) => jsx("div", _extends({
+    // Using ARIA role instead of <main> tag to avoid any issues with downstream implementations.
+    role: "main",
     "data-testid": testId,
     css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
     className: className,

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

@@ -6,6 +6,7 @@ var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollaps
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B200 } from '@atlaskit/theme/colors';
 import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
 /**
@@ -29,6 +30,11 @@ var grabAreaStyles = css({
   },
   ':enabled:hover, :enabled:focus, :enabled:active': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B200, ")"))
 });
+var grabAreaReducedHeightStyles = css({
+  height: "calc(100% - ".concat("var(--ds-space-600, 3rem)", " * 2)"),
+  position: 'absolute',
+  insetBlockEnd: 0
+});
 var grabAreaCollapsedStyles = css({
   padding: 0,
   backgroundColor: 'transparent',
@@ -70,7 +76,7 @@ var GrabArea = function GrabArea(_ref) {
     // usability.
     ,
     role: "slider",
-    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
+    css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles, getBooleanFF('platform.design-system-team.page-layout-resize-button-fix_u0qxv') && isLeftSidebarCollapsed && grabAreaReducedHeightStyles],
     "aria-orientation": "vertical",
     "aria-valuenow": leftSidebarPercentageExpanded,
     "aria-valuemin": 0,

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

@@ -14,10 +14,8 @@ import SlotFocusRing from './internal/slot-focus-ring';
 var prefersReducedMotionStyles = css(prefersReducedMotion());
 var mainStyles = 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.
+  marginInlineStart: 0,
   transition: "margin-left ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
 });
 var draggingStyles = css({
@@ -33,7 +31,7 @@ var draggingStyles = css({
  */
 var flyoutStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginLeft: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
+  marginInlineStart: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
 });
 
 /**
@@ -58,6 +56,8 @@ var Main = function Main(props) {
   return jsx(SlotFocusRing, null, function (_ref) {
     var className = _ref.className;
     return jsx("div", _extends({
+      // Using ARIA role instead of <main> tag to avoid any issues with downstream implementations.
+      role: "main",
       "data-testid": testId,
       css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
       className: className,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/page-layout",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A collection of components which let you compose an application's page layout.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,9 +40,9 @@
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.13.0",
+    "@atlaskit/primitives": "^1.16.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -55,7 +55,7 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
-    "@atlaskit/atlassian-navigation": "^2.10.0",
+    "@atlaskit/atlassian-navigation": "^3.0.0",
     "@atlaskit/atlassian-notifications": "^0.4.0",
     "@atlaskit/drawer": "^7.6.0",
     "@atlaskit/logo": "^13.14.0",
@@ -67,7 +67,6 @@
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
@@ -114,6 +113,9 @@
   "platform-feature-flags": {
     "platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g": {
       "type": "boolean"
+    },
+    "platform.design-system-team.page-layout-resize-button-fix_u0qxv": {
+      "type": "boolean"
     }
   }
 }