@workday/canvas-kit-docs 15.0.0-alpha.0056-next.0 → 15.0.0-alpha.0060-next.0

package/dist/mdx/labs-react/side-panel/examples/Variant.tsx

@@ -0,0 +1,60 @@
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {SidePanel, useSidePanelModel} from '@workday/canvas-kit-labs-react/side-panel';
+import {Flex} from '@workday/canvas-kit-react/layout';
+import {Heading, Text} from '@workday/canvas-kit-react/text';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+// local helper hook for setting content direction;
+import {useDirection} from './useDirection';
+
+const stylesOverride = {
+  viewport: createStyles({
+    height: px2rem(320),
+    backgroundColor: system.color.bg.alt.default,
+  }),
+  panel: createStyles({
+    alignItems: 'center',
+    padding: system.space.x4,
+  }),
+  main: createStyles({
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    flex: 1,
+    flexBasis: 'auto',
+  }),
+};
+
+export default () => {
+  const {direction, toggleDirection} = useDirection();
+  const model = useSidePanelModel({});
+
+  return (
+    <CanvasProvider dir={direction}>
+      <Flex cs={stylesOverride.viewport}>
+        <SidePanel model={model} variant="alternate">
+          <SidePanel.ToggleButton />
+          <Flex cs={stylesOverride.panel}>
+            <Heading
+              size="small"
+              hidden={model.state.transitionState === 'collapsed' ? true : undefined}
+              id={model.state.labelId}
+            >
+              Alternate Panel
+            </Heading>
+          </Flex>
+        </SidePanel>
+        <Flex as="main" cs={stylesOverride.main}>
+          <Text as="p" typeLevel="body.large">
+            Toggle the content direction
+          </Text>
+          <SecondaryButton onClick={toggleDirection}>
+            Set to {direction === 'ltr' ? 'Right-to-Left' : 'Left-to-Right'}
+          </SecondaryButton>
+        </Flex>
+      </Flex>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/labs-react/side-panel/examples/useDirection.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {ContentDirection} from '@workday/canvas-kit-react/common';
+
+export function useDirection(initialDirection = ContentDirection.LTR) {
+  const [direction, setDirection] = React.useState(initialDirection);
+
+  return {
+    direction,
+    toggleDirection() {
+      if (direction === ContentDirection.LTR) {
+        setDirection(ContentDirection.RTL);
+      } else {
+        setDirection(ContentDirection.LTR);
+      }
+    },
+    setLTR() {
+      setDirection(ContentDirection.LTR);
+    },
+    setRTL() {
+      setDirection(ContentDirection.RTL);
+    },
+  };
+}

package/dist/mdx/preview-react/side-panel/SidePanel.mdx

@@ -1,4 +1,5 @@
-import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import {ExampleCodeBlock, SymbolDoc, Specifications, StorybookStatusIndicator} from '@workday/canvas-kit-docs';import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight'
+
 import Basic from './examples/Basic';
 import HiddenName from './examples/HiddenName';
 import AlternatePanel from './examples/Variant';
@@ -9,9 +10,20 @@ import OnExpandedChange from './examples/OnExpandedChange';
 import OnStateTransition from './examples/OnStateTransition';
 
 
-# Canvas Kit Side Panel
+# Canvas Kit Side Panel <StorybookStatusIndicator type="deprecated" />
+
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `SidePanel` in Preview has been deprecated and will be removed in a future major version. Please
+    use `SidePanel` in Labs instead.
+  </InformationHighlight.Body>
+  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/labs-side-panel--docs">
+    View SidePanel Docs
+  </InformationHighlight.Link>
+</InformationHighlight>
 
-`SidePanel` is a collaspible container that anchors to the left or right side of the screen.
+`SidePanel` is a collapsible container that anchors to the left or right side of the screen.
 
 [> Workday Design Reference](https://design.workday.com/components/containers/side-panel)
 

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

@@ -5,14 +5,19 @@ 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
 JavaScript-based theme objects to CSS variables. This change provides better performance, improved
 developer experience, and greater flexibility for theming applications.
 
+> **📌 Quick Start:**
+> 1. **Import CSS variables once** at the root level of your application (e.g., in `index.css`)
+> 2. **Override tokens at `:root`** for global theming — this is the recommended approach
+> 3. **Use `CanvasProvider` scoped theming only** for specific scenarios like multi-brand sections or embedded components
+>
+> If your application renders within an environment that already imports these CSS variables, **do not re-import them**.
+
 ## Migration from v10 Theme Prop to v14 CSS Variables
 
 ### The Evolution
@@ -49,6 +54,8 @@ via a `className` scoping those brand variables to a wrapping div. In order for
 better solution to theming that is scalable and is more aligned with our CSS variables, we changed
 this approach.
 
+**Note:** While we support theme overrides, we advise to use global theming via CSS Variables.
+
 ## What is a Cascade Barrier?
 
 When we say "cascade barrier", we're talking about how
@@ -71,6 +78,8 @@ and scoped to the `div` that the `CanvasProvider` created. This meant that anyth
 or outside of the `CanvasProvider` would not be able to cascade down to the components within the
 `CanvasProvider`.
 
+If you provide a `theme` to the `CanvasProvider`, it will create a scoped theme. Note that in v14, global CSS variables are the recommended way to theme Popups and Modals consistently.
+
 ## Global vs Scoped Theming
 
 Canvas Kit v14 supports two theming strategies: **global theming** and **scoped theming**. Understanding the difference is important to avoid unexpected behavior.
@@ -80,7 +89,9 @@ Canvas Kit v14 supports two theming strategies: **global theming** and **scoped
 Global theming applies CSS variables at the `:root` level, making them available throughout your entire application. This is the **recommended approach** for most use cases.
 
 ```css
+@import '@workday/canvas-tokens-web/css/base/_variables.css';
 :root {
+	// This is showing how you can change the value of a token at the root level of your application.
   --cnvs-brand-primary-base: var(--cnvs-base-palette-magenta-600);
 }
 ```
@@ -90,13 +101,13 @@ Global theming applies CSS variables at the `:root` level, making them available
 Scoped theming applies CSS variables to a specific section of your application using the `CanvasProvider` with either a `className` or `theme` prop. The theme only affects components within that provider.
 
 ```tsx
-// Using the theme prop for scoped theming
+// Using the theme prop for scoped theming. This will set the [brand.primary.**] tokens to shades of purple.
 <CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
   <ScopedSection />
 </CanvasProvider>
 ```
 
-> **⚠️ Warning:** Scoped theming creates a cascade barrier that **will break global theming** within its scope. Any CSS variables defined at `:root` will be overridden by the scoped theme. Only the tokens explicitly defined in the `theme` prop will be changed - other tokens will use their default values, not your global overrides.
+> **⚠️ Warning:** Scoped theming creates a cascade barrier that **will break global theming**. Any CSS variables defined at `:root` will be overridden by the scoped theme. Only the tokens explicitly defined in the `theme` prop will be changed - other tokens will use their default values, not your global overrides.
 
 ### When to Use Scoped Theming
 
@@ -178,13 +189,10 @@ const themedBrand = createStyles({
 Previously, the `usePopupStack` hook created a CSS class name that was passed to our Popups. We attached those theme styles to that class name. This allowed the theme to be available in our Popups. But it also created a cascade barrier that blocked the global theme from being applied to our Popup components.
 Because we now use global CSS variables, we no longer need this class name to provide the global theme to Popups. But we have to remove this generated class name to allow the global theme to be applied to Popups.
 
-> **Important:** Passing a `theme` to the `CanvasProvider` **will not** theme components in Modals
-> and Dialogs. You can either pass a `className` or define CSS variables at the root.
-
 **Before in v13**
 
 ```tsx
-// When passing a theme to the Canvas Provider, the `usePopupStack` would grab the theme and generate a class to forward the theme to Modals and Dialogs. This would create a cascade barrier for any CSS variables deinfed at the root.
+// When passing a theme to the Canvas Provider, the `usePopupStack` would grab the theme and generate a class to forward the theme to Modals and Dialogs. This would create a cascade barrier for any CSS variables defined at the root.
 <CanvasProvider theme={{canvas: {palette: {primary: {main: 'blue'}}}}}>
   <Modal>//... rest of modal code</Modal>
 </CanvasProvider>
@@ -261,29 +269,6 @@ System tokens define component-specific values.
 }
 ```
 
-### App-Specific Theming
-
-```tsx
-import {createStyles} from '@workday/canvas-kit-styling';
-import {brand, base} from '@workday/canvas-tokens-web';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {CanvasProvider} from '@workday/canvas-kit-react/common';
-
-const greenTheme = createStyles({
-  [brand.primary.base]: base.green600,
-  [brand.primary.dark]: base.green700,
-  [brand.primary.darkest]: base.green800,
-  [brand.primary.light]: base.green200,
-  [brand.primary.lighter]: base.green50,
-  [brand.primary.lightest]: base.green25,
-  [brand.primary.accent]: base.neutral0,
-});
-
-<CanvasProvider className={greenTheme}>
-  <PrimaryButton>Click me</PrimaryButton>
-</CanvasProvider>;
-```
-
 <ExampleCodeBlock code={Theming} />
 
 ### Dark Mode Implementation

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

@@ -15,13 +15,31 @@ const customTheme = createStyles({
 
 const App = () => {
   return (
-    <Card>
-      <Card.Heading>Theming</Card.Heading>
-      <Card.Body>
-        <PrimaryButton>Theming</PrimaryButton>
-        <input />
-      </Card.Body>
-    </Card>
+    <CanvasProvider
+      theme={{
+        canvas: {
+          palette: {
+            primary: {
+              main: base.green600,
+              dark: base.green700,
+              darkest: base.green800,
+              light: base.green200,
+              lighter: base.green50,
+              lightest: base.green25,
+              contrast: base.neutral0,
+            },
+          },
+        },
+      }}
+    >
+      <Card>
+        <Card.Heading>Theming</Card.Heading>
+        <Card.Body>
+          <PrimaryButton>Theming</PrimaryButton>
+          <input />
+        </Card.Body>
+      </Card>
+    </CanvasProvider>
   );
 };
 

package/dist/mdx/style-props/stylePropsMigrationOverview.mdx

@@ -48,7 +48,7 @@ assist with your migration process.
   migration
 
 <DownloadLLMFile
-  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-style-props-migration.txt"
+  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm/llm-style-props-migration.txt"
   filename="llm-style-props-migration.txt"
 />
 

package/dist/mdx/tokens/TokenMigrationOverview.mdx

@@ -41,7 +41,7 @@ LLM consumption.
   migration
 
 <DownloadLLMFile
-  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm-txt/llm-token-migration-14.txt"
+  rawFileLink="https://raw.githubusercontent.com/Workday/canvas-kit/master/modules/docs/llm/llm-token-migration-14.txt"
   filename="llm-token-migration-14.0.0.txt"
 />
 

package/lib/StorybookStatusIndicator.tsx

@@ -1,4 +1,7 @@
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
+import {
+  StatusIndicator,
+  type StatusIndicatorVariant,
+} from '@workday/canvas-kit-preview-react/status-indicator';
 import {system} from '@workday/canvas-tokens-web';
 import {sparkleSingleSmallIcon} from '@workday/canvas-system-icons-web';
 import {createStencil} from '@workday/canvas-kit-styling';
@@ -10,18 +13,6 @@ const storybookStatusIndicatorStencil = createStencil({
     padding: `${system.space.zero} ${system.space.x2}`,
     [systemIconStencil.vars.color]: 'currentColor',
   },
-  modifiers: {
-    type: {
-      ai: {
-        background: system.color.bg.ai.default,
-        color: system.color.fg.ai,
-      },
-      deprecated: {
-        background: system.color.static.amber.soft,
-        color: system.color.static.amber.stronger,
-      },
-    },
-  },
 });
 
 const content = {
@@ -33,14 +24,26 @@ const content = {
     icon: undefined,
     label: 'Deprecated',
   },
+  new: {
+    icon: undefined,
+    label: 'New',
+  },
 };
 
-export const StorybookStatusIndicator = ({type}: {type: 'ai' | 'deprecated'}) => {
+export const StorybookStatusIndicator = ({type}: {type: 'ai' | 'deprecated' | 'new'}) => {
   const {icon, label} = content[type];
+  const variantMapping = {
+    ai: 'ai',
+    deprecated: 'caution',
+    new: 'positive',
+  };
+  console.log(variantMapping[type]);
   return (
     <StatusIndicator
       className="sb-unstyled cnvs-title-status-indicator"
       cs={storybookStatusIndicatorStencil({type})}
+      variant={variantMapping[type] as StatusIndicatorVariant}
+      emphasis="low"
     >
       {icon && <StatusIndicator.Icon icon={icon} />}
       <StatusIndicator.Label>{label}</StatusIndicator.Label>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.0.0-alpha.0056-next.0",
+  "version": "15.0.0-alpha.0060-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.0056-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0056-next.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0056-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0056-next.0",
+    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0060-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0060-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0060-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0060-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": "7ea41be00e30b2df431c3b8a49d5d2c24f3a9b8c"
+  "gitHead": "34d5076dcc1f6b3d605fc3bf5b36ce5f97917686"
 }