@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.100-next.25

package/modal/lib/hooks/useModalCard.ts

@@ -1,9 +1,9 @@
-import {composeHooks, createHook} from '@workday/canvas-kit-react/common';
-import {usePopupCard, PopupModel} from '@workday/canvas-kit-react/popup';
+import {composeHooks, createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {usePopupCard, usePopupModel} from '@workday/canvas-kit-react/popup';
 
 export const useModalCard = composeHooks(
   usePopupCard,
-  createHook(({state}: PopupModel) => {
+  createElemPropsHook(usePopupModel)(() => {
     return {
       'aria-modal': true,
     };

package/modal/lib/hooks/useModalHeading.ts

@@ -2,15 +2,15 @@ import React from 'react';
 
 import {
   composeHooks,
-  createHook,
+  createElemPropsHook,
   useLocalRef,
   useMountLayout,
 } from '@workday/canvas-kit-react/common';
-import {usePopupHeading, PopupModel} from '@workday/canvas-kit-react/popup';
+import {usePopupHeading, usePopupModel} from '@workday/canvas-kit-react/popup';
 
 export const useModalHeading = composeHooks(
   usePopupHeading,
-  createHook((_: PopupModel, ref?: React.Ref<HTMLElement>) => {
+  createElemPropsHook(usePopupModel)((_, ref?: React.Ref<HTMLElement>) => {
     const {elementRef, localRef} = useLocalRef(ref);
 
     useMountLayout(() => {

package/modal/lib/hooks/useModalModel.ts

@@ -1,5 +1,4 @@
 import {
-  PopupModelConfig,
   usePopupModel,
   useInitialFocus,
   useReturnFocus,
@@ -8,10 +7,15 @@ import {
   useAssistiveHideSiblings,
   useDisableBodyScroll,
 } from '@workday/canvas-kit-react/popup';
+import {createModelHook} from '../../../common';
 
 import {useCloseOnOverlayClick} from './useCloseOnOverlayClick';
 
-export const useModalModel = (config: PopupModelConfig = {}) => {
+export const useModalModel = createModelHook({
+  defaultConfig: usePopupModel.defaultConfig,
+  requiredConfig: usePopupModel.requiredConfig,
+  contextOverride: usePopupModel.Context,
+})(config => {
   const model = usePopupModel(config);
 
   useInitialFocus(model);
@@ -23,4 +27,4 @@ export const useModalModel = (config: PopupModelConfig = {}) => {
   useDisableBodyScroll(model);
 
   return model;
-};
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.0-next.7+23568685",
+  "version": "7.0.0-alpha.100-next.25+911bfad3",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -17,25 +17,16 @@
     "*/lib/*",
     "*/index.ts",
     "dist/",
-    "index.ts",
-    "ts3.5/**/*"
+    "index.ts"
   ],
-  "typesVersions": {
-    "<=3.5": {
-      "*": [
-        "ts3.5/*"
-      ]
-    }
-  },
   "scripts": {
     "watch": "yarn build:es6 -w",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "clean": "rimraf dist && rimraf ts3.5 && rimraf .build-info && mkdirp dist && mkdirp ts3.5/dist",
+    "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:es6": "tsc -p tsconfig.es6.json",
     "build:rebuild": "npm-run-all clean build",
-    "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
-    "build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
+    "build": "npm-run-all --parallel build:cjs build:es6",
     "prepack": "node ../../utils/publish.js pre react",
     "postpack": "node ../../utils/publish.js post react",
     "depcheck": "node ../../utils/check-dependencies-exist.js",
@@ -57,10 +48,10 @@
     "@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.0-next.7+23568685",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.7+23568685",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.7+23568685",
-    "@workday/canvas-system-icons-web": "1.0.41",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.100-next.25+911bfad3",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.100-next.25+911bfad3",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.100-next.25+911bfad3",
+    "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
     "csstype": "^2.6.17",
@@ -68,14 +59,15 @@
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
+    "react-virtual": "^2.10.4",
     "resize-observer-polyfill": "^1.5.1",
     "rtl-css-js": "^1.14.1",
     "screenfull": "^5.2.0",
     "use-resize-observer": "~7.0.1"
   },
   "devDependencies": {
-    "@workday/canvas-accent-icons-web": "^1.0.0",
-    "@workday/canvas-applet-icons-web": "^0.17.50"
+    "@workday/canvas-accent-icons-web": "^3.0.0",
+    "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "23568685fec785046d37cb320289d8ab9e74e283"
+  "gitHead": "911bfad34147c054ac08fd77845d0a0339fd3f95"
 }

package/pagination/lib/Pagination/Controls.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {
   chevronLeftSmallIcon,
   chevron2xLeftSmallIcon,
@@ -11,7 +11,7 @@ import {PaginationModel} from './types';
 import {HStack} from '@workday/canvas-kit-react/layout';
 import {useRTL} from './common/utils/useRTL';
 
-export type ControlButtonProps = IconButtonProps &
+export type ControlButtonProps = TertiaryButtonProps &
   React.ButtonHTMLAttributes<HTMLButtonElement> & {
     model: PaginationModel;
   };
@@ -38,9 +38,8 @@ export const JumpToFirstButton = ({model, onClick, ...restProps}: ControlButtonP
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevron2xRightSmallIcon : chevron2xLeftSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -61,9 +60,8 @@ export const StepToPreviousButton = ({onClick, model, ...restProps}: ControlButt
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevronRightSmallIcon : chevronLeftSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -84,9 +82,8 @@ export const StepToNextButton = ({model, onClick, ...restProps}: ControlButtonPr
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}
@@ -107,9 +104,8 @@ export const JumpToLastButton = ({model, onClick, ...restProps}: ControlButtonPr
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevron2xLeftSmallIcon : chevron2xRightSmallIcon;
   return (
-    <IconButton
+    <TertiaryButton
       aria-disabled={isDisabled || undefined}
-      variant="square"
       size="small"
       icon={icon}
       onClick={handleClick}

package/pagination/lib/Pagination/PageButton.tsx

@@ -1,30 +1,52 @@
 import * as React from 'react';
 import {styled} from '@workday/canvas-kit-react/common';
-import canvas, {type} from '@workday/canvas-kit-react/tokens';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
+import {BaseButton} from '@workday/canvas-kit-react/button';
 
 import {PaginationModel} from './types';
 
-const toggledStyles = {
-  color: canvas.colors.frenchVanilla100,
-  fontWeight: 700,
-  pointerEvents: 'none',
-};
-
-const StyledPageButton = styled(IconButton)<{toggled?: boolean}>(
+const StyledPageButton = styled(BaseButton)<{toggled?: boolean}>(
   {
-    ...type.levels.subtext.large,
+    minWidth: space.l,
+    width: space.l,
+    borderRadius: borderRadius.circle,
+    height: space.l,
   },
   ({toggled}) => {
-    return toggled ? toggledStyles : {};
+    return {
+      fontWeight: toggled ? 700 : 'normal',
+    };
   }
 );
 
-export type PageButtonProps = IconButtonProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    model: PaginationModel;
-    pageNumber: number;
+const getPaginationButtonColors = (toggled: boolean) => {
+  return {
+    default: {
+      background: toggled ? colors.blueberry400 : 'transparent',
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    hover: {
+      background: toggled ? colors.blueberry400 : colors.soap300,
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    active: {
+      background: toggled ? colors.blueberry400 : 'transparent',
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    focus: {
+      background: toggled ? colors.blueberry400 : 'transparent',
+      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
+    },
+    disabled: {
+      background: colors.licorice100,
+    },
   };
+};
+
+export type PageButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  model: PaginationModel;
+  pageNumber: number;
+};
 
 export const PageButton = ({
   model,
@@ -43,11 +65,10 @@ export const PageButton = ({
   return (
     <StyledPageButton
       aria-current={isCurrentPage ? 'page' : undefined}
+      colors={getPaginationButtonColors(isCurrentPage)}
       aria-pressed={undefined}
       onClick={handleClick}
-      size="small"
       toggled={isCurrentPage}
-      variant="square"
       {...elemProps}
     >
       {children || pageNumber}

package/pagination/lib/Pagination/Pagination.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 
 import {PaginationModel} from './types';
 import {usePaginationModel, UsePaginationModelConfig} from './usePaginationModel';
@@ -78,7 +78,7 @@ Pagination.Controls = (props: ControlsProps) => {
 };
 
 Pagination.JumpToFirstButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -87,7 +87,7 @@ Pagination.JumpToFirstButton = (
 };
 
 Pagination.StepToPreviousButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -96,7 +96,7 @@ Pagination.StepToPreviousButton = (
 };
 
 Pagination.StepToNextButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -105,7 +105,7 @@ Pagination.StepToNextButton = (
 };
 
 Pagination.JumpToLastButton = (
-  props: IconButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+  props: TertiaryButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
 ) => {
   // The linter doesn't recognize the dot syntax, so we're disabling the rule
   // eslint-disable-next-line react-hooks/rules-of-hooks

package/popup/lib/Popper.tsx

@@ -22,14 +22,6 @@ export interface PopperProps {
    * `anchorElement`.
    */
   children: ((props: {placement: Placement}) => React.ReactNode) | React.ReactNode;
-  /**
-   * The element that contains the portal children when `portal` is true. It is best to not define
-   * this unless you know what you're doing. Popper works with a PopupStack and in order for
-   * z-indexes to work correctly, all Popups on your page should live on the same root element
-   * otherwise you risk running into rendering issues:
-   * https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-   */
-  containerElement?: Element | null;
   /**
    * When provided, this optional callback will be used to determine positioning for the Popper element
    * instead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need
@@ -62,7 +54,7 @@ export interface PopperProps {
    */
   popperOptions?: Partial<PopperOptions>;
   /**
-   * If true, attach the Popper to the `containerElement`. If false, render the Popper within the
+   * If false, render the Popper within the
    * DOM hierarchy of its parent. A non-portal Popper will constrained by the parent container
    * overflows. If you set this to `false`, you may experience issues where you content gets cut off
    * by scrollbars or `overflow: hidden`
@@ -113,7 +105,6 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       onPlacementChange,
       children,
       portal,
-      containerElement,
       popperInstanceRef,
     }: PopperProps,
     ref
@@ -185,7 +176,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       return contents;
     }
 
-    return ReactDOM.createPortal(contents, containerElement || stackRef.current!);
+    return ReactDOM.createPortal(contents, stackRef.current!);
   }
 );
 

package/popup/lib/Popup.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
+import {createContainer} from '@workday/canvas-kit-react/common';
 
-import {PopupModel, usePopupModel, PopupModelContext} from './hooks';
+import {usePopupModel} from './hooks';
 import {PopupCard} from './PopupCard';
 import {PopupTarget} from './PopupTarget';
 import {PopupPopper} from './PopupPopper';
@@ -16,18 +16,11 @@ export interface PopupProps {
    * The contents of the Popup. Can be `Popup` children or any valid elements.
    */
   children: React.ReactNode;
-  /**
-   * A PopupModel with optional behavior hooks applied.
-   */
-  model: PopupModel;
 }
 
-export const Popup = createComponent()({
+export const Popup = createContainer()({
   displayName: 'Popup',
-  Component: ({children, model, ...config}: PopupProps) => {
-    const value = useDefaultModel(model, config, usePopupModel);
-    return <PopupModelContext.Provider value={value}>{children}</PopupModelContext.Provider>;
-  },
+  modelHook: usePopupModel,
   subComponents: {
     Heading: PopupHeading,
     Body: PopupBody,
@@ -37,4 +30,6 @@ export const Popup = createComponent()({
     Popper: PopupPopper,
     CloseButton: PopupCloseButton,
   },
+})<PopupProps>(({children}: PopupProps) => {
+  return <>{children}</>;
 });

package/popup/lib/PopupBody.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 
-import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Card} from '@workday/canvas-kit-react/card';
+import {usePopupModel} from './hooks';
 
-export const PopupBody = createComponent('div')({
+export const PopupBody = createSubcomponent('div')({
   displayName: 'Popup.Body',
-  Component: (props: ExtractProps<typeof Card.Body, never>, ref) => {
-    return <Card.Body overflowY="auto" {...props} />;
-  },
+  modelHook: usePopupModel,
+})<ExtractProps<typeof Card.Body>>(elemProps => {
+  return <Card.Body overflowY="auto" {...elemProps} />;
 });

package/popup/lib/PopupCard.tsx

@@ -7,23 +7,17 @@ import {
   styled,
   TransformOrigin,
   getTranslateFromOrigin,
-  createComponent,
   StyledType,
-  useModelContext,
   ExtractProps,
   useConstant,
+  createSubcomponent,
 } from '@workday/canvas-kit-react/common';
 import {Stack, StackStyleProps} from '@workday/canvas-kit-react/layout';
 
 import {getTransformFromPlacement} from './getTransformFromPlacement';
-import {usePopupCard, PopupModel, PopupModelContext} from './hooks';
+import {usePopupCard, usePopupModel} from './hooks';
 
 export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
-  /**
-   * Optionally pass a model directly to this component. Default is to implicitly use the same
-   * model as the container component which uses React context. Only use this for advanced use-cases
-   */
-  model?: PopupModel;
   children?: React.ReactNode;
 }
 
@@ -60,39 +54,36 @@ const StyledPopupCard = styled(Card)<
   };
 });
 
-export const PopupCard = createComponent('div')({
+export const PopupCard = createSubcomponent('div')({
   displayName: 'Popup.Card',
-  Component: ({children, model, ...elemProps}: PopupCardProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-    const props = usePopupCard(localModel, elemProps, ref);
-    const transformOrigin = React.useMemo(() => {
-      return getTransformFromPlacement(localModel.state.placement || 'bottom');
-    }, [localModel.state.placement]);
+  modelHook: usePopupModel,
+  elemPropsHook: usePopupCard,
+})<PopupCardProps>(({children, ...elemProps}, Element, model) => {
+  const transformOrigin = React.useMemo(() => {
+    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 Stack that will render an element of `Element`
+  const As = useConstant(() => Stack.as(Element));
 
-    return (
-      <StyledPopupCard
-        as={As}
-        transformOrigin={transformOrigin}
-        position="relative"
-        padding="l"
-        depth={2}
-        maxWidth={`calc(100vw - ${space.l})`}
-        spacing={0}
-        flexDirection="column"
-        minHeight={0}
-        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
-        {...props}
-      >
-        {children}
-      </StyledPopupCard>
-    );
-  },
+  return (
+    <StyledPopupCard
+      as={As}
+      transformOrigin={transformOrigin}
+      position="relative"
+      padding="l"
+      depth={5}
+      maxWidth={`calc(100vw - ${space.l})`}
+      spacing={0}
+      flexDirection="column"
+      minHeight={0}
+      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
+      {...elemProps}
+    >
+      {children}
+    </StyledPopupCard>
+  );
 });

package/popup/lib/PopupCloseButton.tsx

@@ -1,25 +1,18 @@
 import * as React from 'react';
 
-import {createComponent, useModelContext} from '@workday/canvas-kit-react/common';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 
-import {usePopupCloseButton, PopupModel, PopupModelContext} from './hooks';
+import {usePopupCloseButton, usePopupModel} from './hooks';
 
 export interface PopupCloseButtonProps {
-  /**
-   * Optionally pass a model directly to this component. Default is to implicitly use the same
-   * model as the container component which uses React context. Only use this for advanced use-cases
-   */
-  model?: PopupModel;
   children?: React.ReactNode;
 }
 
-export const PopupCloseButton = createComponent(SecondaryButton)({
+export const PopupCloseButton = createSubcomponent(SecondaryButton)({
   displayName: 'Popup.CloseButton',
-  Component: ({children, model, ...elemProps}: PopupCloseButtonProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    const props = usePopupCloseButton(localModel, elemProps, ref);
-    return <Element {...props}>{children}</Element>;
-  },
+  modelHook: usePopupModel,
+  elemPropsHook: usePopupCloseButton,
+})<PopupCloseButtonProps>(({children, ...elemProps}: PopupCloseButtonProps, Element) => {
+  return <Element {...elemProps}>{children}</Element>;
 });

package/popup/lib/PopupCloseIcon.tsx

@@ -3,45 +3,28 @@ import React from 'react';
 import {xIcon} from '@workday/canvas-system-icons-web';
 import {
   styled,
-  createComponent,
+  createSubcomponent,
   StyledType,
-  useModelContext,
   ExtractProps,
 } from '@workday/canvas-kit-react/common';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 
-import {usePopupCloseButton, PopupModel, PopupModelContext} from './hooks';
+import {usePopupCloseButton, usePopupModel} from './hooks';
 
-const closeIconSpacing = 11;
-const closeIconSpacingSmall = 9;
+const closeIconSpacing = 4;
 
-export interface PopupCloseIconProps extends ExtractProps<typeof IconButton, never> {
-  /**
-   * Optionally pass a model directly to this component. Default is to implicitly use the same
-   * model as the container component which uses React context. Only use this for advanced use-cases
-   */
-  model?: PopupModel;
-}
+export interface PopupCloseIconProps extends ExtractProps<typeof TertiaryButton, never> {}
 
-const StyledCloseIcon = styled(IconButton)<StyledType & PopupCloseIconProps>(
-  {
-    position: 'absolute',
-  },
-  ({size}) => ({
-    right: size === 'small' ? closeIconSpacingSmall : closeIconSpacing,
-    top: size === 'small' ? closeIconSpacingSmall : closeIconSpacing,
-  })
-);
+const StyledCloseIcon = styled(TertiaryButton)<StyledType & PopupCloseIconProps>({
+  position: 'absolute',
+  right: closeIconSpacing,
+  top: closeIconSpacing,
+});
 
-export const PopupCloseIcon = createComponent('button')({
+export const PopupCloseIcon = createSubcomponent('button')({
   displayName: 'Popup.CloseIcon',
-  Component: (
-    {size = 'medium', children, model, ...elemProps}: PopupCloseIconProps,
-    ref,
-    Element
-  ) => {
-    const localModel = useModelContext(PopupModelContext, model);
-    const props = usePopupCloseButton(localModel, elemProps, ref);
-    return <StyledCloseIcon as={Element} variant="plain" size={size} icon={xIcon} {...props} />;
-  },
+  modelHook: usePopupModel,
+  elemPropsHook: usePopupCloseButton,
+})<PopupCloseIconProps>(({children, ...elemProps}, Element) => {
+  return <StyledCloseIcon as={Element} size="medium" icon={xIcon} {...elemProps} />;
 });

package/popup/lib/PopupHeading.tsx

@@ -1,29 +1,22 @@
 import * as React from 'react';
 
-import {createComponent, useModelContext, ExtractProps} from '@workday/canvas-kit-react/common';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Card} from '@workday/canvas-kit-react/card';
 
-import {usePopupHeading, PopupModel, PopupModelContext} from './hooks';
+import {usePopupHeading, usePopupModel} from './hooks';
 
 export interface PopupHeadingProps extends ExtractProps<typeof Card.Heading, never> {
-  /**
-   * Optionally pass a model directly to this component. Default is to implicitly use the same
-   * model as the container component which uses React context. Only use this for advanced use-cases
-   */
-  model?: PopupModel;
   children?: React.ReactNode;
 }
 
-export const PopupHeading = createComponent('h2')({
+export const PopupHeading = createSubcomponent('h2')({
   displayName: 'Popup.Heading',
-  Component: ({children, model, ...elemProps}: PopupHeadingProps, ref, Element) => {
-    const localModel = useModelContext(PopupModelContext, model);
-
-    const props = usePopupHeading(localModel, elemProps, ref);
-    return (
-      <Card.Heading as={Element} marginBottom="s" {...props}>
-        {children}
-      </Card.Heading>
-    );
-  },
+  modelHook: usePopupModel,
+  elemPropsHook: usePopupHeading,
+})<PopupHeadingProps>(({children, ...elemProps}, Element) => {
+  return (
+    <Card.Heading as={Element} marginBottom="s" {...elemProps}>
+      {children}
+    </Card.Heading>
+  );
 });