@workday/canvas-kit-preview-react 7.1.4 → 7.2.0-427-next.2

package/pill/lib/Pill.tsx

@@ -9,7 +9,7 @@ import {
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
-import {BoxProps, boxStyleFn, HStack, Stack} from '@workday/canvas-kit-react/layout';
+import {BoxProps, boxStyleFn, Flex} from '@workday/canvas-kit-react/layout';
 import {borderRadius, colors, space, type} from '@workday/canvas-kit-react/tokens';
 
 import {usePillModel} from './usePillModel';
@@ -160,14 +160,113 @@ const StyledNonInteractivePill = styled(StyledBasePill)<StyledType>({
   position: 'relative',
 });
 
+/**
+ * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
+ * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
+ * (icons or avatars) are intended to be descriptive, helping support the label. They should not
+ * receive focus.
+ *
+ * `Pill` is the container component. It also provides a React context model for its subcomponents.
+ * Based on the `variant` prop this component will render different styled `Pill`s.
+ *
+ * Example of read only:
+ *
+ * ```tsx
+ * <Pill variant="readOnly">This is a read only</Pill>
+ * ```
+ *
+ * Example of interactive:
+ *
+ * ```tsx
+ * <Pill onClick={() => console.log('clicked')}>
+ *   <Pill.Avatar /> Regina Skeltor
+ * </Pill>
+ * ```
+ *
+ * Example of removable:
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   <Pill.Avatar /> Regina Skeltor
+ *   <Pill.IconButton onClick={() => console.log('clicked')} />
+ * </Pill>
+ * ```
+ *
+ * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
+ * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
+ * intentional click target that prevents users from accidentally deleting an item.
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   Shoes
+ *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+ * </Pill>
+ * ```
+ */
 export const Pill = createContainer('button')({
+  displayName: 'Pill',
   modelHook: usePillModel,
   subComponents: {
-    Icon: PillIcon,
+    /**
+     * This component renders an avatar. It supports all props of the `Avatar` component.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   <Pill.Avatar url={avatarUrl} />
+     *   Regina Skeltor
+     *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+     * </Pill>
+     * ```
+     */
     Avatar: PillAvatar,
+    /**
+     * This component renders its `children` as the count.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *   Shoes
+     *   <Pill.Count>30</Pill.Count>
+     * </Pill>
+     * ```
+     */
     Count: PillCount,
-    Label: PillLabel,
+    /**
+     * This component renders an `icon`. It not be used with the `default` styling – not `readOnly`
+     * or `removable` variants. By default it renders a `plusIcon` but it can be overridden by
+     * providing an icon to the `icon` prop.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *   <Pill.Icon />
+     *   <Pill.Label>Regina Skeltor</Pill.Label>
+     * </Pill>
+     * ```
+     */
+    Icon: PillIcon,
+    /**
+     * This component renders a custom icon button. It is only intended to be used with the
+     * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
+     * an icon to the `icon` prop.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   Pink Shirts
+     *   <Pill.IconButton onClick={() => console.warn('clicked')} />
+     * </Pill>
+     * ```
+     */
     IconButton: PillIconButton,
+    /**
+     * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
+     * There's no need to use this component directly since the overflow is handled for you automatically.
+     *
+     * ```tsx
+     * <Pill variant="readOnly">
+     *   <Pill.Label>Read-only</Pill.Label>
+     * </Pill>
+     * ```
+     */
+    Label: PillLabel,
   },
 })<PillProps>(({variant = 'default', maxWidth, ...elemProps}, Element, model) => {
   return (
@@ -190,18 +289,18 @@ export const Pill = createContainer('button')({
           {...elemProps}
           disabled={model.state.disabled}
         >
-          <HStack spacing="xxxs" display="inline-flex" alignItems="center">
+          <Flex gap="xxxs" display="inline-flex" alignItems="center">
             {React.Children.map(elemProps.children, (child, index) => {
               if (typeof child === 'string') {
                 return <PillLabel key={index}>{child}</PillLabel>;
               }
               return (
-                <Stack.Item key={index} display="inline-flex">
+                <Flex.Item key={index} display="inline-flex">
                   {child}
-                </Stack.Item>
+                </Flex.Item>
               );
             })}
-          </HStack>
+          </Flex>
         </StyledBasePill>
       )}
       {variant === 'removable' && (
@@ -211,14 +310,14 @@ export const Pill = createContainer('button')({
           variant={variant}
           {...elemProps}
         >
-          <HStack spacing="xxxs" display="inline-flex" alignItems="center" justifyContent="center">
+          <Flex gap="xxxs" display="inline-flex" alignItems="center" justifyContent="center">
             {React.Children.map(elemProps.children, (child, index) => {
               if (typeof child === 'string') {
                 return <PillLabel key={index}>{child}</PillLabel>;
               }
-              return <Stack.Item key={index}>{child}</Stack.Item>;
+              return <Flex.Item key={index}>{child}</Flex.Item>;
             })}
-          </HStack>
+          </Flex>
         </StyledNonInteractivePill>
       )}
     </>

package/pill/lib/PillCount.tsx

@@ -25,7 +25,7 @@ export const PillCount = createComponent('span')({
         height={22}
         minWidth={22}
         padding={`0  ${space.xxxs}`}
-        marginInlineEnd={`-${space.xxs}`} // Remove padding from HStack on the right side
+        marginInlineEnd={`-${space.xxs}`} // Remove excess margin at the end
         marginInlineStart={`${space.xxxs}`}
         backgroundColor={colors.soap500}
         data-count="ck-pill-count"

package/pill/lib/PillIcon.tsx

@@ -21,7 +21,7 @@ export const PillIcon = createSubcomponent('span')({
 })<PillIconProps>(({size, icon, ...elemProps}, Element) => {
   return (
     <SystemIcon
-      marginInlineStart={`-${space.xxxs}`} // remove padding on the left from HStack
+      marginInlineStart={`-${space.xxxs}`} // remove excess margin from the start
       display="flex"
       as={Element}
       size={20}

package/pill/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/pill",
   "module": "../dist/es6/pill",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/pill"
 }

package/segmented-control/LICENSE

@@ -0,0 +1,126 @@
+Apache License, Version 2.0 Apache License Version 2.0, January 2004
+
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and
+   distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the
+   copyright owner or entity authorized by the copyright owner that is granting the License. "Legal
+   Entity" shall mean the union of the acting entity and all other entities that control, are
+   controlled by, or are under common control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the direction or management of such
+   entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an
+   individual or Legal Entity exercising permissions granted by this License. "Source" form shall
+   mean the preferred form for making modifications, including but not limited to software source
+   code, documentation source, and configuration files. "Object" form shall mean any form resulting
+   from mechanical transformation or translation of a Source form, including but not limited to
+   compiled object code, generated documentation, and conversions to other media types. "Work" shall
+   mean the work of authorship, whether in Source or Object form, made available under the License,
+   as indicated by a copyright notice that is included in or attached to the work (an example is
+   provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or
+   Object form, that is based on (or derived from) the Work and for which the editorial revisions,
+   annotations, elaborations, or other modifications represent, as a whole, an original work of
+   authorship. For the purposes of this License, Derivative Works shall not include works that
+   remain separable from, or merely link (or bind by name) to the interfaces of, the Work and
+   Derivative Works thereof. "Contribution" shall mean any work of authorship, including the
+   original version of the Work and any modifications or additions to that Work or Derivative Works
+   thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright
+   owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner.
+   For the purposes of this definition, "submitted" means any form of electronic, verbal, or written
+   communication sent to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems, and issue tracking
+   systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and
+   improving the Work, but excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean
+   Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by
+   Licensor and subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor
+   hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform,
+   sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor
+   hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made, use, offer to sell, sell,
+   import, and otherwise transfer the Work, where such license applies only to those patent claims
+   licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or
+   by combination of their Contribution(s) with the Work to which such Contribution(s) was
+   submitted. If You institute patent litigation against any entity (including a cross-claim or
+   counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work
+   constitutes direct or contributory patent infringement, then any patent licenses granted to You
+   under this License for that Work shall terminate as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof
+   in any medium, with or without modifications, and in Source or Object form, provided that You
+   meet the following conditions: You must give any other recipients of the Work or Derivative Works
+   a copy of this License; and You must cause any modified files to carry prominent notices stating
+   that You changed the files; and You must retain, in the Source form of any Derivative Works that
+   You distribute, all copyright, patent, trademark, and attribution notices from the Source form of
+   the Work, excluding those notices that do not pertain to any part of the Derivative Works; and If
+   the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works
+   that You distribute must include a readable copy of the attribution notices contained within such
+   NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in
+   at least one of the following places: within a NOTICE text file distributed as part of the
+   Derivative Works; within the Source form or documentation, if provided along with the Derivative
+   Works; or, within a display generated by the Derivative Works, if and wherever such third-party
+   notices normally appear. The contents of the NOTICE file are for informational purposes only and
+   do not modify the License. You may add Your own attribution notices within Derivative Works that
+   You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such
+   additional attribution notices cannot be construed as modifying the License. You may add Your own
+   copyright statement to Your modifications and may provide additional or different license terms
+   and conditions for use, reproduction, or distribution of Your modifications, or for any such
+   Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work
+   otherwise complies with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution
+   intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms
+   and conditions of this License, without any additional terms or conditions. Notwithstanding the
+   above, nothing herein shall supersede or modify the terms of any separate license agreement you
+   may have executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names, trademarks, service
+   marks, or product names of the Licensor, except as required for reasonable and customary use in
+   describing the origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor
+   provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT
+   WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation,
+   any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or
+   redistributing the Work and assume any risks associated with Your exercise of permissions under
+   this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in tort (including
+   negligence), contract, or otherwise, unless required by applicable law (such as deliberate and
+   grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for
+   damages, including any direct, indirect, special, incidental, or consequential damages of any
+   character arising as a result of this License or out of the use or inability to use the Work
+   (including but not limited to damages for loss of goodwill, work stoppage, computer failure or
+   malfunction, or any and all other commercial damages or losses), even if such Contributor has
+   been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works
+   thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty,
+   indemnity, or other liability obligations and/or rights consistent with this License. However, in
+   accepting such obligations, You may act only on Your own behalf and on Your sole responsibility,
+   not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each
+   Contributor harmless for any liability incurred by, or claims asserted against, such Contributor
+   by reason of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+©2022 Workday, Inc. All rights reserved. Workday and the Workday logo are registered trademarks of
+Workday, Inc. All other brand and product names are trademarks or registered trademarks of their
+respective holders.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

package/segmented-control/README.md

@@ -0,0 +1,6 @@
+# Canvas Kit React Segmented Control
+
+`SegmentedControl` contains primary and secondary actions related to a page or task.
+
+For more detailed information on this component, please refer to the
+[storybook documentation](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control-react--basic)

package/segmented-control/index.ts

@@ -0,0 +1,4 @@
+export * from './lib/SegmentedControl';
+export * from './lib/hooks/useSegmentedControlModel';
+export * from './lib/hooks/useSegmentedControlItem';
+export {useSegmentedControlList} from './lib/SegmentedControlList';

package/segmented-control/lib/SegmentedControl.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {createContainer} from '@workday/canvas-kit-react/common';
+
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+import {SegmentedControlList} from './SegmentedControlList';
+import {SegmentedControlItem} from './SegmentedControlItem';
+
+export interface SegmentedControlProps {
+  children: React.ReactNode;
+}
+
+/**
+ * `SegmentedControl` is a container component that is responsible for creating a
+ * {@link SegmentedControlModel} and sharing it with its subcomponents using React context. It does
+ * not represent a real element.
+ *
+ * ```tsx
+ * <SegmentedControl items={[]}>{Child components}</SegmentedControl>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the [hoisted model
+ * pattern](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+ *
+ * ```tsx
+ * const model = useSegmentedControlModel({
+ *   items: [],
+ * });
+ *
+ * <SegmentedControl model={model}>{Child components}</SegmentedControl>;
+ * ```
+ */
+export const SegmentedControl = createContainer()({
+  displayName: 'SegmentedControl',
+  modelHook: useSegmentedControlModel,
+  subComponents: {
+    /**
+     * `SegmentedControl.List` renders {@link Grid} under the hood. It is a container for
+     * {@link SegmentedControlItem SegmentedControl.Item} subcomponents.
+     *
+     * ```tsx
+     * <SegmentedControl.List>{SegmentedControl.Items}</SegmentedControl.List>
+     * ```
+     */
+    List: SegmentedControlList,
+    /**
+     * `SegmentedControl.Item` is a `button` element built on `BaseButton`. `SegmentedControl.Item`
+     * has a `data-id` prop to handle `onSelect` properly.
+     *
+     * ```tsx
+     * <SegmentedControl.Item data-id="table">Table</SegmentedControl.Item>
+     * ```
+     */
+    Item: SegmentedControlItem,
+  },
+})<SegmentedControlProps>(({children}) => {
+  return <>{children}</>;
+});

package/segmented-control/lib/SegmentedControlItem.tsx

@@ -0,0 +1,175 @@
+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,
+  getMinWidthStyles,
+} from '@workday/canvas-kit-react/button';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {useSegmentedControlModel} from './hooks/useSegmentedControlModel';
+import {Text} from '@workday/canvas-kit-react/text';
+import {useSegmentedControlItem} from './hooks/useSegmentedControlItem';
+
+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'>;
+}
+
+const getButtonSize = (size: ButtonContainerProps['size']) => {
+  switch (size) {
+    case 'large':
+      return 'medium';
+    case 'medium':
+      return 'small';
+    case 'small':
+      return 'extraSmall';
+    default:
+      return 'medium';
+  }
+};
+
+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,
+      icon: colors.licorice400,
+      label: colors.licorice400,
+    },
+    active: {
+      background: toggled ? colors.frenchVanilla100 : colors.soap400,
+      icon: colors.licorice400,
+      label: colors.licorice400,
+    },
+    focus: {},
+    disabled: {
+      background: colors.soap200,
+      opacity: '1',
+    },
+  };
+};
+
+const getPaddingStyles = (
+  children: React.ReactNode,
+  size: ButtonContainerProps['size'],
+  icon: CanvasSystemIcon | undefined
+) => {
+  if (!children) {
+    return 0;
+  }
+
+  switch (size) {
+    case 'large':
+      return icon ? `0 ${space.m} 0 20px` : `0 ${space.m}`;
+
+    case 'medium':
+      return icon ? `0 20px 0 ${space.s}` : `0 ${space.s}`;
+
+    case 'small':
+      return icon ? `0 ${space.xs} 0 ${space.xxs}` : `0 ${space.xs}`;
+
+    default:
+      return icon ? `0 20px 0 ${space.s}` : `0 ${space.s}`;
+  }
+};
+
+const geButtonStyles = (size: ButtonSizes, children: React.ReactNode, icon?: CanvasSystemIcon) => {
+  const buttonSize = getButtonSize(size);
+  const minWidthValue = getMinWidthStyles(children, children ? size : buttonSize);
+
+  return {
+    height: getMinWidthStyles(false, buttonSize),
+    minWidth: minWidthValue,
+    padding: getPaddingStyles(children, size, icon),
+  };
+};
+
+const Container = ({
+  tooltipProps,
+  children,
+}: {
+  tooltipProps?: Omit<TooltipProps, 'children'>;
+  children: React.ReactElement;
+}) => {
+  return tooltipProps ? (
+    <Tooltip {...tooltipProps}>{children}</Tooltip>
+  ) : (
+    <React.Fragment>{children}</React.Fragment>
+  );
+};
+
+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'];
+
+  return (
+    <Container tooltipProps={tooltipProps}>
+      <BaseButton
+        as={Element}
+        borderRadius="m"
+        colors={getIconButtonColors(elemProps['aria-pressed'])}
+        {...geButtonStyles(size, children, icon)}
+        {...elemProps}
+      >
+        {icon && (
+          <BaseButton.Icon
+            size={size === 'small' ? 'extraSmall' : 'medium'}
+            icon={icon}
+            shouldMirrorIcon={useIsRTL()}
+          />
+        )}
+        {children && (
+          <Text {...textStyles} fontWeight="bold" textAlign="left">
+            {children}
+          </Text>
+        )}
+      </BaseButton>
+    </Container>
+  );
+});

package/segmented-control/lib/SegmentedControlList.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+
+import {
+  createSubcomponent,
+  ExtractProps,
+  createElemPropsHook,
+} from '@workday/canvas-kit-react/common';
+import {Grid} from '@workday/canvas-kit-react/layout';
+import {useListRenderItems} from '@workday/canvas-kit-react/collection';
+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 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 SegmentedControlList = createSubcomponent('div')({
+  displayName: 'SegmentedControl.List',
+  modelHook: useSegmentedControlModel,
+  elemPropsHook: useSegmentedControlList,
+})<SegmentedControlListProps>(({children, ...elemProps}, Element, model) => {
+  return (
+    <Grid
+      as={Element}
+      display="inline-grid"
+      role="group"
+      backgroundColor="soap200"
+      border="1px solid transparent"
+      borderColor="licorice200"
+      borderRadius="l"
+      padding="3px"
+      gridGap="xxs"
+      {...elemProps}
+    >
+      {useListRenderItems(model, children)}
+    </Grid>
+  );
+});

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+import {createElemPropsHook, composeHooks} from '@workday/canvas-kit-react/common';
+import {
+  useListItemRegister,
+  isSelected,
+  useListItemSelect,
+} from '@workday/canvas-kit-react/collection';
+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,
+    };
+  })
+);