@workday/canvas-kit-react 13.0.0-alpha.1016-next.0 → 13.0.0-alpha.1024-next.0

package/tabs/lib/TabsList.tsx

@@ -1,17 +1,13 @@
 import * as React from 'react';
 
-import {commonColors} from '@workday/canvas-kit-react/tokens';
 import {
   composeHooks,
   createSubcomponent,
   createElemPropsHook,
   ExtractProps,
   useModalityType,
-  styled,
-  StyledType,
-  filterOutProps,
 } from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-react/layout';
+import {Flex, mergeStyles} from '@workday/canvas-kit-react/layout';
 import {
   useOverflowListMeasure,
   useListRenderItems,
@@ -19,6 +15,8 @@ import {
 } from '@workday/canvas-kit-react/collection';
 
 import {useTabsModel} from './useTabsModel';
+import {createStencil, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 export interface TabListProps<T = any> extends Omit<ExtractProps<typeof Flex, never>, 'children'> {
   /**
@@ -46,44 +44,90 @@ export const useTabsList = composeHooks(
   useListResetCursorOnBlur
 );
 
-const StyledStack = styled(Flex, {
-  shouldForwardProp: filterOutProps(['maskImage']),
-})<StyledType & {maskImage?: string}>(({maskImage}) => ({
-  maskImage: maskImage,
-}));
+export const tabsListStencil = createStencil({
+  base: {
+    display: 'flex',
+    position: 'relative',
+    borderBottom: `${px2rem(1)} solid ${system.color.border.divider}`,
+    gap: system.space.x3,
+    paddingInline: system.space.x6,
+    maskImage: 'none',
+  },
+  modifiers: {
+    modality: {
+      touch: {
+        paddingInline: system.space.zero,
+      },
+      mouse: {},
+      pen: {},
+    },
+    isDragging: {
+      true: {},
+      false: {},
+    },
+    direction: {
+      left: {},
+      right: {},
+    },
+    currentScrollPos: {
+      true: {},
+      false: {},
+    },
+  },
+  compound: [
+    {
+      modifiers: {
+        modality: 'touch',
+        isDragging: true,
+        direction: 'left',
+      },
+      styles: {
+        maskImage: 'linear-gradient(to left, white 80%, transparent)',
+      },
+    },
+    {
+      modifiers: {
+        modality: 'touch',
+        isDragging: true,
+        direction: 'right',
+      },
+      styles: {
+        maskImage: 'linear-gradient(to right, white 80%, transparent)',
+      },
+    },
+  ],
+});
 
 export const TabsList = createSubcomponent('div')({
   displayName: 'Tabs.List',
   modelHook: useTabsModel,
   elemPropsHook: useTabsList,
-})<TabListProps>(({children, overflowButton, ...elemProps}, Element, model) => {
-  const modality = useModalityType();
-  const touchStates = useTouchDirection();
-  return (
-    <StyledStack
-      as={Element}
-      position="relative"
-      borderBottom={`1px solid ${commonColors.divider}`}
-      paddingX={modality === 'touch' ? 'zero' : 'm'}
-      gap="xs"
-      maskImage={
-        modality === 'touch' && touchStates.isDragging
-          ? `linear-gradient(${
-              touchStates.direction === 'left' ? 'to left' : 'to right'
-            }, white 80%, transparent)`
-          : undefined
-      }
-      {...elemProps}
-    >
-      {useListRenderItems(model, children)}
-      {overflowButton}
-    </StyledStack>
-  );
-});
+})<TabListProps & {maskImage?: string}>(
+  ({children, overflowButton, ...elemProps}, Element, model) => {
+    const modality = useModalityType();
+    const touchStates = useTouchDirection();
+
+    return (
+      <Element
+        {...mergeStyles(
+          elemProps,
+          tabsListStencil({
+            modality: modality,
+            isDragging: touchStates.isDragging,
+            direction: touchStates.direction,
+          })
+        )}
+      >
+        {useListRenderItems(model, children)}
+        {overflowButton}
+      </Element>
+    );
+  }
+);
 
 export const useTouchDirection = () => {
   const [isDragging, setIsDragging] = React.useState(false);
-  const [touchDir, setTouchDirection] = React.useState('right');
+  const [touchDir, setTouchDirection] = React.useState<'right' | 'left' | undefined>('right');
 
   React.useEffect(() => {
     let prevXPos = window.pageXOffset;

package/tabs/lib/TabsOverflowButton.tsx

@@ -13,6 +13,9 @@ import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
 import {useMenuTarget} from '@workday/canvas-kit-react/menu';
 import {useTabsModel} from './useTabsModel';
 import {StyledTabItem} from './TabsItem';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {mergeStyles} from '@workday/canvas-kit-react/layout';
 
 export interface OverflowButtonProps {
   /**
@@ -21,6 +24,15 @@ export interface OverflowButtonProps {
   children: React.ReactNode;
 }
 
+const tabsOverflowButtonStencil = createStencil({
+  base: {
+    '&:has([data-part="tabs-overflow-button-icon"])': {
+      display: 'flex',
+      gap: system.space.zero,
+    },
+  },
+});
+
 export const useTabsOverflowButton = composeHooks(
   createElemPropsHook(useTabsModel)(() => {
     return {
@@ -37,9 +49,13 @@ export const TabsOverflowButton = createSubcomponent('button')({
   elemPropsHook: useTabsOverflowButton,
 })<OverflowButtonProps>(({children, ...elemProps}, Element) => {
   return (
-    <StyledTabItem type="button" gap="xxxs" as={Element} {...elemProps}>
+    <StyledTabItem
+      type="button"
+      as={Element}
+      {...mergeStyles(elemProps, tabsOverflowButtonStencil())}
+    >
       <span>{children}</span>
-      <SystemIcon icon={chevronDownSmallIcon} />
+      <SystemIcon data-part="tabs-overflow-button-icon" icon={chevronDownSmallIcon} />
     </StyledTabItem>
   );
 });

package/tabs/lib/TabsPanel.tsx

@@ -6,7 +6,6 @@ import {
   useMountLayout,
   createElemPropsHook,
   ExtractProps,
-  hideMouseFocus,
   StyledType,
   slugify,
 } from '@workday/canvas-kit-react/common';
@@ -36,7 +35,7 @@ export interface TabPanelProps extends ExtractProps<typeof Box, never> {
   tabIndex?: number;
 }
 
-const StyledTabsPanel = styled(Box)<StyledType>(hideMouseFocus);
+const StyledTabsPanel = styled(Box)<StyledType>();
 
 export const useTabsPanel = createElemPropsHook(useTabsModel)(
   ({state, events}, _, elemProps: {'data-id'?: string; item?: Item<any>} = {}) => {