UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

98 lines (97 loc) 3.99 kB
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))); });