@atlaskit/menu 2.0.1 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/menu
 
+## 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
+
+- [#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

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

@@ -0,0 +1,169 @@
+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 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);
+    }
+
+    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 { LinkItem, 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 { LinkItem, 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 { LinkItem, 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 { LinkItem, 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 { LinkItem, 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 { LinkItem, 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 { LinkItem, 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 { LinkItem, CustomItem, ButtonItem } from '@atlaskit/menu';
+
+      const App = () => {
+        return (
+          <div>
+            <ButtonItem>test 1</ButtonItem>
+            <CustomItem>test 2</CustomItem>
+          </div>
+        );
+      }
+  `,
+    'Should not delete any 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

@@ -188,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
   );
 
@@ -208,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', {
@@ -223,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;

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

@@ -173,7 +173,8 @@ const MenuItemPrimitive = ({
   shouldTitleWrap = false,
   shouldDescriptionWrap = false,
   isDisabled = false,
-  isSelected = false
+  isSelected = false,
+  testId
 }) => {
   propDeprecationWarning("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
@@ -195,10 +196,12 @@ const MenuItemPrimitive = ({
         spread: "space-between",
         alignBlock: "center",
         space: gapMap[spacing],
-        grow: "fill"
+        grow: "fill",
+        testId: testId && `${testId}--container`
       }, iconBefore && jsx("span", {
         "data-item-elem-before": true,
-        css: beforeAfterElementStyles
+        css: beforeAfterElementStyles,
+        "data-testid": testId && `${testId}--icon-before`
       }, iconBefore), title && jsx("span", {
         css: contentStyles
       }, renderTitle('span', {
@@ -210,7 +213,8 @@ const MenuItemPrimitive = ({
         css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
-        css: beforeAfterElementStyles
+        css: beforeAfterElementStyles,
+        "data-testid": testId && `${testId}--icon-after`
       }, iconAfter))
     }));
   });

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

@@ -63,7 +63,8 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     cssFn({
       isSelected,
       isDisabled
-    })
+    }),
+    testId: testId && `${testId}--primitive`
   }), ({
     children,
     className

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

@@ -68,7 +68,8 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: css(cssFn({
       isDisabled,
       isSelected
-    }))
+    })),
+    testId: testId && `${testId}--primitive`
   }), ({
     children,
     className

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

@@ -68,7 +68,8 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
       isSelected,
       isDisabled
     }),
-    title: children
+    title: children,
+    testId: testId && `${testId}--primitive`
   }), ({
     children,
     className

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

@@ -180,7 +180,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;
   propDeprecationWarning("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
@@ -200,10 +201,12 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         spread: "space-between",
         alignBlock: "center",
         space: gapMap[spacing],
-        grow: "fill"
+        grow: "fill",
+        testId: testId && "".concat(testId, "--container")
       }, iconBefore && jsx("span", {
         "data-item-elem-before": true,
-        css: beforeAfterElementStyles
+        css: beforeAfterElementStyles,
+        "data-testid": testId && "".concat(testId, "--icon-before")
       }, iconBefore), title && jsx("span", {
         css: contentStyles
       }, renderTitle('span', {
@@ -215,7 +218,8 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
-        css: beforeAfterElementStyles
+        css: beforeAfterElementStyles,
+        "data-testid": testId && "".concat(testId, "--icon-after")
       }, iconAfter))
     }));
   });

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

@@ -62,7 +62,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/esm/menu-item/custom-item.js

@@ -68,7 +68,8 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     css: css(cssFn({
       isDisabled: isDisabled,
       isSelected: isSelected
-    }))
+    })),
+    testId: testId && "".concat(testId, "--primitive")
   }), function (_ref2) {
     var children = _ref2.children,
       className = _ref2.className;

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

@@ -67,7 +67,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;

package/dist/types/internal/components/menu-item-primitive.d.ts

@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
 export default MenuItemPrimitive;

package/dist/types/types.d.ts

@@ -137,6 +137,7 @@ export interface MenuItemPrimitiveProps {
     isDisabled: boolean | undefined;
     isSelected: boolean | undefined;
     className?: string;
+    testId?: string;
 }
 export interface MenuItemProps {
     /**

package/dist/types-ts4.5/internal/components/menu-item-primitive.d.ts

@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
 export default MenuItemPrimitive;

package/dist/types-ts4.5/types.d.ts

@@ -137,6 +137,7 @@ export interface MenuItemPrimitiveProps {
     isDisabled: boolean | undefined;
     isSelected: boolean | undefined;
     className?: string;
+    testId?: string;
 }
 export interface MenuItemProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.26.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },