@workday/canvas-kit-docs 16.0.0-alpha.0463-next.0 → 16.0.0-alpha.0465-next.0

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

@@ -17,7 +17,8 @@ Soon to be...
 - [Component Updates](#component-updates)
   - [Action Bar](#action-bar)
   - [Avatar](#avatar)
-  - [Buttons](#buttons) - [Delete Button Outline Variant](#delete-button-outline-variant)
+  - [Buttons](#buttons)
+    - [Delete Button Outline Variant](#delete-button-outline-variant)
   - [Card](#card)
   - [Form Field](#form-field)
   - [Inputs](#inputs)
@@ -32,6 +33,8 @@ Soon to be...
     - [Text Input](#text-input)
   - [Menu](#menu)
   - [Segmented Control](#segmented-control)
+	- [Toast](#toast)
+	- [Tooltip](#tooltip)
 - [New Utilities](#new-utilities)
   - [cornerShapeStencil](#cornershapestencil)
 - [Deprecations](#deprecations)
@@ -342,6 +345,36 @@ If you customize `brand.success.base` in your theme, please verify the following
 - Error and caution states no longer display a status background color; only the standard background
   is shown.
 
+### Toast
+
+**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
+
+#### Visual Updates
+
+- Padding is now applied to the `Toast` container itself instead of being distributed across
+  `Toast.Body` and `Toast.Icon`.
+- Gap between the icon, body, and close icon is now `base.size150` (12px).
+- Shape uses `system.shape.xl`.
+- `Toast.Body` no longer has a gap between text and link.
+- `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
+  LTR).
+- `Toast.CloseIcon` was changed to be `extraSmall` tertiary button.
+
+### Tooltip
+
+**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
+
+#### Visual Updates
+
+- The default tooltip has been restyled from a dark surface to a light surface.
+- A visible border (`system.color.border.default`) is now applied to the container, replacing the
+  previous transparent outline.
+- Tooltip boundaries remain visible in Windows High Contrast mode: when High Contrast is detected,
+  Tooltip uses a solid outline (`outline: solid 1px CanvasText`) to ensure clear visibility.
+- Shape is now fully rounded using `system.shape.full`.
+- Type level is now `subtext.lg` (previously `subtext.md`).
+- Padding and spacing have been adjusted to accommodate the new styling.
+
 ### Menu
 
 **PR:** [#3987](https://github.com/Workday/canvas-kit/pull/3987)

package/dist/mdx/labs-react/kbd/KBD.mdx

@@ -2,6 +2,7 @@ import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
 
 import {KBD} from '@workday/canvas-kit-labs-react/kbd';
 import Basic from './examples/Basic';
+import InTooltip from './examples/InTooltip';
 import Items from './examples/Items';
 import RTL from './examples/RTL';
 import Size from './examples/Size';
@@ -66,6 +67,13 @@ standard style or `plain` for a more minimal appearance. The `variant` is shared
 
 <ExampleCodeBlock code={Variant} />
 
+### In Tooltip
+
+`KBD` can be used inside a `Tooltip` to communicate the keyboard shortcut associated with an
+interactive control. Pair it with descriptive text so the shortcut is easy to understand.
+
+<ExampleCodeBlock code={InTooltip} />
+
 ## Accessibility
 
 `KBD` is **presentational and semantic text**. It renders a `kbd` element so assistive technology
@@ -73,6 +81,11 @@ can recognize the content as keyboard input, but it does **not** make a keyboard
 expose it to the browser. It is the visual/semantic representation of a key, not the accessibility
 contract for a functioning shortcut.
 
+- `aria-keyshortcuts` isn't supposed to go on the presentational KBD wrapper, it should be on the interactive control with the key listener.
+- The `<KBD.Item>` components that use glyphs need translated aria-label strings. (E.g. "Command", "Control", etc.)
+
+
+
 ### Provide spoken labels for symbolic or abbreviated keys
 
 Glyphs and abbreviations such as <kbd>⌘</kbd>, <kbd>⌥</kbd>, <kbd>⇧</kbd>, and arrow keys are **not

package/dist/mdx/labs-react/kbd/examples/InTooltip.tsx

@@ -0,0 +1,38 @@
+import {KBD} from '@workday/canvas-kit-labs-react/kbd';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {Subtext} from '@workday/canvas-kit-react/text';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {copyIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+const flexContainer = createStyles({
+  display: 'flex',
+  alignItems: 'center',
+  gap: system.gap.xs,
+  p: {
+    margin: 0,
+  },
+});
+
+export default () => {
+  return (
+    <Tooltip
+      title={
+        <div className={flexContainer}>
+          <Subtext size="large">Copy to clipboard</Subtext>
+          <KBD>
+            <KBD.Item>
+              <KBD variant="plain">
+                <KBD.Item aria-label="Command">⌘</KBD.Item>
+                <KBD.Item>C</KBD.Item>
+              </KBD>
+            </KBD.Item>
+          </KBD>
+        </div>
+      }
+    >
+      <SecondaryButton icon={copyIcon} aria-keyshortcuts="Command+C" />
+    </Tooltip>
+  );
+};

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

@@ -30,17 +30,15 @@ export default () => {
           <Dialog.Body>
             <FormField>
               <FormField.Label>Email</FormField.Label>
-              <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+              <FormField.Input as={TextInput} grow onChange={handleChange} value={value} />
             </FormField>
           </Dialog.Body>
-          <Flex
-            cs={{padding: system.padding.xxs, marginBlockStart: system.gap.xs, gap: system.gap.md}}
-          >
+          <Dialog.ButtonGroup>
+            <Dialog.CloseButton>Cancel</Dialog.CloseButton>
             <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>
               Submit
             </Dialog.CloseButton>
-            <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-          </Flex>
+          </Dialog.ButtonGroup>
         </Dialog.Card>
       </Dialog.Popper>
     </Dialog>

package/dist/mdx/react/dialog/examples/DialogWithFallbackPlacements.tsx

@@ -1,6 +1,6 @@
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {Dialog} from '@workday/canvas-kit-react/dialog';
-import {Flex, Grid} from '@workday/canvas-kit-react/layout';
+import {Grid} from '@workday/canvas-kit-react/layout';
 import {calc, createStyles} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
@@ -50,16 +50,10 @@ export default () => {
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex
-                cs={{
-                  gap: system.gap.sm,
-                  padding: system.padding.xs,
-                  marginBlockStart: system.gap.sm,
-                }}
-              >
-                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              <Dialog.ButtonGroup>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-              </Flex>
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              </Dialog.ButtonGroup>
             </Dialog.Card>
           </Dialog.Popper>
         </Dialog>
@@ -74,16 +68,10 @@ export default () => {
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex
-                cs={{
-                  gap: system.gap.sm,
-                  padding: system.padding.xs,
-                  marginBlockStart: system.gap.sm,
-                }}
-              >
-                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              <Dialog.ButtonGroup>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-              </Flex>
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              </Dialog.ButtonGroup>
             </Dialog.Card>
           </Dialog.Popper>
         </Dialog>
@@ -98,16 +86,10 @@ export default () => {
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex
-                cs={{
-                  gap: system.gap.sm,
-                  padding: system.padding.xs,
-                  marginBlockStart: system.gap.sm,
-                }}
-              >
-                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              <Dialog.ButtonGroup>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-              </Flex>
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              </Dialog.ButtonGroup>
             </Dialog.Card>
           </Dialog.Popper>
         </Dialog>
@@ -122,16 +104,10 @@ export default () => {
                 This is dialog heading
               </Dialog.Heading>
               <Dialog.Body>This is dialog body.</Dialog.Body>
-              <Flex
-                cs={{
-                  gap: system.gap.sm,
-                  padding: system.padding.xs,
-                  marginBlockStart: system.gap.sm,
-                }}
-              >
-                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              <Dialog.ButtonGroup>
                 <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-              </Flex>
+                <Dialog.CloseButton as={PrimaryButton}>Submit</Dialog.CloseButton>
+              </Dialog.ButtonGroup>
             </Dialog.Card>
           </Dialog.Popper>
         </Dialog>

package/dist/mdx/react/dialog/examples/Focus.tsx

@@ -31,21 +31,15 @@ export default () => {
             <Dialog.Body>
               <FormField>
                 <FormField.Label>Email</FormField.Label>
-                <FormField.Input as={TextInput} onChange={handleChange} value={value} />
+                <FormField.Input as={TextInput} grow onChange={handleChange} value={value} />
               </FormField>
             </Dialog.Body>
-            <Flex
-              cs={{
-                padding: system.padding.xxs,
-                marginBlockStart: system.gap.xs,
-                gap: system.gap.md,
-              }}
-            >
+            <Dialog.ButtonGroup>
+              <Dialog.CloseButton>Cancel</Dialog.CloseButton>
               <Dialog.CloseButton as={PrimaryButton} onClick={handleEmail}>
                 Submit
               </Dialog.CloseButton>
-              <Dialog.CloseButton>Cancel</Dialog.CloseButton>
-            </Flex>
+            </Dialog.ButtonGroup>
           </Dialog.Card>
         </Dialog.Popper>
       </Dialog>

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

@@ -1,7 +1,6 @@
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Box} from '@workday/canvas-kit-react/layout';
 import {Modal} from '@workday/canvas-kit-react/modal';
-import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const handleAcknowledge = () => {
@@ -25,12 +24,12 @@ export default () => {
               software and associated documentation files (the "Software").
             </Box>
           </Modal.Body>
-          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+          <Modal.ButtonGroup>
+            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -80,12 +80,12 @@ export default () => {
               ut aliquam purus sit.
             </p>
           </Modal.Body>
-          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+          <Modal.ButtonGroup>
+            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -3,7 +3,7 @@ import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Box} from '@workday/canvas-kit-react/layout';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {system} from '@workday/canvas-tokens-web';
@@ -31,22 +31,23 @@ export default () => {
             <Box as="p" id={longDescID} cs={{marginBlockStart: 0, marginBlockEnd: system.gap.md}}>
               Enter your initials to acknowledge the license.
             </Box>
-            <FormField cs={{marginBlockEnd: 0}}>
+            <FormField>
               <FormField.Label>Initials</FormField.Label>
               <FormField.Input
                 as={TextInput}
                 ref={ref}
                 value={value}
+                grow
                 onChange={e => setValue(e.currentTarget.value)}
               />
             </FormField>
           </Modal.Body>
-          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+          <Modal.ButtonGroup>
+            <Modal.CloseButton>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton>Cancel</Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -2,21 +2,13 @@ import React from 'react';
 
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {Select} from '@workday/canvas-kit-react/select';
 import {TextInput} from '@workday/canvas-kit-react/text-input';
-import {createStyles} from '@workday/canvas-kit-styling';
 import {plusIcon} from '@workday/canvas-system-icons-web';
-import {system} from '@workday/canvas-tokens-web';
 
 const FAVORITE_COLOR_OPTIONS = ['Blue', 'Yellow'];
 
-const flexStyles = createStyles({
-  gap: system.gap.md,
-  padding: system.padding.xs,
-});
-
 export default () => {
   const model = useModalModel();
 
@@ -44,15 +36,15 @@ export default () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>New User</Modal.Heading>
           <Modal.Body>
-            <FormField>
+            <FormField grow>
               <FormField.Label>First Name</FormField.Label>
               <FormField.Input as={TextInput} name="first" />
             </FormField>
-            <FormField>
+            <FormField grow>
               <FormField.Label>Last Name</FormField.Label>
               <FormField.Input as={TextInput} name="last" />
             </FormField>
-            <FormField>
+            <FormField grow>
               <FormField.Label>Favorite Color</FormField.Label>
               <FormField.Field>
                 <Select items={FAVORITE_COLOR_OPTIONS}>
@@ -66,10 +58,10 @@ export default () => {
               </FormField.Field>
             </FormField>
           </Modal.Body>
-          <Flex cs={flexStyles}>
+          <Modal.ButtonGroup>
             <Modal.CloseButton>Cancel</Modal.CloseButton>
             <PrimaryButton type="submit">Submit</PrimaryButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -80,12 +80,12 @@ export default () => {
               ut aliquam purus sit.
             </p>
           </Modal.Body>
-          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+          <Modal.ButtonGroup>
+            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={PrimaryButton} onClick={handleAcknowledge}>
               Acknowledge
             </Modal.CloseButton>
-            <Modal.CloseButton onClick={handleCancel}>Cancel</Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.OverflowOverlay>
     </Modal>

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

@@ -1,7 +1,5 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal} from '@workday/canvas-kit-react/modal';
-import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   return (
@@ -13,10 +11,10 @@ export default () => {
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
             <p>Are you sure you want to delete the item?</p>
-            <Flex cs={{gap: system.gap.md}}>
-              <Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
+            <Modal.ButtonGroup position="start">
               <Modal.CloseButton>Cancel</Modal.CloseButton>
-            </Flex>
+              <Modal.CloseButton as={DeleteButton}>Delete</Modal.CloseButton>
+            </Modal.ButtonGroup>
             <iframe
               role="iframe"
               srcDoc="<html><body>Hello, <b>world</b>.<button>iframe button 1</button><button data-testid='button2'>iframe button 2</button></body></html>"

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

@@ -1,5 +1,4 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {
   Popup,
@@ -7,7 +6,6 @@ import {
   useCloseOnOutsideClick,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const modal = useModalModel();
@@ -31,17 +29,18 @@ export default () => {
             <Modal.Body>
               <p>Are you sure you want to delete the item?</p>
               <Popup model={popup}>
-                <Flex cs={{gap: system.gap.md}}>
-                  <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
+                <Popup.ButtonGroup>
                   <Popup.CloseButton>Cancel</Popup.CloseButton>
-                </Flex>
+                  <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
+                </Popup.ButtonGroup>
                 <Popup.Popper>
                   <Popup.Card>
                     <Popup.CloseIcon aria-label="Close" />
                     <Popup.Heading>Really Delete Item</Popup.Heading>
                     <Popup.Body>
                       <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
-                      <Flex cs={{gap: system.gap.md}}>
+                      <Popup.ButtonGroup>
+                        <Popup.CloseButton>Cancel</Popup.CloseButton>
                         <Popup.CloseButton
                           as={DeleteButton}
                           onClick={event => {
@@ -51,8 +50,7 @@ export default () => {
                         >
                           Yes, Really Delete
                         </Popup.CloseButton>
-                        <Popup.CloseButton>Cancel</Popup.CloseButton>
-                      </Flex>
+                      </Popup.ButtonGroup>
                     </Popup.Body>
                   </Popup.Card>
                 </Popup.Popper>

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

@@ -32,17 +32,18 @@ export default () => {
             <Modal.Body>
               <p>Are you sure you want to delete the item?</p>
               <Popup model={popup}>
-                <Flex cs={{gap: system.gap.md}}>
-                  <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
+                <Popup.ButtonGroup>
                   <Popup.CloseButton>Cancel</Popup.CloseButton>
-                </Flex>
+                  <Popup.Target as={DeleteButton}>Yes, Delete</Popup.Target>
+                </Popup.ButtonGroup>
                 <Popup.Popper>
                   <Popup.Card>
                     <Popup.CloseIcon aria-label="Close" />
                     <Popup.Heading>Really Delete Item</Popup.Heading>
                     <Popup.Body>
                       <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
-                      <Flex cs={{gap: system.gap.md}}>
+                      <Popup.ButtonGroup>
+                        <Popup.CloseButton>Cancel</Popup.CloseButton>
                         <Popup.CloseButton
                           as={DeleteButton}
                           onClick={event => {
@@ -52,8 +53,7 @@ export default () => {
                         >
                           Yes, Really Delete
                         </Popup.CloseButton>
-                        <Popup.CloseButton>Cancel</Popup.CloseButton>
-                      </Flex>
+                      </Popup.ButtonGroup>
                     </Popup.Body>
                   </Popup.Card>
                 </Popup.Popper>

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

@@ -29,7 +29,8 @@ export default () => {
                 ("התוכנה").
               </Box>
             </Modal.Body>
-            <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+            <Modal.ButtonGroup>
+              <Modal.CloseButton onClick={handleCancel}>לְבַטֵל</Modal.CloseButton>
               <Modal.CloseButton
                 as={PrimaryButton}
                 onClick={handleAcknowledge}
@@ -39,8 +40,7 @@ export default () => {
               >
                 לְהוֹדוֹת
               </Modal.CloseButton>
-              <Modal.CloseButton onClick={handleCancel}>לְבַטֵל</Modal.CloseButton>
-            </Flex>
+            </Modal.ButtonGroup>
           </Modal.Card>
         </Modal.Overlay>
       </Modal>

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

@@ -12,11 +12,6 @@ import {system} from '@workday/canvas-tokens-web';
 
 const INITIAL_FILES = ['Resume.docx', 'Cover_Letter.docx', 'References.docx'];
 
-const actionStyles = createStyles({
-  gap: system.gap.md,
-  padding: system.padding.sm,
-});
-
 const headingStyles = createStyles({
   marginBlock: '0',
 });
@@ -149,12 +144,12 @@ export default () => {
                 : 'Are you sure you want to delete this file?'}
             </Text>
           </Modal.Body>
-          <Flex cs={actionStyles}>
+          <Modal.ButtonGroup>
             <Modal.CloseButton ref={cancelButtonRef}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={DeleteButton} onClick={handleConfirmDelete}>
               Delete
             </Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -1,7 +1,5 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
-import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const model = useModalModel();
@@ -19,7 +17,8 @@ export default () => {
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
             <p>Are you sure you want to delete the item?</p>
-            <Flex cs={{gap: system.gap.md}}>
+            <Modal.ButtonGroup>
+              <Modal.CloseButton>Cancel</Modal.CloseButton>
               <Modal>
                 <Modal.Target as={DeleteButton}>Yes, Delete</Modal.Target>
                 <Modal.Overlay>
@@ -30,7 +29,8 @@ export default () => {
                       <p>
                         Are you <em>really</em> sure you want to delete the item?
                       </p>
-                      <Flex cs={{gap: system.gap.md}}>
+                      <Modal.ButtonGroup>
+                        <Modal.CloseButton>Cancel</Modal.CloseButton>
                         <Modal.CloseButton
                           as={DeleteButton}
                           onClick={event => {
@@ -40,14 +40,12 @@ export default () => {
                         >
                           Yes, Really Delete
                         </Modal.CloseButton>
-                        <Modal.CloseButton>Cancel</Modal.CloseButton>
-                      </Flex>
+                      </Modal.ButtonGroup>
                     </Modal.Body>
                   </Modal.Card>
                 </Modal.Overlay>
               </Modal>
-              <Modal.CloseButton>Cancel</Modal.CloseButton>
-            </Flex>
+            </Modal.ButtonGroup>
           </Modal.Body>
         </Modal.Card>
       </Modal.Overlay>