@workday/canvas-kit-docs 16.0.0-alpha.0465-next.0 → 16.0.0-alpha.0475-next.0

package/dist/mdx/preview-react/tabs/examples/SinglePanel.tsx

@@ -0,0 +1,45 @@
+import {Tabs, useTabsModel} from '@workday/canvas-kit-preview-react/tabs';
+import {slugify} from '@workday/canvas-kit-react/common';
+import {system} from '@workday/canvas-tokens-web';
+
+export default () => {
+  const model = useTabsModel();
+
+  const message = (
+    <p>
+      This example shows how to use a single tab panel. You must manually set the{' '}
+      <code>hidden</code>, <code>aria-controls</code>, and <code>id</code> attributes of Tab item
+      and Tab panel components
+    </p>
+  );
+
+  const contents = {
+    first: <div>Contents of First Tab {message}</div>,
+    second: <div>Contents of Second Tab {message}</div>,
+    third: <div>Contents of Third Tab {message}</div>,
+  };
+
+  return (
+    <Tabs model={model}>
+      <Tabs.List>
+        <Tabs.Item data-id="first" aria-controls="mytab-panel">
+          First Tab
+        </Tabs.Item>
+        <Tabs.Item data-id="second" aria-controls="mytab-panel">
+          Second Tab
+        </Tabs.Item>
+        <Tabs.Item data-id="third" aria-controls="mytab-panel">
+          Third Tab
+        </Tabs.Item>
+      </Tabs.List>
+      <Tabs.Panel
+        cs={{marginBlockStart: system.gap.lg}}
+        hidden={undefined}
+        id="mytab-panel"
+        aria-labelledby={slugify(`${model.state.id}-${model.state.selectedIds[0]}`)}
+      >
+        {contents[model.state.selectedIds[0]]}
+      </Tabs.Panel>
+    </Tabs>
+  );
+};

package/dist/mdx/react/tabs/Tabs.mdx

@@ -69,7 +69,7 @@ trigger an event to change the active tab.
 ### Named Tabs
 
 `Tabs.Item` and `Tabs.Panel` both take an optional `data-id` attribute that is used for the
-`onActivate` callback. This example is identical to the Basic Example, but with tabs named using
+`onSelect` callback. This example is identical to the Basic Example, but with tabs named using
 `data-id` for the `Tabs.Item` and `Tabs.Panel` subcomponents.
 
 <ExampleCodeBlock code={NamedTabs} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "16.0.0-alpha.0465-next.0",
+  "version": "16.0.0-alpha.0475-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -47,10 +47,10 @@
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
     "@workday/canvas-expressive-icons-web": "1.0.2",
-    "@workday/canvas-kit-labs-react": "^16.0.0-alpha.0465-next.0",
-    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0465-next.0",
-    "@workday/canvas-kit-react": "^16.0.0-alpha.0465-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0465-next.0",
+    "@workday/canvas-kit-labs-react": "^16.0.0-alpha.0475-next.0",
+    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0475-next.0",
+    "@workday/canvas-kit-react": "^16.0.0-alpha.0475-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0475-next.0",
     "@workday/canvas-system-icons-web": "4.0.4",
     "@workday/canvas-tokens-web": "4.4.0-beta.6",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "02dd284d77ccf92991d5526190f453d442ccebcc"
+  "gitHead": "82422d46f689844113866ba99ffad38956bde57c"
 }