@atlaskit/page-layout 2.0.2 → 2.1.0

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/resize-control/grab-area.js +7 -1
  3. package/dist/es2019/components/resize-control/grab-area.js +7 -1
  4. package/dist/esm/components/resize-control/grab-area.js +7 -1
  5. package/package.json +6 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/page-layout
2
2
 
3
+ ## 2.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#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
8
+
3
9
  ## 2.0.2
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/components/resize-control/grab-area.js CHANGED
@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
9
9
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
  var _react = require("@emotion/react");
12
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
13
  var _colors = require("@atlaskit/theme/colors");
13
14
  var _constants = require("../../common/constants");
14
15
  var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollapsed", "label", "leftSidebarPercentageExpanded", "onKeyDown", "onMouseDown", "onBlur", "onFocus", "ref"];
@@ -35,6 +36,11 @@ var grabAreaStyles = (0, _react.css)({
35
36
  },
36
37
  ':enabled:hover, :enabled:focus, :enabled:active': (0, _defineProperty2.default)({}, varLineColor, "var(--ds-border-selected, ".concat(_colors.B200, ")"))
37
38
  });
39
+ var grabAreaReducedHeightStyles = (0, _react.css)({
40
+ height: "calc(100% - ".concat("var(--ds-space-600, 3rem)", " * 2)"),
41
+ position: 'absolute',
42
+ insetBlockEnd: 0
43
+ });
38
44
  var grabAreaCollapsedStyles = (0, _react.css)({
39
45
  padding: 0,
40
46
  backgroundColor: 'transparent',
@@ -76,7 +82,7 @@ var GrabArea = function GrabArea(_ref) {
76
82
  // usability.
77
83
  ,
78
84
  role: "slider",
79
- css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
85
+ css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.page-layout-resize-button-fix_u0qxv') && isLeftSidebarCollapsed && grabAreaReducedHeightStyles],
80
86
  "aria-orientation": "vertical",
81
87
  "aria-valuenow": leftSidebarPercentageExpanded,
82
88
  "aria-valuemin": 0,
package/dist/es2019/components/resize-control/grab-area.js CHANGED
@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
3
3
  /** @jsx jsx */
4
4
 
5
5
  import { css, jsx } from '@emotion/react';
6
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
7
  import { B200 } from '@atlaskit/theme/colors';
7
8
  import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
8
9
  /**
@@ -28,6 +29,11 @@ const grabAreaStyles = css({
28
29
  [varLineColor]: `var(--ds-border-selected, ${B200})`
29
30
  }
30
31
  });
32
+ const grabAreaReducedHeightStyles = css({
33
+ height: `calc(100% - ${"var(--ds-space-600, 3rem)"} * 2)`,
34
+ position: 'absolute',
35
+ insetBlockEnd: 0
36
+ });
31
37
  const grabAreaCollapsedStyles = css({
32
38
  padding: 0,
33
39
  backgroundColor: 'transparent',
@@ -72,7 +78,7 @@ const GrabArea = ({
72
78
  // usability.
73
79
  ,
74
80
  role: "slider",
75
- css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
81
+ css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles, getBooleanFF('platform.design-system-team.page-layout-resize-button-fix_u0qxv') && isLeftSidebarCollapsed && grabAreaReducedHeightStyles],
76
82
  "aria-orientation": "vertical",
77
83
  "aria-valuenow": leftSidebarPercentageExpanded,
78
84
  "aria-valuemin": 0,
package/dist/esm/components/resize-control/grab-area.js CHANGED
@@ -6,6 +6,7 @@ var _excluded = ["testId", "valueTextLabel", "isDisabled", "isLeftSidebarCollaps
6
6
  /** @jsx jsx */
7
7
 
8
8
  import { css, jsx } from '@emotion/react';
9
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
10
  import { B200 } from '@atlaskit/theme/colors';
10
11
  import { GRAB_AREA_LINE_SELECTOR, GRAB_AREA_SELECTOR } from '../../common/constants';
11
12
  /**
@@ -29,6 +30,11 @@ var grabAreaStyles = css({
29
30
  },
30
31
  ':enabled:hover, :enabled:focus, :enabled:active': _defineProperty({}, varLineColor, "var(--ds-border-selected, ".concat(B200, ")"))
31
32
  });
33
+ var grabAreaReducedHeightStyles = css({
34
+ height: "calc(100% - ".concat("var(--ds-space-600, 3rem)", " * 2)"),
35
+ position: 'absolute',
36
+ insetBlockEnd: 0
37
+ });
32
38
  var grabAreaCollapsedStyles = css({
33
39
  padding: 0,
34
40
  backgroundColor: 'transparent',
@@ -70,7 +76,7 @@ var GrabArea = function GrabArea(_ref) {
70
76
  // usability.
71
77
  ,
72
78
  role: "slider",
73
- css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles],
79
+ css: [grabAreaStyles, isLeftSidebarCollapsed && grabAreaCollapsedStyles, getBooleanFF('platform.design-system-team.page-layout-resize-button-fix_u0qxv') && isLeftSidebarCollapsed && grabAreaReducedHeightStyles],
74
80
  "aria-orientation": "vertical",
75
81
  "aria-valuenow": leftSidebarPercentageExpanded,
76
82
  "aria-valuemin": 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/page-layout",
3
- "version": "2.0.2",
3
+ "version": "2.1.0",
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.15.0",
43
+ "@atlaskit/primitives": "^1.16.0",
44
44
  "@atlaskit/theme": "^12.6.0",
45
- "@atlaskit/tokens": "^1.30.0",
45
+ "@atlaskit/tokens": "^1.33.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "@emotion/react": "^11.7.1",
48
48
  "bind-event-listener": "^2.1.1",
@@ -67,7 +67,6 @@
67
67
  "@atlaskit/ssr": "*",
68
68
  "@atlaskit/tooltip": "*",
69
69
  "@atlaskit/visual-regression": "*",
70
- "@atlaskit/webdriver-runner": "*",
71
70
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
72
71
  "@testing-library/dom": "^8.17.1",
73
72
  "@testing-library/react": "^12.1.5",
@@ -114,6 +113,9 @@
114
113
  "platform-feature-flags": {
115
114
  "platform.design-system-team.responsive-page-layout-left-sidebar_p8r7g": {
116
115
  "type": "boolean"
116
+ },
117
+ "platform.design-system-team.page-layout-resize-button-fix_u0qxv": {
118
+ "type": "boolean"
117
119
  }
118
120
  }
119
121
  }