@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
98 lines (97 loc) • 3.99 kB
JavaScript
import * as React from 'react';
import { colors, space, type, borderRadius, iconColors } from '@workday/canvas-kit-react/tokens';
import { focusRing, styled, slugify, createElemPropsHook, composeHooks, ellipsisStyles, EllipsisText, createSubcomponent, useModalityType, } from '@workday/canvas-kit-react/common';
import { Box } from '@workday/canvas-kit-react/layout';
import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
import { useListItemRegister, useListItemRovingFocus, isSelected, useListItemSelect, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
import { useTabsModel } from './useTabsModel';
import { px2rem } from '@workday/canvas-kit-styling';
export const StyledTabItem = styled(Box.as('button'))(({ theme }) => ({
...type.levels.subtext.large,
fontWeight: type.properties.fontWeights.medium,
border: 'none',
backgroundColor: 'transparent',
flex: '0 0 auto',
alignItems: 'center',
padding: `${space.xs} ${space.s}`,
height: 52,
boxSizing: 'border-box',
cursor: 'pointer',
color: colors.licorice300,
position: 'relative',
borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
transition: 'background 150ms ease, color 150ms ease',
'&:hover, &:focus-visible, &.hover, &.focus': {
backgroundColor: colors.soap200,
color: colors.blackPepper400,
[systemIconStencil.vars.color]: iconColors.hover,
},
'&:focus-visible, &.focus': {
outline: `${px2rem(2)} solid transparent`,
...focusRing({ inset: 'outer', width: 0, separation: 2 }, theme),
},
'&:disabled, &[aria-disabled]': {
color: colors.licorice100,
[systemIconStencil.vars.color]: iconColors.disabled,
'&:hover': {
cursor: 'auto',
backgroundColor: `transparent`,
[systemIconStencil.vars.color]: iconColors.disabled,
},
},
'&[aria-selected=true]': {
color: theme.canvas.palette.primary.main,
cursor: 'default',
[systemIconStencil.vars.color]: theme.canvas.palette.primary.main,
'&:after': {
position: 'absolute',
// fallback for Windows high contrast theme
borderBottom: `${space.xxxs} solid transparent`,
borderRadius: `${borderRadius.m} ${borderRadius.m} 0px 0px`,
backgroundColor: theme.canvas.palette.primary.main,
bottom: 0,
content: `''`,
left: 0,
marginTop: '-2px',
width: '100%',
},
'&:hover, &:focus': {
backgroundColor: `transparent`,
color: theme.canvas.palette.primary.main,
},
},
}), ({ children, gap = space.xxs }) => {
if (typeof children === 'string') {
return ellipsisStyles;
}
else {
return {
display: 'flex',
gap,
};
}
});
export const useTabsItem = composeHooks(createElemPropsHook(useTabsModel)(({ state }, _, elemProps = {}) => {
const name = elemProps['data-id'] || '';
const selected = !!elemProps['data-id'] && isSelected(name, state);
return {
type: 'button',
role: 'tab',
'aria-selected': selected,
'aria-controls': slugify(`tabpanel-${state.id}-${name}`),
};
}), useListItemSelect, useOverflowListItemMeasure, useListItemRovingFocus, useListItemRegister);
export const TabsItem = createSubcomponent('button')({
displayName: 'Tabs.Item',
modelHook: useTabsModel,
elemPropsHook: useTabsItem,
subComponents: {
Icon: SystemIcon,
Text: EllipsisText,
},
})(({ children, ...elemProps }, Element) => {
const modality = useModalityType();
return (React.createElement(OverflowTooltip, null,
React.createElement(StyledTabItem, { as: Element, maxWidth: modality === 'touch' ? undefined : 280, ...elemProps }, children)));
});