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

package/action-bar/index.ts

@@ -1 +1,2 @@
 export * from './lib/ActionBar';
+export * from './lib/useActionBarModel';

package/action-bar/lib/ActionBar.tsx

@@ -1,37 +1,39 @@
 import * as React from 'react';
-import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
-import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
-import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {useActionBarModel} from './useActionBarModel';
+import {ActionBarList} from './ActionBarList';
+import {ActionBarOverflowButton} from './ActionBarOverflowButton';
+import {ActionBarItem} from './ActionBarItem';
 
-interface ActionBarProps extends Omit<HStackProps, 'spacing'> {
-  spacing?: StackSpacing;
+export interface ActionBarProps {
+  /**
+   * The contents of the ActionBar. Can be `ActionBar` children or any valid elements.
+   */
+  children: React.ReactNode;
 }
 
-const ResponsiveHStack = styled(HStack)<HStackProps & StyledType>(({theme}) => ({
-  [theme.canvas.breakpoints.down('s')]: {
-    padding: space.s,
-    '> *:not(div)': {
-      flex: 1,
-    },
-  },
-}));
-
-export const ActionBar = createComponent('div')({
+export const ActionBar = createContainer()({
   displayName: 'ActionBar',
-  Component: (elemProps: ActionBarProps, ref, Element) => (
-    <ResponsiveHStack
-      ref={ref}
-      as={Element}
-      spacing="s"
-      depth={1}
-      background={commonColors.background}
-      borderTop={`solid 1px ${colors.soap400}`}
-      padding={`${space.s} ${space.xl} `}
-      position="fixed"
-      bottom={0}
-      left={0}
-      right={0}
-      {...elemProps}
-    />
-  ),
+  modelHook: useActionBarModel,
+  subComponents: {
+    List: ActionBarList,
+    Item: ActionBarItem,
+    OverflowButton: ActionBarOverflowButton,
+    /**
+     * The overflow menu of the ActionBar component. If there isn't enough room to render all the action
+     * items, the extra actions that don't fit will be overflowed into this menu.
+     * @example
+     * <ActionBar.Menu.Popper>
+     *   <ActionBar.Menu.Card>
+     *     <ActionBar.Menu.List>
+     *       {(item: MyActionItem) => <ActionBar.Menu.Item>{item.text}</ActionBar.Menu.Item>}
+     *     </ActionBar.Menu.List>
+     *   </ActionBar.Menu.Card>
+     * </ActionBar.Menu.Popper>
+     */
+    Menu,
+  },
+})<ActionBarProps>(({children}, _, model) => {
+  return <Menu model={model.menu}>{children}</Menu>;
 });

package/action-bar/lib/ActionBarItem.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {composeHooks, EllipsisText, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {SystemIcon} from '@workday/canvas-kit-react/icon';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {
+  useListItemRegister,
+  useListItemRovingFocus,
+  useOverflowListItemMeasure,
+} from '@workday/canvas-kit-react/collection';
+
+import {useActionBarModel} from './useActionBarModel';
+
+export interface ActionBarItemProps {
+  /**
+   * The contents of the action item. This will be the accessible name of the action for screen readers.
+   *
+   * ```tsx
+   * <ActionBar.Item>First Action</ActionBar.Item>
+   * ```
+   */
+  children: React.ReactNode;
+  /**
+   * The identifier of the action. This identifier will be used for correct overflow behavior.
+   * If this property is not provided, it will default to a string representation
+   * of the the zero-based index of the Item when it was initialized.
+   */
+  'data-id'?: string;
+}
+
+export const useActionBarItem = composeHooks(
+  useOverflowListItemMeasure,
+  useListItemRovingFocus,
+  useListItemRegister
+);
+
+export const ActionBarItem = createSubcomponent(SecondaryButton)({
+  displayName: 'ActionBar.Item',
+  modelHook: useActionBarModel,
+  elemPropsHook: useActionBarItem,
+  subComponents: {
+    Icon: SystemIcon,
+    Text: EllipsisText,
+  },
+})<ActionBarItemProps>((elemProps, Element) => {
+  return <Element {...elemProps} />;
+});

package/action-bar/lib/ActionBarList.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import {commonColors, colors, space} from '@workday/canvas-kit-react/tokens';
+import {
+  composeHooks,
+  createSubcomponent,
+  ExtractProps,
+  styled,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {
+  useOverflowListMeasure,
+  useListRenderItems,
+  useListResetCursorOnBlur,
+} from '@workday/canvas-kit-react/collection';
+
+import {useActionBarModel} from './useActionBarModel';
+import {ActionBar} from './ActionBar';
+
+// Use `Partial` here to make `spacing` optional
+export interface ActionBarListProps<T = unknown>
+  extends Partial<ExtractProps<typeof HStack, never>> {
+  /**
+   * If items are passed to a `ActionBarModel`, the child of `ActionBar.List` should be a render prop. The
+   * List will determine how and when the item will be rendered.
+   *
+   * @example
+   * <ActionBar.List>
+   *   {(item) => <ActionBar.Item key={item.id} name={item.name}>{item.text}</ActionBar.Item>}
+   * </ActionBar.List>
+   */
+  children: ((item: T) => React.ReactNode) | React.ReactNode;
+}
+
+const ResponsiveHStack = styled(HStack)<ActionBarListProps & StyledType>(({theme}) => ({
+  [theme.canvas.breakpoints.down('s')]: {
+    padding: space.s,
+    '> *': {
+      flex: 1,
+    },
+  },
+}));
+
+export const useActionBarList = composeHooks(useOverflowListMeasure, useListResetCursorOnBlur);
+
+export const ActionBarList = createSubcomponent('div')({
+  displayName: 'ActionBar.List',
+  modelHook: useActionBarModel,
+  elemPropsHook: useActionBarList,
+})<ActionBarListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <ResponsiveHStack
+      as={Element}
+      spacing="s"
+      depth={1}
+      background={commonColors.background}
+      borderTop={`solid 1px ${colors.soap400}`}
+      padding={`${space.s} ${space.xl} `}
+      position="fixed"
+      bottom={0}
+      left={0}
+      right={0}
+      {...elemProps}
+    >
+      {useListRenderItems(model, children)}
+      <ActionBar.OverflowButton />
+    </ResponsiveHStack>
+  );
+});

package/action-bar/lib/ActionBarOverflowButton.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
+import {
+  createElemPropsHook,
+  composeHooks,
+  subModelHook,
+  createSubcomponent,
+  StyledType,
+} from '@workday/canvas-kit-react/common';
+import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
+
+import {useMenuTarget} from '@workday/canvas-kit-react/menu';
+import {useActionBarModel} from './useActionBarModel';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+
+export const useActionBarOverflowButton = composeHooks(
+  createElemPropsHook(useActionBarModel)(() => ({
+    'aria-haspopup': true,
+  })),
+  useOverflowListTarget,
+  subModelHook((m: ReturnType<typeof useActionBarModel>) => m.menu, useMenuTarget)
+);
+
+const StyledSecondaryButton = styled(SecondaryButton)<StyledType>({
+  flex: 0,
+});
+
+export const ActionBarOverflowButton = createSubcomponent('button')({
+  displayName: 'ActionBar.OverflowButton',
+  modelHook: useActionBarModel,
+  elemPropsHook: useActionBarOverflowButton,
+})((elemProps, Element) => {
+  return <StyledSecondaryButton as={Element} icon={relatedActionsIcon} {...elemProps} />;
+});

package/action-bar/lib/useActionBarModel.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import {createModelHook} from '@workday/canvas-kit-react/common';
+import {defaultGetId, useOverflowListModel} from '@workday/canvas-kit-react/collection';
+
+import {useMenuModel} from '@workday/canvas-kit-react/menu';
+
+export const useActionBarModel = createModelHook({
+  defaultConfig: {
+    ...useOverflowListModel.defaultConfig,
+    /**
+     * Optional id for the whole `ActionBar` group. If not provided, a unique id will be created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * The default ActionBar sub-components only handle rendering of button group in a horizontal orientation,
+     * but the sub-components could be replaced to handle vertical orientations.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation,
+    menuConfig: {} as Partial<typeof useMenuModel.defaultConfig>,
+  },
+  requiredConfig: useOverflowListModel.requiredConfig,
+})(config => {
+  const getId = config.getId || defaultGetId;
+
+  const items = config.items;
+
+  const model = useOverflowListModel(
+    useOverflowListModel.mergeConfig(config, {
+      orientation: config.orientation || 'horizontal',
+      items,
+      shouldVirtualize: false,
+    })
+  );
+
+  let hiddenIds = model.state.hiddenIds;
+  let nonInteractiveIds = model.state.nonInteractiveIds;
+  const totalSize = model.state.items.length;
+
+  // Only show a maximum of 3 buttons
+  if (totalSize - hiddenIds.length >= 3) {
+    hiddenIds = items.slice(3, totalSize).map(getId);
+  }
+
+  // Always show the first button and make sure it is interactive
+  if (totalSize - hiddenIds.length === 0) {
+    hiddenIds = items.slice(1, totalSize).map(getId);
+    nonInteractiveIds = [];
+  }
+
+  const state = {
+    ...model.state,
+    hiddenIds,
+    nonInteractiveIds,
+    orientation: config.orientation || 'horizontal',
+  };
+
+  const overflowItems = React.useMemo(
+    () => (items ? items.filter(item => state.hiddenIds.includes(getId(item))) : undefined),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state.hiddenIds, items]
+  );
+
+  const events = {
+    ...model.events,
+  };
+
+  const menu = useMenuModel(
+    useMenuModel.mergeConfig(config.menuConfig as Required<typeof config.menuConfig>, {
+      id: `act-bar-menu-${model.state.id}`,
+      items: overflowItems,
+      nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+      onSelect() {
+        menu.events.hide();
+      },
+      onShow() {
+        // Always select the first item when the menu is opened
+        menu.events.goToFirst();
+      },
+    })
+  );
+
+  return {
+    ...model,
+    state,
+    events,
+    menu,
+  };
+});

package/badge/README.md

@@ -32,15 +32,14 @@ const AccessibleHide = styled('div')({
 
 ...
 
-<IconButton
+<TertiaryButton
   style={{ position: "relative" }}
   aria-label={`Alerts ${count} new notifications`}
   size="medium"
-  variant="circle"
 >
   <SystemIcon icon={notificationsIcon} aria-hidden="true" />
   <Badge count={count} aria-hidden="true" />
-</IconButton>
+</TertiaryButton>
 <AccessibleHide role="status" aria-live="polite" aria-atomic="true">
   New notifications
 </AccessibleHide>

package/banner/lib/Banner.tsx

@@ -5,25 +5,21 @@ import * as React from 'react';
 
 import {borderRadius, CSSProperties, space, type} from '@workday/canvas-kit-react/tokens';
 import {
-  createComponent,
+  createContainer,
   ExtractProps,
   focusRing,
   hideMouseFocus,
-  useDefaultModel,
   useIsRTL,
 } from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
-import {BannerModel, BannerModelConfig, useBanner, useBannerModel, useThemedPalette} from './hooks';
+import {useBanner, useBannerModel, useThemedPalette} from './hooks';
 
 import {BannerIcon} from './BannerIcon';
 import {BannerLabel} from './BannerLabel';
 import {BannerActionText} from './BannerActionText';
 
-export const BannerModelContext = React.createContext<BannerModel>({} as any);
-
-export interface BannerProps extends BannerModelConfig, ExtractProps<typeof Flex, never> {
-  model?: BannerModel;
+export interface BannerProps extends ExtractProps<typeof Flex, never> {
   /**
    * Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
    */
@@ -46,57 +42,51 @@ const styles: CSSProperties = {
   ...hideMouseFocus,
 };
 
-export const Banner = createComponent('button')({
+export const Banner = createContainer('button')({
   displayName: 'Banner',
-  Component: ({children, model, ...props}: BannerProps, ref, Element) => {
-    const {hasError, isSticky, id, ...elemProps} = props;
-    const value = useDefaultModel(model, {hasError, isSticky, id}, useBannerModel);
-
-    const palette = useThemedPalette(hasError ? 'error' : 'alert');
-    const themedBackgroundStyles: CSSProperties = {
-      '&:hover': {
-        backgroundColor: palette.hover,
-      },
-    };
-
-    const isRTL = useIsRTL();
-    const borderBottomLeftRadius = isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
-    const borderTopLeftRadius = isRTL ? 'borderTopRightRadius' : 'borderTopLeftRadius';
-    const borderBottomRightRadius = isRTL ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
-    const borderTopRightRadius = isRTL ? 'borderTopLeftRadius' : 'borderTopRightRadius';
-
-    const borderStyleProps = {
-      [borderBottomLeftRadius]: borderRadius.m,
-      [borderTopLeftRadius]: borderRadius.m,
-      [borderBottomRightRadius]: isSticky ? 0 : borderRadius.m,
-      [borderTopRightRadius]: isSticky ? 0 : borderRadius.m,
-    };
-
-    const bannerProps = useBanner(value, elemProps, ref);
-
-    return (
-      <BannerModelContext.Provider value={value}>
-        <Flex
-          as={Element}
-          width={isSticky ? '222px' : '328px'}
-          backgroundColor={palette.normal}
-          color={palette.contrast}
-          padding={`${space.xxs} ${space.s}`}
-          border="0"
-          display="flex"
-          alignItems="center"
-          {...borderStyleProps}
-          css={[styles, themedBackgroundStyles]}
-          {...bannerProps}
-        >
-          {children}
-        </Flex>
-      </BannerModelContext.Provider>
-    );
-  },
+  modelHook: useBannerModel,
+  elemPropsHook: useBanner,
   subComponents: {
     Icon: BannerIcon,
     Label: BannerLabel,
     ActionText: BannerActionText,
   },
+})<BannerProps>(({children, ...elemProps}, Element, model) => {
+  const palette = useThemedPalette(model.state.hasError ? 'error' : 'alert');
+  const themedBackgroundStyles: CSSProperties = {
+    '&:hover': {
+      backgroundColor: palette.hover,
+    },
+  };
+
+  const isRTL = useIsRTL();
+  const borderBottomLeftRadius = isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
+  const borderTopLeftRadius = isRTL ? 'borderTopRightRadius' : 'borderTopLeftRadius';
+  const borderBottomRightRadius = isRTL ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
+  const borderTopRightRadius = isRTL ? 'borderTopLeftRadius' : 'borderTopRightRadius';
+
+  const borderStyleProps = {
+    [borderBottomLeftRadius]: borderRadius.m,
+    [borderTopLeftRadius]: borderRadius.m,
+    [borderBottomRightRadius]: model.state.isSticky ? 0 : borderRadius.m,
+    [borderTopRightRadius]: model.state.isSticky ? 0 : borderRadius.m,
+  };
+
+  return (
+    <Flex
+      as={Element}
+      width={model.state.isSticky ? '222px' : '328px'}
+      backgroundColor={palette.normal}
+      color={palette.contrast}
+      padding={`${space.xxs} ${space.s}`}
+      border="0"
+      display="flex"
+      alignItems="center"
+      {...borderStyleProps}
+      css={[styles, themedBackgroundStyles]}
+      {...elemProps}
+    >
+      {children}
+    </Flex>
+  );
 });

package/banner/lib/BannerActionText.tsx

@@ -2,18 +2,15 @@ import * as React from 'react';
 
 import {
   ExtractProps,
-  createComponent,
-  useModelContext,
+  createSubcomponent,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-import {Box} from '@workday/canvas-kit-labs-react/common';
+import {Box} from '@workday/canvas-kit-react/layout';
 
-import {BannerModelContext} from './Banner';
-import {BannerModel, useBannerActionText} from './hooks';
+import {useBannerActionText, useBannerModel} from './hooks';
 
 export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
-  model?: BannerModel;
   /**
    * The text of the Banner action.
    * @default 'View All'
@@ -25,25 +22,18 @@ const StyledActionBarText = styled(Box.as('span'))<StyledType>({
   textDecoration: 'underline',
 });
 
-export const BannerActionText = createComponent('span')({
+export const BannerActionText = createSubcomponent('span')({
   displayName: 'Banner.ActionTextText',
-  Component: (
-    {children = 'View All', model, ...elemProps}: BannerActionTextProps,
-    ref,
-    Element
-  ) => {
-    const localModel = useModelContext(BannerModelContext, model);
-    const props = useBannerActionText(localModel, elemProps, ref);
-
-    return (
-      <StyledActionBarText
-        display={localModel.state.isSticky ? 'none' : 'inline'}
-        ref={ref}
-        as={Element}
-        {...props}
-      >
-        {children}
-      </StyledActionBarText>
-    );
-  },
+  modelHook: useBannerModel,
+  elemPropsHook: useBannerActionText,
+})<BannerActionTextProps>(({children = 'View All', ...elemProps}, Element, model) => {
+  return (
+    <StyledActionBarText
+      as={Element}
+      display={model.state.isSticky ? 'none' : 'inline'}
+      {...elemProps}
+    >
+      {children}
+    </StyledActionBarText>
+  );
 });

package/banner/lib/BannerIcon.tsx

@@ -2,19 +2,16 @@ import React from 'react';
 import {space} from '@workday/canvas-kit-react/tokens';
 import {
   ExtractProps,
-  createComponent,
-  useModelContext,
+  createSubcomponent,
   styled,
+  StyledType,
 } from '@workday/canvas-kit-react/common';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
 
-import {BannerModelContext} from './Banner';
-import {BannerModel, useBannerIcon} from './hooks';
+import {useBannerIcon, useBannerModel} from './hooks';
 
 export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
-  model?: BannerModel;
   /**
    * Icon to show next to label
    * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
@@ -22,18 +19,16 @@ export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, ne
   icon?: CanvasSystemIcon;
 }
 
-const StyledBannerIcon = styled(SystemIcon)({
+const StyledBannerIcon = styled(SystemIcon)<StyledType>({
   marginRight: space.xs,
 });
 
-export const BannerIcon = createComponent('span')({
+export const BannerIcon = createSubcomponent('span')({
   displayName: 'Banner.Icon',
-  Component: ({icon = exclamationTriangleIcon, model, ...elemProps}: BannerIconProps, ref) => {
-    const localModel = useModelContext(BannerModelContext, model);
+  modelHook: useBannerModel,
+  elemPropsHook: useBannerIcon,
+})<BannerIconProps>((elemProps, Element, model) => {
+  const {icon, ...iconButtonProps} = elemProps;
 
-    // SystemIcon is still a class based component so we need to set ref manually.
-    const {ref: iconRef, icon: defaultIcon, ...props} = useBannerIcon(localModel, elemProps, ref);
-
-    return <StyledBannerIcon icon={icon ?? defaultIcon} iconRef={iconRef} {...props} />;
-  },
+  return <StyledBannerIcon as={Element} icon={icon!} {...iconButtonProps} />;
 });

package/banner/lib/BannerLabel.tsx

@@ -1,29 +1,25 @@
 import * as React from 'react';
 
-import {ExtractProps, createComponent, useModelContext} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
-import {BannerModelContext} from './Banner';
-import {BannerModel, useBannerLabel} from './hooks';
+import {useBannerLabel, useBannerModel} from './hooks';
 
 export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
-  model?: BannerModel;
   /**
    * The text of the Banner.
    */
   children: React.ReactNode;
 }
 
-export const BannerLabel = createComponent('div')({
+export const BannerLabel = createSubcomponent('div')({
   displayName: 'Banner.Label',
-  Component: ({children, model, ...elemProps}: BannerLabelProps, ref, Element) => {
-    const localModel = useModelContext(BannerModelContext, model);
-    const props = useBannerLabel(localModel, elemProps, ref);
-
-    return (
-      <Flex as={Element} flex="1 1 0%" {...props}>
-        {children}
-      </Flex>
-    );
-  },
+  modelHook: useBannerModel,
+  elemPropsHook: useBannerLabel,
+})<BannerLabelProps>(({children, ...elemProps}, Element) => {
+  return (
+    <Flex as={Element} flex="1 1 0%" {...elemProps}>
+      {children}
+    </Flex>
+  );
 });

package/banner/lib/hooks/useBanner.tsx

@@ -1,11 +1,11 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {BannerModel} from './useBannerModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useBannerModel} from './useBannerModel';
 
 /**
  * Adds the necessary props to a `Banner` component.
  * Used by the Banner component
  */
-export const useBanner = createHook(({state}: BannerModel) => {
+export const useBanner = createElemPropsHook(useBannerModel)(({state}) => {
   return {
     'aria-describedby': `label-${state.id}`,
     'aria-labelledby': `action-${state.id}`,

package/banner/lib/hooks/useBannerActionText.tsx

@@ -1,11 +1,11 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {BannerModel} from './useBannerModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {useBannerModel} from './useBannerModel';
 
 /**
  * Adds the necessary props to a `ActionText` component.
  * Used by the Banner.ActionText subcomponent
  */
-export const useBannerActionText = createHook(({state}: BannerModel) => {
+export const useBannerActionText = createElemPropsHook(useBannerModel)(({state}) => {
   return {
     id: `action-${state.id}`,
   };

package/banner/lib/hooks/useBannerIcon.tsx

@@ -1,13 +1,13 @@
-import {createHook} from '@workday/canvas-kit-react/common';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 import {exclamationCircleIcon, exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
-import {BannerModel} from './useBannerModel';
+import {useBannerModel} from './useBannerModel';
 import {useThemedPalette} from './useThemedPalette';
 
 /**
  * Adds the necessary props to a `Icon` component.
  * Used by the Banner.Icon subcomponent
  */
-export const useBannerIcon = createHook(({state}: BannerModel) => {
+export const useBannerIcon = createElemPropsHook(useBannerModel)(({state}) => {
   const palette = useThemedPalette(state.hasError ? 'error' : 'alert');
 
   return {