@workday/canvas-kit-docs 8.0.0-alpha.235-next.6 → 8.0.0-alpha.237-next.8

package/dist/commonjs/lib/specs.js

@@ -2952,6 +2952,332 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "SegmentedControl.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "SegmentedControl",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Preview/Segmented Control/React, Basic] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"group\""
+              },
+              {
+                "type": "it",
+                "name": "should have a group element with a aria-label attribute"
+              },
+              {
+                "type": "it",
+                "name": "should have button elements inside the \"group\""
+              },
+              {
+                "type": "it",
+                "name": "should have \"aria-pressed=true\" for the first button"
+              },
+              {
+                "type": "it",
+                "name": "should have \"aria-pressed=false\" for the second button"
+              },
+              {
+                "type": "it",
+                "name": "should have a data-id attribute on the first button"
+              },
+              {
+                "type": "it",
+                "name": "should have a label"
+              },
+              {
+                "type": "describe",
+                "name": "when the button is hovered",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the tooltip"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the button is focused",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the tooltip"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the first button is active and focused",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the second button"
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the space key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the enter key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the tab+shift is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the last button"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Preview/Segmented Control/React, Vertical] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"group\""
+              },
+              {
+                "type": "it",
+                "name": "should have a group element with a aria-label attribute"
+              },
+              {
+                "type": "it",
+                "name": "should have button elements inside the \"group\""
+              },
+              {
+                "type": "it",
+                "name": "should have \"aria-pressed=true\" for the first button"
+              },
+              {
+                "type": "it",
+                "name": "should have \"aria-pressed=false\" for the second button"
+              },
+              {
+                "type": "it",
+                "name": "should have a data-id attribute on the first button"
+              },
+              {
+                "type": "it",
+                "name": "should have a label"
+              },
+              {
+                "type": "describe",
+                "name": "when the button is hovered",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the tooltip"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the button is focused",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the tooltip"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the first button is active and focused",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the second button"
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the space key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the enter key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the tab+shift is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the last button"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Preview/Segmented Control/React, Disabled] story is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "all buttons should be disabled",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should have \"[aria-pressed]\" for all buttons"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should have \"[disabled]\" for all buttons"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the disabled button is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should not set \"[aria-pressed=true]\" on the disabled button"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Preview/Segmented Control/React, rtl] story is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when the first button is active and focused",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the second button"
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the space key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the enter key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the tab+shift is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the last button"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Select.spec.ts",

package/dist/es6/lib/specs.js

@@ -2952,6 +2952,332 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "SegmentedControl.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "SegmentedControl",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Preview/Segmented Control/React, Basic] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"group\""
+              },
+              {
+                "type": "it",
+                "name": "should have a group element with a aria-label attribute"
+              },
+              {
+                "type": "it",
+                "name": "should have button elements inside the \"group\""
+              },
+              {
+                "type": "it",
+                "name": "should have \"aria-pressed=true\" for the first button"
+              },
+              {
+                "type": "it",
+                "name": "should have \"aria-pressed=false\" for the second button"
+              },
+              {
+                "type": "it",
+                "name": "should have a data-id attribute on the first button"
+              },
+              {
+                "type": "it",
+                "name": "should have a label"
+              },
+              {
+                "type": "describe",
+                "name": "when the button is hovered",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the tooltip"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the button is focused",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the tooltip"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the first button is active and focused",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the second button"
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the space key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the enter key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the tab+shift is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the last button"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Preview/Segmented Control/React, Vertical] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"group\""
+              },
+              {
+                "type": "it",
+                "name": "should have a group element with a aria-label attribute"
+              },
+              {
+                "type": "it",
+                "name": "should have button elements inside the \"group\""
+              },
+              {
+                "type": "it",
+                "name": "should have \"aria-pressed=true\" for the first button"
+              },
+              {
+                "type": "it",
+                "name": "should have \"aria-pressed=false\" for the second button"
+              },
+              {
+                "type": "it",
+                "name": "should have a data-id attribute on the first button"
+              },
+              {
+                "type": "it",
+                "name": "should have a label"
+              },
+              {
+                "type": "describe",
+                "name": "when the button is hovered",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the tooltip"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the button is focused",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should open the tooltip"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the first button is active and focused",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the second button"
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the space key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the enter key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the tab+shift is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the last button"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Preview/Segmented Control/React, Disabled] story is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "all buttons should be disabled",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should have \"[aria-pressed]\" for all buttons"
+                  },
+                  {
+                    "type": "it",
+                    "name": "should have \"[disabled]\" for all buttons"
+                  }
+                ]
+              },
+              {
+                "type": "describe",
+                "name": "when the disabled button is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should not set \"[aria-pressed=true]\" on the disabled button"
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Preview/Segmented Control/React, rtl] story is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when the first button is active and focused",
+                "children": [
+                  {
+                    "type": "describe",
+                    "name": "when the tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the second button"
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the space key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      },
+                      {
+                        "type": "describe",
+                        "name": "when the enter key is pressed",
+                        "children": [
+                          {
+                            "type": "it",
+                            "name": "should not have \"aria-pressed\" on the first button"
+                          },
+                          {
+                            "type": "it",
+                            "name": "should have \"aria-pressed=true\" on the second button"
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the tab+shift is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should focus on the last button"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Select.spec.ts",

package/dist/mdx/8.0-UPGRADE-GUIDE.mdx

@@ -355,7 +355,30 @@ text with built-in support for our Canvas type tokens.
 
 ### Segmented Control (Preview)
 
-> Coming Soon (https://github.com/Workday/canvas-kit/pull/1819)
+Redesigned Segmented Control has been added to
+[Preview package](https://github.com/Workday/canvas-kit/pull/1819). The main functionality change
+between this component and one from main package is supporting a text variants of buttons. The
+component has a new design that aligns to the Canvas Kit system.
+
+Some key aspects of the component to note include:
+
+- Usage: Best used for switching between different views of the same content. Use Tabs for switching
+  between content that is related but not the same. Segments are mutually exclusive and can contain
+  text and/or icons.
+- Shape: The component will continue to feature squared corners to visually distinguish these
+  controls and their purpose from standard buttons.
+- Color: Active/selected segment is white, French Vanilla 100 with a gray, Licorice 200 border
+  against a light gray, Soap 200 container to make these controls less prominent than standard
+  buttons.
+- Tooltips: Canvas Tooltips showing text labels will be added for Icon-only variants to improve
+  accessibility for ambiguous icons.
+- Container: A container around the Segmented Control component has been added. Since it will be
+  released as a net-new component in Preview and no updates will be made to the current Segmented
+  Control component in the main package for v8, this update will not impact design or development.
+
+Since it is a net-new component in the preview package and no updates will be made to the current
+Segmented Control component in the main package for v8, this update will not impact design or
+development.
 
 ---
 

package/dist/mdx/preview-react/segmented-control/SegmentedControl.mdx

@@ -0,0 +1,203 @@
+import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {Specifications} from '@workday/canvas-kit-docs';
+
+import Basic from './examples/Basic';
+import Disabled from './examples/Disabled';
+import TextAndIcon from './examples/TextAndIcon';
+import TextOnly from './examples/TextOnly';
+import Sizes from './examples/Sizes';
+import Vertical from './examples/Vertical';
+import RTL from './examples/RTL';
+import Dynamic from './examples/Dynamic';
+import {
+  SegmentedControlModelConfigComponent,
+  SegmentedControlStateComponent,
+  SegmentedControlEventsComponent,
+} from './SegmentedControlModel.splitprops.tsx';
+
+
+# Canvas Kit Segmented Control
+
+Segmented Control is a
+[compound component](/getting-started/for-developers/resources/compound-components/) that represents
+a linear group of two, three or four buttons allowing the selection of a specific value. This is a
+controlled component.
+
+[> Workday Design Reference](https://design.workday.com/components/buttons/action-bar)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+### Basic Example
+
+In a basic example of a `SegmentedControl` there are four icon buttons in group. Each button is
+paired with a tooltip to explain the button function in text. Default values of `SegmentedControl`
+are specified for size (as `medium`) and orientation (as `horizontal`). All buttons should have the
+same type and only one of them can be active at a time.
+
+`SegmentedControl` includes a container `SegmentedControl` component and the following
+subcomponents: `SegmentedControl.List` which contains a `SegmentedControl.Item`.
+
+<ExampleCodeBlock code={Basic} />
+
+### Variations Example
+
+`SegmentedControl` can be used with diferent buttons: text only, text with icon or icon only.
+
+#### Text And Icon
+
+<ExampleCodeBlock code={TextAndIcon} />
+
+#### Text Only
+
+<ExampleCodeBlock code={TextOnly} />
+
+#### Icon Only (vertical)
+
+`SegmentedControl` icon only buttons can be placed horizontally or vertically. Be aware that
+vertical orientation must be used only for icon only buttons.
+
+<ExampleCodeBlock code={Vertical} />
+
+### Sizes Example
+
+`SegmentedControl` has three different size: `small`, `medium` (default size) and `large`.
+
+<ExampleCodeBlock code={Sizes} />
+
+### Disabled Example
+
+`SegmentedControl`can be disabled by adding`disabled` prop to the whole container. This will disable
+all buttons.
+
+<ExampleCodeBlock code={Disabled} />
+
+### RTL Example
+
+`SegmentedControl` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
+
+<ExampleCodeBlock code={RTL} />
+
+### Dynamic Items Example
+
+The `SegmentedControl.Item` component takes in an optional `index` property if you want to specify
+the position of a button. If not defined, by default it will append items to the end. In this
+example, our items are stored as an array in the state.
+
+<ExampleCodeBlock code={Dynamic} />
+
+## Components
+
+### SegmentedControl
+
+#### Usage
+
+`SegmentedControl` is a container component that is responsible for creating a
+`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.
+
+```tsx
+const model = useSegmentedControlModel({
+  items: [],
+});
+
+<SegmentedControl model={model}>{/* Child components */}</SegmentedControl>;
+```
+
+#### Props
+
+Note that if you pass in a `model` configured with `useSegmentedControlModel`, configuration props
+passed to `SegmentedControl` will be ignored.
+
+<ArgsTable of={SegmentedControl} />
+
+### SegmentedControl.List
+
+#### Usage
+
+`SegmentedControl.List` is a `Stack` element. It is a container for `SegmentedControl.Item`
+subcomponents.
+
+```tsx
+<SegmentedControl.List>{/* SegmentedControl.Items */}</SegmentedControl.List>
+```
+
+#### Props
+
+`SegmentedControl.List` requires to set `aria-label` prop. Undocumented props are spread to the
+underlying `Stack` element.
+
+<ArgsTable of={SegmentedControl.List} />
+
+### SegmentedControl.Item
+
+#### Usage
+
+`SegmentedControl.Item` is a `button` element built on `BaseButton`. `SegmentedControl.Item` has
+`data-id` prop to handle `onSelect` properly.
+
+```tsx
+<SegmentedControl.Item data-id="table">Table</SegmentedControl.Item>
+```
+
+#### Props
+
+Undocumented props are spread to the underlying `BaseButton` component.
+
+<ArgsTable of={SegmentedControl.Item} />
+
+## Model
+
+If `SegmentedControl` was stripped of all its markup, attributes, and styling, what would remain is
+the [model](/getting-started/for-developers/resources/compound-components/#models). The model is an
+object composed of two parts: `state` which describes the current snapshot in time of the component
+and `events` which describes events that can be sent to the model.
+
+By default, `SegmentedControl` will create a model and share it internally with its subcomponents
+using React context. Alternatively, if you need direct access to the model's `state` and `events`
+outside of the `SegmentedControl` component, you may configure your own model with
+`useSegmentedControlModel` and pass it to `SegmentedControl` via a pattern called
+[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+
+```tsx
+const model = useSegmentedControlModel({
+  items: [],
+  initialValue: 'table',
+});
+
+<SegmentedControl model={model}>{/* Child components */}</SegmentedControl>;
+```
+
+### Config
+
+`useSegmentedControlModel` accepts a configuration object with the following properties and returns
+a `SegmentedControlModel` with `state` and `events` properties.
+
+<ArgsTable of={SegmentedControlModelConfigComponent} />
+
+### State
+
+The `SegmentedControlModel` `state` is an object with the following properties.
+
+<ArgsTable of={SegmentedControlStateComponent} />
+
+### Events
+
+The `SegmentedControlModel` `events` is an object with the following properties.
+
+<ArgsTable of={SegmentedControlEventsComponent} />
+
+## Specifications
+
+<Specifications file="SegmentedControl.spec.ts" name="SegmentedControl" />

package/dist/mdx/preview-react/segmented-control/SegmentedControlModel.splitprops.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {useSegmentedControlModel} from '@workday/canvas-kit-preview-react/segmented-control';
+
+type SegmentedControlModelConfig = Partial<typeof useSegmentedControlModel.defaultConfig> &
+  typeof useSegmentedControlModel.requiredConfig;
+type Model = ReturnType<typeof useSegmentedControlModel>;
+
+export const SegmentedControlModelConfigComponent = (_: SegmentedControlModelConfig) => <div />;
+export const SegmentedControlStateComponent = (_: Model['state']) => <div />;
+export const SegmentedControlEventsComponent = (_: Model['events']) => <div />;

package/dist/mdx/preview-react/segmented-control/examples/Basic.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {
+  gridIcon,
+  listViewIcon,
+  listDetailIcon,
+  pieChartIcon,
+} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <SegmentedControl>
+    <SegmentedControl.List aria-label="View type">
+      <SegmentedControl.Item data-id="table" icon={gridIcon} tooltipProps={{title: 'Table'}} />
+      <SegmentedControl.Item
+        data-id="list-view"
+        icon={listViewIcon}
+        tooltipProps={{title: 'List'}}
+      />
+      <SegmentedControl.Item
+        data-id="list-detail"
+        icon={listDetailIcon}
+        tooltipProps={{title: 'Detail'}}
+      />
+      <SegmentedControl.Item
+        data-id="diagrams"
+        icon={pieChartIcon}
+        tooltipProps={{title: 'Diagram'}}
+      />
+    </SegmentedControl.List>
+  </SegmentedControl>
+);

package/dist/mdx/preview-react/segmented-control/examples/Disabled.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {
+  gridIcon,
+  listViewIcon,
+  listDetailIcon,
+  pieChartIcon,
+} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <SegmentedControl disabled>
+    <SegmentedControl.List aria-label="View type">
+      <SegmentedControl.Item data-id="table" icon={gridIcon} tooltipProps={{title: 'Table'}} />
+      <SegmentedControl.Item
+        data-id="list-view"
+        icon={listViewIcon}
+        tooltipProps={{title: 'List'}}
+      />
+      <SegmentedControl.Item
+        data-id="list-detail"
+        icon={listDetailIcon}
+        tooltipProps={{title: 'Detail'}}
+      />
+      <SegmentedControl.Item
+        data-id="diagrams"
+        icon={pieChartIcon}
+        tooltipProps={{title: 'Diagram'}}
+      />
+    </SegmentedControl.List>
+  </SegmentedControl>
+);

package/dist/mdx/preview-react/segmented-control/examples/Dynamic.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  SegmentedControl,
+  useSegmentedControlModel,
+} from '@workday/canvas-kit-preview-react/segmented-control';
+import {
+  gridIcon,
+  listViewIcon,
+  listDetailIcon,
+  pieChartIcon,
+} from '@workday/canvas-system-icons-web';
+
+export default () => {
+  const [viewType, setViewType] = React.useState('table');
+
+  const model = useSegmentedControlModel({
+    items: [
+      {id: 'table', icon: gridIcon, label: 'Table'},
+      {id: 'list', icon: listViewIcon, label: 'List'},
+      {id: 'detail', icon: listDetailIcon, label: 'Detail'},
+      {id: 'diagram', icon: pieChartIcon, label: 'Diagram'},
+    ],
+    size: 'small',
+    initialValue: viewType,
+    onSelect: data => {
+      console.log(`${data.id} is selected`);
+      setViewType(data.id);
+    },
+  });
+
+  return (
+    <SegmentedControl model={model}>
+      <SegmentedControl.List aria-label="View type">
+        {item => (
+          <SegmentedControl.Item data-id={item.id} icon={item.icon}>
+            {item.label}
+          </SegmentedControl.Item>
+        )}
+      </SegmentedControl.List>
+    </SegmentedControl>
+  );
+};

package/dist/mdx/preview-react/segmented-control/examples/RTL.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {
+  gridIcon,
+  listViewIcon,
+  listDetailIcon,
+  pieChartIcon,
+} from '@workday/canvas-system-icons-web';
+import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+
+export default () => (
+  <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <SegmentedControl initialValue="list-detail">
+      <SegmentedControl.List aria-label="View type">
+        <SegmentedControl.Item data-id="table" icon={gridIcon}>
+          שולחן
+        </SegmentedControl.Item>
+        <SegmentedControl.Item data-id="list-view" icon={listViewIcon}>
+          רשימה
+        </SegmentedControl.Item>
+        <SegmentedControl.Item data-id="list-detail" icon={listDetailIcon}>
+          פרטים
+        </SegmentedControl.Item>
+        <SegmentedControl.Item data-id="diagrams" icon={pieChartIcon}>
+          תרשים
+        </SegmentedControl.Item>
+      </SegmentedControl.List>
+    </SegmentedControl>
+  </CanvasProvider>
+);

package/dist/mdx/preview-react/segmented-control/examples/Sizes.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {Box} from '@workday/canvas-kit-react/layout';
+import {
+  gridIcon,
+  listViewIcon,
+  listDetailIcon,
+  pieChartIcon,
+} from '@workday/canvas-system-icons-web';
+import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {BodyText} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <>
+    <Box marginBottom="xxs">
+      <BodyText size="medium" fontWeight="bold">
+        Small
+      </BodyText>
+      <SegmentedControl size="small">
+        <SegmentedControl.List aria-label="View type">
+          <SegmentedControl.Item data-id="table" icon={gridIcon}>
+            Table
+          </SegmentedControl.Item>
+          <SegmentedControl.Item data-id="list-view" icon={listViewIcon}>
+            List
+          </SegmentedControl.Item>
+          <SegmentedControl.Item data-id="list-detail" icon={listDetailIcon}>
+            Detail
+          </SegmentedControl.Item>
+          <SegmentedControl.Item data-id="diagrams" icon={pieChartIcon}>
+            Diagram
+          </SegmentedControl.Item>
+        </SegmentedControl.List>
+      </SegmentedControl>
+    </Box>
+    <Box>
+      <BodyText size="medium" fontWeight="bold">
+        Medium
+      </BodyText>
+      <SegmentedControl size="medium">
+        <SegmentedControl.List aria-label="View type">
+          <SegmentedControl.Item data-id="table" icon={gridIcon}>
+            Table
+          </SegmentedControl.Item>
+          <SegmentedControl.Item data-id="list-view" icon={listViewIcon}>
+            List
+          </SegmentedControl.Item>
+          <SegmentedControl.Item data-id="list-detail" icon={listDetailIcon}>
+            Detail
+          </SegmentedControl.Item>
+          <SegmentedControl.Item data-id="diagrams" icon={pieChartIcon}>
+            Diagram
+          </SegmentedControl.Item>
+        </SegmentedControl.List>
+      </SegmentedControl>
+    </Box>
+    <Box>
+      <BodyText size="medium" fontWeight="bold">
+        Large
+      </BodyText>
+      <SegmentedControl size="large">
+        <SegmentedControl.List aria-label="Content view type">
+          <SegmentedControl.Item data-id="table" icon={gridIcon}>
+            Table
+          </SegmentedControl.Item>
+          <SegmentedControl.Item data-id="list-view" icon={listViewIcon}>
+            List
+          </SegmentedControl.Item>
+          <SegmentedControl.Item data-id="list-detail" icon={listDetailIcon}>
+            Detail
+          </SegmentedControl.Item>
+          <SegmentedControl.Item data-id="diagrams" icon={pieChartIcon}>
+            Diagram
+          </SegmentedControl.Item>
+        </SegmentedControl.List>
+      </SegmentedControl>
+    </Box>
+  </>
+);

package/dist/mdx/preview-react/segmented-control/examples/TextAndIcon.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {gridIcon, listViewIcon, pieChartIcon} from '@workday/canvas-system-icons-web';
+import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+
+export default () => (
+  <SegmentedControl>
+    <SegmentedControl.List aria-label="View type">
+      <SegmentedControl.Item data-id="table" icon={gridIcon}>
+        Table
+      </SegmentedControl.Item>
+      <SegmentedControl.Item data-id="list" icon={listViewIcon}>
+        List
+      </SegmentedControl.Item>
+      <SegmentedControl.Item data-id="diagram" icon={pieChartIcon}>
+        Diagram
+      </SegmentedControl.Item>
+    </SegmentedControl.List>
+  </SegmentedControl>
+);

package/dist/mdx/preview-react/segmented-control/examples/TextOnly.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+
+export default () => (
+  <SegmentedControl>
+    <SegmentedControl.List aria-label="View type">
+      <SegmentedControl.Item data-id="table">Table</SegmentedControl.Item>
+      <SegmentedControl.Item data-id="list">List</SegmentedControl.Item>
+      <SegmentedControl.Item data-id="diagram">Diagram</SegmentedControl.Item>
+    </SegmentedControl.List>
+  </SegmentedControl>
+);

package/dist/mdx/preview-react/segmented-control/examples/Vertical.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {
+  gridIcon,
+  listViewIcon,
+  listDetailIcon,
+  pieChartIcon,
+} from '@workday/canvas-system-icons-web';
+
+export default () => (
+  <SegmentedControl orientation="vertical">
+    <SegmentedControl.List aria-label="View type">
+      <SegmentedControl.Item data-id="table" icon={gridIcon} tooltipProps={{title: 'Table'}} />
+      <SegmentedControl.Item
+        data-id="list-view"
+        icon={listViewIcon}
+        tooltipProps={{title: 'List'}}
+      />
+      <SegmentedControl.Item
+        data-id="list-detail"
+        icon={listDetailIcon}
+        tooltipProps={{title: 'Detail'}}
+      />
+      <SegmentedControl.Item
+        data-id="diagram"
+        icon={pieChartIcon}
+        tooltipProps={{title: 'Diagram'}}
+      />
+    </SegmentedControl.List>
+  </SegmentedControl>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "8.0.0-alpha.235-next.6+b7b098f0",
+  "version": "8.0.0-alpha.237-next.8+1ef11282",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^8.0.0-alpha.235-next.6+b7b098f0"
+    "@workday/canvas-kit-react": "^8.0.0-alpha.237-next.8+1ef11282"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "b7b098f068ecbceded9a7d2c46e0539631881b3d"
+  "gitHead": "1ef1128221ebca60befb34f81a02546d3abbb7e9"
 }

package/dist/mdx/react/_examples/SegmentedControlWithText.mdx

@@ -1,12 +0,0 @@
-import Basic from './examples/SegmentControlWithText';
-
-
-# Canvas Kit Examples
-
-## SegmentControl With Text
-
-As of `v7`, IconButton was removed, so SegmentControl was changed to support new buttons with
-icon only. This example shows how you use SegmentControl with text until CK
-starts supporting text in SegmentControl buttons. If you'd like to follow along, we have an [open issue](https://github.com/Workday/canvas-kit/issues/207) to enhance the SegmentedControl
-
-<ExampleCodeBlock code={Basic} />