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

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

@@ -1,10 +1,8 @@
 import * as React from 'react';
 
-import {Flex} from '@workday/canvas-kit-react/layout';
 import {Modal, useModalModel} from '@workday/canvas-kit-react/modal';
 import {Popup, useCloseOnOutsideClick, usePopupModel} from '@workday/canvas-kit-react/popup';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
-import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const modal = useModalModel();
@@ -24,13 +22,13 @@ export default () => {
             <Modal.Heading>Open Modal</Modal.Heading>
             <Modal.Body>
               <p>Open a hidable and non-hidable popups</p>
-              <Flex cs={{gap: system.gap.md}}>
-                <Popup.Target model={popup1}>Hidable Popup</Popup.Target>
-                <Popup.Target model={popup2}>Non-hidable Popup</Popup.Target>
+              <Modal.ButtonGroup>
                 <Tooltip title="Not so sure" type="muted">
                   <Popup.CloseButton onClick={closeModal}>Cancel</Popup.CloseButton>
                 </Tooltip>
-              </Flex>
+                <Popup.Target model={popup1}>Hidable Popup</Popup.Target>
+                <Popup.Target model={popup2}>Non-hidable Popup</Popup.Target>
+              </Modal.ButtonGroup>
             </Modal.Body>
           </Modal.Card>
         </Modal.Overlay>
@@ -42,13 +40,15 @@ export default () => {
             <Popup.Heading>Hidable Popup</Popup.Heading>
             <Popup.Body>
               <p>Pressing 'OK' will close the modal</p>
-              <Tooltip
-                placement="left"
-                title="Really, Really, Really, Really, Really sure"
-                type="muted"
-              >
-                <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
-              </Tooltip>
+              <Modal.ButtonGroup>
+                <Tooltip
+                  placement="left"
+                  title="Really, Really, Really, Really, Really sure"
+                  type="muted"
+                >
+                  <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
+                </Tooltip>
+              </Modal.ButtonGroup>
             </Popup.Body>
           </Popup.Card>
         </Popup.Popper>
@@ -60,13 +60,15 @@ export default () => {
             <Popup.Heading>Non-hidable Popup</Popup.Heading>
             <Popup.Body>
               <p>Pressing 'OK' will close the modal</p>
-              <Tooltip
-                placement="left"
-                title="Really, Really, Really, Really, Really sure"
-                type="muted"
-              >
-                <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
-              </Tooltip>
+              <Modal.ButtonGroup>
+                <Tooltip
+                  placement="left"
+                  title="Really, Really, Really, Really, Really sure"
+                  type="muted"
+                >
+                  <Popup.CloseButton onClick={closeModal}>OK</Popup.CloseButton>
+                </Tooltip>
+              </Modal.ButtonGroup>
             </Popup.Body>
           </Popup.Card>
         </Popup.Popper>

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {DeleteButton} from '@workday/canvas-kit-react/button';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
-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 {
   useAssistiveHideSiblings,
@@ -12,7 +12,6 @@ import {
   usePopupModel,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {system} from '@workday/canvas-tokens-web';
 
 export default () => {
   const longDescId = useUniqueId();
@@ -42,12 +41,12 @@ export default () => {
               Are you sure you want to delete the item?
             </Box>
           </Modal.Body>
-          <Flex cs={{gap: system.gap.md, paddingBlock: system.padding.xs}}>
+          <Modal.ButtonGroup>
             <Modal.CloseButton ref={cancelBtnRef}>Cancel</Modal.CloseButton>
             <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Modal.CloseButton>
-          </Flex>
+          </Modal.ButtonGroup>
         </Modal.Card>
       </Modal.Overlay>
     </Modal>

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

@@ -1,5 +1,5 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {Box, Flex} from '@workday/canvas-kit-react/layout';
+import {Box} from '@workday/canvas-kit-react/layout';
 import {
   Popup,
   useCloseOnEscape,
@@ -10,7 +10,6 @@ import {
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
 import {createStyles, px2rem} from '@workday/canvas-kit-styling';
-import {system} from '@workday/canvas-tokens-web';
 
 const cardStyles = createStyles({
   width: px2rem(400),
@@ -20,11 +19,6 @@ const bodyStyles = createStyles({
   marginBlock: '0',
 });
 
-const flexStyles = createStyles({
-  gap: system.gap.md,
-  padding: system.padding.xs,
-});
-
 export default () => {
   const model = usePopupModel();
 
@@ -50,12 +44,12 @@ export default () => {
               Are you sure you'd like to delete the item titled 'My Item'?
             </Box>
           </Popup.Body>
-          <Flex cs={flexStyles}>
+          <Popup.ButtonGroup>
+            <Popup.CloseButton>Cancel</Popup.CloseButton>
             <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Popup.CloseButton>
-            <Popup.CloseButton>Cancel</Popup.CloseButton>
-          </Flex>
+          </Popup.ButtonGroup>
         </Popup.Card>
       </Popup.Popper>
     </Popup>

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

@@ -63,12 +63,12 @@ export default () => {
                 Are you sure you'd like to delete the item titled 'My Item'?
               </Box>
             </Popup.Body>
-            <Flex cs={flexStyles}>
+            <Popup.ButtonGroup>
+              <Popup.CloseButton>Cancel</Popup.CloseButton>
               <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete
               </Popup.CloseButton>
-              <Popup.CloseButton>Cancel</Popup.CloseButton>
-            </Flex>
+            </Popup.ButtonGroup>
           </Popup.Card>
         </Popup.Popper>
         <SecondaryButton>Next Focusable Button</SecondaryButton>

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

@@ -49,12 +49,12 @@ export default () => {
                 Are you sure you'd like to delete the item titled 'My Item'?
               </Box>
             </Popup.Body>
-            <Flex cs={{gap: system.gap.sm, paddingBlock: system.padding.xxs}}>
+            <Popup.ButtonGroup>
+              <Popup.CloseButton>Cancel</Popup.CloseButton>
               <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete
               </Popup.CloseButton>
-              <Popup.CloseButton>Cancel</Popup.CloseButton>
-            </Flex>
+            </Popup.ButtonGroup>
           </Popup.Card>
         </Popup.Popper>
         <SecondaryButton>Next Focusable Button</SecondaryButton>

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

@@ -26,11 +26,6 @@ const bodyStyles = createStyles({
   marginBlock: '0',
 });
 
-const flexStyles = createStyles({
-  gap: system.gap.md,
-  padding: system.padding.xs,
-});
-
 const columnStyles = createStyles({
   gap: system.gap.md,
   alignItems: 'flex-start',
@@ -60,11 +55,11 @@ const InitialFocusOnButton = () => {
               Your message has been sent!
             </Text>
           </Popup.Body>
-          <Flex cs={flexStyles}>
+          <Popup.ButtonGroup>
             <Popup.CloseButton as={PrimaryButton} ref={initialFocusRef}>
               OK
             </Popup.CloseButton>
-          </Flex>
+          </Popup.ButtonGroup>
         </Popup.Card>
       </Popup.Popper>
     </Popup>
@@ -96,10 +91,10 @@ const InitialFocusOnTextInput = () => {
               <FormField.Input as={TextInput} ref={initialFocusRef} />
             </FormField>
           </Popup.Body>
-          <Flex cs={flexStyles}>
-            <Popup.CloseButton as={PrimaryButton}>Send</Popup.CloseButton>
+          <Popup.ButtonGroup>
             <Popup.CloseButton>Cancel</Popup.CloseButton>
-          </Flex>
+            <Popup.CloseButton as={PrimaryButton}>Send</Popup.CloseButton>
+          </Popup.ButtonGroup>
         </Popup.Card>
       </Popup.Popper>
     </Popup>
@@ -129,9 +124,9 @@ const InitialFocusOnHeading = () => {
           <Popup.Body>
             <Text cs={bodyStyles}>Review the summary below before continuing.</Text>
           </Popup.Body>
-          <Flex cs={flexStyles}>
+          <Popup.ButtonGroup>
             <Popup.CloseButton as={PrimaryButton}>Continue</Popup.CloseButton>
-          </Flex>
+          </Popup.ButtonGroup>
         </Popup.Card>
       </Popup.Popper>
     </Popup>

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

@@ -90,10 +90,10 @@ function SingleInlinePopup({
             <Popup.Body>
               <Box as="p">Are you sure you'd like to delete the item titled 'My Item'?</Box>
             </Popup.Body>
-            <Flex cs={flexStyles}>
+            <Popup.ButtonGroup>
               <Popup.CloseButton ref={initialFocusRef}>Cancel</Popup.CloseButton>
               <Popup.CloseButton as={DeleteButton}>Delete</Popup.CloseButton>
-            </Flex>
+            </Popup.ButtonGroup>
           </Popup.Card>
         </Popup.Popper>
       </Popup>

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

@@ -46,9 +46,9 @@ export default () => {
                 Shift + Tab.
               </p>
             </Popup.Body>
-            <Flex>
+            <Popup.ButtonGroup>
               <Popup.CloseButton>OK</Popup.CloseButton>
-            </Flex>
+            </Popup.ButtonGroup>
           </Popup.Card>
         </Popup.Popper>
       </Popup>

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

@@ -46,12 +46,12 @@ export default () => {
                     <Popup.Body>
                       <p style={{marginBlockStart: 0, marginBlockEnd: 0}}>Contents of Popup 2</p>
                     </Popup.Body>
-                    <Flex cs={{gap: system.gap.md, padding: system.padding.xs}}>
+                    <Popup.ButtonGroup>
                       <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
                         Close Both (as)
                       </Popup.CloseButton>
                       <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>
-                    </Flex>
+                    </Popup.ButtonGroup>
                   </Popup.Card>
                 </Popup.Popper>
               </Popup>

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

@@ -1,5 +1,5 @@
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {Flex, Grid} from '@workday/canvas-kit-react/layout';
+import {Grid} from '@workday/canvas-kit-react/layout';
 import {
   Popup,
   useCloseOnEscape,
@@ -63,12 +63,12 @@ export default () => {
                 This is Popup heading
               </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs}}>
+              <Popup.ButtonGroup>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>
-                <Popup.CloseButton>Cancel</Popup.CloseButton>
-              </Flex>
+              </Popup.ButtonGroup>
             </Popup.Card>
           </Popup.Popper>
         </Popup>
@@ -83,12 +83,12 @@ export default () => {
                 This is Popup heading
               </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex cs={{gap: system.gap.sm, padding: system.padding.xs}}>
+              <Popup.ButtonGroup>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>
-                <Popup.CloseButton>Cancel</Popup.CloseButton>
-              </Flex>
+              </Popup.ButtonGroup>
             </Popup.Card>
           </Popup.Popper>
         </Popup>
@@ -103,12 +103,12 @@ export default () => {
                 This is Popup heading
               </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex cs={{gap: system.gap.md, padding: system.padding.xs}}>
+              <Popup.ButtonGroup>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>
-                <Popup.CloseButton>Cancel</Popup.CloseButton>
-              </Flex>
+              </Popup.ButtonGroup>
             </Popup.Card>
           </Popup.Popper>
         </Popup>
@@ -123,12 +123,12 @@ export default () => {
                 This is Popup heading
               </Popup.Heading>
               <Popup.Body>Are you sure you'd like to delete the item titled 'My Item'?</Popup.Body>
-              <Flex cs={{gap: system.gap.md, padding: system.padding.xs}}>
+              <Popup.ButtonGroup>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
                 <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                   Delete
                 </Popup.CloseButton>
-                <Popup.CloseButton>Cancel</Popup.CloseButton>
-              </Flex>
+              </Popup.ButtonGroup>
             </Popup.Card>
           </Popup.Popper>
         </Popup>

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

@@ -16,10 +16,10 @@ export default () => {
             האם ברצונך למחוק פריט זה
           </Box>
         </Popup.Body>
-        <Flex cs={{gap: system.gap.sm, paddingBlock: system.padding.xxs}}>
-          <DeleteButton>לִמְחוֹק</DeleteButton>
+        <Popup.ButtonGroup>
           <SecondaryButton>לְבַטֵל</SecondaryButton>
-        </Flex>
+          <DeleteButton>לִמְחוֹק</DeleteButton>
+        </Popup.ButtonGroup>
       </Popup.Card>
     </CanvasProvider>
   );

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

@@ -5,7 +5,7 @@ import {system} from '@workday/canvas-tokens-web';
 export default () => {
   return (
     <Toast>
-      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+      <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
       <Toast.Body>
         <Toast.Message>Your workbook was successfully processed.</Toast.Message>
       </Toast.Body>

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

@@ -9,7 +9,7 @@ export default () => {
   return (
     <CanvasProvider dir="rtl">
       <Toast>
-        <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+        <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
         <Toast.Body>
           <Toast.Message>Your workbook was successfully processed.</Toast.Message>
         </Toast.Body>

package/dist/mdx/react/toast/examples/ToastAlert.tsx

@@ -4,7 +4,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 export default () => (
   <Toast mode="alert">
-    <Toast.Icon icon={exclamationCircleIcon} color={system.color.fg.warning.default} />
+    <Toast.Icon icon={exclamationCircleIcon} color={system.color.brand.fg.caution.default} />
     <Toast.Body>
       <Toast.Message>There was an error with your workbook.</Toast.Message>
     </Toast.Body>

package/dist/mdx/react/toast/examples/ToastDialog.tsx

@@ -4,7 +4,7 @@ import {system} from '@workday/canvas-tokens-web';
 
 export default () => (
   <Toast mode="dialog" aria-label="notification">
-    <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+    <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
     <Toast.Body>
       <Toast.Message>Your workbook was successfully processed.</Toast.Message>
       <Toast.Link href="#hreflink">Custom Link</Toast.Link>

package/dist/mdx/react/toast/examples/WithActionLinkAndCloseIcon.tsx

@@ -7,7 +7,7 @@ export default () => {
 
   return (
     <Toast mode="dialog" aria-label="notification">
-      <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+      <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
       <Toast.Body>
         <Toast.Message>Your workbook was successfully</Toast.Message>
         <Toast.Link href="#hyperlink">Custom Link</Toast.Link>

package/dist/mdx/react/toast/examples/WithPopper.tsx

@@ -23,7 +23,7 @@ export default () => {
       <SecondaryButton onClick={handleOpen}>Show Toast</SecondaryButton>
       <Popper placement="bottom-end" open={open} anchorElement={containerRef}>
         <Toast mode="dialog" aria-label="notification">
-          <Toast.Icon icon={checkIcon} color={system.color.fg.success.default} />
+          <Toast.Icon icon={checkIcon} color={system.color.brand.fg.positive.default} />
           <Toast.Body>
             <Toast.Message>Your workbook was successfully processed.</Toast.Message>
           </Toast.Body>

package/dist/mdx/react/tooltip/Tooltip.mdx

@@ -72,7 +72,7 @@ and focus events.
     {' '}
     Caution: Describe type has been deprecated{' '}
   </InformationHighlight.Heading>
-  <InformationHighlight.Body>
+  <InformationHighlight.Body cs={{'p': {display: 'inline-block'}}}>
     Assistive technology may ignore{' '}
     <StatusIndicator variant="gray">
       <StatusIndicator.Label cs={{textTransform: 'lowercase'}}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "16.0.0-alpha.0463-next.0",
+  "version": "16.0.0-alpha.0465-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,10 +47,10 @@
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-labs-react": "^16.0.0-alpha.0463-next.0",
-    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0463-next.0",
-    "@workday/canvas-kit-react": "^16.0.0-alpha.0463-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0463-next.0",
+    "@workday/canvas-kit-labs-react": "^16.0.0-alpha.0465-next.0",
+    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0465-next.0",
+    "@workday/canvas-kit-react": "^16.0.0-alpha.0465-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0465-next.0",
     "@workday/canvas-system-icons-web": "4.0.4",
     "@workday/canvas-tokens-web": "4.4.0-beta.6",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "f21d7cc4d8f56e8a7ffffbb5881aa903f852c025"
+  "gitHead": "02dd284d77ccf92991d5526190f453d442ccebcc"
 }