@workday/canvas-kit-react 7.0.0-alpha.129-next.3 → 7.0.0-alpha.256-next.2

package/layout/lib/utils/text.ts

@@ -0,0 +1,122 @@
+import {Property} from 'csstype';
+
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to for CSS font and text properties */
+export type TextStyleProps = {
+  /**
+   * - sets [CSS font-family property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)
+   * - system tokens: `font` */
+  fontFamily?: Property.FontFamily | SystemPropValues['font'];
+  /**
+   * - sets [CSS font-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
+   * - system tokens: `fontSize` */
+  fontSize?: Property.FontSize | SystemPropValues['fontSize'];
+  /** sets [CSS font-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) */
+  fontStyle?: Property.FontStyle;
+  /**
+   * - sets [CSS font-weight property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
+   * - system tokens: `fontWeight` */
+  fontWeight?: Property.FontWeight | SystemPropValues['fontWeight'];
+  /** sets [CSS line-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) */
+  lineHeight?: Property.LineHeight;
+  /** sets [CSS letter-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) */
+  letterSpacing?: Property.LetterSpacing;
+  /** sets [CSS text-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) */
+  textAlign?: Property.TextAlign;
+  /** sets [CSS text-decoration property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) */
+  textDecoration?: Property.TextDecoration;
+  /** sets [CSS text-overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) */
+  textOverflow?: Property.TextOverflow;
+  /** sets [CSS text-transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) */
+  textTransform?: Property.TextTransform;
+  /** sets [CSS text-shadow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) */
+  textShadow?: Property.TextShadow;
+  /** sets [CSS white-space property](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) */
+  whiteSpace?: Property.WhiteSpace;
+  /** sets [CSS word-break property](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) */
+  wordBreak?: Property.WordBreak;
+};
+
+export const textStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'fontFamily',
+    properties: ['fontFamily'],
+    system: 'font',
+  },
+  {
+    name: 'fontSize',
+    properties: ['fontSize'],
+    system: 'fontSize',
+  },
+  {
+    name: 'fontStyle',
+    properties: ['fontStyle'],
+    system: 'none',
+  },
+  {
+    name: 'fontWeight',
+    properties: ['fontWeight'],
+    system: 'fontWeight',
+  },
+  {
+    name: 'lineHeight',
+    properties: ['lineHeight'],
+    system: 'none',
+  },
+  {
+    name: 'letterSpacing',
+    properties: ['letterSpacing'],
+    system: 'none',
+  },
+  {
+    name: 'textAlign',
+    properties: ['textAlign'],
+    system: 'none',
+  },
+  {
+    name: 'textDecoration',
+    properties: ['textDecoration'],
+    system: 'none',
+  },
+  {
+    name: 'textOverflow',
+    properties: ['textOverflow'],
+    system: 'none',
+  },
+  {
+    name: 'textTransform',
+    properties: ['textTransform'],
+    system: 'none',
+  },
+  {
+    name: 'textShadow',
+    properties: ['textShadow'],
+    system: 'none',
+  },
+  {
+    name: 'whiteSpace',
+    properties: ['whiteSpace'],
+    system: 'none',
+  },
+  {
+    name: 'wordBreak',
+    properties: ['wordBreak'],
+    system: 'none',
+  },
+];
+
+export const textStyleFns = buildStyleFns(textStyleFnConfigs);
+/**
+ * A style prop function that takes component props and returns font and text styles.
+ * If no `TextStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * ```
+ * const BoxExample = () => (
+ *   <Box textAlign="center" fontWeight="medium">Hello, alignment!</Box>
+ * );
+ * ```
+ */
+export const text = buildStylePropFn<TextStyleProps>(textStyleFns);

package/loading-dots/README.md

@@ -0,0 +1,7 @@
+# Canvas Kit Loading Dots
+
+View the
+[documentation for Loading Dots](https://workday.github.io/canvas-kit/?path=/docs/components-indicators-loading-dots-react--basic)
+on Storybook.
+
+[> Workday Design Reference](https://design.workday.com/components/indicators/loading-dots)

package/loading-dots/index.ts

@@ -0,0 +1 @@
+export * from './lib/LoadingDots';

package/loading-dots/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/loading-dots",
+  "module": "../dist/es6/loading-dots",
+  "sideEffects": false,
+  "types": "../dist/es6/loading-dots"
+}

package/menu/lib/MenuCard.tsx

@@ -61,6 +61,7 @@ export const MenuCard = createSubcomponent('div')({
       maxWidth={`calc(100vw - ${space.l})`}
       transformOrigin={transformOrigin}
       padding="zero"
+      depth={3}
       {...elemProps}
     >
       {elemProps.children}

package/menu/lib/MenuContextTarget.tsx

@@ -22,10 +22,8 @@ const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
     onKeyDown(event: React.KeyboardEvent) {
       // eslint-disable-next-line default-case
       switch (event.key) {
-        case 'Down':
-        case 'ArrowDown': // IE11
-        case 'Up':
-        case 'ArrowUp': // IE11
+        case 'ArrowDown':
+        case 'ArrowUp': // this follow the keys for modern browsers https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
           model.events.show(event);
       }
     },

package/menu/lib/MenuItem.tsx

@@ -56,9 +56,6 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
       borderWidth: 0,
       textAlign: 'left',
       transition: 'background-color 80ms, color 80ms',
-      '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-        fill: iconColors.active,
-      },
       '&:hover, &[aria-selected=true]': {
         backgroundColor: theme.canvas.palette.primary.lightest,
         color: colors.blackPepper300,
@@ -66,7 +63,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
           fill: iconColors.hover,
         },
         '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-          fill: iconColors.active,
+          fill: iconColors.hover,
         },
       },
       '&:focus': {
@@ -76,6 +73,9 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
         '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
           fill: iconColors.inverse,
         },
+        '*:hover .wd-icon-fill': {
+          fill: iconColors.inverse,
+        },
         '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
           fill: iconColors.inverse,
         },
@@ -84,9 +84,6 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
       [`[data-whatinput]`]: {
         backgroundColor: 'inherit',
         color: colors.blackPepper300,
-        '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-          fill: iconColors.active,
-        },
         '&:hover, &[aria-selected=true]': {
           backgroundColor: theme.canvas.palette.primary.lightest,
           '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2': {
@@ -95,7 +92,7 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
         },
         '&:focus': {
           '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-            fill: iconColors.active,
+            fill: iconColors.hover,
           },
         },
       },
@@ -111,10 +108,13 @@ const StyledItem = styled(Box.as('button'))<StyledType>(
           '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
             fill: iconColors.disabled,
           },
-          '&:hover, &[aria-selected=true]': {
-            '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
-              fill: iconColors.disabled,
-            },
+        },
+        '&:hover, &[aria-selected=true]': {
+          '.wd-icon-background ~ .wd-icon-accent, .wd-icon-background ~ .wd-icon-accent2': {
+            fill: iconColors.disabled,
+          },
+          '*:hover .wd-icon-fill': {
+            fill: iconColors.disabled,
           },
         },
       },

package/menu/lib/MenuTarget.tsx

@@ -22,10 +22,8 @@ const useMenuTargetBase = createElemPropsHook(useMenuModel)(model => {
     onKeyDown(event: React.KeyboardEvent) {
       // eslint-disable-next-line default-case
       switch (event.key) {
-        case 'Down':
-        case 'ArrowDown': // IE11
-        case 'Up':
-        case 'ArrowUp': // IE11
+        case 'ArrowDown':
+        case 'ArrowUp': // this follow the keys for modern browsers https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#navigation_keys
           model.events.show(event);
       }
     },

package/modal/lib/ModalCard.tsx

@@ -1,18 +1,31 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {
+  createSubcomponent,
+  ExtractProps,
+  StyledType,
+  styled,
+} from '@workday/canvas-kit-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
 import {Popup} from '@workday/canvas-kit-react/popup';
 
 import {useModalCard, useModalModel} from './hooks';
 
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
+const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => ({
+  margin: space.xl,
+  [theme.canvas.breakpoints.down('s')]: {
+    margin: space.s, // 16px all around margin on smaller screen sizes
+    padding: space.xxs, // brings total padding between edge and content to 16px
+    borderRadius: space.m, // 24px border radius on smaller devices.
+  },
+}));
+
 export const ModalCard = createSubcomponent('div')({
   displayName: 'Modal.Card',
   modelHook: useModalModel,
   elemPropsHook: useModalCard,
 })<ModalCardProps>((elemProps, Element) => {
-  return (
-    <Popup.Card as={Element} width={440} borderWidth={0} margin="xl" depth={6} {...elemProps} />
-  );
+  return <ResponsiveModalCard as={Element} width={440} borderWidth={0} depth={6} {...elemProps} />;
 });

package/modal/lib/ModalHeading.tsx

@@ -1,16 +1,28 @@
 import * as React from 'react';
 
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {
+  createSubcomponent,
+  ExtractProps,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
+import {space} from '@workday/canvas-kit-react/tokens';
 
 import {useModalHeading, useModalModel} from './hooks';
 
 export interface ModalHeadingProps extends ExtractProps<typeof Popup.Heading, never> {}
 
+const ResponsiveModalHeading = styled(Popup.Heading)<ModalHeadingProps & StyledType>(({theme}) => ({
+  [theme.canvas.breakpoints.down('s')]: {
+    marginBottom: space.zero,
+  },
+}));
+
 export const ModalHeading = createSubcomponent('h2')({
   displayName: 'Modal.Heading',
   modelHook: useModalModel,
   elemPropsHook: useModalHeading,
 })<ModalHeadingProps>((elemProps, Element) => {
-  return <Popup.Heading as={Element} {...elemProps} />;
+  return <ResponsiveModalHeading as={Element} {...elemProps} />;
 });

package/modal/lib/ModalOverlay.tsx

@@ -44,22 +44,19 @@ const Container = styled(Box)<StyledType>({
 // positioning, but seems to when using flexbox centering. This messes up Popper calculations inside
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
-const CenteringContainer = styled('div')({
+const ResponsiveContainer = styled('div')(({theme}) => ({
   maxHeight: '100vh',
   display: 'flex',
   position: 'absolute',
   left: 0,
   top: 0,
-  alignItems: 'center',
   justifyContent: 'center',
-
-  // IE11 fix for setting min-height in a flex container
-  ':before': {
-    display: 'block',
-    content: "''",
-    height: '100vh',
+  alignItems: 'center',
+  height: '100vh',
+  [theme.canvas.breakpoints.down('s')]: {
+    alignItems: 'end',
   },
-});
+}));
 
 export const ModalOverlay = createSubcomponent('div')({
   displayName: 'Modal.Overlay',
@@ -86,16 +83,17 @@ const OpenModalOverlay = createSubcomponent('div')({
   elemPropsHook: useModalOverlay,
 })<ModalOverlayProps>((elemProps, Element, model) => {
   const windowSize = useWindowSize();
-
   const content = (
     <Container as={Element} {...elemProps}>
-      <CenteringContainer
+      <ResponsiveContainer
         // make sure the centering container is an even number of pixels to avoid sub-pixel
         // inaccuracies due to centering
-        style={{width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw'}}
+        style={{
+          width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw',
+        }}
       >
         {elemProps.children}
-      </CenteringContainer>
+      </ResponsiveContainer>
     </Container>
   );
 

package/modal/lib/hooks/useCloseOnOverlayClick.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
-import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {createElemPropsHook, useModalityType} from '@workday/canvas-kit-react/common';
 import {usePopupModel} from '@workday/canvas-kit-react/popup';
 
 /**
@@ -10,6 +10,7 @@ import {usePopupModel} from '@workday/canvas-kit-react/popup';
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
 export const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model => {
+  const modality = useModalityType();
   const onClick = React.useCallback(
     (event: MouseEvent) => {
       if (!model.state.stackRef.current) {
@@ -30,6 +31,7 @@ export const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model =
 
       if (
         dialog &&
+        modality !== 'touch' &&
         elements.length &&
         elements[elements.length - 1] === model.state.stackRef.current &&
         elementsBetweenDialogAnBody.some(element => element === event.target)
@@ -37,7 +39,7 @@ export const useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(model =
         model.events.hide(event);
       }
     },
-    [model.state.stackRef, model.events]
+    [model.state.stackRef, model.events, modality]
   );
 
   const visible = model.state.visibility !== 'hidden';

package/modal/lib/hooks/useModalModel.ts

@@ -7,7 +7,7 @@ import {
   useAssistiveHideSiblings,
   useDisableBodyScroll,
 } from '@workday/canvas-kit-react/popup';
-import {createModelHook} from '../../../common';
+import {createModelHook} from '@workday/canvas-kit-react/common';
 
 import {useCloseOnOverlayClick} from './useCloseOnOverlayClick';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.129-next.3+f4cdec5a",
+  "version": "7.0.0-alpha.256-next.2+d6a56f45",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,14 +49,11 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.129-next.3+f4cdec5a",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.129-next.3+f4cdec5a",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.129-next.3+f4cdec5a",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.256-next.2+d6a56f45",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
     "csstype": "^3.0.2",
-    "element-closest": "^3.0.2",
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
@@ -70,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "f4cdec5aa17c18b03695a3c99417e384fd9aecdc"
+  "gitHead": "d6a56f4519c87d2a4d31a7cd1c60a1f33620b2f2"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {type, typeColors, space} from '@workday/canvas-kit-react/tokens';
+import {type, space, typeColors} from '@workday/canvas-kit-react/tokens';
 import {accessibleHide, styled, StyledType} from '@workday/canvas-kit-react/common';
 
 import {PaginationModel} from './types';
@@ -16,19 +16,13 @@ export interface AdditionalDetailsProps extends Omit<FlexProps, 'children'> {
 const StyledAdditionalDetails = styled(Flex)<
   StyledType & Pick<AdditionalDetailsProps, 'shouldHideDetails'>
 >(({shouldHideDetails}) => {
-  const styles = {
-    ...type.levels.subtext.medium,
-    color: typeColors.hint,
-  };
   if (shouldHideDetails) {
     return {
-      ...styles,
       ...accessibleHide,
       marginTop: space.zero,
     };
   } else {
     return {
-      ...styles,
       marginTop: space.xs,
     };
   }
@@ -43,7 +37,12 @@ export const AdditionalDetails = ({
   const liveRegionProps = useLiveRegion({shouldAnnounceToScreenReader});
 
   return (
-    <StyledAdditionalDetails {...liveRegionProps} {...elemProps}>
+    <StyledAdditionalDetails
+      {...type.levels.subtext.medium}
+      color={typeColors.hint}
+      {...liveRegionProps}
+      {...elemProps}
+    >
       {typeof children === 'function' ? children(model) : children}
     </StyledAdditionalDetails>
   );

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import {type, typeColors} from '@workday/canvas-kit-react/tokens';
-
 import {PaginationModel} from '../types';
-import {StyledType, styled} from '@workday/canvas-kit-react/common';
+import {LabelText} from '@workday/canvas-kit-react/text';
 
 export interface GoToLabelProps
   extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> {
@@ -13,16 +11,10 @@ export interface GoToLabelProps
   children?: (model: PaginationModel) => React.ReactNode | React.ReactNode;
 }
 
-const StyledLabel = styled('label')<StyledType>({
-  ...type.levels.subtext.medium,
-  color: typeColors.hint,
-  whiteSpace: 'nowrap',
-});
-
 export const GoToLabel = ({model, children, ...elemProps}: GoToLabelProps) => {
   return (
-    <StyledLabel {...elemProps}>
+    <LabelText typeLevel="subtext.medium" variant="hint" whiteSpace="nowrap" {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </StyledLabel>
+    </LabelText>
   );
 };

package/pagination/lib/Pagination/usePaginationModel.ts

@@ -41,8 +41,11 @@ export const usePaginationModel = ({
   const [currentPage, setCurrentPage] = React.useState(initialCurrentPage);
 
   const changePage = (page: number) => {
-    onPageChange?.(page);
-
+    // Don't fire an `onPageChange` event if the page number is the same as the current page.
+    // `setCurrentPage` doesn't need this check, because React won't update the state if the values are the same.
+    if (currentPage !== page) {
+      onPageChange?.(page);
+    }
     setCurrentPage(page);
   };
 

package/popup/lib/PopupBody.tsx

@@ -8,5 +8,5 @@ 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" padding="xxs" {...elemProps} />;
 });

package/popup/lib/PopupCard.tsx

@@ -12,12 +12,13 @@ import {
   useConstant,
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
-import {Stack, StackStyleProps} from '@workday/canvas-kit-react/layout';
+import {Flex, FlexStyleProps} 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> {
+export type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
+export interface PopupCardProps extends FlexAndBoxProps {
   children?: React.ReactNode;
 }
 
@@ -38,15 +39,22 @@ const popupAnimation = (transformOrigin: TransformOrigin) => {
 
 const StyledPopupCard = styled(Card)<
   StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(type.levels.subtext.large, ({transformOrigin}) => {
+>(({transformOrigin, theme}) => {
   if (transformOrigin == null) {
     return {};
   }
+
   return {
     animation: popupAnimation(transformOrigin),
     animationDuration: '150ms',
     animationTimingFunction: 'ease-out',
     transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
+    [theme.canvas.breakpoints.down('s')]: {
+      animation: popupAnimation({vertical: 'bottom', horizontal: 'center'}),
+      animationDuration: '150ms',
+      animationTimingFunction: 'ease-out',
+      transformOrigin: 'bottom center',
+    },
     // Allow overriding of animation in special cases
     '.wd-no-animation &': {
       animation: 'none',
@@ -63,24 +71,24 @@ export const PopupCard = createSubcomponent('div')({
     return getTransformFromPlacement(model.state.placement || 'bottom');
   }, [model.state.placement]);
 
-  // As is a Stack that will render an element of `Element`
-  const As = useConstant(() => Stack.as(Element));
+  // As is a Flex that will render an element of `Element`
+  const As = useConstant(() => Flex.as(Element));
 
   return (
     <StyledPopupCard
       as={As}
       transformOrigin={transformOrigin}
       position="relative"
-      padding="l"
       depth={5}
       maxWidth={`calc(100vw - ${space.l})`}
-      spacing={0}
       flexDirection="column"
       minHeight={0}
+      padding="m"
       maxHeight={`calc(100vh - ${
         elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl
       } * 2)`}
-      overflowY="auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
+      overflowY="auto"
+      {...type.levels.subtext.large}
       {...elemProps}
     >
       {children}

package/popup/lib/PopupCloseButton.tsx

@@ -14,5 +14,9 @@ export const PopupCloseButton = createSubcomponent(SecondaryButton)({
   modelHook: usePopupModel,
   elemPropsHook: usePopupCloseButton,
 })<PopupCloseButtonProps>(({children, ...elemProps}: PopupCloseButtonProps, Element) => {
-  return <Element {...elemProps}>{children}</Element>;
+  return (
+    <Element type="button" {...elemProps}>
+      {children}
+    </Element>
+  );
 });

package/popup/lib/PopupCloseIcon.tsx

@@ -26,5 +26,5 @@ export const PopupCloseIcon = createSubcomponent('button')({
   modelHook: usePopupModel,
   elemPropsHook: usePopupCloseButton,
 })<PopupCloseIconProps>(({children, ...elemProps}, Element) => {
-  return <StyledCloseIcon as={Element} size="medium" icon={xIcon} {...elemProps} />;
+  return <StyledCloseIcon as={Element} size="medium" icon={xIcon} type="button" {...elemProps} />;
 });

package/popup/lib/PopupHeading.tsx

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

package/popup/lib/PopupPopper.tsx

@@ -3,9 +3,9 @@ import * as React from 'react';
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
 
 import {usePopupModel, usePopupPopper} from './hooks';
-import {Placement, PopperOptions, Popper} from './Popper';
+import {Placement, PopperOptions, Popper, PopperProps} from './Popper';
 
-export interface PopupPopperProps {
+export interface PopupPopperProps extends PopperProps {
   /**
    * The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,
    * `right`, `bottom`, or `left`. Each placement can also be modified using any of the following
@@ -17,7 +17,6 @@ export interface PopupPopperProps {
    * The additional options passed to the Popper's `popper.js` instance.
    */
   popperOptions?: Partial<PopperOptions>;
-  children?: React.ReactNode;
 }
 
 export const PopupPopper = createSubcomponent('div')({