@workday/canvas-kit-preview-react
Version:
Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.
89 lines (88 loc) • 6.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
import { createSubcomponent } from '@workday/canvas-kit-react/common';
import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { Text } from '@workday/canvas-kit-react/text';
import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
import { useSegmentedControlItem } from './hooks/useSegmentedControlItem';
export const segmentedControlItemStencil = createStencil({
extends: buttonStencil,
base: { name: "1kbbff", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);text-align:start;padding-inline:var(--cnvs-sys-space-zero);gap:var(--cnvs-sys-space-x1);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-x1);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:focus-visible, &.focus{--label-button-85bf0e:var(--cnvs-sys-color-fg-muted-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-strong);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);}&[aria-pressed='true']{--background-button-85bf0e:var(--cnvs-sys-color-bg-default);--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);&:hover, &.hover{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--border-button-85bf0e:var(--cnvs-sys-color-border-input-default);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-strong);}}:dir(rtl){svg{transform:scaleX(-1);}}" },
modifiers: {
size: {
large: { name: "274j51", styles: "height:var(--cnvs-sys-space-x10);gap:var(--cnvs-sys-space-x2);" },
medium: { name: "1he42q", styles: "height:var(--cnvs-sys-space-x8);" },
small: { name: "kylcz", styles: "font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);height:var(--cnvs-sys-space-x6);" }
},
variant: {
iconOnly: { name: "1oukev", styles: "" },
textOnly: { name: "3g6z01", styles: "" },
iconWithText: { name: "3nwcnj", styles: "" }
}
},
compound: [
{
modifiers: { size: 'large', variant: 'iconOnly' },
styles: { name: "11m49v", styles: "min-width:var(--cnvs-sys-space-x10);" }
},
{
modifiers: { size: 'large', variant: 'iconWithText' },
styles: { name: "hkkaj", styles: "padding-inline:1.25rem var(--cnvs-sys-space-x6);" }
},
{
modifiers: { size: 'large', variant: 'textOnly' },
styles: { name: "jb8fh", styles: "padding-inline:var(--cnvs-sys-space-x6);" }
},
{
modifiers: { size: 'medium', variant: 'iconOnly' },
styles: { name: "3qbaxa", styles: "min-width:var(--cnvs-sys-space-x8);" }
},
{
modifiers: { size: 'medium', variant: 'iconWithText' },
styles: { name: "309jw6", styles: "padding-inline:var(--cnvs-sys-space-x4) 1.25rem;" }
},
{
modifiers: { size: 'medium', variant: 'textOnly' },
styles: { name: "lpwyh", styles: "padding-inline:1.25rem;" }
},
{
modifiers: { size: 'small', variant: 'iconOnly' },
styles: { name: "2n73q6", styles: "min-width:var(--cnvs-sys-space-x6);" }
},
{
modifiers: { size: 'small', variant: 'iconWithText' },
styles: { name: "3yxm4m", styles: "padding-inline:var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x3);" }
},
{
modifiers: { size: 'small', variant: 'textOnly' },
styles: { name: "3cjb0o", styles: "padding-inline:var(--cnvs-sys-space-x3);" }
}
]
}, "segmented-control-item-bc271f");
const Container = ({ tooltipProps, children }) => {
return tooltipProps ? (_jsx(Tooltip, { ...tooltipProps, children: children })) : (_jsx(React.Fragment, { children: children }));
};
const getVariant = (icon, children) => {
if (icon && children) {
return 'iconWithText';
}
else if (!icon && children) {
return 'textOnly';
}
else {
return 'iconOnly';
}
};
export const SegmentedControlItem = createSubcomponent('button')({
displayName: 'SegmentedControl.Item',
modelHook: useSegmentedControlModel,
elemPropsHook: useSegmentedControlItem,
})(({ children, icon, tooltipProps, ...elemProps }, Element, { state: { size } }) => {
const variant = getVariant(icon, children);
const iconSize = size === 'small' ? 'extraSmall' : 'small';
return (_jsx(Container, { tooltipProps: tooltipProps, children: _jsxs(BaseButton, { as: Element, ...handleCsProp(elemProps, segmentedControlItemStencil({ size, variant })), children: [icon && _jsx(BaseButton.Icon, { icon: icon, size: iconSize }), children && _jsx(Text, { children: children })] }) }));
});