@atlaskit/menu 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 2.1.0
+
+### Minor Changes
+
+- [#41571](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41571) [`997b0489687`](https://bitbucket.org/atlassian/atlassian-frontend/commits/997b0489687) - Add codemod to convert link item components with invalid `href` attributes to button items. The `href` attribute will be required for link items in a later major upgrade. Using this will ease the transition.
+
+## 2.0.1
+
+### Patch Changes
+
+- [#40650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40650) [`07aa588c8a4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07aa588c8a4) - Reverts the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.
+
 ## 2.0.0
 
 ### Major Changes

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

@@ -0,0 +1,208 @@
+import core, {
+  API,
+  ASTPath,
+  FileInfo,
+  ImportDeclaration,
+  ImportSpecifier,
+  Options,
+} from 'jscodeshift';
+
+const invalidHrefValues = ['', '#'];
+const pkg = '@atlaskit/menu';
+
+function getJSXAttributesByName(
+  j: core.JSCodeshift,
+  element: ASTPath<any>,
+  attributeName: string,
+) {
+  return j(element)
+    .find(j.JSXOpeningElement)
+    .find(j.JSXAttribute)
+    .filter((attribute) => {
+      const matches = j(attribute)
+        .find(j.JSXIdentifier)
+        .filter((identifier) => identifier.value.name === attributeName);
+      return Boolean(matches.length);
+    });
+}
+
+function getImportSpecifier(
+  j: core.JSCodeshift,
+  source: ReturnType<typeof j>,
+  specifier: string,
+  imported: string,
+) {
+  const specifiers = source
+    .find(j.ImportDeclaration)
+    .filter(
+      (path: ASTPath<ImportDeclaration>) =>
+        path.node.source.value === specifier,
+    )
+    .find(j.ImportSpecifier)
+    .filter(
+      (path: ASTPath<ImportSpecifier>) => path.value.imported.name === imported,
+    );
+
+  if (!specifiers.length) {
+    return null;
+  }
+
+  return specifiers.nodes()[0]!.local!.name;
+}
+
+function convertInvalidLinkItemsToButtonItems(
+  j: core.JSCodeshift,
+  source: ReturnType<typeof j>,
+  specifier: string,
+) {
+  // For each instance of LinkItem
+  source.findJSXElements(specifier).forEach((element) => {
+    const hrefPropCollection = getJSXAttributesByName(j, element, 'href');
+
+    // base case: no `href` prop exists, it is invalid
+    let validHref = false;
+
+    // if `href` exists
+    if (hrefPropCollection.length > 0) {
+      const hrefProp = hrefPropCollection.get();
+
+      const hrefStringLiteral = j(hrefProp).find(j.StringLiteral);
+      const hrefExpressionContainer = j(hrefProp)
+        .find(j.JSXExpressionContainer)
+        .find(j.Expression);
+
+      // This is tin foil hattery. Can something be neither a string literal
+      // nor an expression container? Don't know but gonna cover that
+      if (
+        hrefStringLiteral.length === 0 &&
+        hrefExpressionContainer.length === 0
+      ) {
+        return;
+      }
+
+      if (hrefStringLiteral.length > 0) {
+        const hrefValue = hrefStringLiteral.get().value.value;
+        if (invalidHrefValues.includes(hrefValue)) {
+          j(hrefProp).forEach((el) => j(el).remove());
+        } else {
+          validHref = true;
+        }
+      } else {
+        // It seems foolish to try and resolve variables, so we will assume it
+        // is valid
+        validHref = true;
+      }
+    }
+
+    if (!validHref) {
+      const pkgImport = source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === pkg);
+      const buttonItemIsImported =
+        pkgImport
+          .find(j.ImportSpecifier)
+          .nodes()
+          .filter((node) => node.imported.name === 'ButtonItem').length > 0;
+      if (!buttonItemIsImported) {
+        // Add ButtonItem to imports
+        const newSpecifier = j.importSpecifier(j.identifier('ButtonItem'));
+        pkgImport.forEach((moduleImport) => {
+          const specifiers = moduleImport.node.specifiers
+            ? [...moduleImport.node.specifiers]
+            : [];
+          j(moduleImport).replaceWith(
+            j.importDeclaration(
+              specifiers.concat([newSpecifier]),
+              moduleImport.node.source,
+            ),
+          );
+        });
+      }
+
+      // Replace existing LinkItem with ButtonItem, while maintaining the same props
+      if (element.value.openingElement.name.type === 'JSXIdentifier') {
+        element.value.openingElement.name.name = 'ButtonItem';
+        if (
+          element.value.closingElement &&
+          element.value.closingElement.name.type === 'JSXIdentifier'
+        ) {
+          element.value.closingElement.name.name = 'ButtonItem';
+        }
+      }
+    }
+  });
+}
+
+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>,
+  importPath: string,
+) {
+  return !!source
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === importPath).length;
+}
+
+export default function transformer(
+  fileInfo: FileInfo,
+  { jscodeshift: j }: API,
+  options: Options,
+) {
+  const source = j(fileInfo.source);
+
+  if (hasImportDeclaration(j, source, pkg)) {
+    const importSpecifier = getImportSpecifier(j, source, pkg, 'LinkItem');
+
+    if (importSpecifier != null) {
+      convertInvalidLinkItemsToButtonItems(j, source, importSpecifier);
+      removeLinkItemImportIfNoLinkItemsExist(j, source, importSpecifier);
+    }
+
+    return source.toSource(
+      options.printOptions || {
+        quote: 'single',
+        trailingComma: true,
+      },
+    );
+  }
+
+  return fileInfo.source;
+}

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

@@ -0,0 +1,308 @@
+jest.autoMockOff();
+
+import * as transformer from '../2.1.0-invalid-link-item-to-button-item';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Converts link items with invalid or missing `href` to button items', () => {
+  /**
+   *
+   * Success cases
+   *
+   */
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem } from '@atlaskit/something';
+
+      const App = () => {
+        return <LinkItem />;
+      }
+    `,
+    `
+      import { LinkItem } from '@atlaskit/something';
+
+      const App = () => {
+        return <LinkItem />;
+      }
+  `,
+    'leaves unrelated code untouched',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem } from '@atlaskit/menu';
+      import { variable } from 'somewhere';
+
+      const App = () => {
+        return <LinkItem href={variable}>test</LinkItem>;
+      }
+    `,
+    `
+      import { LinkItem } from '@atlaskit/menu';
+      import { variable } from 'somewhere';
+
+      const App = () => {
+        return <LinkItem href={variable}>test</LinkItem>;
+      }
+  `,
+    'should not do anything with `href`s that are variables',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <LinkItem href="http://valid.com">test</LinkItem>;
+      }
+    `,
+    `
+      import { LinkItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <LinkItem href="http://valid.com">test</LinkItem>;
+      }
+  `,
+    'should not do anything with a valid `href`',
+  );
+
+  /**
+   *
+   * Missing `href`
+   *
+   */
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <LinkItem>test</LinkItem>;
+      }
+    `,
+    `
+      import { ButtonItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <ButtonItem>test</ButtonItem>;
+      }
+  `,
+    'Should convert to ButtonItem if no href exists on LinkItem',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <LinkItem id="test">test</LinkItem>;
+      }
+    `,
+    `
+      import { ButtonItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <ButtonItem id="test">test</ButtonItem>;
+      }
+  `,
+    'Should convert to ButtonItem but keep existing props if no href exists on LinkItem',
+  );
+
+  /**
+   *
+   * Invalid `href`
+   *
+   */
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <LinkItem href="#">test</LinkItem>;
+      }
+    `,
+    `
+      import { ButtonItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <ButtonItem>test</ButtonItem>;
+      }
+  `,
+    'Should convert to ButtonItem if invalid `href`',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <LinkItem href="#" id="test">test</LinkItem>;
+      }
+    `,
+    `
+      import { ButtonItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <ButtonItem id="test">test</ButtonItem>;
+      }
+  `,
+    'Should convert to ButtonItem but keep existing props if invalid `href`',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <LinkItem href="">test</LinkItem>;
+      }
+    `,
+    `
+      import { ButtonItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <ButtonItem>test</ButtonItem>;
+      }
+  `,
+    'Should convert to ButtonItem if invalid `href`',
+  );
+
+  /**
+   *
+   * Expressions
+   *
+   */
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <LinkItem href={''}>test</LinkItem>;
+      }
+    `,
+    `
+      import { ButtonItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return <ButtonItem>test</ButtonItem>;
+      }
+  `,
+    'should handle strings in expression containers',
+  );
+
+  /**
+   *
+   * Edge cases
+   *
+   */
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem, ButtonItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return (
+          <div>
+            <LinkItem href="">test 1</LinkItem>
+            <ButtonItem>test 2</ButtonItem>
+          </div>
+        );
+      }
+    `,
+    `
+      import { ButtonItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return (
+          <div>
+            <ButtonItem>test 1</ButtonItem>
+            <ButtonItem>test 2</ButtonItem>
+          </div>
+        );
+      }
+  `,
+    'Should handle multiple item types',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem, CustomItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return (
+          <div>
+            <LinkItem href="">test 1</LinkItem>
+            <CustomItem>test 2</CustomItem>
+          </div>
+        );
+      }
+    `,
+    `
+      import { CustomItem, ButtonItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return (
+          <div>
+            <ButtonItem>test 1</ButtonItem>
+            <CustomItem>test 2</CustomItem>
+          </div>
+        );
+      }
+  `,
+    'Should not delete other imports',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { LinkItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return (
+          <div>
+            <LinkItem href="">test 1</LinkItem>
+            <LinkItem href="http://example.com">test 2</LinkItem>
+          </div>
+        );
+      }
+    `,
+    `
+      import { LinkItem, ButtonItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return (
+          <div>
+            <ButtonItem>test 1</ButtonItem>
+            <LinkItem href="http://example.com">test 2</LinkItem>
+          </div>
+        );
+      }
+  `,
+    'Should allow valid `href` and convert invalid ones',
+  );
+});

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

@@ -34,34 +34,22 @@ var contentStyles = (0, _react2.css)({
   flexGrow: 1,
   lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
-  textAlign: 'left',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  overflow: 'hidden',
+  textAlign: 'left'
 });
 var truncateStyles = (0, _react2.css)({
   display: 'block',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  whiteSpace: 'nowrap'
 });
 var wordBreakStyles = (0, _react2.css)({
   wordBreak: 'break-word'
 });
 var descriptionStyles = (0, _react2.css)({
+  marginTop: "var(--ds-space-050, 4px)",
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  fontSize: "var(--ds-font-size-075, 12px)",
-  marginBlockStart: "var(--ds-space-050, 4px)"
+  fontSize: "var(--ds-font-size-075, 12px)"
 });
 var disabledDescriptionStyles = (0, _react2.css)({
   color: "var(--ds-text-disabled, ".concat(_colors.N200, ")")
@@ -131,23 +119,23 @@ var selectedBorderStyles = (0, _react2.css)({
   '&::before': {
     width: 2,
     position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""',
-    insetBlockEnd: 0,
-    insetBlockStart: 0,
-    insetInlineStart: 0
+    content: '""'
   }
 });
 var selectedNotchStyles = (0, _react2.css)({
   '&::before': {
     width: 4,
     position: 'absolute',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)",
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""',
-    insetBlockEnd: "var(--ds-space-150, 12px)",
-    insetBlockStart: "var(--ds-space-150, 12px)",
-    insetInlineStart: 0
+    content: '""'
   }
 });
 var selectedStyles = (0, _react2.css)({
@@ -200,7 +188,8 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    testId = _ref.testId;
   (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
@@ -220,10 +209,12 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         spread: "space-between",
         alignBlock: "center",
         space: gapMap[spacing],
-        grow: "fill"
+        grow: "fill",
+        testId: testId && "".concat(testId, "--container")
       }, iconBefore && (0, _react2.jsx)("span", {
         "data-item-elem-before": true,
-        css: beforeAfterElementStyles
+        css: beforeAfterElementStyles,
+        "data-testid": testId && "".concat(testId, "--icon-before")
       }, iconBefore), title && (0, _react2.jsx)("span", {
         css: contentStyles
       }, renderTitle('span', {
@@ -235,7 +226,8 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && (0, _react2.jsx)("span", {
         "data-item-elem-after": true,
-        css: beforeAfterElementStyles
+        css: beforeAfterElementStyles,
+        "data-testid": testId && "".concat(testId, "--icon-after")
       }, iconAfter))
     }));
   });

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

@@ -69,7 +69,8 @@ function (props, ref) {
     cssFn({
       isSelected: isSelected,
       isDisabled: isDisabled
-    })
+    }),
+    testId: testId && "".concat(testId, "--primitive")
   }), function (_ref) {
     var children = _ref.children,
       className = _ref.className;

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

@@ -74,7 +74,8 @@ var CustomItem = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardR
     css: (0, _react2.css)(cssFn({
       isDisabled: isDisabled,
       isSelected: isSelected
-    }))
+    })),
+    testId: testId && "".concat(testId, "--primitive")
   }), function (_ref2) {
     var children = _ref2.children,
       className = _ref2.className;

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

@@ -74,7 +74,8 @@ function (props, ref) {
       isSelected: isSelected,
       isDisabled: isDisabled
     }),
-    title: children
+    title: children,
+    testId: testId && "".concat(testId, "--primitive")
   }), function (_ref) {
     var children = _ref.children,
       className = _ref.className;