@workday/canvas-kit-react 11.2.0-896-next.0 → 11.2.0

package/button/lib/DeleteButton.tsx

@@ -6,7 +6,6 @@ import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -60,9 +59,21 @@ const deleteButtonStencil = createStencil({
  */
 export const DeleteButton = createComponent('button')({
   displayName: 'DeleteButton',
-  Component: ({children, ...elemProps}: DeleteButtonProps, ref, Element) => {
+  Component: (
+    {children, size, iconPosition, grow, cs, ...elemProps}: DeleteButtonProps,
+    ref,
+    Element
+  ) => {
     return (
-      <Button as={Element} ref={ref} {...mergeStyles(elemProps, deleteButtonStencil())}>
+      <Button
+        as={Element}
+        ref={ref}
+        size={size}
+        grow={grow}
+        iconPosition={iconPosition}
+        cs={[deleteButtonStencil({size, iconPosition}), cs]}
+        {...elemProps}
+      >
         {children}
       </Button>
     );

package/button/lib/PrimaryButton.tsx

@@ -6,7 +6,6 @@ import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
 import {buttonColorPropVars, buttonStencil} from './BaseButton';
 import {Button, ButtonProps} from './Button';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -115,9 +114,21 @@ const primaryButtonStencil = createStencil({
 
 export const PrimaryButton = createComponent('button')({
   displayName: 'PrimaryButton',
-  Component: ({children, variant, ...elemProps}: PrimaryButtonProps, ref, Element) => {
+  Component: (
+    {children, variant, size, iconPosition, grow, cs, ...elemProps}: PrimaryButtonProps,
+    ref,
+    Element
+  ) => {
     return (
-      <Button as={Element} ref={ref} {...mergeStyles(elemProps, primaryButtonStencil({variant}))}>
+      <Button
+        as={Element}
+        ref={ref}
+        iconPosition={iconPosition}
+        size={size}
+        grow={grow}
+        cs={[primaryButtonStencil({variant, iconPosition, grow, size}), cs]}
+        {...elemProps}
+      >
         {children}
       </Button>
     );

package/button/lib/SecondaryButton.tsx

@@ -6,7 +6,6 @@ import {createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {brand, system} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -130,9 +129,21 @@ const secondaryButtonStencil = createStencil({
 
 export const SecondaryButton = createComponent('button')({
   displayName: 'SecondaryButton',
-  Component: ({children, variant, ...elemProps}: SecondaryButtonProps, ref, Element) => {
+  Component: (
+    {children, variant, size, iconPosition, grow, cs, ...elemProps}: SecondaryButtonProps,
+    ref,
+    Element
+  ) => {
     return (
-      <Button as={Element} ref={ref} {...mergeStyles(elemProps, secondaryButtonStencil({variant}))}>
+      <Button
+        as={Element}
+        ref={ref}
+        iconPosition={iconPosition}
+        size={size}
+        grow={grow}
+        cs={[secondaryButtonStencil({variant, iconPosition, grow, size}), cs]}
+        {...elemProps}
+      >
         {children}
       </Button>
     );

package/button/lib/TertiaryButton.tsx

@@ -6,7 +6,6 @@ import {calc, createStencil, cssVar} from '@workday/canvas-kit-styling';
 import {system, brand} from '@workday/canvas-tokens-web';
 import {Button, ButtonProps} from './Button';
 import {systemIconStencil} from '@workday/canvas-kit-react/icon';
-import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 /**
  * Extends all the style properties from Box to our buttons as well as props from ButtonProps.
@@ -291,6 +290,8 @@ export const TertiaryButton = createComponent('button')({
       size = 'medium',
       variant,
       iconPosition,
+      grow,
+      cs,
       ...elemProps
     }: TertiaryButtonProps,
     ref,
@@ -311,15 +312,18 @@ export const TertiaryButton = createComponent('button')({
         icon={icon}
         size={size}
         iconPosition={iconPosition}
-        {...mergeStyles(
-          elemProps,
+        grow={grow}
+        cs={[
           tertiaryButtonStencil({
-            variant,
             size,
+            variant,
+            grow,
             isThemeable: (isThemeable || baseIconPosition !== 'only') as any,
             iconPosition: baseIconPosition,
-          })
-        )}
+          }),
+          cs,
+        ]}
+        {...elemProps}
       >
         {children}
       </Button>

package/button/lib/parts/ButtonLabelIcon.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {ButtonSizes} from '../types';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, SystemIconProps} from '@workday/canvas-kit-react/icon';
+import {px2rem} from '@workday/canvas-kit-styling';
 
 export interface ButtonLabelIconProps extends Partial<SystemIconProps> {
   /**
@@ -42,8 +43,8 @@ export const ButtonLabelIcon = createComponent('span')({
         size={iconSize}
         icon={icon}
         shouldMirror={shouldMirrorIcon}
-        width={size ? iconSizes[size] : iconSizes.large}
-        height={size ? iconSizes[size] : iconSizes.large}
+        width={px2rem(iconSize)}
+        height={px2rem(iconSize)}
         display="inline-block"
         {...elemProps}
       />

package/collection/lib/useOverflowListMeasure.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 
-import {createElemPropsHook, useForkRef, useResizeObserver} from '@workday/canvas-kit-react/common';
+import {
+  createElemPropsHook,
+  useMountLayout,
+  useResizeObserver,
+  useLocalRef,
+} from '@workday/canvas-kit-react/common';
 
 import {useOverflowListModel} from './useOverflowListModel';
 
@@ -9,12 +14,21 @@ import {useOverflowListModel} from './useOverflowListModel';
  * overflow detection.
  */
 export const useOverflowListMeasure = createElemPropsHook(useOverflowListModel)((model, ref) => {
-  const localRef = React.useRef(null);
-  const {ref: resizeRef} = useResizeObserver({
+  const {elementRef, localRef} = useLocalRef(ref as React.Ref<HTMLElement>);
+  const gapProperty = model.state.orientation === 'horizontal' ? 'columnGap' : 'rowGap';
+
+  useResizeObserver({
     ref: localRef,
     onResize: model.events.setContainerWidth,
   });
-  const elementRef = useForkRef(ref, resizeRef);
+  useMountLayout(() => {
+    if (localRef.current) {
+      const styles = getComputedStyle(localRef.current);
+      model.events.setContainerGap({
+        size: styles.gap === 'normal' ? 0 : Number(styles[gapProperty].replace('px', '')),
+      });
+    }
+  });
 
   return {
     ref: elementRef,

package/collection/lib/useOverflowListModel.tsx

@@ -6,10 +6,11 @@ import {Item} from './useBaseListModel';
 
 export function getHiddenIds(
   containerWidth: number,
+  containerGap: number,
   overflowTargetWidth: number,
   itemWidthCache: Record<string, number>,
   selectedIds: string[] | 'all',
-  items?: Item<any>[]
+  items: Item<any>[]
 ): string[] {
   /** Allows us to prioritize showing the selected item */
   let selectedKey: undefined | string;
@@ -18,17 +19,22 @@ export function getHiddenIds(
   /** Tally ids that won't fit inside the container. These will be used by components to hide
    * elements that won't fit in the container */
   const hiddenIds: string[] = [];
+  /** Track if gap should be calculated since gap doesn't apply to the width of the first item, only
+   * consecutive items */
+  let shouldAddGap = false;
+
   if (selectedIds !== 'all' && selectedIds.length) {
-    if (items?.length) {
+    if (items.length) {
       // If selectedIds[0] is not in items, use the first id from items
       selectedKey = items.find(item => item.id === selectedIds[0]) ? selectedIds[0] : items[0].id;
-    } else {
-      selectedKey = selectedIds[0];
     }
   }
 
   if (
-    Object.keys(itemWidthCache).reduce((sum, key) => sum + itemWidthCache[key], 0) <= containerWidth
+    Object.keys(itemWidthCache).reduce(
+      (sum, key, index) => sum + itemWidthCache[key] + (index > 0 ? containerGap : 0),
+      0
+    ) <= containerWidth
   ) {
     // All items fit, return empty array
     return [];
@@ -39,6 +45,7 @@ export function getHiddenIds(
     } else {
       // at least the selected item and overflow target fit. Update our itemWidth with the sum
       itemWidth += itemWidthCache[selectedKey] + overflowTargetWidth;
+      shouldAddGap = true;
     }
   } else {
     itemWidth += overflowTargetWidth;
@@ -46,7 +53,8 @@ export function getHiddenIds(
 
   for (const key in itemWidthCache) {
     if (key !== selectedKey) {
-      itemWidth += itemWidthCache[key];
+      itemWidth += itemWidthCache[key] + (shouldAddGap ? containerGap : 0);
+      shouldAddGap = true;
       if (itemWidth > containerWidth) {
         hiddenIds.push(key);
       }
@@ -75,6 +83,7 @@ export const useOverflowListModel = createModelHook({
   const [hiddenIds, setHiddenIds] = React.useState(config.initialHiddenIds);
   const [itemWidthCache, setItemWidthCache] = React.useState<Record<string, number>>({});
   const [containerWidth, setContainerWidth] = React.useState(0);
+  const [containerGap, setContainerGap] = React.useState(0);
   const containerWidthRef = React.useRef(0);
   const itemWidthCacheRef = React.useRef(itemWidthCache);
   const [overflowTargetWidth, setOverflowTargetWidth] = React.useState(0);
@@ -96,6 +105,7 @@ export const useOverflowListModel = createModelHook({
     hiddenIds: internalHiddenIds,
     itemWidthCache,
     containerWidth,
+    containerGap,
     overflowTargetWidth,
   };
 
@@ -105,6 +115,7 @@ export const useOverflowListModel = createModelHook({
       const {selectedIds} = model.selection.select(data.id, state);
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         selectedIds,
@@ -120,6 +131,21 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
+        overflowTargetWidthRef.current,
+        itemWidthCacheRef.current,
+        state.selectedIds,
+        config.items
+      );
+
+      setHiddenIds(ids);
+    },
+    setContainerGap(data: {size: number}) {
+      setContainerGap(data.size);
+
+      const ids = getHiddenIds(
+        containerWidthRef.current,
+        data.size,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds,
@@ -142,6 +168,7 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds,
@@ -158,6 +185,7 @@ export const useOverflowListModel = createModelHook({
 
       const ids = getHiddenIds(
         containerWidthRef.current,
+        containerGap,
         overflowTargetWidthRef.current,
         itemWidthCacheRef.current,
         state.selectedIds !== 'all'