@atlaskit/menu 1.3.11 → 1.3.12

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/menu
2
2
 
3
+ ## 1.3.12
4
+
5
+ ### Patch Changes
6
+
7
+ - [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
8
+
3
9
  ## 1.3.11
4
10
 
5
11
  ### Patch Changes
@@ -28,11 +28,11 @@ var defaultRender = function defaultRender(Component, props) {
28
28
 
29
29
  var gridSize = (0, _constants.gridSize)();
30
30
  var fontSize = (0, _constants.fontSize)();
31
- var itemTopBottomPadding = gridSize;
32
- var itemSidePadding = gridSize * 2.5;
33
- var itemElemSpacing = gridSize * 1.5;
31
+ var itemTopBottomPadding = "var(--ds-scale-100, 8px)";
32
+ var itemSidePadding = "var(--ds-scale-250, 20px)";
33
+ var itemElemSpacing = "var(--ds-scale-150, 12px)";
34
34
  var itemDescriptionSpacing = gridSize * 0.375;
35
- var itemMinHeight = gridSize * 5;
35
+ var itemMinHeight = "var(--ds-scale-500, 40px)";
36
36
  var beforeElementStyles = (0, _core.css)({
37
37
  display: 'flex',
38
38
  marginRight: itemElemSpacing,
@@ -75,8 +75,9 @@ var primitiveStyles = (0, _core.css)({
75
75
  boxSizing: 'border-box',
76
76
  width: '100%',
77
77
  minHeight: itemMinHeight,
78
- margin: 0,
79
- padding: "".concat(itemTopBottomPadding, "px ").concat(itemSidePadding, "px"),
78
+ // TODO Delete this comment after verifying spacing token -> previous value `0`
79
+ margin: "var(--ds-scale-0, 0px)",
80
+ padding: "".concat(itemTopBottomPadding, " ").concat(itemSidePadding),
80
81
  alignItems: 'center',
81
82
  border: 0,
82
83
  fontSize: fontSize,
@@ -13,17 +13,15 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
13
13
 
14
14
  var _colors = require("@atlaskit/theme/colors");
15
15
 
16
- var _constants = require("@atlaskit/theme/constants");
17
-
18
16
  var _skeletonShimmer = _interopRequireDefault(require("../internal/components/skeleton-shimmer"));
19
17
 
20
18
  /** @jsx jsx */
21
19
  var skeletonStyles = (0, _core.css)({
22
- padding: "0 ".concat((0, _constants.gridSize)() * 2.5, "px"),
20
+ padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-250, 20px)"),
23
21
  '::after': {
24
22
  display: 'block',
25
23
  width: '30%',
26
- height: (0, _constants.gridSize)(),
24
+ height: "var(--ds-scale-100, 8px)",
27
25
  backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")"),
28
26
  borderRadius: 100,
29
27
  content: '""'
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/menu",
3
- "version": "1.3.11",
3
+ "version": "1.3.12",
4
4
  "sideEffects": false
5
5
  }
@@ -11,11 +11,11 @@ jsx(Component, props);
11
11
 
12
12
  const gridSize = gridSizeFn();
13
13
  const fontSize = fontSizeFn();
14
- const itemTopBottomPadding = gridSize;
15
- const itemSidePadding = gridSize * 2.5;
16
- const itemElemSpacing = gridSize * 1.5;
14
+ const itemTopBottomPadding = "var(--ds-scale-100, 8px)";
15
+ const itemSidePadding = "var(--ds-scale-250, 20px)";
16
+ const itemElemSpacing = "var(--ds-scale-150, 12px)";
17
17
  const itemDescriptionSpacing = gridSize * 0.375;
18
- const itemMinHeight = gridSize * 5;
18
+ const itemMinHeight = "var(--ds-scale-500, 40px)";
19
19
  const beforeElementStyles = css({
20
20
  display: 'flex',
21
21
  marginRight: itemElemSpacing,
@@ -58,8 +58,9 @@ const primitiveStyles = css({
58
58
  boxSizing: 'border-box',
59
59
  width: '100%',
60
60
  minHeight: itemMinHeight,
61
- margin: 0,
62
- padding: `${itemTopBottomPadding}px ${itemSidePadding}px`,
61
+ // TODO Delete this comment after verifying spacing token -> previous value `0`
62
+ margin: "var(--ds-scale-0, 0px)",
63
+ padding: `${itemTopBottomPadding} ${itemSidePadding}`,
63
64
  alignItems: 'center',
64
65
  border: 0,
65
66
  fontSize: fontSize,
@@ -2,14 +2,13 @@
2
2
  import { css, jsx } from '@emotion/core';
3
3
  import noop from '@atlaskit/ds-lib/noop';
4
4
  import { N20A } from '@atlaskit/theme/colors';
5
- import { gridSize } from '@atlaskit/theme/constants';
6
5
  import SkeletonShimmer from '../internal/components/skeleton-shimmer';
7
6
  const skeletonStyles = css({
8
- padding: `0 ${gridSize() * 2.5}px`,
7
+ padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-250, 20px)"}`,
9
8
  '::after': {
10
9
  display: 'block',
11
10
  width: '30%',
12
- height: gridSize(),
11
+ height: "var(--ds-scale-100, 8px)",
13
12
  backgroundColor: `var(--ds-skeleton, ${N20A})`,
14
13
  borderRadius: 100,
15
14
  content: '""'
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/menu",
3
- "version": "1.3.11",
3
+ "version": "1.3.12",
4
4
  "sideEffects": false
5
5
  }
@@ -14,11 +14,11 @@ var defaultRender = function defaultRender(Component, props) {
14
14
 
15
15
  var gridSize = gridSizeFn();
16
16
  var fontSize = fontSizeFn();
17
- var itemTopBottomPadding = gridSize;
18
- var itemSidePadding = gridSize * 2.5;
19
- var itemElemSpacing = gridSize * 1.5;
17
+ var itemTopBottomPadding = "var(--ds-scale-100, 8px)";
18
+ var itemSidePadding = "var(--ds-scale-250, 20px)";
19
+ var itemElemSpacing = "var(--ds-scale-150, 12px)";
20
20
  var itemDescriptionSpacing = gridSize * 0.375;
21
- var itemMinHeight = gridSize * 5;
21
+ var itemMinHeight = "var(--ds-scale-500, 40px)";
22
22
  var beforeElementStyles = css({
23
23
  display: 'flex',
24
24
  marginRight: itemElemSpacing,
@@ -61,8 +61,9 @@ var primitiveStyles = css({
61
61
  boxSizing: 'border-box',
62
62
  width: '100%',
63
63
  minHeight: itemMinHeight,
64
- margin: 0,
65
- padding: "".concat(itemTopBottomPadding, "px ").concat(itemSidePadding, "px"),
64
+ // TODO Delete this comment after verifying spacing token -> previous value `0`
65
+ margin: "var(--ds-scale-0, 0px)",
66
+ padding: "".concat(itemTopBottomPadding, " ").concat(itemSidePadding),
66
67
  alignItems: 'center',
67
68
  border: 0,
68
69
  fontSize: fontSize,
@@ -2,14 +2,13 @@
2
2
  import { css, jsx } from '@emotion/core';
3
3
  import noop from '@atlaskit/ds-lib/noop';
4
4
  import { N20A } from '@atlaskit/theme/colors';
5
- import { gridSize } from '@atlaskit/theme/constants';
6
5
  import SkeletonShimmer from '../internal/components/skeleton-shimmer';
7
6
  var skeletonStyles = css({
8
- padding: "0 ".concat(gridSize() * 2.5, "px"),
7
+ padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-250, 20px)"),
9
8
  '::after': {
10
9
  display: 'block',
11
10
  width: '30%',
12
- height: gridSize(),
11
+ height: "var(--ds-scale-100, 8px)",
13
12
  backgroundColor: "var(--ds-skeleton, ".concat(N20A, ")"),
14
13
  borderRadius: 100,
15
14
  content: '""'
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/menu",
3
- "version": "1.3.11",
3
+ "version": "1.3.12",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/menu",
3
- "version": "1.3.11",
3
+ "version": "1.3.12",
4
4
  "description": "A collection of composable menu components that can be used anywhere.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -15,13 +15,15 @@
15
15
  "typesVersions": {
16
16
  ">=4.0 <4.5": {
17
17
  "*": [
18
- "dist/types-ts4.0/*"
18
+ "dist/types-ts4.0/*",
19
+ "dist/types-ts4.0/index.d.ts"
19
20
  ]
20
21
  }
21
22
  },
22
23
  "sideEffects": false,
23
24
  "atlaskit:src": "src/index.tsx",
24
25
  "atlassian": {
26
+ "disableProductCI": true,
25
27
  "team": "Design System Team",
26
28
  "releaseModel": "scheduled",
27
29
  "website": {
@@ -96,6 +98,7 @@
96
98
  "emotion"
97
99
  ],
98
100
  "analytics": "analytics-next",
101
+ "design-tokens": "spacing",
99
102
  "theming": "tokens",
100
103
  "deprecation": "no-deprecated-imports"
101
104
  }