feat!: Remove Menu Preview (#2247)

Removal of the `DeprecatedMenu` and `DeprecatedMenuItem` component in Preview.

Fixes: #1993  

A compound component version is already in Main.

[category:Components]

Release Note:
This will not involve a codemod since the API has too many differences between the component being removed in Preview and the component in Main.

### BREAKING CHANGES
To move from the Menu component in Preview to the Menu compound component in Main, please read [this discussion](#2063).

Also, see [this](https://codesandbox.io/s/deprecatedmenu-and-menu-migration-gwi1ov) codesandbox that shows the differences between DeprecatedMenu and the Menu compound component.

modules/docs/mdx/10.0-UPGRADE_GUIDE.mdx

@@ -9,8 +9,16 @@ This guide contains an overview of the changes in Canvas Kit v10. Please
 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
 
@@ -43,6 +51,25 @@ handled by the codemod are marked with 🤖 in the Upgrade Guide.**
 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
@@ -88,3 +115,47 @@ We wanted to move away from absolute units in tokens to relative units for bette
 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}>

modules/labs-react/combobox/stories/stories.tsx

@@ -7,21 +7,21 @@ import {
   ComboBoxMenuItemGroup,
 } from '@workday/canvas-kit-labs-react/combobox';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {DeprecatedMenuItem, DeprecatedMenuItemProps} from '@workday/canvas-kit-preview-react/menu';
+import {StyledMenuItem, MenuItemProps} from '@workday/canvas-kit-react/menu';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 
 const autocompleteResult = (
   textModifier: number,
-  isDisabled: boolean
-): ReactElement<DeprecatedMenuItemProps> => (
-  <DeprecatedMenuItem isDisabled={isDisabled}>
+  disabled: boolean
+): ReactElement<MenuItemProps> => (
+  <StyledMenuItem isDisabled={disabled}>
     Result{' '}
     <span>
       num<span>ber</span>
     </span>{' '}
     {textModifier}
-  </DeprecatedMenuItem>
+  </StyledMenuItem>
 );
 
 const simpleAutoComplete = (count: number, showDisabledItems, total = 5) =>
@@ -35,9 +35,9 @@ const groupOfResults = (
   groupHeading: ReactNode = 'Group'
 ): ComboBoxMenuItemGroup => ({
   header: (
-    <DeprecatedMenuItem>
+    <StyledMenuItem>
       <strong>{groupHeading}</strong>
-    </DeprecatedMenuItem>
+    </StyledMenuItem>
   ),
   items: simpleAutoComplete(count, showDisabledItems, 10),
 });

modules/labs-react/search-form/stories/examples/Basic.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -29,9 +29,7 @@ export const Basic = () => {
   const [wineList, setWineList] = React.useState(initialWineList);
   // Tracking the input value for onSubmit
   const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => (
-    <DeprecatedMenuItem key={wine}>{wine}</DeprecatedMenuItem>
-  ));
+  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
 
   const filterMenuItems = e => {
     setSearchInput(e.target.value);

modules/labs-react/search-form/stories/examples/CustomTheme.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {SearchForm, SearchThemeAttributes} from '@workday/canvas-kit-labs-react/search-form';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {colors} from '@workday/canvas-kit-react/tokens';
@@ -30,9 +30,7 @@ export const CustomTheme = () => {
   const [wineList, setWineList] = React.useState(initialWineList);
   // Tracking the input value for onSubmit
   const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => (
-    <DeprecatedMenuItem key={wine}>{wine}</DeprecatedMenuItem>
-  ));
+  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
 
   const filterMenuItems = e => {
     setSearchInput(e.target.value);

modules/labs-react/search-form/stories/examples/Grow.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -29,9 +29,7 @@ export const Grow = () => {
   const [wineList, setWineList] = React.useState(initialWineList);
   // Tracking the input value for onSubmit
   const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => (
-    <DeprecatedMenuItem key={wine}>{wine}</DeprecatedMenuItem>
-  ));
+  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
 
   const filterMenuItems = e => {
     setSearchInput(e.target.value);

modules/labs-react/search-form/stories/examples/RTL.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {SearchForm} from '@workday/canvas-kit-labs-react/search-form';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
@@ -30,9 +30,7 @@ export const RTL = () => {
   const [wineList, setWineList] = React.useState(initialWineList);
   // Tracking the input value for onSubmit
   const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => (
-    <DeprecatedMenuItem key={wine}>{wine}</DeprecatedMenuItem>
-  ));
+  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
 
   const filterMenuItems = e => {
     setSearchInput(e.target.value);

modules/labs-react/search-form/stories/examples/Theming.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
+import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
 import {SearchForm, SearchTheme} from '@workday/canvas-kit-labs-react/search-form';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -29,9 +29,7 @@ export const Theming = () => {
   const [wineList, setWineList] = React.useState(initialWineList);
   // Tracking the input value for onSubmit
   const [searchInput, setSearchInput] = React.useState('');
-  const menuItems = wineList.map(wine => (
-    <DeprecatedMenuItem key={wine}>{wine}</DeprecatedMenuItem>
-  ));
+  const menuItems = wineList.map(wine => <StyledMenuItem key={wine}>{wine}</StyledMenuItem>);
 
   const filterMenuItems = e => {
     setSearchInput(e.target.value);

modules/preview-react/index.ts

@@ -1,6 +1,5 @@
 export * from './color-picker';
 export * from './form-field';
-export * from './menu';
 export * from './pill';
 export * from './segmented-control';
 export * from './select';