chore: Merge prerelease/minor into prerelease/major [skip release]

modules/codemod/index.js

@@ -61,6 +61,13 @@ const {_: commands, path, ignoreConfig, ignorePattern, verbose} = require('yargs
       describe: chalk.gray('The path to execute the transform in (recursively).'),
     });
   })
+  .command('v10 [path]', chalk.gray('Canvas Kit v9 > v10 upgrade transform'), yargs => {
+    yargs.positional('path', {
+      type: 'string',
+      default: '.',
+      describe: chalk.gray('The path to execute the transform in (recursively).'),
+    });
+  })
   .demandCommand(1, chalk.red.bold('You must provide a transform to apply.'))
   .strictCommands()
   .fail((msg, err, yargs) => {

modules/codemod/lib/v10/example.ts

@@ -0,0 +1,10 @@
+import {API, FileInfo, Options} from 'jscodeshift';
+
+export default function transformer(file: FileInfo, api: API, options: Options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // codemode goes here ...
+
+  return root.toSource();
+}

modules/codemod/lib/v10/index.ts

@@ -0,0 +1,14 @@
+import {Transform} from 'jscodeshift';
+import example from './example';
+
+const transform: Transform = (file, api, options) => {
+  // These will run in order. If your transform depends on others, place yours after dependent transforms
+  const fixes = [
+    // add codemods here
+    example,
+  ];
+
+  return fixes.reduce((source, fix) => fix({...file, source}, api, options) as string, file.source);
+};
+
+export default transform;

modules/codemod/lib/v10/spec/example.spec.ts

@@ -0,0 +1,18 @@
+import {expectTransformFactory} from './expectTransformFactory';
+import transform from '../example';
+import {stripIndent} from 'common-tags';
+
+const expectTransform = expectTransformFactory(transform);
+
+describe('Example', () => {
+  it('should ignore non-canvas-kit imports', () => {
+    const input = stripIndent`
+      import Example from '@workday/some-other-library'
+    `;
+    const expected = stripIndent`
+      import Example from '@workday/some-other-library'
+    `;
+
+    expectTransform(input, expected);
+  });
+});

modules/codemod/lib/v10/spec/expectTransformFactory.ts

@@ -0,0 +1,9 @@
+import {runInlineTest} from 'jscodeshift/dist/testUtils';
+
+export const expectTransformFactory = (fn: Function) => (
+  input: string,
+  expected: string,
+  options?: Record<string, any>
+) => {
+  return runInlineTest(fn, options, {source: input}, expected, {parser: 'tsx'});
+};

modules/docs/mdx/10.0-UPGRADE_GUIDE.mdx

@@ -0,0 +1,161 @@
+import {Meta} from '@storybook/addon-docs';
+
+<Meta title="Guides/Upgrade Guides/v10.0" />
+
+# Canvas Kit 10.0 Upgrade Guide
+
+This guide contains an overview of the changes in Canvas Kit v10. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions.
+
+- [Codemod](#codemod)
+- [Removals](#removals)
+  - [Menu (Preview)](#menu-preview)
+- [Deprecations](#deprecations)
+- [Token Updates](#token-updates)
+  - [Space and Depth](#space-and-depth)
+- [Component Updates](#component-updates)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+  - [Labs](#labs)
+
+## Codemod
+
+Please use our [codemod package](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+to automatically update your code to work with most of the breaking changes in v10.
+
+```sh
+> npx @workday/canvas-kit-codemod v10 [path]
+```
+
+Alternatively, if you're unable to run the codemod successfully using `npx`, you can install the
+codemod package as a dev dependency, run it with `yarn`, and then remove the package after you're
+finished.
+
+```sh
+> yarn add @workday/canvas-kit-codemod --dev
+> yarn canvas-kit-codemod v10 [path]
+> yarn remove @workday/canvas-kit-codemod
+```
+
+> The codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` files. You'll need to manually edit
+> other file types (`.json`, `.mdx`, `.md`, etc.). You may need to run your linter after executing
+> the codemod, as its resulting formatting (spacing, quotes, etc.) may not match your project
+> conventions.
+
+The codemod will handle _most_ but _not all_ of the breaking changes in 10. **Breaking changes
+handled by the codemod are marked with 🤖 in the Upgrade Guide.**
+
+**Please verify all changes made by the codemod.** As a safety precaution, we recommend committing
+the changes from the codemod as a single isolated commit (separate from other changes) so you can
+roll back more easily if necessary.
+
+## Removals
+
+Removals are deletions from our codebase and you can no longer consume this component. We've either
+promoted or replaced a component or utility.
+
+### Menu (Preview)
+
+We've removed the `Menu` component in Preview. We recommend using the
+[Menu](/components/popups/menu/) in the Main package instead; it is a
+[compound component](/getting-started/for-developers/resources/compound-components/) and offers a
+more flexible API. Please refer to this
+[discussion](https://github.com/Workday/canvas-kit/discussions/2063) for instructions on how to
+migrate from the `Menu` in Preview to the `Menu` in Main.
+
+This change is **not** handled by the codemod due to the differences in API between the `Menu` in
+Preview and the `Menu` in Main.
+
+## Deprecations
+
+## Token Updates
+
+### Space and Depth
+
+**PR:** [#2229](https://github.com/Workday/canvas-kit/pull/2229)
+
+In v10, we have updated our `space` and `depth` token values from `px` to `rem`. This is based on
+the default browser font size which is `16px`.
+
+These updates just mean that we have moved the values from `px` to `rem`. The values have been
+updated on a 1:1 basis. None of the base value have changed, just the unit.
+
+Below is a table to show what each token value is, what is corresponds too and what the new `rem`
+value is in `px`:
+
+| px Value | rem Value | space Token |
+| -------- | --------- | ----------- |
+| 0        | 0         | zero        |
+| 4px      | 0.25rem   | xxxs        |
+| 8px      | 0.5rem    | xxs         |
+| 12px     | 0.75rem   | xs          |
+| 16px     | 1rem      | s           |
+| 24px     | 1.5rem    | m           |
+| 32px     | 2rem      | l           |
+| 40px     | 2.5rem    | xl          |
+| 64px     | 4rem      | xxl         |
+| 80px     | 5rem      | xxxl        |
+
+You can convert a `px` value to a `rem` value by dividing your `px` value by `16`(if your default
+browser font size hasn't been updated, the value will be `16`).
+
+For example:
+
+| Equation    | rem Value |
+| ----------- | --------- |
+| `16px/16px` | `1rem`    |
+| `32px/16px` | `2rem`    |
+| `8px/16px`  | `0.5rem`  |
+
+#### Why Did We Make This Change?
+
+We wanted to move away from absolute units in tokens to relative units for better accessibility and
+adaptability to different viewport/screen sizes. If a user changes their default browser font size,
+these sizes should change along with it. Since `px` are a fixed unit and do not scale, utilizing
+`rem` will allow these tokens to scale with a new default font size.
+
+## Component Updates
+
+## Glossary
+
+### Main
+
+Our Main package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-react` has
+undergone a full design and a11y review and is approved for use in product.
+
+Breaking changes to code in Main will only occur during major version updates and will always be
+communicated in advance and accompanied by migration strategies.
+
+---
+
+### Preview
+
+Our Preview package of Canvas Kit tokens, components, and utilities at
+`@workday/canvas-kit-preview-react` has undergone a full design and a11y review and is approved for
+use in product, but may not be up to the high code standards upheld in the [Main](#main) package.
+Preview is analagous to code in beta.
+
+Breaking changes are unlikely, but possible, and can be deployed to Preview at any time without
+triggering a major version update, though such changes will be communicated in advance and
+accompanied by migration strategies.
+
+Generally speaking, our goal is to eventually promote code from Preview to [Main](#main).
+Occasionally, a component with the same name will exist in both [Main](#main) and Preview (for
+example, see Segmented Control in [Preview](/components/buttons/segmented-control/) and
+[Main](https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/components-buttons-segmented-control--basic)).
+In these cases, Preview serves as a staging ground for an improved version of the component with a
+different API. The component in [Main](#main) will eventually be replaced with the one in Preview.
+
+---
+
+### Labs
+
+Our Labs package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-labs-react`
+has **not** undergone a full design and a11y review. Labs serves as an incubator space for new and
+experimental code and is analagous to code in alpha.
+
+Breaking changes can be deployed to Labs at any time without triggering a major version update and
+may not be subject to the same rigor in communcation and migration strategies reserved for breaking
+changes in [Preview](#preview) and [Main](#main).

modules/labs-react/combobox/spec/Combobox.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {Combobox, ComboboxProps} from '../lib/Combobox';
-import {DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {render, fireEvent} from '@testing-library/react';
 
@@ -13,7 +13,7 @@ describe('Combobox', () => {
 
   beforeEach(() => {
     defaultProps = {
-      autocompleteItems: [<DeprecatedMenuItem />, <DeprecatedMenuItem />],
+      autocompleteItems: [<StyledMenuItem />, <StyledMenuItem />],
       children: <TextInput placeholder={placeholderText} />,
     };
   });
@@ -88,7 +88,7 @@ describe('Combobox', () => {
     it('should render correct status text', () => {
       const screen = renderCombobox({
         ...defaultProps,
-        autocompleteItems: [<DeprecatedMenuItem />, <DeprecatedMenuItem />],
+        autocompleteItems: [<StyledMenuItem />, <StyledMenuItem />],
         getStatusText(listCount: number) {
           return `Item count: ${listCount}`;
         },
@@ -113,7 +113,7 @@ describe('Combobox', () => {
 
   test('Call callback function when enter is pressed', async () => {
     const menuText = 'menuText';
-    const autocompleteItems = [<DeprecatedMenuItem onClick={cb}>{menuText}</DeprecatedMenuItem>];
+    const autocompleteItems = [<StyledMenuItem onClick={cb}>{menuText}</StyledMenuItem>];
     const {findByRole} = renderCombobox({
       ...defaultProps,
       autocompleteItems,
@@ -132,9 +132,9 @@ describe('Combobox', () => {
   test('Call callback function when list item is clicked', async () => {
     const menuText = 'menuText';
     const autocompleteItems = [
-      <DeprecatedMenuItem onClick={cb}>
+      <StyledMenuItem onClick={cb}>
         <span>{menuText}</span>
-      </DeprecatedMenuItem>,
+      </StyledMenuItem>,
     ];
     const {findByRole, findByText} = renderCombobox({
       ...defaultProps,
@@ -152,9 +152,9 @@ describe('Combobox', () => {
     const menuText = 'menuText';
     const id = 'my-id';
     const autocompleteItems = [
-      <DeprecatedMenuItem isDisabled={true} onClick={cb}>
+      <StyledMenuItem isDisabled={true} onClick={cb}>
         {menuText}
-      </DeprecatedMenuItem>,
+      </StyledMenuItem>,
     ];
     const {findByRole} = renderCombobox({
       ...defaultProps,
@@ -176,7 +176,7 @@ describe('Combobox', () => {
   test('Do not call callback function when meta key is pressed', async () => {
     const menuText = 'menuText';
     const id = 'my-id';
-    const autocompleteItems = [<DeprecatedMenuItem onClick={cb}>{menuText}</DeprecatedMenuItem>];
+    const autocompleteItems = [<StyledMenuItem onClick={cb}>{menuText}</StyledMenuItem>];
     const {findByRole} = renderCombobox({
       ...defaultProps,
       autocompleteItems,
@@ -233,9 +233,9 @@ describe('Combobox', () => {
   test('Do not call blur function when clicking on disabled menu item', async () => {
     const menuText = 'menuText';
     const autocompleteItems = [
-      <DeprecatedMenuItem isDisabled={true} onClick={cb}>
+      <StyledMenuItem disabled onClick={cb}>
         {menuText}
-      </DeprecatedMenuItem>,
+      </StyledMenuItem>,
     ];
     const {findByRole, findByText} = renderCombobox({
       ...defaultProps,

modules/labs-react/combobox/spec/SSR.spec.tsx

@@ -4,12 +4,12 @@
 import React from 'react';
 import {renderToString} from 'react-dom/server';
 import {Combobox} from '../lib/Combobox';
-import {DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 
 describe('InputProvider', () => {
   it('should render on a server without crashing', () => {
-    const autocompleteItems = [<DeprecatedMenuItem>test</DeprecatedMenuItem>];
+    const autocompleteItems = [<StyledMenuItem>test</StyledMenuItem>];
     const ssrRender = () =>
       renderToString(
         <Combobox autocompleteItems={autocompleteItems}>