@workday/canvas-kit-docs 14.0.0-alpha.1147-next.0 → 14.0.0-alpha.1149-next.0

package/dist/mdx/14.0-UPGRADE-GUIDE.mdx

@@ -9,8 +9,11 @@ any questions.
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [Component Updates](#component-updates)
-  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+  - [Styling Changes](#styling-changes)
+  - [Card](#card)
   - [SearchForm](#search-form)
+- [Removals](#removals)
+  - [Menu (preview)](#menu-preview)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -78,7 +81,9 @@ yarn remove @workday/canvas-kit-codemod
 > after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
 > your project conventions.
 
-## Styling API and Canvas Tokens 💅
+## Component Updates
+
+### Styling Changes 💅
 
 Several components have been refactored to use our Canvas tokens and styling API. The React
 interface has not changed, but Canvas Tokens are now used for dynamic properties.
@@ -98,7 +103,96 @@ The following components have been updated:
 - `ToolbarDropdownButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
 - `ToolbarIconButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
 
-## Search Form 🚨
+### Card 🚨
+
+**PR:** [#3350](https://github.com/Workday/canvas-kit/pull/3350)
+
+We've rebranded the `Card` component to align with our new brand directions and provide better
+visual hierarchy and more flexible styling options. The following changes have been made:
+
+#### Default Card No Longer Has Shadow
+
+The default `Card` variant no longer includes a shadow, creating a cleaner, flatter appearance that
+aligns with our new brand's emphasis on simplicity and clarity. This is a **visual breaking change**
+that may affect your application's visual hierarchy. If your design requires shadow you can added
+through `cs` prop.
+
+**Before in v13**
+
+```tsx
+<Card>
+  <Card.Heading>Card Title</Card.Heading>
+  <Card.Body>Card content with shadow</Card.Body>
+</Card>
+```
+
+**After in v14**
+
+```tsx
+<Card cs={{boxShadow: system.depth[1]}}>
+  <Card.Heading>Card Title</Card.Heading>
+  <Card.Body>Card content with shadow</Card.Body>
+</Card>
+```
+
+#### New Card Variants
+
+We've added two new variants to provide more styling flexibility:
+
+- **`borderless`**: Use this variant when placing cards on colored backgrounds where you want the
+  card to blend seamlessly without borders or shadows.
+- **`filled`**: Use this variant when you need a card with a grayish background to create visual
+  separation from the page background.
+
+The `variant` prop is optional - if no variant is specified, the card will use the default styling.
+
+```tsx
+// Default card (no variant prop needed)
+<Card>
+  <Card.Heading>Default Card</Card.Heading>
+  <Card.Body>Default styling with borders, no shadow</Card.Body>
+</Card>
+
+// Borderless variant for colored backgrounds
+<Card variant="borderless">
+  <Card.Heading>Card on Colored Background</Card.Heading>
+  <Card.Body>Content blends with background</Card.Body>
+</Card>
+
+// Filled variant with grayish background
+<Card variant="filled">
+  <Card.Heading>Card with grayish Background</Card.Heading>
+  <Card.Body>Content with visual separation</Card.Body>
+</Card>
+```
+
+#### Gap Instead of Margins
+
+We've replaced the individual margins on `Card.Heading` and `Card.Body` with a `gap` prop on the
+card container. The card now uses `display: flex` with `flex-direction: column` by default, and the
+`gap` prop provides consistent spacing between all direct children. This provides more consistent
+spacing and better control over the layout. This is a **visual breaking change** that may affect the
+spacing between card elements.
+
+**Before in v13**
+
+```tsx
+<Card>
+  <Card.Heading marginBlock="zero">Title</Card.Heading>
+  <Card.Body marginBlock="zero">Card without any spacing</Card.Body>
+</Card>
+```
+
+**After in v14**
+
+```tsx
+<Card cs={{gap: system.space.zero}}>
+  <Card.Heading>Title</Card.Heading>
+  <Card.Body>Card without any spacing</Card.Body>
+</Card>
+```
+
+### Search Form 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
 
@@ -151,6 +245,21 @@ const customTheme = {
   This **should not** affect the way you use the type unless you're passing a `number` of `0`, `1`
   or `2` to the `searchTheme` prop.
 
+## 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)
+
+**PR:** [#3353](https://github.com/Workday/canvas-kit/pull/3353)
+
+We've removed `Menu` from `@workday/canvas-kit-preview-react` package. Please use
+[Menu](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--docs) from
+`@workday/canvas-kit-react` instead.
+
+---
+
 ## Troubleshooting
 
 - When upgrading to the latest major version of Canvas Kit, all related Canvas Kit packages should

package/dist/mdx/react/card/card.mdx

@@ -1,5 +1,7 @@
-import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
+import Borderless from './examples/Borderless';
+import Filled from './examples/Filled';
 import WithCustomStyles from './examples/CustomStyles';
 import WithStencils from './examples/Stencils';
 
@@ -27,6 +29,22 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={Basic} />
 
+### Borderless Example
+
+The `borderless` variant removes the border from the Card, creating a cleaner appearance while
+maintaining the same internal spacing and structure. Use this variant when placing cards on colored
+backgrounds where you want the card to blend seamlessly without borders or shadows.
+
+<ExampleCodeBlock code={Borderless} />
+
+### Filled Example
+
+The `filled` variant adds a background color to the Card, creating a more prominent appearance while
+maintaining the same internal spacing and structure. Use this variant when you need a card with a
+grayish background to create visual separation from the page background.
+
+<ExampleCodeBlock code={Filled} />
+
 ### Custom Styles
 
 Card and its subcomponents support custom styling via the `cs` prop. For more information, check our

package/dist/mdx/react/card/examples/Borderless.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {Card} from '@workday/canvas-kit-react/card';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const styles = createStyles({
+  background: system.color.bg.alt.softer,
+  padding: system.space.x4,
+});
+
+export default () => {
+  return (
+    <div className={styles}>
+      <Card variant="borderless">
+        <Card.Heading>Canvas Supreme</Card.Heading>
+        <Card.Body>
+          Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
+          onions, and oregano.
+        </Card.Body>
+      </Card>
+    </div>
+  );
+};

package/dist/mdx/react/card/examples/Filled.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Card} from '@workday/canvas-kit-react/card';
+
+export default () => {
+  return (
+    <Card variant="filled">
+      <Card.Heading>Canvas Supreme</Card.Heading>
+      <Card.Body>
+        Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
+        onions, and oregano.
+      </Card.Body>
+    </Card>
+  );
+};

package/dist/mdx/react/card/examples/Stencils.tsx

@@ -11,6 +11,8 @@ const menuCardStencil = createStencil({
     flexDirection: 'column',
     padding: system.space.zero,
     maxWidth: px2rem(320),
+    boxShadow: system.depth[1],
+    overflow: 'hidden',
   },
 });
 
@@ -22,7 +24,6 @@ const menuCardHeroStencil = createStencil({
     aspectRatio: '1',
     maxHeight: px2rem(80),
     padding: system.space.x2,
-    borderRadius: `${system.shape.x2} ${system.shape.x2} 0 0`,
   },
 });
 

package/dist/mdx/react/modal/examples/Basic.tsx

@@ -24,7 +24,7 @@ export default () => {
               software and associated documentation files (the "Software").
             </Box>
           </Modal.Body>
-          <Flex gap="s" padding="xxs" marginTop="xxs">
+          <Flex gap="s" padding="xxs">
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>

package/dist/mdx/react/modal/examples/BodyOverflow.tsx

@@ -81,7 +81,7 @@ export default () => {
               ut aliquam purus sit.
             </p>
           </Modal.Body>
-          <Flex gap="s" padding="xxs" marginTop="xxs">
+          <Flex gap="s" padding="xxs">
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>

package/dist/mdx/react/modal/examples/CustomFocus.tsx

@@ -39,7 +39,7 @@ export default () => {
               />
             </FormField>
           </Modal.Body>
-          <Flex gap="s" padding="xxs" marginTop="xxs">
+          <Flex gap="s" padding="xxs">
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>

package/dist/mdx/react/modal/examples/FormModal.tsx

@@ -41,7 +41,7 @@ export default () => {
               <FormField.Input as={TextInput} name="last" />
             </FormField>
           </Modal.Body>
-          <Flex gap="s" padding="xxs" marginTop="xxs">
+          <Flex gap="s" padding="xxs">
             <Modal.CloseButton>Cancel</Modal.CloseButton>
             <PrimaryButton type="submit">Submit</PrimaryButton>
           </Flex>

package/dist/mdx/react/modal/examples/FullOverflow.tsx

@@ -81,7 +81,7 @@ export default () => {
               ut aliquam purus sit.
             </p>
           </Modal.Body>
-          <Flex gap="s" padding="xxs" marginTop="xxs">
+          <Flex gap="s" padding="xxs">
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>

package/dist/mdx/react/modal/examples/ReturnFocus.tsx

@@ -50,7 +50,7 @@ export default () => {
               Are you sure you want to delete the item?
             </Box>
           </Modal.Body>
-          <Flex gap="s" padding="xxs" marginTop="xxs">
+          <Flex gap="s" padding="xxs">
             <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Modal.CloseButton>

package/dist/mdx/react/modal/examples/WithoutCloseIcon.tsx

@@ -41,7 +41,7 @@ export default () => {
               Are you sure you want to delete the item?
             </Box>
           </Modal.Body>
-          <Flex gap="s" padding="xxs" marginTop="xxs">
+          <Flex gap="s" padding="xxs">
             <Modal.CloseButton ref={cancelBtnRef}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete

package/dist/mdx/react/popup/examples/Basic.tsx

@@ -33,7 +33,7 @@ export default () => {
               Are you sure you'd like to delete the item titled 'My Item'?
             </Box>
           </Popup.Body>
-          <Flex gap="s" padding="xxs" marginTop="xxs">
+          <Flex gap="s" padding="xxs">
             <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Popup.CloseButton>

package/dist/mdx/react/popup/examples/FocusRedirect.tsx

@@ -47,7 +47,7 @@ export default () => {
                 Are you sure you'd like to delete the item titled 'My Item'?
               </Box>
             </Popup.Body>
-            <Flex gap="s" padding="xxs" marginTop="xxs">
+            <Flex gap="s" padding="xxs">
               <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete
               </Popup.CloseButton>

package/dist/mdx/react/popup/examples/FocusTrap.tsx

@@ -47,7 +47,7 @@ export default () => {
                 Are you sure you'd like to delete the item titled 'My Item'?
               </Box>
             </Popup.Body>
-            <Flex gap="s" padding="xxs" marginTop="xxs">
+            <Flex gap="s" padding="xxs">
               <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete
               </Popup.CloseButton>

package/dist/mdx/react/popup/examples/InitialFocus.tsx

@@ -33,7 +33,7 @@ export default () => {
               Your message has been sent!
             </Box>
           </Popup.Body>
-          <Flex gap="s" padding="xxs" marginTop="xxs">
+          <Flex gap="s" padding="xxs">
             <Popup.CloseButton ref={initialFocusRef} aria-describedby="popup-message">
               OK
             </Popup.CloseButton>

package/dist/mdx/react/popup/examples/NestedPopups.tsx

@@ -38,7 +38,7 @@ export default () => {
             <Popup.Body>
               <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 1</p>
             </Popup.Body>
-            <Flex gap="s" padding="xxs" marginTop="xxs">
+            <Flex gap="s" padding="xxs">
               <Popup model={popup2}>
                 <Popup.Target>Open Popup 2</Popup.Target>
                 <Popup.Popper>
@@ -47,7 +47,7 @@ export default () => {
                     <Popup.Body>
                       <p style={{marginTop: 0, marginBottom: 0}}>Contents of Popup 2</p>
                     </Popup.Body>
-                    <Flex gap="s" padding="xxs" marginTop="xxs">
+                    <Flex gap="s" padding="xxs">
                       <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
                         Close Both (as)
                       </Popup.CloseButton>

package/dist/mdx/react/popup/examples/PopupWithFallbackPlacements.tsx

@@ -61,7 +61,7 @@ export default () => {
               <Popup.CloseIcon aria-label="Close" />
               <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex gap="s" padding="xxs" marginTop="xxs">
+              <Flex gap="s" padding="xxs">
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>
@@ -79,7 +79,7 @@ export default () => {
               <Popup.CloseIcon aria-label="Close" />
               <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex gap="s" padding="xxs" marginTop="xxs">
+              <Flex gap="s" padding="xxs">
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>
@@ -97,7 +97,7 @@ export default () => {
               <Popup.CloseIcon aria-label="Close" />
               <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex gap="s" padding="xxs" marginTop="xxs">
+              <Flex gap="s" padding="xxs">
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>
@@ -115,7 +115,7 @@ export default () => {
               <Popup.CloseIcon aria-label="Close" />
               <Popup.Heading paddingTop="m">This is Popup heading</Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex gap="s" padding="xxs" marginTop="xxs">
+              <Flex gap="s" padding="xxs">
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>

package/dist/mdx/react/popup/examples/RTL.tsx

@@ -16,7 +16,7 @@ export default () => {
             האם ברצונך למחוק פריט זה
           </Box>
         </Popup.Body>
-        <Flex gap="s" padding="xxs" marginTop="xxs">
+        <Flex gap="s" padding="xxs">
           <DeleteButton>לִמְחוֹק</DeleteButton>
           <SecondaryButton>לְבַטֵל</SecondaryButton>
         </Flex>

package/dist/mdx/react/tooltip/examples/Placements.tsx

@@ -6,6 +6,7 @@ import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
 const placementCardStyles = createStyles({
+  boxShadow: system.depth[2],
   display: 'flex',
   width: 100,
   height: 100,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1147-next.0",
+  "version": "14.0.0-alpha.1149-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1147-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1147-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1147-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1147-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1149-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1149-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1149-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1149-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "3.0.0-alpha.5",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "de1260613697f1f525bc62614967f81521594356"
+  "gitHead": "ef6d229e302c293a16da98a7b36b1409877a1ac8"
 }

package/dist/mdx/preview-react/menu/Menu.mdx

@@ -1,105 +0,0 @@
-import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import Basic from './examples/Basic';
-import ContextMenu from './examples/ContextMenu';
-import CustomMenuItem from './examples/CustomMenuItem';
-import Icons from './examples/Icons';
-import Headers from './examples/Headers';
-import ManyItems from './examples/ManyItems';
-
-
-# Canvas Kit Menu
-
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`Menu` in Preview been deprecated and will be removed in a future major version. Please use
-[Menu in Main](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--basic)
-instead.
-
-`DeprecatedMenu` displays a list of options when triggered by an action or UI element like an icon
-or button.
-
-[> Workday Design Reference](https://design.workday.com/components/popups/menus)
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-### Basic Example
-
-`DeprecatedMenu` is typically triggered by an action such as pressing a button. Here's an example of
-how you might implement that behavior using a [`Popup`](/components/popups/popup/).
-
-<ExampleCodeBlock code={Basic} />
-
-`DeprecatedMenu` will automatically assign focus to itself when it appears provided you set the
-`isOpen` prop correctly, so you do **not** need to use the `useInitialFocus` `Popup` hook. You
-**will**, however, need to use `useReturnFocus` to return focus back to the triggering button after
-closing the `DeprecatedMenu`.
-
-`DeprecatedMenu` follows the
-[Actions Menu pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
-using `aria-activedescendant`. Below is table of supported keyboard shortcuts and associated
-actions.
-
-| Key                | Action                                                                                                                                           |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `Enter` or `Space` | Activates the menu item and then closes the menu                                                                                                 |
-| `Escape`           | Closes the menu                                                                                                                                  |
-| `Up Arrow`         | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item                                     |
-| `Down Arrow`       | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item                                         |
-| `Home`             | Moves focus to the first menu item                                                                                                               |
-| `End`              | Moves focus to the last menu item                                                                                                                |
-| `A-Z / a-z`        | Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists – otherwise, focus does not move |
-
-Note that although `DeprecatedMenu` includes support for keyboard shortcuts for the menu itself,
-you'll need to add your own keyboard handling and aria attributes to the triggering button.
-
-### Context Menu
-
-<ExampleCodeBlock code={ContextMenu} />
-
-### Custom Menu Item
-
-`DeprecatedMenu` renders a styled `<ul>` element with a role of `menu`, and `DeprecatedMenuItem`s
-are `<li>` elements with the correct attributes to ensure they are accessible. If you choose to
-implement your own custom menu items, be sure to use semantic `<li>` elements with the following
-attributes:
-
-- `role="menuitem"`
-- `tabindex={-1}`
-
-Below is an example:
-
-<ExampleCodeBlock code={CustomMenuItem} />
-
-### Icons
-
-<ExampleCodeBlock code={Icons} />
-
-### Headers
-
-You can group menu items logically by adding a `isHeader` attribute on your `<MenuItems>`. To make
-your new items screen reader friendly add an `aria-label` around each grouped item.
-
-<ExampleCodeBlock code={Headers} />
-
-### Many Items
-
-<ExampleCodeBlock code={ManyItems} />
-
-## Component API
-
-### DeprecatedMenu
-
-<SymbolDoc name="DeprecatedMenu" fileName="/preview-react/" />
-
-### DeprecatedMenuItem
-
-<SymbolDoc name="DeprecatedMenuItem" fileName="/preview-react/" />

package/dist/mdx/preview-react/menu/examples/Basic.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import {DeprecatedMenu, DeprecatedMenuItem} from '@workday/canvas-kit-preview-react/menu';
-import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {
-  Popup,
-  usePopupModel,
-  useAlwaysCloseOnOutsideClick,
-  useReturnFocus,
-  useCloseOnEscape,
-} from '@workday/canvas-kit-react/popup';
-
-const menuId = 'basic-menu';
-
-export default () => {
-  const model = usePopupModel();
-
-  useAlwaysCloseOnOutsideClick(model);
-  useCloseOnEscape(model);
-  useReturnFocus(model);
-
-  const isOpen = model.state.visibility !== 'hidden';
-
-  const handleButtonKeyDown = (event: React.KeyboardEvent) => {
-    let isShortcut = false;
-    if (event.key === `Spacebar` || event.key === ` ` || event.key === `Enter`) {
-      isShortcut = true;
-      if (isOpen) {
-        model.events.hide();
-      } else {
-        model.events.show();
-      }
-    } else if (event.key === `ArrowDown` || event.key === `ArrowUp`) {
-      isShortcut = true;
-      model.events.show();
-    }
-
-    if (isShortcut) {
-      // Prevent ArrowDown and ArrowUp keys from scrolling the entire page
-      event.preventDefault();
-    }
-  };
-
-  return (
-    <Popup model={model}>
-      <Popup.Target
-        as={SecondaryButton}
-        onKeyDown={handleButtonKeyDown}
-        aria-expanded={isOpen}
-        aria-haspopup={true}
-        aria-controls={isOpen ? menuId : undefined}
-      >
-        Open Menu
-      </Popup.Target>
-      <Popup.Popper placement="bottom-start">
-        {/*
-          isOpen must be set for focus to be properly assigned to the DeprecatedMenu;
-          onClose must be set in order to the DeprecatedMenu to close properly after
-          selecting a DeprecatedMenuItem
-        */}
-        <DeprecatedMenu id={menuId} isOpen={isOpen} onClose={model.events.hide}>
-          <DeprecatedMenuItem>First Item</DeprecatedMenuItem>
-          <DeprecatedMenuItem>
-            Second Item (with a really really really long label)
-          </DeprecatedMenuItem>
-          <DeprecatedMenuItem isDisabled>Third Item (disabled)</DeprecatedMenuItem>
-          <DeprecatedMenuItem>
-            Fourth Item (<b>with markup</b>)
-          </DeprecatedMenuItem>
-          <DeprecatedMenuItem hasDivider>Fifth Item (with divider)</DeprecatedMenuItem>
-        </DeprecatedMenu>
-      </Popup.Popper>
-    </Popup>
-  );
-};