@workday/canvas-kit-react 15.0.0-alpha.1303-next.0 → 15.0.0

package/segmented-control/lib/SegmentedControlItem.tsx

@@ -0,0 +1,248 @@
+import * as React from 'react';
+
+import {BaseButton, ButtonContainerProps, buttonStencil} from '@workday/canvas-kit-react/button';
+import {createSubcomponent} from '@workday/canvas-kit-react/common';
+import {systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {Text} from '@workday/canvas-kit-react/text';
+import {Tooltip, TooltipProps} from '@workday/canvas-kit-react/tooltip';
+import {colorSpace, createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {CanvasSystemIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
+
+import {useSegmentedControlItem} from './hooks/useSegmentedControlItem';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+
+export interface ItemProps extends ButtonContainerProps {
+  /**
+   * Optionally pass index to the item. This should be done if `SegmentedControl.Item` components were created
+   * via a `[Array::map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)` function. This index will ensure keyboard navigation works even if items are
+   * inserted out of order.
+   */
+  index?: number;
+  /**
+   * The contents of the item. This is text used as the accessible name of the button for screen readers.
+   */
+  children?: React.ReactNode;
+  /**
+   * The identifier of the item. This identifier will be used in change events and for `initialTab`.
+   * If this property is not provided, it will default to a string representation
+   * of the the zero-based index of the item when it was initialized.
+   */
+  'data-id'?: string;
+  /**
+   * Optional id. If not set, it will inherit the ID passed to the `SegmentedControl` component and append the
+   * index at the end. Only set this for advanced cases.
+   */
+  id?: string;
+  /**
+   * Part of the ARIA specification for buttons. Lets screen readers know which button is active. This
+   * should either be `true` or `false`. This is automatically set by the
+   * component and should only be used in advanced cases.
+   */
+  'aria-pressed'?: boolean;
+  /**
+   * The icon of the button.
+   */
+  icon?: CanvasSystemIcon;
+  /**
+   * Tooltip Props
+   */
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+}
+
+export const segmentedControlItemStencil = createStencil({
+  extends: buttonStencil,
+  base: {
+    fontFamily: system.fontFamily.default,
+    fontSize: system.legacy.fontSize.subtext.lg,
+    lineHeight: system.legacy.lineHeight.subtext.lg,
+    letterSpacing: system.legacy.letterSpacing.subtext.lg,
+    fontWeight: system.fontWeight.bold,
+    textAlign: 'start',
+    paddingInline: 0,
+    gap: system.legacy.gap.xs,
+
+    [buttonStencil.vars.borderRadius]: system.legacy.shape.md,
+    [buttonStencil.vars.label]: system.color.fg.muted.default,
+    [systemIconStencil.vars.color]: system.color.fg.muted.default,
+
+    '&:hover, &.hover': {
+      [buttonStencil.vars.background]: colorSpace.darken({
+        color: system.legacy.color.surface.alt.strong,
+        fallback: system.color.bg.alt.strong,
+        mixinColor: system.legacy.color.surface.overlay.mixin,
+        mixinValue: system.legacy.opacity.surface.hover,
+      }),
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
+    },
+
+    '&:active, &.active': {
+      [buttonStencil.vars.background]: colorSpace.darken({
+        color: system.legacy.color.surface.alt.strong,
+        fallback: system.color.bg.alt.strong,
+        mixinColor: system.legacy.color.surface.overlay.mixin,
+        mixinValue: system.legacy.opacity.surface.pressed,
+      }),
+      [buttonStencil.vars.label]: system.color.fg.strong,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
+    },
+
+    '&:focus-visible, &.focus': {
+      [buttonStencil.vars.label]: system.color.fg.muted.strong,
+      [systemIconStencil.vars.color]: system.color.fg.muted.strong,
+    },
+
+    '&:disabled, &.disabled': {
+      [buttonStencil.vars.opacity]: system.opacity.disabled,
+      [buttonStencil.vars.background]: system.legacy.color.surface.transparent,
+      [buttonStencil.vars.label]: system.color.fg.muted.default,
+      [systemIconStencil.vars.color]: system.color.fg.muted.default,
+    },
+
+    "&[aria-pressed='true']": {
+      [buttonStencil.vars.background]: system.legacy.color.surface.default,
+      [buttonStencil.vars.border]: system.color.border.input.default,
+      [systemIconStencil.vars.color]: system.color.fg.strong,
+      [buttonStencil.vars.label]: system.color.fg.strong,
+
+      '&:hover, &.hover': {
+        [systemIconStencil.vars.color]: system.color.fg.strong,
+        [buttonStencil.vars.label]: system.color.fg.strong,
+      },
+
+      '&:disabled, &.disabled': {
+        [buttonStencil.vars.opacity]: system.opacity.disabled,
+      },
+    },
+    ':dir(rtl)': {
+      svg: {
+        transform: 'scaleX(-1)',
+      },
+    },
+  },
+  modifiers: {
+    size: {
+      large: {
+        height: system.legacy.size.md,
+        gap: system.legacy.gap.sm,
+      },
+      medium: {
+        height: system.legacy.size.sm,
+      },
+      small: {
+        fontFamily: system.fontFamily.default,
+        fontSize: system.legacy.fontSize.subtext.md,
+        lineHeight: system.legacy.lineHeight.subtext.md,
+        letterSpacing: system.legacy.letterSpacing.subtext.md,
+        fontWeight: system.fontWeight.bold,
+        height: system.legacy.size.xs,
+      },
+    },
+    variant: {
+      iconOnly: {},
+      textOnly: {},
+      iconWithText: {},
+    },
+  },
+  compound: [
+    {
+      modifiers: {size: 'large', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.legacy.size.md,
+      },
+    },
+    {
+      modifiers: {size: 'large', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.legacy.padding.lg} ${system.legacy.padding.xl}`,
+      },
+    },
+    {
+      modifiers: {size: 'large', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.legacy.padding.xl,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.legacy.size.sm,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.legacy.padding.md} ${system.legacy.padding.lg}`,
+      },
+    },
+    {
+      modifiers: {size: 'medium', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.legacy.padding.lg,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'iconOnly'},
+      styles: {
+        minWidth: system.legacy.size.xs,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'iconWithText'},
+      styles: {
+        paddingInline: `${system.legacy.padding.xs} ${system.legacy.padding.sm}`,
+      },
+    },
+    {
+      modifiers: {size: 'small', variant: 'textOnly'},
+      styles: {
+        paddingInline: system.legacy.padding.sm,
+      },
+    },
+  ],
+});
+
+type ContainerProps = {
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+  children: React.ReactElement;
+};
+
+const Container = ({tooltipProps, children}: ContainerProps) => {
+  return tooltipProps ? (
+    <Tooltip {...tooltipProps}>{children}</Tooltip>
+  ) : (
+    <React.Fragment>{children}</React.Fragment>
+  );
+};
+
+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 variant = getVariant(icon, children);
+  const iconSize = size === 'small' ? 'extraSmall' : 'small';
+
+  return (
+    <Container tooltipProps={tooltipProps}>
+      <BaseButton
+        as={Element}
+        {...handleCsProp(elemProps, segmentedControlItemStencil({size, variant}))}
+      >
+        {icon && <BaseButton.Icon icon={icon} size={iconSize} />}
+        {children && <Text>{children}</Text>}
+      </BaseButton>
+    </Container>
+  );
+});

package/segmented-control/lib/SegmentedControlList.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+
+import {useListRenderItems} from '@workday/canvas-kit-react/collection';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {Grid} from '@workday/canvas-kit-react/layout';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+
+export interface SegmentedControlListProps<T = any>
+  extends Omit<Partial<ExtractProps<typeof Grid, never>>, 'children'> {
+  'aria-label': string;
+  children: ((item: T) => React.ReactNode) | React.ReactNode;
+}
+
+export const segmentedControlListStencil = createStencil({
+  vars: {
+    items: '',
+  },
+  base: {
+    display: 'inline-grid',
+    backgroundColor: system.legacy.color.surface.alt.strong,
+    border: `0 solid ${system.color.border.transparent}`,
+    borderRadius: system.legacy.shape.lg,
+    padding: system.legacy.padding.xxs,
+    gridGap: system.legacy.gap.sm,
+  },
+  modifiers: {
+    orientation: {
+      vertical: ({items}) => ({
+        gridTemplateRows: `repeat(${items}, 1fr)`,
+      }),
+      horizontal: ({items}) => ({
+        gridTemplateColumns: `repeat(${items}, 1fr)`,
+      }),
+    },
+  },
+});
+
+export const SegmentedControlList = createSubcomponent('div')({
+  displayName: 'SegmentedControl.List',
+  modelHook: useSegmentedControlModel,
+})<SegmentedControlListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <Element
+      role="group"
+      {...handleCsProp(
+        elemProps,
+        segmentedControlListStencil({
+          items: `${model.state.items.length}`,
+          orientation: model.state.orientation,
+        })
+      )}
+    >
+      {useListRenderItems(model, children)}
+    </Element>
+  );
+});

package/segmented-control/lib/hooks/useSegmentedControlItem.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import {
+  isSelected,
+  useListItemRegister,
+  useListItemSelect,
+} from '@workday/canvas-kit-react/collection';
+import {composeHooks, createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {useSegmentedControlModel} from './useSegmentedControlModel';
+
+export const useSegmentedControlItem = composeHooks(
+  useListItemSelect,
+  createElemPropsHook(useSegmentedControlModel)(
+    (model, _, elemProps: {'data-id'?: string; children?: React.ReactNode} = {}) => {
+      const name = elemProps['data-id'] || '';
+      const selected = !!name && isSelected(name, model.state);
+
+      return {
+        id: `${model.state.id}-${name}`,
+        'aria-pressed': selected,
+      };
+    }
+  ),
+  useListItemRegister,
+  createElemPropsHook(useSegmentedControlModel)(({state}) => {
+    return {
+      // override the default disabled functionality of `useListItemRegister`
+      // it shouldn't allow to set disabled state only for one button
+      // state prop will disable the whole container
+      disabled: state.disabled ? true : undefined,
+    };
+  })
+);

package/segmented-control/lib/hooks/useSegmentedControlModel.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import {defaultGetId, useListModel} from '@workday/canvas-kit-react/collection';
+import {createModelHook} from '@workday/canvas-kit-react/common';
+
+export const useSegmentedControlModel = createModelHook({
+  defaultConfig: {
+    ...useListModel.defaultConfig,
+    /**
+     * Optional id for the whole `SegmentedControl` group. If not provided, a unique id will be created.
+     * @default useUniqueId()
+     */
+    id: '',
+    /**
+     * An initially selected value. This value must match the `data-id` of the `SegmentedControl.Item` component.
+     * If not provided, the first value will be selected.
+     */
+    initialValue: '',
+    /**
+     * Sets disabled state for all segmented control buttons
+     * @default false
+     */
+    disabled: false,
+    /**
+     * Sets the size of the segmented control container and its buttons. Can be `small`, `medium` or `large`.
+     * @default 'medium'
+     */
+    size: 'medium' as 'small' | 'medium' | 'large',
+    /**
+     * The SegmentedControl can rendered in a horizontal or vertical orientation.
+     * We suggest to use the `vertical` orientation only for icon only variant.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' as typeof useListModel.defaultConfig.orientation,
+  },
+  requiredConfig: useListModel.requiredConfig,
+})(config => {
+  const getId = config.getId || defaultGetId;
+  const initialSelectedRef = React.useRef(config.initialValue);
+  const items = config.items;
+
+  const model = useListModel(
+    useListModel.mergeConfig(config, {
+      orientation: config.orientation || 'horizontal',
+      items,
+      onRegisterItem(data) {
+        if (!initialSelectedRef.current) {
+          initialSelectedRef.current = data.id;
+          events.select({id: initialSelectedRef.current});
+        }
+      },
+      initialSelectedIds: config.initialValue
+        ? [config.initialValue]
+        : config.items?.length
+          ? [getId(config.items![0])]
+          : [],
+      shouldVirtualize: false,
+    })
+  );
+
+  const state = {
+    ...model.state,
+    disabled: config.disabled,
+    size: config.size,
+  };
+
+  const events = {
+    ...model.events,
+  };
+
+  return {
+    ...model,
+    state,
+    events,
+  };
+});

package/select/lib/Select.tsx

@@ -1,9 +1,10 @@
 import {Combobox} from '@workday/canvas-kit-react/combobox';
-import {useSelectModel} from './hooks/useSelectModel';
 import {ExtractProps, createContainer} from '@workday/canvas-kit-react/common';
-import {SelectInput} from './SelectInput';
+
 import {SelectCard} from './SelectCard';
+import {SelectInput} from './SelectInput';
 import {SelectItem} from './SelectItem';
+import {useSelectModel} from './hooks/useSelectModel';
 
 export interface SelectProps extends ExtractProps<typeof Combobox> {}
 /**

package/select/lib/SelectCard.tsx

@@ -1,9 +1,10 @@
 import {Combobox} from '@workday/canvas-kit-react/combobox';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+import {menuCardStencil} from '@workday/canvas-kit-react/menu';
 import {createStencil, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
+
 import {useSelectCard} from './hooks/useSelectCard';
 import {useSelectModel} from './hooks/useSelectModel';
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {menuCardStencil} from '@workday/canvas-kit-react/menu';
 
 export const selectCardStencil = createStencil({
   base: {

package/select/lib/SelectInput.tsx

@@ -1,13 +1,12 @@
-import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
-import {createStencil, CSProps} from '@workday/canvas-kit-styling';
-import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
 import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {InputGroup, TextInput} from '@workday/canvas-kit-react/text-input';
+import {CSProps, createStencil} from '@workday/canvas-kit-styling';
+import {CanvasSystemIcon, caretDownSmallIcon} from '@workday/canvas-system-icons-web';
+import {system} from '@workday/canvas-tokens-web';
 
 import {useSelectInput} from './hooks/useSelectInput';
 import {useSelectModel} from './hooks/useSelectModel';
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {system, brand} from '@workday/canvas-tokens-web';
 
 export interface SelectInputProps extends ExtractProps<typeof TextInput, never>, CSProps {
   /**
@@ -39,10 +38,10 @@ export const selectInputStencil = createStencil({
   }) => ({
     [hiddenInputPart]: {
       position: 'absolute',
-      top: system.space.zero,
-      bottom: system.space.zero,
-      left: system.space.zero,
-      right: system.space.zero,
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
       opacity: system.opacity.zero,
       cursor: 'default',
       pointerEvents: 'none',
@@ -56,16 +55,19 @@ export const selectInputStencil = createStencil({
     },
     [visualInputPart]: {
       caretColor: 'transparent',
-      backgroundColor: system.color.bg.default,
-      color: system.color.text.default,
+      backgroundColor: system.legacy.color.surface.default,
+      color: system.color.fg.default,
       cursor: 'default',
       '&::placeholder': {
-        color: system.color.text.default,
+        color: system.color.fg.default,
       },
       '&::selection': {
         backgroundColor: 'transparent',
       },
     },
+    [caretPart]: {
+      [systemIconStencil.vars.color]: system.color.fg.default,
+    },
     '&:has(:disabled, .disabled)': {
       [caretPart]: {
         [systemIconStencil.vars.color]: system.color.fg.disabled,
@@ -76,12 +78,12 @@ export const selectInputStencil = createStencil({
     error: {
       error: ({visualInputPart}) => ({
         [visualInputPart]: {
-          backgroundColor: brand.error.lightest,
+          backgroundColor: system.legacy.color.brand.surface.critical.default,
         },
       }),
       caution: ({visualInputPart}) => ({
         [visualInputPart]: {
-          backgroundColor: brand.alert.lightest,
+          backgroundColor: system.legacy.color.brand.surface.caution.default,
         },
       }),
     },

package/select/lib/SelectItem.tsx

@@ -1,6 +1,7 @@
 import {Combobox} from '@workday/canvas-kit-react/combobox';
+import {ExtractProps, createSubcomponent} from '@workday/canvas-kit-react/common';
+
 import {useSelectModel} from './hooks/useSelectModel';
-import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 
 export const SelectItem = createSubcomponent('li')({
   modelHook: useSelectModel,

package/select/lib/hooks/useSelectCard.ts

@@ -1,4 +1,5 @@
 import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
 import {useSelectModel} from './useSelectModel';
 
 /**

package/select/lib/hooks/useSelectInput.ts

@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-  composeHooks,
-  createElemPropsHook,
-  useLocalRef,
-  useResizeObserver,
-} from '@workday/canvas-kit-react/common';
+
 import {getCursor} from '@workday/canvas-kit-react/collection';
 import {
   useComboboxInput,
@@ -13,6 +8,13 @@ import {
   useComboboxMoveCursorToSelected,
   useComboboxResetCursorToSelected,
 } from '@workday/canvas-kit-react/combobox';
+import {
+  composeHooks,
+  createElemPropsHook,
+  useLocalRef,
+  useResizeObserver,
+} from '@workday/canvas-kit-react/common';
+
 import {useSelectModel} from './useSelectModel';
 
 /**

package/select/lib/hooks/useSelectModel.tsx

@@ -1,5 +1,5 @@
-import {createModelHook} from '@workday/canvas-kit-react/common';
 import {useComboboxModel} from '@workday/canvas-kit-react/combobox';
+import {createModelHook} from '@workday/canvas-kit-react/common';
 
 /**
  * `SelectModel` extends the {@link ComboboxModel}. Selecting items from

package/side-panel/index.ts

@@ -1 +1,3 @@
 export * from './lib/SidePanel';
+export * from './lib/SidePanelToggleButton';
+export * from './lib/useSidePanelModel';