@atlaskit/page-layout 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/slots/main.js +4 -4
  3. package/dist/es2019/components/slots/main.js +4 -4
  4. package/dist/esm/components/slots/main.js +4 -4
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/page-layout
2
2
 
3
+ ## 2.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#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
8
+
3
9
  ## 2.0.1
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/components/slots/main.js CHANGED
@@ -21,10 +21,8 @@ var _slotFocusRing = _interopRequireDefault(require("./internal/slot-focus-ring"
21
21
  var prefersReducedMotionStyles = (0, _react2.css)((0, _accessibility.prefersReducedMotion)());
22
22
  var mainStyles = (0, _react2.css)({
23
23
  minWidth: 0,
24
- marginLeft: 0,
25
- // Prevent flex container from blowing up when there's super wide content.
26
24
  flexGrow: 1,
27
- // Transition negative margin on main in sync with the increase in width of leftSidebar.
25
+ marginInlineStart: 0,
28
26
  transition: "margin-left ".concat(_constants.TRANSITION_DURATION, "ms ").concat(_curves.easeOut, " 0s")
29
27
  });
30
28
  var draggingStyles = (0, _react2.css)({
@@ -40,7 +38,7 @@ var draggingStyles = (0, _react2.css)({
40
38
  */
41
39
  var flyoutStyles = (0, _react2.css)({
42
40
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
43
- 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)")
41
+ 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)")
44
42
  });
45
43
 
46
44
  /**
@@ -65,6 +63,8 @@ var Main = function Main(props) {
65
63
  return (0, _react2.jsx)(_slotFocusRing.default, null, function (_ref) {
66
64
  var className = _ref.className;
67
65
  return (0, _react2.jsx)("div", (0, _extends2.default)({
66
+ // Using ARIA role instead of <main> tag to avoid any issues with downstream implementations.
67
+ role: "main",
68
68
  "data-testid": testId,
69
69
  css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
70
70
  className: className,
package/dist/es2019/components/slots/main.js CHANGED
@@ -14,10 +14,8 @@ import SlotFocusRing from './internal/slot-focus-ring';
14
14
  const prefersReducedMotionStyles = css(prefersReducedMotion());
15
15
  const mainStyles = css({
16
16
  minWidth: 0,
17
- marginLeft: 0,
18
- // Prevent flex container from blowing up when there's super wide content.
19
17
  flexGrow: 1,
20
- // Transition negative margin on main in sync with the increase in width of leftSidebar.
18
+ marginInlineStart: 0,
21
19
  transition: `margin-left ${TRANSITION_DURATION}ms ${easeOut} 0s`
22
20
  });
23
21
  const draggingStyles = css({
@@ -33,7 +31,7 @@ const draggingStyles = css({
33
31
  */
34
32
  const flyoutStyles = css({
35
33
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
36
- marginLeft: `calc(-1 * var(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${COLLAPSED_LEFT_SIDEBAR_WIDTH}px)`
34
+ marginInlineStart: `calc(-1 * var(--${VAR_LEFT_SIDEBAR_FLYOUT}, ${DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH}px) + ${COLLAPSED_LEFT_SIDEBAR_WIDTH}px)`
37
35
  });
38
36
 
39
37
  /**
@@ -62,6 +60,8 @@ const Main = props => {
62
60
  return jsx(SlotFocusRing, null, ({
63
61
  className
64
62
  }) => jsx("div", _extends({
63
+ // Using ARIA role instead of <main> tag to avoid any issues with downstream implementations.
64
+ role: "main",
65
65
  "data-testid": testId,
66
66
  css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
67
67
  className: className,
package/dist/esm/components/slots/main.js CHANGED
@@ -14,10 +14,8 @@ import SlotFocusRing from './internal/slot-focus-ring';
14
14
  var prefersReducedMotionStyles = css(prefersReducedMotion());
15
15
  var mainStyles = css({
16
16
  minWidth: 0,
17
- marginLeft: 0,
18
- // Prevent flex container from blowing up when there's super wide content.
19
17
  flexGrow: 1,
20
- // Transition negative margin on main in sync with the increase in width of leftSidebar.
18
+ marginInlineStart: 0,
21
19
  transition: "margin-left ".concat(TRANSITION_DURATION, "ms ").concat(easeOut, " 0s")
22
20
  });
23
21
  var draggingStyles = css({
@@ -33,7 +31,7 @@ var draggingStyles = css({
33
31
  */
34
32
  var flyoutStyles = css({
35
33
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
36
- marginLeft: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
34
+ marginInlineStart: "calc(-1 * var(--".concat(VAR_LEFT_SIDEBAR_FLYOUT, ", ").concat(DEFAULT_LEFT_SIDEBAR_FLYOUT_WIDTH, "px) + ").concat(COLLAPSED_LEFT_SIDEBAR_WIDTH, "px)")
37
35
  });
38
36
 
39
37
  /**
@@ -58,6 +56,8 @@ var Main = function Main(props) {
58
56
  return jsx(SlotFocusRing, null, function (_ref) {
59
57
  var className = _ref.className;
60
58
  return jsx("div", _extends({
59
+ // Using ARIA role instead of <main> tag to avoid any issues with downstream implementations.
60
+ role: "main",
61
61
  "data-testid": testId,
62
62
  css: [mainStyles, isDragging && draggingStyles, isFlyoutOpen && !isFixed && flyoutStyles, prefersReducedMotionStyles],
63
63
  className: className,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "2.0.1",
3
+ "version": "2.0.2",
4
4
  "description": "A collection of components which let you compose an application's page layout.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -40,9 +40,9 @@
40
40
  "@atlaskit/icon": "^22.0.0",
41
41
  "@atlaskit/motion": "^1.5.0",
42
42
  "@atlaskit/platform-feature-flags": "^0.2.0",
43
- "@atlaskit/primitives": "^1.13.0",
43
+ "@atlaskit/primitives": "^1.15.0",
44
44
  "@atlaskit/theme": "^12.6.0",
45
- "@atlaskit/tokens": "^1.29.0",
45
+ "@atlaskit/tokens": "^1.30.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "@emotion/react": "^11.7.1",
48
48
  "bind-event-listener": "^2.1.1",
@@ -55,7 +55,7 @@
55
55
  "devDependencies": {
56
56
  "@af/accessibility-testing": "*",
57
57
  "@af/integration-testing": "*",
58
- "@atlaskit/atlassian-navigation": "^2.10.0",
58
+ "@atlaskit/atlassian-navigation": "^3.0.0",
59
59
  "@atlaskit/atlassian-notifications": "^0.4.0",
60
60
  "@atlaskit/drawer": "^7.6.0",
61
61
  "@atlaskit/logo": "^13.14.0",