@workday/canvas-kit-react 7.0.7 → 7.1.0-next.1

package/tabs/lib/TabsItem.tsx

@@ -12,6 +12,7 @@ import {
   ellipsisStyles,
   EllipsisText,
   createSubcomponent,
+  useModalityType,
 } from '@workday/canvas-kit-react/common';
 import {Box, StackProps} from '@workday/canvas-kit-react/layout';
 import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
@@ -91,7 +92,6 @@ export const StyledTabItem = styled(Box.as('button'))<StyledType & Pick<TabsItem
     backgroundColor: 'transparent',
     flex: '0 0 auto',
     alignItems: 'center',
-    maxWidth: '280px',
     padding: `${space.xs} ${space.s}`,
     height: 52,
     boxSizing: 'border-box',
@@ -201,10 +201,11 @@ export const TabsItem = createSubcomponent('button')({
     Icon: SystemIcon,
     Text: EllipsisText,
   },
-})<TabsItemProps>(({children, ...elemProps}, Element, model) => {
+})<TabsItemProps>(({children, ...elemProps}, Element) => {
+  const modality = useModalityType();
   return (
     <OverflowTooltip>
-      <StyledTabItem as={Element} {...elemProps}>
+      <StyledTabItem as={Element} maxWidth={modality === 'touch' ? undefined : 280} {...elemProps}>
         {children}
       </StyledTabItem>
     </OverflowTooltip>

package/tabs/lib/TabsList.tsx

@@ -6,6 +6,9 @@ import {
   createSubcomponent,
   createElemPropsHook,
   ExtractProps,
+  useModalityType,
+  styled,
+  StyledType,
 } from '@workday/canvas-kit-react/common';
 import {Stack} from '@workday/canvas-kit-react/layout';
 import {
@@ -33,28 +36,44 @@ export interface TabListProps<T = unknown> extends Partial<ExtractProps<typeof S
 
 export const useTabsList = composeHooks(
   createElemPropsHook(useTabsModel)(() => {
-    return {role: 'tablist'};
+    const modality = useModalityType();
+    return {role: 'tablist', overflowX: modality === 'touch' ? 'auto' : undefined};
   }),
   useOverflowListMeasure,
   useListResetCursorOnBlur
 );
 
+const StyledStack = styled(Stack)<StyledType>({
+  '::after': {
+    content: '""',
+    position: 'sticky',
+    height: 52,
+    minWidth: 30,
+    background: `linear-gradient(to right,rgba(255,255,255,0),white);`,
+    zIndex: 1,
+    right: 0,
+    top: 0,
+    pointerEvents: 'none',
+  },
+});
+
 export const TabsList = createSubcomponent('div')({
   displayName: 'Tabs.List',
   modelHook: useTabsModel,
   elemPropsHook: useTabsList,
 })<TabListProps>(({children, overflowButton, ...elemProps}, Element, model) => {
+  const modality = useModalityType();
   return (
-    <Stack
+    <StyledStack
       as={Element}
       position="relative"
       borderBottom={`1px solid ${commonColors.divider}`}
-      paddingX="m"
+      paddingX={modality === 'touch' ? 'zero' : 'm'}
       spacing="xxxs"
       {...elemProps}
     >
       {useListRenderItems(model, children)}
       {overflowButton}
-    </Stack>
+    </StyledStack>
   );
 });

package/tabs/lib/useTabsModel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {createModelHook} from '@workday/canvas-kit-react/common';
+import {createModelHook, useModalityType} from '@workday/canvas-kit-react/common';
 import {
   defaultGetId,
   useListModel,
@@ -35,11 +35,13 @@ export const useTabsModel = createModelHook({
 })(config => {
   const initialSelectedRef = React.useRef(config.initialTab);
   const getId = config.getId || defaultGetId;
+  const modality = useModalityType();
 
   const items = config.items;
 
   const model = useOverflowListModel(
     useOverflowListModel.mergeConfig(config, {
+      shouldCalculateOverflow: modality !== 'touch',
       orientation: config.orientation || 'horizontal',
       items,
       onRegisterItem(data) {