@workday/canvas-kit-docs 15.0.0-alpha.0008-next.0 → 15.0.0-alpha.0023-next.0

package/dist/mdx/react/breadcrumbs/examples/RTL.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
 import {Box} from '@workday/canvas-kit-react/layout';
 
@@ -10,12 +10,6 @@ export interface Breadcrumb {
 }
 
 export default () => {
-  const theme = {
-    canvas: {
-      direction: ContentDirection.RTL,
-    },
-  };
-
   const [items] = React.useState<Breadcrumb[]>([
     {id: '1', text: 'תנ״ך', link: '/tanakh'},
     {id: '2', text: 'כתובים', link: '/ketuvim'},
@@ -26,7 +20,7 @@ export default () => {
   ]);
 
   return (
-    <CanvasProvider theme={theme}>
+    <CanvasProvider dir="rtl">
       <Box maxWidth="300px">
         <Breadcrumbs items={items} aria-label="Breadcrumbs">
           <Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}>

package/dist/mdx/react/common/mdx/Theming.mdx

@@ -5,6 +5,8 @@ import Theming from './examples/Theming';
 
 # Canvas Kit Theming Guide
 
+> **Deprecation Notice:** The `theme` prop on `CanvasProvider` and all associated theming utilities (`useTheme`, `getTheme`, `styled`, `defaultCanvasTheme`, etc.) are deprecated. Please use CSS variables from `@workday/canvas-tokens-web` for theming. See the [Preferred Approach](#-preferred-approach-v14) section below.
+
 ## Overview
 
 Canvas Kit v14 introduces a significant shift in our approach to theming: we've moved away from
@@ -266,6 +268,65 @@ Canvas Kit supports RTL out of the box. Our components are styled to use
 If you want to add additional styles based on RTL, you can also use the `:dir`
 [pseudo selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir).
 
+#### Setting RTL Direction
+
+Use the native HTML `dir` attribute to set the text direction. The `CanvasProvider` accepts a `dir` prop which sets this attribute on its wrapper element:
+
+```tsx
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+
+// Set RTL direction
+<CanvasProvider dir="rtl">
+  <App />
+</CanvasProvider>
+```
+
+You can also set it on any HTML element:
+
+```tsx
+<div dir="rtl">
+  <MyComponent />
+</div>
+```
+
+> **Note:** The `dir` attribute is the standard HTML way to set text direction. It's preferred over the deprecated `theme.canvas.direction` approach because it works natively with CSS logical properties and the `:dir()` pseudo-class.
+
+#### Using CSS Logical Properties
+
+CSS logical properties automatically adapt to the text direction. Use these instead of physical properties:
+
+```css
+/* Physical properties (don't adapt to RTL) */
+.my-component {
+  margin-left: 1rem;
+  padding-right: 1rem;
+  border-left: 1px solid;
+}
+
+/* Logical properties (adapt to RTL automatically) */
+.my-component {
+  margin-inline-start: 1rem;
+  padding-inline-end: 1rem;
+  border-inline-start: 1px solid;
+}
+```
+
+#### Conditional RTL Styles with `:dir()`
+
+For styles that need to change based on direction (like rotating icons), use the `:dir()` pseudo-class:
+
+```tsx
+import {createStyles} from '@workday/canvas-kit-styling';
+
+const rtlButtonStyles = createStyles({
+  ':dir(rtl)': {
+    svg: {
+      transform: 'rotate(180deg)',
+    },
+  },
+});
+```
+
 <ExampleCodeBlock code={RTL} />
 
 ### Resetting to Default Brand Theme

package/dist/mdx/react/expandable/examples/RTL.tsx

@@ -1,14 +1,9 @@
 import {Expandable} from '@workday/canvas-kit-react/expandable';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
 export default () => {
-  const theme = {
-    canvas: {
-      direction: ContentDirection.RTL,
-    },
-  };
   return (
-    <CanvasProvider theme={theme}>
+    <CanvasProvider dir="rtl">
       <Expandable>
         <Expandable.Target headingLevel="h4">
           <Expandable.Icon iconPosition="start" />

package/dist/mdx/react/loading-dots/examples/RTL.tsx

@@ -1,15 +1,10 @@
 import React from 'react';
 import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
 export default () => {
-  const theme = {
-    canvas: {
-      direction: ContentDirection.RTL,
-    },
-  };
   return (
-    <CanvasProvider theme={theme}>
+    <CanvasProvider dir="rtl">
       <LoadingDots />
     </CanvasProvider>
   );

package/dist/mdx/react/pagination/examples/RTL.tsx

@@ -7,7 +7,7 @@ import {
   usePaginationModel,
 } from '@workday/canvas-kit-react/pagination';
 
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const resultCount = 10;
@@ -15,7 +15,7 @@ export default () => {
   const lastPage = getLastPage(resultCount, totalCount);
 
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Pagination aria-label="Pagination" lastPage={lastPage}>
         <Pagination.Controls>
           <Pagination.JumpToFirstButton aria-label="First" />

package/dist/mdx/react/popup/examples/RTL.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
 import {SecondaryButton, DeleteButton} from '@workday/canvas-kit-react/button';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {Popup} from '@workday/canvas-kit-react/popup';
 import {Box, Flex} from '@workday/canvas-kit-react/layout';
 
 export default () => {
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Popup.Card width={400}>
         <Popup.CloseIcon aria-label="סגור" />
         <Popup.Heading>למחוק פריט</Popup.Heading>

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

@@ -1,29 +1,21 @@
-import {
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-  SymbolDoc,
-  Specifications,
-} from '@workday/canvas-kit-docs';
-
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
-
+import {ExampleCodeBlock, SymbolDoc, 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';
+
 
-# Canvas Kit Segmented Control <StorybookStatusIndicator type="deprecated" />
+# Canvas Kit Segmented Control
 
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `SegmentedControl` in Main has been deprecated and will be removed in a future major version.
-    Please use `Segmented Control` in Preview instead.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs">
-    Segmented Control Docs
-  </InformationHighlight.Link>
-</InformationHighlight>
+Segmented Control is a
+[compound component](/getting-started/for-developers/resources/compound-components/) that represents
+a linear group of multiple buttons allowing the selection of a specific value.
 
-A linear set of two or more segments, each of which functions as a mutually exclusive button. This
-is a [_controlled_](https://reactjs.org/docs/forms.html#controlled-components) component.
+[> Workday Design Reference](https://design.workday.com/components/buttons/segmented-control)
 
 ## Installation
 
@@ -35,12 +27,113 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Here is a basic example of a Segmented Control with multiple nested `Button`s. **Note:** while
-managing state using a unique `value` for each `Button` child is encouraged, you can also use
-indexes and omit the `value` field. It is strongly recommended to not mix these two methods.
+`SegmentedControl` includes a container `SegmentedControl` component and the following
+subcomponents: `SegmentedControl.List` and `SegmentedControl.Item`.
+
+The example below contains a `SegmentedControl` with four icon-only buttons. Each button is rendered
+using a `SegmentedControl.Item` and is paired with a tooltip describing the button's function. Only
+one button can be active at a time.
 
 <ExampleCodeBlock code={Basic} />
 
+We **strongly** discourage including more than four buttons in a single `SegmentedControl`.
+
+### Accessibility
+
+Our `SegmentedControl` component renders semantic HTML `<button>` elements to the browser DOM,
+wrapped inside of a `<div>` with an explicit ARIA `role="group"`. This is equivalent to an HTML
+`<fieldset>` element, and useful for screen readers to describe the relationship between the
+buttons.
+
+- Each button is a 2-state toggle button with `aria-pressed={true | false}` to indicate the current
+  state to screen readers.
+- Providing your own `aria-label` string to `SegmentedControl.List` is recommended for describing the
+  purpose of the component.
+
+#### Screen Reader Experience
+
+When users interact with a `SegmentedControl` using screen readers:
+
+- The group context is announced (e.g., "View options, group" when using
+  `aria-label="View options"`)
+- Each button announces its text/label, "toggle button" role, and pressed/unpressed state (e.g.,
+  "List view, toggle button, pressed" or "Grid view, toggle button, not pressed")
+- For icon-only buttons with tooltips, the tooltip text is announced along with the button role and
+  state
+- When a button is activated, screen readers should announce the new state
+
+Refer to [Button](?path=/docs/components-buttons--docs#accessibility) for more information about
+accessibility of these components.
+
+### Variations
+
+`SegmentedControl` supports three variations based on whether or not its `SegmentedControl.Item`
+components have an `icon` prop and/or text content: icon-only, text-only, and text-and-icon.
+
+All `SegmentedControl.Item` components within a given `SegmentedControl` must be of the same
+variation.
+
+#### Icon-Only
+
+To render an icon-only `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and do
+not provide it with text content. Refer to the [basic example](#basic-example) above for an instance
+of an icon-only `SegmentedControl`.
+
+The icon-only variation is the only variation which supports a vertical orientation in addition to
+the default horizontal orientation. Set the `orientation` prop of `SegmentedControl` to `vertical`
+to configure the component to render vertically.
+
+<ExampleCodeBlock code={Vertical} />
+
+#### Text-Only
+
+To render a text-only `SegmentedControl`, omit the `icon` prop from `SegmentedControl.Item` and
+provide it with text content.
+
+<ExampleCodeBlock code={TextOnly} />
+
+#### Text-and-Icon
+
+To render a text-and-icon `SegmentedControl`, apply the `icon` prop to `SegmentedControl.Item` and
+provide it with text content.
+
+<ExampleCodeBlock code={TextAndIcon} />
+
+### Sizes
+
+`SegmentedControl` accepts a `size` prop which supports the following values:
+
+- `small`
+- `medium` (Default)
+- `large`
+
+<ExampleCodeBlock code={Sizes} />
+
+### Disabled
+
+Set the `disabled` prop of `SegmentedControl` to disable the entire component including its buttons.
+
+<ExampleCodeBlock code={Disabled} />
+
+### Right-to-Left (RTL)
+
+`SegmentedControl` supports right-to-left languages when specified in the `CanvasProvider` `theme`.
+
+<ExampleCodeBlock code={RTL} />
+
+### Dynamic Items
+
+`SegmentedControl` supports a
+[dynamic API](/getting-started/for-developers/resources/collection-api/#dynamic-items) where instead
+of statically providing the JSX for each `SegmentedControl.Item`, you pass an array of `items` in
+the `model` state and provide a render function to display the items.
+
+<ExampleCodeBlock code={Dynamic} />
+
 ## Component API
 
-<SymbolDoc name="SegmentedControl" fileName="/react/" />
+<SymbolDoc name="SegmentedControl" fileName="/react/" />
+
+## Specifications
+
+<Specifications file="SegmentedControl.spec.ts" name="SegmentedControl" />

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

@@ -1,38 +1,42 @@
-import * as React from 'react';
+import React from 'react';
 
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
+import {BodyText} from '@workday/canvas-kit-react/text';
 import {
+  gridIcon,
   listViewIcon,
-  worksheetsIcon,
-  deviceTabletIcon,
-  percentageIcon,
+  listDetailIcon,
+  pieChartIcon,
 } from '@workday/canvas-system-icons-web';
-import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => {
-  const [value, setValue] = React.useState<string | number>();
-  const handleToggle = (selectedValue: string | number) => {
-    setValue(selectedValue);
-  };
+  const [viewType, setViewType] = React.useState('table');
 
   return (
-    <SegmentedControl value={value} onChange={handleToggle}>
-      <SegmentedControl.Button
-        icon={listViewIcon}
-        value="list-view"
-        onClick={e => console.log('Existing TertiaryButton onClick callback')}
-        id="test"
-      />
-      <SegmentedControl.Button icon={worksheetsIcon} value="table-view" disabled={true} />
-      <SegmentedControl.Button
-        icon={deviceTabletIcon}
-        value="device-view"
-        aria-label="Device View"
-      />
-      <SegmentedControl.Button
-        icon={percentageIcon}
-        value="percent-view"
-        aria-label="Percent View"
-      />
-    </SegmentedControl>
+    <>
+      <SegmentedControl initialValue={viewType} onSelect={data => setViewType(data.id)}>
+        <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>
+      <BodyText size="small" marginTop="s">
+        Selected: {viewType}
+      </BodyText>
+    </>
   );
 };

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

@@ -1,4 +1,4 @@
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {
   gridIcon,
   listViewIcon,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   SegmentedControl,
   useSegmentedControlModel,
-} from '@workday/canvas-kit-preview-react/segmented-control';
+} from '@workday/canvas-kit-react/segmented-control';
 import {
   gridIcon,
   listViewIcon,

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

@@ -1,14 +1,14 @@
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} 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';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => (
-  <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+  <CanvasProvider dir="rtl">
     <SegmentedControl initialValue="list-detail">
       <SegmentedControl.List aria-label="View type">
         <SegmentedControl.Item data-id="table" icon={gridIcon}>

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

@@ -6,7 +6,7 @@ import {
   listDetailIcon,
   pieChartIcon,
 } from '@workday/canvas-system-icons-web';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {BodyText} from '@workday/canvas-kit-react/text';
 
 export default () => (

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {gridIcon, listViewIcon, pieChartIcon} from '@workday/canvas-system-icons-web';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => (
   <SegmentedControl>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 
 export default () => (
   <SegmentedControl>

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

@@ -1,4 +1,4 @@
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {
   gridIcon,
   listViewIcon,

package/dist/mdx/react/table/examples/RightToLeft.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Table} from '@workday/canvas-kit-react/table';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -11,7 +11,7 @@ const tableHeaderStyles = createStyles({
 
 export default () => {
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Table>
         <Table.Caption>משקאות קפה וגדלים</Table.Caption>
         <Table.Head>

package/dist/mdx/react/tabs/examples/OverflowTabs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Tabs, useTabsModel} from '@workday/canvas-kit-react/tabs';
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
+import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 type MyTabItem = {

package/dist/mdx/react/tabs/examples/RightToLeft.tsx

@@ -1,11 +1,11 @@
 import {space} from '@workday/canvas-kit-react/tokens';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
 import {Tabs} from '@workday/canvas-kit-react/tabs';
 
 export default () => {
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Tabs>
         <Tabs.List>
           <Tabs.Item>ראשון</Tabs.Item>

package/dist/mdx/react/toast/examples/RTL.tsx

@@ -3,13 +3,13 @@ import React from 'react';
 import {Toast} from '@workday/canvas-kit-react/toast';
 import {checkIcon} from '@workday/canvas-system-icons-web';
 import {colors} from '@workday/canvas-kit-react/tokens';
-import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const handleClose = () => console.log('close button clicked');
 
   return (
-    <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}>
+    <CanvasProvider dir="rtl">
       <Toast>
         <Toast.Icon icon={checkIcon} color="greenApple400" />
         <Toast.Body>

package/lib/stackblitzFiles/App.tsx

@@ -1,9 +1,4 @@
-import {
-  CanvasProvider,
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {createStyles} from '@workday/canvas-kit-styling';
 
 import {Demo} from './Demo';
@@ -14,15 +9,8 @@ const mainContentStyles = createStyles({
 });
 
 export const App = () => {
-  // useTheme is filling in the Canvas theme object if any keys are missing
-  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
-    canvas: {
-      direction: ContentDirection.LTR,
-    },
-  });
-
   return (
-    <CanvasProvider theme={canvasTheme}>
+    <CanvasProvider>
       <>
         <main className={mainContentStyles}>
           <Demo />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.0.0-alpha.0008-next.0",
+  "version": "15.0.0-alpha.0023-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0008-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0008-next.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0008-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0008-next.0",
+    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0023-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0023-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0023-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0023-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "26a8bc06dba5ae759ca62ae8922aeaa7bba7015c"
+  "gitHead": "13b3abf5b4752be5738a78f3c37e31b6252077dc"
 }