fix: Prevent focus ring from getting cut off in Popup.Body

modules/react/modal/stories/examples/Basic.tsx

@@ -17,7 +17,7 @@ export const Basic = () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Delete Item</Modal.Heading>
           <Modal.Body>
-            <Box as="p" marginTop={0} marginBottom="m">
+            <Box as="p" marginTop="zero" marginBottom="m">
               Are you sure you want to delete the item?
             </Box>
             <HStack spacing="s">

modules/react/modal/stories/examples/BodyOverflow.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 
 import {Modal} from '@workday/canvas-kit-react/modal';
 import {DeleteButton} from '@workday/canvas-kit-react/button';
-import {HStack, VStack, Stack, Box} from '@workday/canvas-kit-react/layout';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {HStack} from '@workday/canvas-kit-react/layout';
 
 export const BodyOverflow = () => {
   const handleDelete = () => {
@@ -17,7 +16,7 @@ export const BodyOverflow = () => {
         <Modal.Card>
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Delete Item</Modal.Heading>
-          <Modal.Body>
+          <Modal.Body paddingBottom="zero">
             <p>Are you sure you want to delete the item?</p>
             <p>Are you sure you want to delete the item?</p>
             <p>Are you sure you want to delete the item?</p>
@@ -43,7 +42,7 @@ export const BodyOverflow = () => {
             <p>Are you sure you want to delete the item?</p>
             <p>Are you sure you want to delete the item?</p>
           </Modal.Body>
-          <HStack spacing="s" paddingTop="s">
+          <HStack spacing="s" paddingTop="s" paddingX="l" paddingBottom="l">
             <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Modal.CloseButton>

modules/react/modal/stories/examples/FullOverflow.tsx

@@ -16,7 +16,7 @@ export const FullOverflow = () => {
         <Modal.Card maxHeight="inherit" height="inherit">
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Delete Item</Modal.Heading>
-          <Modal.Body>
+          <Modal.Body paddingBottom="zero">
             <p>Are you sure you want to delete the item?</p>
             <p>Are you sure you want to delete the item?</p>
             <p>Are you sure you want to delete the item?</p>
@@ -42,7 +42,7 @@ export const FullOverflow = () => {
             <p>Are you sure you want to delete the item?</p>
             <p>Are you sure you want to delete the item?</p>
           </Modal.Body>
-          <HStack spacing="s">
+          <HStack spacing="s" paddingX="l" paddingBottom="l">
             <Modal.CloseButton as={DeleteButton} onClick={handleDelete}>
               Delete
             </Modal.CloseButton>

modules/react/modal/stories/stories_testing.tsx

@@ -101,17 +101,15 @@ export const WithRadioButtons = () => {
           <Modal.CloseIcon aria-label="Close" />
           <Modal.Heading>Select Item</Modal.Heading>
           <Modal.Body>
-            <VStack spacing="s">
-              <RadioGroup
-                name="contact"
-                data-testid="radiogroup"
-                value={value}
-                onChange={value => setValue(String(value))}
-              >
-                <Radio id="1" value="email" label="E-mail" />
-                <Radio id="2" value="phone" label="Phone" />
-              </RadioGroup>
-            </VStack>
+            <RadioGroup
+              name="contact"
+              data-testid="radiogroup"
+              value={value}
+              onChange={value => setValue(String(value))}
+            >
+              <Radio id="1" value="email" label="E-mail" />
+              <Radio id="2" value="phone" label="Phone" />
+            </RadioGroup>
           </Modal.Body>
         </Modal.Card>
       </Modal.Overlay>

modules/react/popup/lib/PopupBody.tsx

@@ -8,5 +8,7 @@ export const PopupBody = createSubcomponent('div')({
   displayName: 'Popup.Body',
   modelHook: usePopupModel,
 })<ExtractProps<typeof Card.Body>>(elemProps => {
-  return <Card.Body overflowY="auto" {...elemProps} />;
+  return (
+    <Card.Body overflowY="auto" paddingX={'l'} paddingTop="s" paddingBottom="l" {...elemProps} />
+  );
 });

modules/react/popup/lib/PopupCard.tsx

@@ -16,7 +16,6 @@ import {Stack, StackStyleProps} from '@workday/canvas-kit-react/layout';
 
 import {getTransformFromPlacement} from './getTransformFromPlacement';
 import {usePopupCard, usePopupModel} from './hooks';
-
 export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
   children?: React.ReactNode;
 }
@@ -71,12 +70,12 @@ export const PopupCard = createSubcomponent('div')({
       as={As}
       transformOrigin={transformOrigin}
       position="relative"
-      padding="l"
       depth={5}
       maxWidth={`calc(100vw - ${space.l})`}
       spacing={0}
       flexDirection="column"
       minHeight={0}
+      padding="zero"
       maxHeight={`calc(100vh - ${
         elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl
       } * 2)`}

modules/react/popup/lib/PopupHeading.tsx

@@ -15,7 +15,14 @@ export const PopupHeading = createSubcomponent('h2')({
   elemPropsHook: usePopupHeading,
 })<PopupHeadingProps>(({children, ...elemProps}, Element) => {
   return (
-    <Card.Heading as={Element} marginBottom="s" {...elemProps}>
+    <Card.Heading
+      as={Element}
+      marginInlineStart="l"
+      marginInlineEnd="l"
+      marginTop="l"
+      marginBottom="zero"
+      {...elemProps}
+    >
       {children}
     </Card.Heading>
   );

modules/react/popup/stories/examples/Basic.tsx

@@ -9,7 +9,7 @@ import {
   useInitialFocus,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Box, HStack} from '@workday/canvas-kit-react/layout';
 
 export const Basic = () => {
   const model = usePopupModel();
@@ -27,11 +27,13 @@ export const Basic = () => {
     <Popup model={model}>
       <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
       <Popup.Popper placement="bottom">
-        <Popup.Card width={400} padding="s">
+        <Popup.Card width={400}>
           <Popup.CloseIcon aria-label="Close" />
           <Popup.Heading>Delete Item</Popup.Heading>
           <Popup.Body>
-            <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
+            <Box as="p" marginTop="zero">
+              Are you sure you'd like to delete the item titled 'My Item'?
+            </Box>
             <HStack spacing="s">
               <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete

modules/react/popup/stories/examples/FocusRedirect.tsx

@@ -10,7 +10,7 @@ import {
   useFocusRedirect,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Box, HStack} from '@workday/canvas-kit-react/layout';
 
 export const FocusRedirect = () => {
   const model = usePopupModel();
@@ -39,19 +39,21 @@ export const FocusRedirect = () => {
         <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
         <div aria-owns={popupId} style={{position: 'absolute'}} />
         <Popup.Popper>
-          <Popup.Card width={400} padding="s">
+          <Popup.Card width={400}>
             <Popup.CloseIcon aria-label="Close" />
             <Popup.Heading>Delete Item</Popup.Heading>
             <Popup.Body>
-              <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
+              <Box as="p" marginTop="zero">
+                Are you sure you'd like to delete the item titled 'My Item'?
+              </Box>
+              <HStack spacing="s">
+                <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+                  Delete
+                </Popup.CloseButton>
+                {/* Disabled elements should not be focusable and focus should move to the next focusable element */}
+                <Popup.CloseButton disabled>Cancel</Popup.CloseButton>
+              </HStack>
             </Popup.Body>
-            <HStack spacing="s">
-              <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
-                Delete
-              </Popup.CloseButton>
-              {/* Disabled elements should not be focusable and focus should move to the next focusable element */}
-              <Popup.CloseButton disabled>Cancel</Popup.CloseButton>
-            </HStack>
           </Popup.Card>
         </Popup.Popper>
         <SecondaryButton>Next Focusable Button</SecondaryButton>

modules/react/popup/stories/examples/FocusTrap.tsx

@@ -10,7 +10,7 @@ import {
   useReturnFocus,
   usePopupModel,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Box, HStack} from '@workday/canvas-kit-react/layout';
 
 export const FocusTrap = () => {
   const model = usePopupModel();
@@ -39,18 +39,20 @@ export const FocusTrap = () => {
         <Popup.Target as={DeleteButton}>Delete Item</Popup.Target>
         <div aria-owns={popupId} style={{position: 'absolute'}} />
         <Popup.Popper>
-          <Popup.Card width={400} padding="s">
+          <Popup.Card width={400}>
             <Popup.CloseIcon aria-label="Close" />
             <Popup.Heading>Delete Item</Popup.Heading>
             <Popup.Body>
-              <p>Are you sure you'd like to delete the item titled 'My Item'?</p>
+              <Box as="p" marginTop="zero">
+                Are you sure you'd like to delete the item titled 'My Item'?
+              </Box>
+              <HStack spacing="s">
+                <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
+                  Delete
+                </Popup.CloseButton>
+                <Popup.CloseButton>Cancel</Popup.CloseButton>
+              </HStack>
             </Popup.Body>
-            <HStack spacing="s">
-              <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
-                Delete
-              </Popup.CloseButton>
-              <Popup.CloseButton>Cancel</Popup.CloseButton>
-            </HStack>
           </Popup.Card>
         </Popup.Popper>
         <SecondaryButton>Next Focusable Button</SecondaryButton>

modules/react/popup/stories/examples/InitialFocus.tsx

@@ -8,7 +8,7 @@ import {
   useInitialFocus,
   useReturnFocus,
 } from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Box, HStack} from '@workday/canvas-kit-react/layout';
 
 export const InitialFocus = () => {
   const initialFocusRef = React.useRef(null);
@@ -25,17 +25,19 @@ export const InitialFocus = () => {
     <Popup model={model}>
       <Popup.Target>Send Message</Popup.Target>
       <Popup.Popper placement={'bottom'}>
-        <Popup.Card width={400} padding="16px">
+        <Popup.Card width={400}>
           <Popup.CloseIcon aria-label="Close" />
           <Popup.Heading>Confirmation</Popup.Heading>
           <Popup.Body>
-            <p id="popup-message">Your message has been sent!</p>
+            <Box as="p" marginTop="zero" id="popup-message">
+              Your message has been sent!
+            </Box>
+            <HStack spacing="s">
+              <Popup.CloseButton ref={initialFocusRef} aria-describedby="popup-message">
+                OK
+              </Popup.CloseButton>
+            </HStack>
           </Popup.Body>
-          <HStack spacing="s">
-            <Popup.CloseButton ref={initialFocusRef} aria-describedby="popup-message">
-              OK
-            </Popup.CloseButton>
-          </HStack>
         </Popup.Card>
       </Popup.Popper>
     </Popup>

modules/react/popup/stories/examples/NestedPopups.tsx

@@ -37,24 +37,24 @@ export const NestedPopups = () => {
             <Popup.CloseIcon aria-label="Close" size="small" />
             <Popup.Body>
               <p>Contents of Popup 1</p>
+              <Popup model={popup2}>
+                <Popup.Target>Open Popup 2</Popup.Target>
+                <Popup.Popper>
+                  <Popup.Card aria-label="Popup 2">
+                    <Popup.CloseIcon aria-label="Close" size="small" />
+                    <Popup.Body>
+                      <p>Contents of Popup 2</p>
+                      <HStack spacing="s">
+                        <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
+                          Close Both (as)
+                        </Popup.CloseButton>
+                        <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>
+                      </HStack>
+                    </Popup.Body>
+                  </Popup.Card>
+                </Popup.Popper>
+              </Popup>
             </Popup.Body>
-            <Popup model={popup2}>
-              <Popup.Target>Open Popup 2</Popup.Target>
-              <Popup.Popper>
-                <Popup.Card aria-label="Popup 2">
-                  <Popup.CloseIcon aria-label="Close" size="small" />
-                  <Popup.Body>
-                    <p>Contents of Popup 2</p>
-                  </Popup.Body>
-                  <HStack spacing="s">
-                    <Popup.CloseButton as={Popup.CloseButton} model={popup1}>
-                      Close Both (as)
-                    </Popup.CloseButton>
-                    <SecondaryButton {...closeBothProps}>Close Both (props)</SecondaryButton>
-                  </HStack>
-                </Popup.Card>
-              </Popup.Popper>
-            </Popup>
           </Popup.Card>
         </Popup.Popper>
       </Popup>

modules/react/popup/stories/examples/RTL.tsx

@@ -3,21 +3,23 @@ import React from 'react';
 import {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
-import {HStack} from '@workday/canvas-kit-react/layout';
+import {Box, HStack} from '@workday/canvas-kit-react/layout';
 
 export const RTL = () => {
   return (
     <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
-      <Popup.Card width={400} padding="s">
+      <Popup.Card width={400}>
         <Popup.CloseIcon aria-label="סגור" />
         <Popup.Heading>למחוק פריט</Popup.Heading>
         <Popup.Body>
-          <p>האם ברצונך למחוק פריט זה</p>
+          <Box as="p" marginTop="zero">
+            האם ברצונך למחוק פריט זה
+          </Box>
+          <HStack spacing="s">
+            <DeleteButton>לִמְחוֹק</DeleteButton>
+            <SecondaryButton>לְבַטֵל</SecondaryButton>
+          </HStack>
         </Popup.Body>
-        <HStack spacing="s">
-          <DeleteButton>לִמְחוֹק</DeleteButton>
-          <SecondaryButton>לְבַטֵל</SecondaryButton>
-        </HStack>
       </Popup.Card>
     </CanvasProvider>
   );

modules/react/toast/lib/Toast.tsx

@@ -92,15 +92,14 @@ export const Toast = createComponent('div')({
         ref={ref}
         as={Element}
         width={toastWidth}
-        padding="s"
         depth={5}
         role={isInteractive ? 'dialog' : isError ? 'alert' : 'status'}
         aria-live={isInteractive ? 'off' : isError ? 'assertive' : 'polite'}
         aria-atomic={!isInteractive}
         {...elemProps}
       >
         {onClose && <Popup.CloseIcon aria-label="Close" onClick={onClose} size="small" />}
-        <Popup.Body>
+        <Popup.Body padding="s">
           <ToastContentContainer onClose={onClose}>
             {icon && <ToastSystemIcon color={iconColor} colorHover={iconColor} icon={icon} />}
             <Message>