@workday/canvas-kit-docs 16.0.0-alpha.0486-next.0 → 16.0.0-alpha.0489-next.0

package/dist/es6/lib/Table.js

@@ -16,7 +16,7 @@ const TableBody = createComponent('tbody')({
 });
 const tableRowStencil = createStencil({
     base: {
-        borderBlockEnd: `${px2rem(1)} solid ${system.color.border.strong}`,
+        borderBlockEnd: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
     },
 });
 const TableRow = createComponent('tr')({

package/dist/es6/lib/docs.js

@@ -13483,7 +13483,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "string",
-          "value": "avatar-(promoted)"
+          "value": "avatar"
         },
         {
           "kind": "string",
@@ -13623,7 +13623,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
         },
         {
           "kind": "string",
-          "value": "side-panel-(new)"
+          "value": "side-panel"
         },
         {
           "kind": "string",
@@ -13753,6 +13753,10 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "string",
             "value": "banner"
           },
+          {
+            "kind": "string",
+            "value": "side-panel"
+          },
           {
             "kind": "string",
             "value": "action-bar"
@@ -13763,7 +13767,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
           },
           {
             "kind": "string",
-            "value": "avatar-(promoted)"
+            "value": "avatar"
           },
           {
             "kind": "string",
@@ -13873,10 +13877,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "kind": "string",
             "value": "side-panel-(deprecated)"
           },
-          {
-            "kind": "string",
-            "value": "side-panel-(new)"
-          },
           {
             "kind": "string",
             "value": "skeleton"

package/dist/es6/mdx/welcomePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAsDA,eAAO,MAAM,WAAW,+CAqGvB,CAAC"}
+{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AA0DA,eAAO,MAAM,WAAW,+CAyGvB,CAAC"}

package/dist/es6/mdx/welcomePage.js

@@ -2,21 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore: Cannot find module error
 import { ExternalHyperlink, Hyperlink } from '@workday/canvas-kit-react/button';
 import { Card } from '@workday/canvas-kit-react/card';
-import { Graphic } from '@workday/canvas-kit-react/icon';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { Box, Flex, Grid } from '@workday/canvas-kit-react/layout';
 import { Heading, Text } from '@workday/canvas-kit-react/text';
-import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { createStyles } from '@workday/canvas-kit-styling';
+import { fontEditIcon, rocketIcon, tokensIcon } from '@workday/canvas-system-icons-web';
 import { system } from '@workday/canvas-tokens-web';
 // @ts-ignore: Cannot find module error
 import { version } from '../../../lerna.json';
-// @ts-ignore: Cannot find module error
-import componentsImage from './Components.png';
-// @ts-ignore: Cannot find module error
-import stylingImage from './Styling.png';
-// @ts-ignore: Cannot find module error
-import tokensImage from './Tokens.png';
-import headerImage from './ck-banner.jpg';
 import { InstallBlock } from './installBlock';
+import headerImage from './sana-canvas-header.jpg';
 const parentFlexStyles = createStyles({
     display: 'flex',
     flexDirection: 'column',
@@ -36,19 +31,27 @@ const imageStyles = createStyles({
     width: '100%',
     height: 'auto',
 });
-const gridStyles = createStyles({
-    maxHeight: px2rem(400),
-    gridTemplateRows: '1fr 1fr 2fr 1fr',
-    display: 'grid',
+const cardHeaderStyles = createStyles({
+    display: 'flex',
+    alignItems: 'center',
+    gap: system.gap.xs,
+});
+const cardStyles = createStyles({
+    height: '100%',
+});
+const cardBodyStyles = createStyles({
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
 });
 const linkStyles = createStyles({
-    alignSelf: 'end',
-    marginBlockStart: px2rem(12),
+    marginBlockStart: 'auto',
 });
 export const WelcomePage = () => {
     return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles }), _jsx(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', right: '5%' }, children: _jsxs(Text, { typeLevel: "title.medium", cs: [bannerTextStyles, versionStyles], children: ["v", version] }) })] }), _jsxs(Text, { typeLevel: "body.medium", children: ["This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with", _jsx(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window", cs: { marginInlineStart: system.gap.xs }, children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", children: "Quick Links" }), _jsxs(Grid, { cs: {
                         gridAutoColumns: 'auto',
                         gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
                         gridGap: system.gap.sm,
-                    }, children: [_jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: componentsImage } }), _jsx(Card.Heading, { children: "Getting Started" }), _jsx(Card.Body, { children: _jsx(Text, { children: "For all things getting started including helpful guides and docs." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs", children: "Getting Started Guide" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: tokensImage } }), _jsx(Card.Heading, { children: "Tokens" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Tokens are the smallest pieces of our Design System with the primary function of storing UI information." }) }), _jsx(Grid.Item, { as: ExternalHyperlink, className: linkStyles, href: "https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: stylingImage } }), _jsx(Card.Heading, { children: "Styling" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Learn how to style Canvas components using tokens, theming, and custom CSS approaches." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs", children: "Get Started" })] })] }), _jsx(Heading, { size: "medium", children: "Installation" }), _jsx(Text, { children: "To get started using Canvas Kit React first add or install the module to your existing React project" }), _jsx(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" }), "or", _jsx(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" })] }) }));
+                        alignItems: 'stretch',
+                    }, children: [_jsxs(Card, { className: cardStyles, children: [_jsxs(Flex, { className: cardHeaderStyles, children: [_jsx(SystemIcon, { icon: rocketIcon, "aria-hidden": "true" }), _jsx(Card.Heading, { children: "Getting Started" })] }), _jsxs(Card.Body, { className: cardBodyStyles, children: [_jsx(Text, { children: "For all things getting started including helpful guides and docs." }), _jsx(Hyperlink, { className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs", children: "Getting Started Guide" })] })] }), _jsxs(Card, { className: cardStyles, children: [_jsxs(Flex, { className: cardHeaderStyles, children: [_jsx(SystemIcon, { icon: tokensIcon, "aria-hidden": "true" }), _jsx(Card.Heading, { children: "Tokens" })] }), _jsxs(Card.Body, { className: cardBodyStyles, children: [_jsx(Text, { children: "Tokens are the smallest pieces of our Design System with the primary function of storing UI information." }), _jsx(ExternalHyperlink, { className: linkStyles, href: "https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs", children: "View Our Tokens" })] })] }), _jsxs(Card, { className: cardStyles, children: [_jsxs(Flex, { className: cardHeaderStyles, children: [_jsx(SystemIcon, { icon: fontEditIcon, "aria-hidden": "true" }), _jsx(Card.Heading, { children: "Styling" })] }), _jsxs(Card.Body, { className: cardBodyStyles, children: [_jsx(Text, { children: "Learn how to style Canvas components using tokens, theming, and custom CSS approaches." }), _jsx(Hyperlink, { className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs", children: "Get Started" })] })] })] }), _jsx(Heading, { size: "medium", children: "Installation" }), _jsx(Text, { children: "To get started using Canvas Kit React first add or install the module to your existing React project" }), _jsx(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" }), "or", _jsx(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" })] }) }));
 };

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

@@ -21,6 +21,7 @@ Soon to be...
   - [Buttons](#buttons)
     - [Delete Button Outline Variant](#delete-button-outline-variant)
   - [Card](#card)
+  - [Expandable](#expandable)
   - [Indicators](#indicators)
     - [Banner](#banner)
     - [Count Badge](#count-badge)
@@ -49,6 +50,7 @@ Soon to be...
     - [Pagination](#pagination)
   - [Popup](#popup)
   - [Segmented Control](#segmented-control)
+  - [Table](#table)
   - [Toast](#toast)
   - [Tooltip](#tooltip)
 - [New Utilities](#new-utilities)
@@ -216,9 +218,6 @@ import {Avatar} from '@workday/canvas-kit-react/avatar';
 <Avatar name="Green Arrow" variant="green" />
 ```
 
-No migration is required unless you rely on the previous color values for custom styling via the
-`cs` prop or `baseAvatarStencil` modifiers.
-
 ### Buttons
 
 **PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
@@ -268,6 +267,17 @@ import {DeleteButton} from '@workday/canvas-kit-react/button';
 - Card's border radius is now managed via the new `cornerShapeStencil` (see
   [New Utilities](#new-utilities)).
 
+### Expandable
+
+#### Visual Updates
+
+- `Expandable.Target` border radius changed from `shape.xxl` (24px, pill) to `shape.lg` (12px), now
+  managed via `cornerShapeStencil` (see [New Utilities](#new-utilities)).
+- Gap between `Expandable.Target` and `Expandable.Content` is now `gap.sm` (8px), set on the
+  `Expandable` container (previously handled entirely via `Expandable.Content`'s top padding).
+- `Expandable.Content` padding is now uniform `padding.xs` (8px) on all sides (previously
+  `padding.md` top / `padding.xs` sides and bottom).
+
 ### Indicators
 
 #### Banner
@@ -744,6 +754,21 @@ Run the Canvas Kit v16 codemod (`updateHyperlinkProps`) to migrate automatically
 - Container padding changed to `padding.md` (16px) including for mobile devices.
 - On mobile devices, the container padding remains `padding.md` (16px).
 
+### Table
+
+#### Visual Updates
+
+- `BaseTable` / `Table` outer border color updated from `system.legacy.color.border.strong` to
+  `system.legacy.color.border.default`.
+- `Table.Caption` divider (`borderBlockEnd`) updated from `system.legacy.color.border.strong` to
+  `system.legacy.color.border.default`.
+- Container corner radius is now **12px** (`shape.lg`, previously `shape.md` / 8px), managed via
+  `cornerShapeStencil` (see [New Utilities](#new-utilities)).
+- `Table.Header` (and `BaseTable.Header`) cell padding is now uniform `padding.md` (16px) on all
+  sides (previously asymmetric `padding.xs` vertically and `padding.md` horizontally).
+- Column header label text color is now `system.color.fg.strong` (previously inherited `fg.default`
+  from the table container).
+
 ### Toast
 
 **PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
@@ -802,8 +827,8 @@ export const myStencil = createStencil({
 });
 ```
 
-`Card`, `Menu` (`Menu.Card`, `Menu.List`, `Menu.Item`), and `MultiSelect` extend this stencil for
-their rounded corners.
+`Card`, `Expandable` (`Expandable.Target`), `Menu` (`Menu.Card`, `Menu.List`, `Menu.Item`), `MultiSelect`, and
+`Table` (`BaseTable`, `Table`) extend this stencil for their rounded corners.
 
 ## Deprecations
 

package/dist/mdx/react/avatar/Avatar.mdx

@@ -1,7 +1,6 @@
 import {
   ExampleCodeBlock,
   Specifications,
-  StorybookStatusIndicator,
   SymbolDoc,
 } from '@workday/canvas-kit-docs';
 
@@ -15,7 +14,7 @@ import Size from './examples/Size';
 import Variant from './examples/Variant';
 
 
-# Avatar <StorybookStatusIndicator type="promoted" />
+# Avatar
 
 ## Installation
 

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

@@ -2,7 +2,6 @@ import {
   ExampleCodeBlock,
   SymbolDoc,
   Specifications,
-  StorybookStatusIndicator,
 } from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Heading from './examples/Heading';
@@ -13,7 +12,7 @@ import AlwaysOpen from './examples/AlwaysOpen';
 import OnStateTransition from './examples/OnStateTransition';
 
 
-# Canvas Kit Side Panel <StorybookStatusIndicator type="new" />
+# Canvas Kit Side Panel
 
 `SidePanel` is a collapsible container that anchors to the left or right side of the screen. It uses
 the model pattern for state management and is fully accessible.

package/lib/Table.tsx

@@ -18,7 +18,7 @@ const TableBody = createComponent('tbody')({
 
 const tableRowStencil = createStencil({
   base: {
-    borderBlockEnd: `${px2rem(1)} solid ${system.color.border.strong}`,
+    borderBlockEnd: `${px2rem(1)} solid ${system.legacy.color.border.default}`,
   },
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "16.0.0-alpha.0486-next.0",
+  "version": "16.0.0-alpha.0489-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.0486-next.0",
-    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0486-next.0",
-    "@workday/canvas-kit-react": "^16.0.0-alpha.0486-next.0",
-    "@workday/canvas-kit-styling": "^16.0.0-alpha.0486-next.0",
+    "@workday/canvas-kit-labs-react": "^16.0.0-alpha.0489-next.0",
+    "@workday/canvas-kit-preview-react": "^16.0.0-alpha.0489-next.0",
+    "@workday/canvas-kit-react": "^16.0.0-alpha.0489-next.0",
+    "@workday/canvas-kit-styling": "^16.0.0-alpha.0489-next.0",
     "@workday/canvas-system-icons-web": "5.0.1",
     "@workday/canvas-tokens-web": "4.4.0-beta.7",
     "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "8be87645060c8ea1b56dc5bebceecc64fa33bfc2"
+  "gitHead": "7fd27af4a93c1a32acd105aefd72090a1d1b458a"
 }