@atlaskit/page-layout 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/page-layout
 
+## 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
+
+- [#58110](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58110) [`9e7a86f76af4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9e7a86f76af4) - Resizing the Sidebar can now only be triggered via left-click (main button click). This prevents situations where right-clicking the resize button unexpectedly starts resizing the Sidebar.
+
 ## 2.0.0
 
 ### Major Changes

package/__perf__/utils/product-integration/atlassian-navigation.tsx

@@ -19,6 +19,13 @@ import { HelpPopup } from './help-popup';
 import { NotificationsPopup } from './notifications-popup';
 import { ProfilePopup } from './profile-popup';
 
+const drawerLabelText = {
+  search: 'Search drawer',
+  settings: 'Settings drawer',
+};
+
+const { search, settings } = drawerLabelText;
+
 const ProductHomeExample = () => (
   <ProductHome icon={JiraIcon} logo={JiraLogo} siteTitle="Extranet" />
 );
@@ -43,8 +50,8 @@ const SearchDrawer = () => {
         tooltip="Search"
         label="Search"
       />
-      <Drawer isOpen={isOpen} onClose={onClose}>
-        <div>search drawer</div>
+      <Drawer label={search} isOpen={isOpen} onClose={onClose}>
+        <div>{search}</div>
       </Drawer>
     </Fragment>
   );
@@ -64,8 +71,8 @@ const SettingsDrawer = () => {
   return (
     <Fragment>
       <Settings isSelected={isOpen} onClick={onClick} tooltip="Settings" />
-      <Drawer isOpen={isOpen} onClose={onClose}>
-        settings drawer
+      <Drawer label={settings} isOpen={isOpen} onClose={onClose}>
+        {settings}
       </Drawer>
     </Fragment>
   );

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

@@ -104,8 +104,11 @@ var ResizeControl = function ResizeControl(_ref) {
       return;
     }
 
-    // TODO: should only a primary pointer be able to start a resize?
-    // Keeping as is for now, but worth considering
+    // Only allow left (primary) clicks to trigger resize as we've received
+    // bug reports about right click unexpectedly beginning a resize.
+    if (event.button !== 0) {
+      return;
+    }
 
     // It is possible for a mousedown to fire during a resize
     // Example: the user presses another pointer button while dragging

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/index.js

@@ -96,8 +96,11 @@ const ResizeControl = ({
       return;
     }
 
-    // TODO: should only a primary pointer be able to start a resize?
-    // Keeping as is for now, but worth considering
+    // Only allow left (primary) clicks to trigger resize as we've received
+    // bug reports about right click unexpectedly beginning a resize.
+    if (event.button !== 0) {
+      return;
+    }
 
     // It is possible for a mousedown to fire during a resize
     // Example: the user presses another pointer button while dragging

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/index.js

@@ -100,8 +100,11 @@ var ResizeControl = function ResizeControl(_ref) {
       return;
     }
 
-    // TODO: should only a primary pointer be able to start a resize?
-    // Keeping as is for now, but worth considering
+    // Only allow left (primary) clicks to trigger resize as we've received
+    // bug reports about right click unexpectedly beginning a resize.
+    if (event.button !== 0) {
+      return;
+    }
 
     // It is possible for a mousedown to fire during a resize
     // Example: the user presses another pointer button while dragging

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.0",
+  "version": "2.0.2",
   "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.12.0",
+    "@atlaskit/primitives": "^1.15.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.29.0",
+    "@atlaskit/tokens": "^1.30.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -54,7 +54,8 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
-    "@atlaskit/atlassian-navigation": "^2.9.0",
+    "@af/integration-testing": "*",
+    "@atlaskit/atlassian-navigation": "^3.0.0",
     "@atlaskit/atlassian-notifications": "^0.4.0",
     "@atlaskit/drawer": "^7.6.0",
     "@atlaskit/logo": "^13.14.0",