@atlaskit/menu 1.3.10 → 1.3.12

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/menu
 
+## 1.3.12
+
+### Patch Changes
+
+- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
+
+## 1.3.11
+
+### Patch Changes
+
+- [`8f2153a45a7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f2153a45a7) - Convert Menu Group to use primitives.
+- Updated dependencies
+
 ## 1.3.10
 
 ### Patch Changes

package/dist/cjs/internal/components/menu-item-primitive.js

@@ -28,11 +28,11 @@ var defaultRender = function defaultRender(Component, props) {
 
 var gridSize = (0, _constants.gridSize)();
 var fontSize = (0, _constants.fontSize)();
-var itemTopBottomPadding = gridSize;
-var itemSidePadding = gridSize * 2.5;
-var itemElemSpacing = gridSize * 1.5;
+var itemTopBottomPadding = "var(--ds-scale-100, 8px)";
+var itemSidePadding = "var(--ds-scale-250, 20px)";
+var itemElemSpacing = "var(--ds-scale-150, 12px)";
 var itemDescriptionSpacing = gridSize * 0.375;
-var itemMinHeight = gridSize * 5;
+var itemMinHeight = "var(--ds-scale-500, 40px)";
 var beforeElementStyles = (0, _core.css)({
   display: 'flex',
   marginRight: itemElemSpacing,
@@ -75,8 +75,9 @@ var primitiveStyles = (0, _core.css)({
   boxSizing: 'border-box',
   width: '100%',
   minHeight: itemMinHeight,
-  margin: 0,
-  padding: "".concat(itemTopBottomPadding, "px ").concat(itemSidePadding, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
+  padding: "".concat(itemTopBottomPadding, " ").concat(itemSidePadding),
   alignItems: 'center',
   border: 0,
   fontSize: fontSize,

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

@@ -13,17 +13,15 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _constants = require("@atlaskit/theme/constants");
-
 var _skeletonShimmer = _interopRequireDefault(require("../internal/components/skeleton-shimmer"));
 
 /** @jsx jsx */
 var skeletonStyles = (0, _core.css)({
-  padding: "0 ".concat((0, _constants.gridSize)() * 2.5, "px"),
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-250, 20px)"),
   '::after': {
     display: 'block',
     width: '30%',
-    height: (0, _constants.gridSize)(),
+    height: "var(--ds-scale-100, 8px)",
     backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")"),
     borderRadius: 100,
     content: '""'

package/dist/cjs/menu-section/menu-group.js

@@ -13,12 +13,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _core = require("@emotion/core");
 
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
 var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role"];
-var groupStyles = (0, _core.css)({
-  display: 'flex',
-  flexDirection: 'column',
-  overflow: 'auto'
-});
+
 /**
  * __Menu group__
  *
@@ -27,7 +25,6 @@ var groupStyles = (0, _core.css)({
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-
 var MenuGroup = function MenuGroup(_ref) {
   var maxWidth = _ref.maxWidth,
       minWidth = _ref.minWidth,
@@ -36,18 +33,23 @@ var MenuGroup = function MenuGroup(_ref) {
       testId = _ref.testId,
       role = _ref.role,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    style: {
-      minWidth: minWidth,
-      maxWidth: maxWidth,
-      minHeight: minHeight,
-      maxHeight: maxHeight
-    },
-    css: groupStyles,
-    "data-testid": testId,
-    role: role // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-
-  }, rest));
+  return (// @ts-ignore type of rest/children needs to be made stricter to fit in Box -- string shouldn't be allowed
+    (0, _core.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
+      UNSAFE_style: {
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        minHeight: minHeight,
+        maxHeight: maxHeight
+      },
+      display: "flex",
+      flexDirection: "column",
+      overflow: "auto",
+      testId: testId,
+      role: role,
+      position: "static" // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
+    }, rest))
+  );
 };
 
 var _default = MenuGroup;

package/dist/cjs/version.json

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

package/dist/es2019/internal/components/menu-item-primitive.js

@@ -11,11 +11,11 @@ jsx(Component, props);
 
 const gridSize = gridSizeFn();
 const fontSize = fontSizeFn();
-const itemTopBottomPadding = gridSize;
-const itemSidePadding = gridSize * 2.5;
-const itemElemSpacing = gridSize * 1.5;
+const itemTopBottomPadding = "var(--ds-scale-100, 8px)";
+const itemSidePadding = "var(--ds-scale-250, 20px)";
+const itemElemSpacing = "var(--ds-scale-150, 12px)";
 const itemDescriptionSpacing = gridSize * 0.375;
-const itemMinHeight = gridSize * 5;
+const itemMinHeight = "var(--ds-scale-500, 40px)";
 const beforeElementStyles = css({
   display: 'flex',
   marginRight: itemElemSpacing,
@@ -58,8 +58,9 @@ const primitiveStyles = css({
   boxSizing: 'border-box',
   width: '100%',
   minHeight: itemMinHeight,
-  margin: 0,
-  padding: `${itemTopBottomPadding}px ${itemSidePadding}px`,
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
+  padding: `${itemTopBottomPadding} ${itemSidePadding}`,
   alignItems: 'center',
   border: 0,
   fontSize: fontSize,

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

@@ -2,14 +2,13 @@
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { N20A } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 const skeletonStyles = css({
-  padding: `0 ${gridSize() * 2.5}px`,
+  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-250, 20px)"}`,
   '::after': {
     display: 'block',
     width: '30%',
-    height: gridSize(),
+    height: "var(--ds-scale-100, 8px)",
     backgroundColor: `var(--ds-skeleton, ${N20A})`,
     borderRadius: 100,
     content: '""'

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

@@ -1,12 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-const groupStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  overflow: 'auto'
-});
+import { jsx } from '@emotion/core';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+
 /**
  * __Menu group__
  *
@@ -15,7 +12,6 @@ const groupStyles = css({
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-
 const MenuGroup = ({
   maxWidth,
   minWidth,
@@ -24,16 +20,20 @@ const MenuGroup = ({
   testId,
   role,
   ...rest
-}) => jsx("div", _extends({
-  style: {
+}) => // @ts-ignore type of rest/children needs to be made stricter to fit in Box -- string shouldn't be allowed
+jsx(Box, _extends({
+  UNSAFE_style: {
     minWidth,
     maxWidth,
     minHeight,
     maxHeight
   },
-  css: groupStyles,
-  "data-testid": testId,
-  role: role // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  display: "flex",
+  flexDirection: "column",
+  overflow: "auto",
+  testId: testId,
+  role: role,
+  position: "static" // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
 }, rest));
 

package/dist/es2019/version.json

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

package/dist/esm/internal/components/menu-item-primitive.js

@@ -14,11 +14,11 @@ var defaultRender = function defaultRender(Component, props) {
 
 var gridSize = gridSizeFn();
 var fontSize = fontSizeFn();
-var itemTopBottomPadding = gridSize;
-var itemSidePadding = gridSize * 2.5;
-var itemElemSpacing = gridSize * 1.5;
+var itemTopBottomPadding = "var(--ds-scale-100, 8px)";
+var itemSidePadding = "var(--ds-scale-250, 20px)";
+var itemElemSpacing = "var(--ds-scale-150, 12px)";
 var itemDescriptionSpacing = gridSize * 0.375;
-var itemMinHeight = gridSize * 5;
+var itemMinHeight = "var(--ds-scale-500, 40px)";
 var beforeElementStyles = css({
   display: 'flex',
   marginRight: itemElemSpacing,
@@ -61,8 +61,9 @@ var primitiveStyles = css({
   boxSizing: 'border-box',
   width: '100%',
   minHeight: itemMinHeight,
-  margin: 0,
-  padding: "".concat(itemTopBottomPadding, "px ").concat(itemSidePadding, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value `0`
+  margin: "var(--ds-scale-0, 0px)",
+  padding: "".concat(itemTopBottomPadding, " ").concat(itemSidePadding),
   alignItems: 'center',
   border: 0,
   fontSize: fontSize,

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

@@ -2,14 +2,13 @@
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
 import { N20A } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 var skeletonStyles = css({
-  padding: "0 ".concat(gridSize() * 2.5, "px"),
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-250, 20px)"),
   '::after': {
     display: 'block',
     width: '30%',
-    height: gridSize(),
+    height: "var(--ds-scale-100, 8px)",
     backgroundColor: "var(--ds-skeleton, ".concat(N20A, ")"),
     borderRadius: 100,
     content: '""'

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

@@ -3,12 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["maxWidth", "minWidth", "minHeight", "maxHeight", "testId", "role"];
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-var groupStyles = css({
-  display: 'flex',
-  flexDirection: 'column',
-  overflow: 'auto'
-});
+import { jsx } from '@emotion/core';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+
 /**
  * __Menu group__
  *
@@ -17,7 +14,6 @@ var groupStyles = css({
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-
 var MenuGroup = function MenuGroup(_ref) {
   var maxWidth = _ref.maxWidth,
       minWidth = _ref.minWidth,
@@ -27,18 +23,23 @@ var MenuGroup = function MenuGroup(_ref) {
       role = _ref.role,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return jsx("div", _extends({
-    style: {
-      minWidth: minWidth,
-      maxWidth: maxWidth,
-      minHeight: minHeight,
-      maxHeight: maxHeight
-    },
-    css: groupStyles,
-    "data-testid": testId,
-    role: role // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  return (// @ts-ignore type of rest/children needs to be made stricter to fit in Box -- string shouldn't be allowed
+    jsx(Box, _extends({
+      UNSAFE_style: {
+        minWidth: minWidth,
+        maxWidth: maxWidth,
+        minHeight: minHeight,
+        maxHeight: maxHeight
+      },
+      display: "flex",
+      flexDirection: "column",
+      overflow: "auto",
+      testId: testId,
+      role: role,
+      position: "static" // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
-  }, rest));
+    }, rest))
+  );
 };
 
 export default MenuGroup;

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.3.10",
+  "version": "1.3.12",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,13 +15,15 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -43,8 +45,9 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
+    "@atlaskit/ds-explorations": "^0.1.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/focus-ring": "^1.0.0",
+    "@atlaskit/focus-ring": "^1.1.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
@@ -55,13 +58,13 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^21.0.0",
+    "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/icon-file-type": "^6.0.0",
     "@atlaskit/icon-object": "^6.0.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -95,6 +98,7 @@
         "emotion"
       ],
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"
     }

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/menu"
+## API Report File for "@atlaskit/menu".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />