@atlaskit/menu 1.4.8 → 1.4.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 1.4.10
+
+### Patch Changes
+
+- [`63c2f0b3f96`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63c2f0b3f96) - Internal changes to use spacing tokens. There is no expected behaviour or visual change.
+
+## 1.4.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.4.8
 
 ### Patch Changes

package/dist/cjs/menu-item/heading-item.js

@@ -11,15 +11,12 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 var _excluded = ["children", "testId", "id", "cssFn"];
-var gridSize = (0, _constants.gridSize)();
-var itemSidePadding = gridSize * 2.5;
 var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
 var headingStyles = (0, _react2.css)({
-  padding: "0 ".concat(itemSidePadding, "px"),
+  padding: "0 ".concat("var(--ds-space-250, 20px)"),
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: "var(--ds-font-weight-bold, 700)",

package/dist/cjs/menu-item/skeleton-item.js

@@ -17,7 +17,6 @@ var borderRadius = (0, _constants.borderRadius)();
 var itemElemSpacing = gridSize * 1.5;
 var itemExpectedElemSize = gridSize * 3;
 var itemMinHeight = gridSize * 5;
-var itemPadding = gridSize * 2.5;
 var skeletonItemElemSize = gridSize * 2.5;
 var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 var skeletonTextBorderRadius = 100;
@@ -26,7 +25,7 @@ var skeletonColor = "var(--ds-skeleton, ".concat(_colors.N20A, ")");
 var skeletonStyles = (0, _react.css)({
   display: 'flex',
   minHeight: itemMinHeight,
-  padding: "0 ".concat(itemPadding, "px"),
+  padding: "0 ".concat("var(--ds-space-250, 20px)"),
   alignItems: 'center',
   pointerEvents: 'none',
   '::after': {
@@ -34,6 +33,7 @@ var skeletonStyles = (0, _react.css)({
     // This is a little bespoke but we need to push everything down 1px
     // because the skeleton content should align to the bottom of the text.
     // Confirm VR test failures before accepting a change.
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginTop: 1,
     backgroundColor: skeletonColor,
     borderRadius: skeletonTextBorderRadius,
@@ -69,7 +69,9 @@ var beforeElementStyles = (0, _react.css)({
   '::before': {
     width: skeletonItemElemSize,
     height: skeletonItemElemSize,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginRight: itemElemSpacing + itemElemSkeletonOffset,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginLeft: itemElemSkeletonOffset,
     flexShrink: 0,
     backgroundColor: skeletonColor,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.4.8",
+	"version": "1.4.10",
 	"sideEffects": false
 }

package/dist/es2019/menu-item/heading-item.js

@@ -4,14 +4,11 @@ import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { N300 } from '@atlaskit/theme/colors';
-import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-const gridSize = gridSizeFn();
-const itemSidePadding = gridSize * 2.5;
 const itemHeadingContentHeight = headingSizes.h100.lineHeight;
 const itemHeadingFontSize = headingSizes.h100.size;
 const headingStyles = css({
-  padding: `0 ${itemSidePadding}px`,
+  padding: `0 ${"var(--ds-space-250, 20px)"}`,
   color: `var(--ds-text-subtle, ${N300})`,
   fontSize: itemHeadingFontSize,
   fontWeight: "var(--ds-font-weight-bold, 700)",

package/dist/es2019/menu-item/skeleton-item.js

@@ -10,7 +10,6 @@ const borderRadius = borderRadiusFn();
 const itemElemSpacing = gridSize * 1.5;
 const itemExpectedElemSize = gridSize * 3;
 const itemMinHeight = gridSize * 5;
-const itemPadding = gridSize * 2.5;
 const skeletonItemElemSize = gridSize * 2.5;
 const itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 const skeletonTextBorderRadius = 100;
@@ -19,7 +18,7 @@ const skeletonColor = `var(--ds-skeleton, ${N20A})`;
 const skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,
-  padding: `0 ${itemPadding}px`,
+  padding: `0 ${"var(--ds-space-250, 20px)"}`,
   alignItems: 'center',
   pointerEvents: 'none',
   '::after': {
@@ -27,6 +26,7 @@ const skeletonStyles = css({
     // This is a little bespoke but we need to push everything down 1px
     // because the skeleton content should align to the bottom of the text.
     // Confirm VR test failures before accepting a change.
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginTop: 1,
     backgroundColor: skeletonColor,
     borderRadius: skeletonTextBorderRadius,
@@ -62,7 +62,9 @@ const beforeElementStyles = css({
   '::before': {
     width: skeletonItemElemSize,
     height: skeletonItemElemSize,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginRight: itemElemSpacing + itemElemSkeletonOffset,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginLeft: itemElemSkeletonOffset,
     flexShrink: 0,
     backgroundColor: skeletonColor,

package/dist/es2019/menu-section/section.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
 /** @jsx jsx */
 import { forwardRef, Fragment } from 'react';
 import { css, jsx } from '@emotion/react';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.4.8",
+	"version": "1.4.10",
 	"sideEffects": false
 }

package/dist/esm/menu-item/heading-item.js

@@ -6,14 +6,11 @@ import { memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import noop from '@atlaskit/ds-lib/noop';
 import { N300 } from '@atlaskit/theme/colors';
-import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
-var gridSize = gridSizeFn();
-var itemSidePadding = gridSize * 2.5;
 var itemHeadingContentHeight = headingSizes.h100.lineHeight;
 var itemHeadingFontSize = headingSizes.h100.size;
 var headingStyles = css({
-  padding: "0 ".concat(itemSidePadding, "px"),
+  padding: "0 ".concat("var(--ds-space-250, 20px)"),
   color: "var(--ds-text-subtle, ".concat(N300, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: "var(--ds-font-weight-bold, 700)",

package/dist/esm/menu-item/skeleton-item.js

@@ -10,7 +10,6 @@ var borderRadius = borderRadiusFn();
 var itemElemSpacing = gridSize * 1.5;
 var itemExpectedElemSize = gridSize * 3;
 var itemMinHeight = gridSize * 5;
-var itemPadding = gridSize * 2.5;
 var skeletonItemElemSize = gridSize * 2.5;
 var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 var skeletonTextBorderRadius = 100;
@@ -19,7 +18,7 @@ var skeletonColor = "var(--ds-skeleton, ".concat(N20A, ")");
 var skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,
-  padding: "0 ".concat(itemPadding, "px"),
+  padding: "0 ".concat("var(--ds-space-250, 20px)"),
   alignItems: 'center',
   pointerEvents: 'none',
   '::after': {
@@ -27,6 +26,7 @@ var skeletonStyles = css({
     // This is a little bespoke but we need to push everything down 1px
     // because the skeleton content should align to the bottom of the text.
     // Confirm VR test failures before accepting a change.
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginTop: 1,
     backgroundColor: skeletonColor,
     borderRadius: skeletonTextBorderRadius,
@@ -62,7 +62,9 @@ var beforeElementStyles = css({
   '::before': {
     width: skeletonItemElemSize,
     height: skeletonItemElemSize,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginRight: itemElemSpacing + itemElemSkeletonOffset,
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginLeft: itemElemSkeletonOffset,
     flexShrink: 0,
     backgroundColor: skeletonColor,

package/dist/esm/menu-section/section.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "overrides", "title", "testId", "isScrollable", "hasSeparator", "id"];
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
 /** @jsx jsx */
 import { forwardRef, Fragment } from 'react';
 import { css, jsx } from '@emotion/react';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.4.8",
+	"version": "1.4.10",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.4.8",
+  "version": "1.4.10",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.2.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -90,8 +90,10 @@
         "emotion"
       ],
       "analytics": "analytics-next",
-      "design-tokens": "spacing",
-      "theming": "tokens",
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "deprecation": "no-deprecated-imports"
     }
   },