@atlaskit/menu 2.1.0 → 2.1.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/menu
 
+## 2.1.2
+
+### Patch Changes
+
+- [#42474](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42474) [`d7400cb1aa2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7400cb1aa2) - Adds a platform feature flag to adjust Menu Section seperator border widths from 2px to 1px.
+- Updated dependencies
+
+## 2.1.1
+
+### Patch Changes
+
+- [#41915](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41915) [`99b579bdc84`](https://bitbucket.org/atlassian/atlassian-frontend/commits/99b579bdc84) - Fix error in codemod
+
 ## 2.1.0
 
 ### Minor Changes

package/codemods/2.1.0-invalid-link-item-to-button-item.tsx

@@ -133,44 +133,6 @@ function convertInvalidLinkItemsToButtonItems(
   });
 }
 
-function removeLinkItemImportIfNoLinkItemsExist(
-  j: core.JSCodeshift,
-  source: ReturnType<typeof j>,
-  specifier: string,
-) {
-  // Get all instances of LinkItem
-  const linkItemInstances = source.findJSXElements(specifier);
-
-  // if none, delete from imports
-  if (linkItemInstances.length === 0) {
-    source
-      .find(j.ImportDeclaration)
-      .filter((path) => path.node.source.value === pkg)
-      .forEach((moduleImport) => {
-        j(moduleImport).replaceWith(
-          j.importDeclaration(
-            moduleImport.node.specifiers &&
-              moduleImport.node.specifiers
-                .filter(
-                  // This should be `ImportSpecifier | ImportDefaultSpecifier |
-                  // ImportNamespaceSpecifier` but it still throws even though
-                  // I'm filtering
-                  (
-                    currentSpecifier: any,
-                  ): currentSpecifier is ImportSpecifier =>
-                    currentSpecifier?.imported,
-                )
-                .filter(
-                  (currentSpecifier: ImportSpecifier) =>
-                    currentSpecifier.imported.name !== specifier,
-                ),
-            moduleImport.node.source,
-          ),
-        );
-      });
-  }
-}
-
 function hasImportDeclaration(
   j: core.JSCodeshift,
   source: ReturnType<typeof j>,
@@ -193,7 +155,6 @@ export default function transformer(
 
     if (importSpecifier != null) {
       convertInvalidLinkItemsToButtonItems(j, source, importSpecifier);
-      removeLinkItemImportIfNoLinkItemsExist(j, source, importSpecifier);
     }
 
     return source.toSource(

package/codemods/__tests__/next-invalid-link-item-to-button-item.tsx

@@ -89,7 +89,7 @@ describe('Converts link items with invalid or missing `href` to button items', (
       }
     `,
     `
-      import { ButtonItem } from '@atlaskit/menu';
+      import { LinkItem, ButtonItem } from '@atlaskit/menu';
 
       const App = () => {
         return <ButtonItem>test</ButtonItem>;
@@ -109,7 +109,7 @@ describe('Converts link items with invalid or missing `href` to button items', (
       }
     `,
     `
-      import { ButtonItem } from '@atlaskit/menu';
+      import { LinkItem, ButtonItem } from '@atlaskit/menu';
 
       const App = () => {
         return <ButtonItem id="test">test</ButtonItem>;
@@ -135,7 +135,7 @@ describe('Converts link items with invalid or missing `href` to button items', (
       }
     `,
     `
-      import { ButtonItem } from '@atlaskit/menu';
+      import { LinkItem, ButtonItem } from '@atlaskit/menu';
 
       const App = () => {
         return <ButtonItem>test</ButtonItem>;
@@ -155,7 +155,7 @@ describe('Converts link items with invalid or missing `href` to button items', (
       }
     `,
     `
-      import { ButtonItem } from '@atlaskit/menu';
+      import { LinkItem, ButtonItem } from '@atlaskit/menu';
 
       const App = () => {
         return <ButtonItem id="test">test</ButtonItem>;
@@ -175,7 +175,7 @@ describe('Converts link items with invalid or missing `href` to button items', (
       }
     `,
     `
-      import { ButtonItem } from '@atlaskit/menu';
+      import { LinkItem, ButtonItem } from '@atlaskit/menu';
 
       const App = () => {
         return <ButtonItem>test</ButtonItem>;
@@ -201,7 +201,7 @@ describe('Converts link items with invalid or missing `href` to button items', (
       }
     `,
     `
-      import { ButtonItem } from '@atlaskit/menu';
+      import { LinkItem, ButtonItem } from '@atlaskit/menu';
 
       const App = () => {
         return <ButtonItem>test</ButtonItem>;
@@ -232,7 +232,7 @@ describe('Converts link items with invalid or missing `href` to button items', (
       }
     `,
     `
-      import { ButtonItem } from '@atlaskit/menu';
+      import { LinkItem, ButtonItem } from '@atlaskit/menu';
 
       const App = () => {
         return (
@@ -262,7 +262,7 @@ describe('Converts link items with invalid or missing `href` to button items', (
       }
     `,
     `
-      import { CustomItem, ButtonItem } from '@atlaskit/menu';
+      import { LinkItem, CustomItem, ButtonItem } from '@atlaskit/menu';
 
       const App = () => {
         return (
@@ -273,7 +273,7 @@ describe('Converts link items with invalid or missing `href` to button items', (
         );
       }
   `,
-    'Should not delete other imports',
+    'Should not delete any imports',
   );
 
   defineInlineTest(

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

@@ -70,9 +70,12 @@ var scrollableStyles = (0, _react2.css)({
 var unscrollableStyles = (0, _react2.css)({
   flexShrink: 0
 });
-var separatorStyles = (0, _react2.css)({
+var thickSeparatorStyles = (0, _react2.css)({
   borderBlockStart: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
 });
+var thinSeparatorStyles = (0, _react2.css)({
+  borderBlockStart: "1px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
+});
 var noSeparatorStyles = (0, _react2.css)({
   // this is to ensure that adjacent sections without separators don't get additional margins.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -133,7 +136,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "data-testid": testId,
     role: "group",

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

@@ -61,9 +61,12 @@ const scrollableStyles = css({
 const unscrollableStyles = css({
   flexShrink: 0
 });
-const separatorStyles = css({
+const thickSeparatorStyles = css({
   borderBlockStart: `2px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30A})`})`
 });
+const thinSeparatorStyles = css({
+  borderBlockStart: `1px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30A})`})`
+});
 const noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -126,7 +129,7 @@ const Section = /*#__PURE__*/forwardRef(({
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? getBooleanFF('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "data-testid": testId,
     role: "group",

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

@@ -63,9 +63,12 @@ var scrollableStyles = css({
 var unscrollableStyles = css({
   flexShrink: 0
 });
-var separatorStyles = css({
+var thickSeparatorStyles = css({
   borderBlockStart: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30A, ")"), ")")
 });
+var thinSeparatorStyles = css({
+  borderBlockStart: "1px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30A, ")"), ")")
+});
 var noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -126,7 +129,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? getBooleanFF('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "data-testid": testId,
     role: "group",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,9 +29,9 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.6.0",
+    "@atlaskit/primitives": "^1.9.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.27.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -106,8 +107,11 @@
   "platform-feature-flags": {
     "platform.design-system-team.unsafe-overrides-killswitch_c8j9m": {
       "type": "boolean"
+    },
+    "platform.design-system-team.section-1px-seperator-borders": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/menu/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}