@workday/canvas-kit-preview-react 14.0.0-alpha.1123-next.0 → 14.0.0-alpha.1126-next.0

package/segmented-control/lib/SegmentedControlItem.tsx

@@ -1,17 +1,14 @@
 import * as React from 'react';
 
-import {colors, type, space} from '@workday/canvas-kit-react/tokens';
-import {createSubcomponent, useIsRTL} from '@workday/canvas-kit-react/common';
-import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip';
-import {
-  BaseButton,
-  ButtonContainerProps,
-  ButtonColors,
-  ButtonSizes,
-} from '@workday/canvas-kit-react/button';
+import {BaseButton, ButtonContainerProps, buttonStencil} from '@workday/canvas-kit-react/button';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+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, TooltipProps} 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 interface ItemProps extends ButtonContainerProps {
@@ -52,112 +49,148 @@ export interface ItemProps extends ButtonContainerProps {
   tooltipProps?: Omit<TooltipProps, 'children'>;
 }
 
-const getMinWidthStyles = (children: React.ReactNode, size: ButtonSizes) => {
-  switch (size) {
-    case 'large':
-      return children ? '112px' : '48px';
-    case 'medium':
-      return children ? '96px' : space.xl;
-    case 'small':
-      return children ? space.xxxl : space.l;
-    case 'extraSmall':
-      return children ? 'auto' : space.m;
-    default:
-      return children ? '96px' : space.xl;
-  }
-};
-
-const getButtonSize = (size: ButtonContainerProps['size']) => {
-  switch (size) {
-    case 'large':
-      return 'medium';
-    case 'medium':
-      return 'small';
-    case 'small':
-      return 'extraSmall';
-    default:
-      return 'medium';
-  }
-};
+export const segmentedControlItemStencil = createStencil({
+  extends: buttonStencil,
+  base: {
+    ...system.type.subtext.large,
+    fontWeight: system.fontWeight.bold,
+    textAlign: 'start',
+    paddingInline: system.space.zero,
+    gap: system.space.x1,
 
-const getIconButtonColors = (toggled?: boolean): ButtonColors => {
-  return {
-    default: {
-      background: toggled ? colors.frenchVanilla100 : colors.soap200,
-      border: toggled ? colors.licorice200 : 'transparent',
-      icon: toggled ? colors.blackPepper400 : colors.licorice400,
-      label: toggled ? colors.blackPepper400 : colors.licorice400,
-    },
-    hover: {
-      background: toggled ? colors.frenchVanilla100 : colors.soap400,
-      border: toggled ? colors.licorice200 : 'transparent',
-      icon: colors.licorice400,
-      label: colors.licorice400,
-    },
-    active: {
-      background: toggled ? colors.frenchVanilla100 : colors.soap400,
-      border: toggled ? colors.licorice200 : 'transparent',
-      icon: colors.licorice400,
-      label: colors.licorice400,
-    },
-    focus: {
-      background: toggled ? colors.frenchVanilla100 : colors.soap200,
-      border: toggled ? colors.licorice200 : 'transparent',
-      icon: toggled ? colors.blackPepper400 : colors.licorice400,
-      label: toggled ? colors.blackPepper400 : colors.licorice400,
-    },
-    disabled: {
-      background: colors.soap200,
-      opacity: '1',
-      icon: colors.licorice400,
-      border: toggled ? colors.licorice200 : 'transparent',
-      label: colors.blackPepper400,
-    },
-  };
-};
+    [buttonStencil.vars.borderRadius]: system.shape.x1,
+    [buttonStencil.vars.label]: system.color.fg.muted.strong,
+    [systemIconStencil.vars.color]: system.color.fg.muted.strong,
 
-const getPaddingStyles = (
-  children: React.ReactNode,
-  size: ButtonContainerProps['size'],
-  icon: CanvasSystemIcon | undefined
-) => {
-  if (!children) {
-    return 0;
-  }
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: system.color.bg.alt.strong,
+      [buttonStencil.vars.label]: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+    },
 
-  switch (size) {
-    case 'large':
-      return icon ? `0 ${space.m} 0 20px` : `0 ${space.m}`;
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: system.color.bg.alt.strong,
+      [buttonStencil.vars.label]: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+    },
 
-    case 'medium':
-      return icon ? `0 20px 0 ${space.s}` : `0 ${space.s}`;
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.label]: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+    },
 
-    case 'small':
-      return icon ? `0 ${space.xs} 0 ${space.xxs}` : `0 ${space.xs}`;
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.background]: system.color.bg.alt.soft,
+    },
 
-    default:
-      return icon ? `0 20px 0 ${space.s}` : `0 ${space.s}`;
-  }
-};
+    "&[aria-pressed='true']": {
+      [buttonStencil.vars.background]: system.color.bg.default,
+      [buttonStencil.vars.border]: system.color.border.input.default,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
+      [buttonStencil.vars.label]: system.color.fg.strong,
 
-const geButtonStyles = (size: ButtonSizes, children: React.ReactNode, icon?: CanvasSystemIcon) => {
-  const buttonSize = getButtonSize(size);
-  const minWidthValue = getMinWidthStyles(children, children ? size : buttonSize);
+      '&:hover, &.hover': {
+        [systemIconStencil.vars.color]: system.color.fg.strong,
+        [buttonStencil.vars.label]: system.color.fg.strong,
+      },
 
-  return {
-    height: getMinWidthStyles(false, buttonSize),
-    minWidth: minWidthValue,
-    padding: getPaddingStyles(children, size, icon),
-  };
-};
+      '&:disabled, &.disabled': {
+        [buttonStencil.vars.border]: system.color.border.input.default,
+        [buttonStencil.vars.label]: system.color.fg.strong,
+        [systemIconStencil.vars.color]: system.color.fg.strong,
+      },
+    },
+    ':dir(rtl)': {
+      svg: {
+        transform: 'scaleX(-1)',
+      },
+    },
+  },
+  modifiers: {
+    size: {
+      large: {
+        height: system.space.x10,
+        gap: system.space.x2,
+      },
+      medium: {
+        height: system.space.x8,
+      },
+      small: {
+        ...system.type.subtext.medium,
+        fontWeight: system.fontWeight.bold,
+        height: system.space.x6,
+      },
+    },
+    variant: {
+      iconOnly: {},
+      textOnly: {},
+      iconWithText: {},
+    },
+  },
+  compound: [
+    {
+      modifiers: {size: 'large', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.space.x10,
+      },
+    },
+    {
+      modifiers: {size: 'large', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${px2rem(20)} ${system.space.x6}`,
+      },
+    },
+    {
+      modifiers: {size: 'large', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.space.x6,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.space.x8,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.space.x4} ${px2rem(20)}`,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'textOnly'},
+      styles: {
+        paddingInline: px2rem(20),
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.space.x6,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.space.x2} ${system.space.x3}`,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.space.x3,
+      },
+    },
+  ],
+});
 
-const Container = ({
-  tooltipProps,
-  children,
-}: {
+type ContainerProps = {
   tooltipProps?: Omit<TooltipProps, 'children'>;
   children: React.ReactElement;
-}) => {
+};
+
+const Container = ({tooltipProps, children}: ContainerProps) => {
   return tooltipProps ? (
     <Tooltip {...tooltipProps}>{children}</Tooltip>
   ) : (
@@ -165,34 +198,32 @@ const Container = ({
   );
 };
 
+const getVariant = (icon: CanvasSystemIcon | undefined, children: React.ReactNode) => {
+  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,
 })<ItemProps>(({children, icon, tooltipProps, ...elemProps}, Element, {state: {size}}) => {
-  const {color, ...textStyles} = type.levels.subtext[size === 'small' ? 'medium' : 'large'];
+  const variant = getVariant(icon, children);
+  const iconSize = size === 'small' ? 'extraSmall' : 'small';
 
   return (
     <Container tooltipProps={tooltipProps}>
       <BaseButton
         as={Element}
-        borderRadius="m"
-        colors={getIconButtonColors(elemProps['aria-pressed'])}
-        {...geButtonStyles(size, children, icon)}
-        {...elemProps}
+        {...handleCsProp(elemProps, segmentedControlItemStencil({size, variant}))}
       >
-        {icon && (
-          <BaseButton.Icon
-            size={size === 'small' ? 'extraSmall' : 'medium'}
-            icon={icon}
-            shouldMirrorIcon={useIsRTL()}
-          />
-        )}
-        {children && (
-          <Text {...textStyles} fontWeight="bold" textAlign="left">
-            {children}
-          </Text>
-        )}
+        {icon && <BaseButton.Icon icon={icon} size={iconSize} />}
+        {children && <Text>{children}</Text>}
       </BaseButton>
     </Container>
   );

package/segmented-control/lib/SegmentedControlList.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  createElemPropsHook,
-} from '@workday/canvas-kit-react/common';
+import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {Grid} from '@workday/canvas-kit-react/layout';
-import {useListRenderItems} from '@workday/canvas-kit-react/collection';
+import {system} from '@workday/canvas-tokens-web';
 import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+import {useListRenderItems} from '@workday/canvas-kit-react/collection';
 
 export interface SegmentedControlListProps<T = any>
   extends Omit<Partial<ExtractProps<typeof Grid, never>>, 'children'> {
@@ -15,35 +13,52 @@ export interface SegmentedControlListProps<T = any>
   children: ((item: T) => React.ReactNode) | React.ReactNode;
 }
 
-export const useSegmentedControlList = createElemPropsHook(useSegmentedControlModel)(
-  ({state: {orientation, disabled, items}}) => {
-    const directionName = orientation === 'vertical' ? 'Row' : 'Column';
-    return {
-      [`gridTemplate${directionName}s`]: `repeat(${items.length}, 1fr)`,
-      opacity: disabled ? 0.4 : undefined,
-    };
-  }
-);
+export const segmentedControlListStencil = createStencil({
+  vars: {
+    items: '',
+  },
+  base: {
+    display: 'inline-grid',
+    backgroundColor: system.color.bg.alt.soft,
+    border: `${px2rem(1)} solid ${system.color.border.input.default}`,
+    borderRadius: system.shape.x2,
+    padding: px2rem(3),
+    gridGap: system.space.x2,
+  },
+  modifiers: {
+    disabled: {
+      true: {
+        opacity: system.opacity.disabled,
+      },
+    },
+    orientation: {
+      vertical: ({items}) => ({
+        gridTemplateRows: `repeat(${items}, 1fr)`,
+      }),
+      horizontal: ({items}) => ({
+        gridTemplateColumns: `repeat(${items}, 1fr)`,
+      }),
+    },
+  },
+});
 
 export const SegmentedControlList = createSubcomponent('div')({
   displayName: 'SegmentedControl.List',
   modelHook: useSegmentedControlModel,
-  elemPropsHook: useSegmentedControlList,
 })<SegmentedControlListProps>(({children, ...elemProps}, Element, model) => {
   return (
-    <Grid
-      as={Element}
-      display="inline-grid"
+    <Element
       role="group"
-      backgroundColor="soap200"
-      border="1px solid transparent"
-      borderColor="licorice200"
-      borderRadius="l"
-      padding="3px"
-      gridGap="xxs"
-      {...elemProps}
+      {...handleCsProp(
+        elemProps,
+        segmentedControlListStencil({
+          disabled: model.state.disabled,
+          items: `${model.state.items.length}`,
+          orientation: model.state.orientation,
+        })
+      )}
     >
       {useListRenderItems(model, children)}
-    </Grid>
+    </Element>
   );
 });