@workday/canvas-kit-docs 14.0.0-alpha.1251-next.0 → 14.0.0-alpha.1252-next.0

package/dist/es6/lib/docs.js

@@ -193551,9 +193551,204 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       ],
       "members": [],
       "returnType": {
-        "kind": "symbol",
-        "name": "CompatibleCSSObject",
-        "value": "CompatibleCSSObject"
+        "kind": "union",
+        "value": [
+          {
+            "kind": "object",
+            "properties": [
+              {
+                "kind": "property",
+                "name": "borderColor",
+                "required": false,
+                "type": {
+                  "kind": "primitive",
+                  "value": "undefined"
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "transition",
+                "required": false,
+                "type": {
+                  "kind": "primitive",
+                  "value": "undefined"
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "boxShadow",
+                "required": false,
+                "type": {
+                  "kind": "primitive",
+                  "value": "undefined"
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "&:hover, &:disabled, &.hover, &.disabled",
+                "required": false,
+                "type": {
+                  "kind": "primitive",
+                  "value": "undefined"
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "&:focus-visible:not([disabled]), &.focus:not([disabled])",
+                "required": false,
+                "type": {
+                  "kind": "primitive",
+                  "value": "undefined"
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              }
+            ]
+          },
+          {
+            "kind": "object",
+            "properties": [
+              {
+                "kind": "property",
+                "name": "borderColor",
+                "required": true,
+                "type": {
+                  "kind": "union",
+                  "value": [
+                    {
+                      "kind": "primitive",
+                      "value": "string"
+                    },
+                    {
+                      "kind": "primitive",
+                      "value": "undefined"
+                    }
+                  ]
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "transition",
+                "required": true,
+                "type": {
+                  "kind": "primitive",
+                  "value": "string"
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "boxShadow",
+                "required": true,
+                "type": {
+                  "kind": "primitive",
+                  "value": "string"
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "&:hover, &:disabled, &.hover, &.disabled",
+                "required": true,
+                "type": {
+                  "kind": "object",
+                  "properties": [
+                    {
+                      "kind": "property",
+                      "name": "borderColor",
+                      "required": true,
+                      "type": {
+                        "kind": "union",
+                        "value": [
+                          {
+                            "kind": "primitive",
+                            "value": "string"
+                          },
+                          {
+                            "kind": "primitive",
+                            "value": "undefined"
+                          }
+                        ]
+                      },
+                      "description": "",
+                      "tags": {},
+                      "declarations": []
+                    }
+                  ]
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              },
+              {
+                "kind": "property",
+                "name": "&:focus-visible:not([disabled]), &.focus:not([disabled])",
+                "required": true,
+                "type": {
+                  "kind": "object",
+                  "properties": [
+                    {
+                      "kind": "property",
+                      "name": "borderColor",
+                      "required": true,
+                      "type": {
+                        "kind": "union",
+                        "value": [
+                          {
+                            "kind": "primitive",
+                            "value": "string"
+                          },
+                          {
+                            "kind": "primitive",
+                            "value": "undefined"
+                          }
+                        ]
+                      },
+                      "description": "",
+                      "tags": {},
+                      "declarations": []
+                    },
+                    {
+                      "kind": "property",
+                      "name": "boxShadow",
+                      "required": true,
+                      "type": {
+                        "kind": "primitive",
+                        "value": "string"
+                      },
+                      "description": "",
+                      "tags": {},
+                      "declarations": []
+                    }
+                  ]
+                },
+                "description": "",
+                "tags": {},
+                "declarations": []
+              }
+            ]
+          }
+        ]
       }
     }
   },
@@ -193706,24 +193901,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             }
           ],
           "tags": {}
-        },
-        {
-          "kind": "parameter",
-          "name": "theme",
-          "type": {
-            "kind": "primitive",
-            "value": "any"
-          },
-          "required": false,
-          "rest": false,
-          "description": "",
-          "declarations": [
-            {
-              "name": "theme",
-              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/styles/focusRing.ts"
-            }
-          ],
-          "tags": {}
         }
       ],
       "members": [],

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

@@ -4,6 +4,13 @@ This guide contains an overview of the changes in Canvas Kit v14. Please
 [reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
 any questions.
 
+## Why You Should Upgrade
+
+v14.0 Introduces Workday's new brand direction which includes a new color palette and with it, some
+styling updates to our components.
+
+> **Note:** v14.0 requires an upgrade to the `@workday/canvas-tokens-web` package to `@v3.0.0`.
+
 ## Table of contents
 
 - [Codemod](#codemod)
@@ -13,13 +20,13 @@ any questions.
 - [Theming](#theming)
   - [Canvas Provider](#canvas-provider-)
 - [Component Updates](#component-updates)
-  - [Avatar in Preview](#avatar-in-preview)
-  - [Branding Changes](#branding-changes)
+  - [Avatar Preview](#avatar-preview)
+  - [Branding Changes](#branding-changes-)
   - [Buttons](#buttons)
-  - [Card](#card)
+  - [Card](#card-)
   - [Count Badge](#count-badge)
   - [Expandable](#expandable)
-  - [Hyperlink & ExternalHyperlink](#hyperlink-and-externalhyperlink)
+  - [Hyperlink and ExternalHyperlink](#hyperlink-and-external-hyperlink)
   - [Loading Dots](#loading-dots)
   - [Pill](#pill)
   - [SearchForm](#search-form)
@@ -36,7 +43,7 @@ any questions.
   - [Deprecated Buttons](#deprecated-buttons)
   - [Input Provider](#input-provider)
   - [Menu (preview)](#menu-preview)
-  - [readyOnlyPillStencil and removeablePillStencil](readyOnlyPillStencil-and-removeablePillStencil)
+  - [readyOnlyPillStencil and removeablePillStencil](#readyOnlyPillStencil-and-removeablePillStencil)
   - [Text Area](#text-area)
   - [Text Input](#text-input)
 - [Troubleshooting](#troubleshooting)
@@ -275,7 +282,7 @@ specificity.
 
 ## Component Updates
 
-### Avatar in Preview
+### Avatar (Preview)
 
 **PR:** [#3430](https://github.com/Workday/canvas-kit/pull/3430)
 
@@ -329,13 +336,16 @@ import { Avatar } from '@workday/canvas-kit-preview-react/avatar';
 ### Branding Changes 💅
 
 Several components have been refactored to reflect our new brand direction. Most of these changes
-revolve around the use of our new brand colors.
+revolve around the use of our new brand colors. For a better guide on what has changed in our v3.0.0
+tokens, please view the Tokens v3.0.0
+[Upgrade Guide](https://workday.github.io/canvas-tokens/?path=/docs/guides-upgrade-guides-v3-overview--docs).
+
+> **Note:** If you want a visual diff of the changes, please view the [Visual Changes](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v14-0-visual-changes--docs) guide.
 
 The following components have been updated:
 
-- `Breadcrumbs`
-  - [#3270](https://github.com/Workday/canvas-kit/pull/3270)
-  - [#3447](https://github.com/Workday/canvas-kit/pull/3447)
+- `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270),
+  [#3447](https://github.com/Workday/canvas-kit/pull/3447)
 - `Buttons` [#3394](https://github.com/Workday/canvas-kit/pull/3394)
 - `ColorPicker` (Main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
 - `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
@@ -357,6 +367,14 @@ The `TertiaryButton` component no longer supports the `isThemable` prop. To cust
 of `TertiaryButton`, use the `cs` prop for custom styles or the `colors` prop for palette-based
 color overrides.
 
+**After in v14**
+
+```tsx
+<TertiaryButton cs={{[buttonStencil.vars.background: 'red']}}>
+  Click Me
+</TertiaryButton>
+```
+
 The shape of `TertiaryButton` has changed to have rounded corners, aligning with other buttons and
 our new brand direction.
 
@@ -372,10 +390,10 @@ visual hierarchy and more flexible styling options. The following changes have b
 
 #### Default Card No Longer Has Shadow
 
-The default `Card` variant no longer includes a shadow, creating a cleaner, flatter appearance that
-aligns with our new brand's emphasis on simplicity and clarity. This is a **visual breaking change**
-that may affect your application's visual hierarchy. If your design requires shadow you can added
-through `cs` prop.
+The default `Card` variant no longer includes a box shadow, creating a cleaner, flatter appearance
+that aligns with our new brand's emphasis on simplicity and clarity. This is a **visual breaking
+change** that may affect your application's visual hierarchy. If your design requires a shadow you
+can add it through `cs` prop.
 
 **Before in v13**
 
@@ -386,13 +404,15 @@ through `cs` prop.
 </Card>
 ```
 
-**After in v14**
+**After in v14** Only do this if you need a shadow. Otherwise, adhere to the default styling.
 
 ```tsx
+import {system} from '@workday/canvas-tokens-web';
+
 <Card cs={{boxShadow: system.depth[1]}}>
   <Card.Heading>Card Title</Card.Heading>
   <Card.Body>Card content with shadow</Card.Body>
-</Card>
+</Card>;
 ```
 
 #### New Card Variants
@@ -407,7 +427,7 @@ We've added two new variants to provide more styling flexibility:
 The `variant` prop is optional - if no variant is specified, the card will use the default styling.
 
 ```tsx
-// Default card (no variant prop needed)
+// Default card (no variant prop needed) with a border and no box shadow
 <Card>
   <Card.Heading>Default Card</Card.Heading>
   <Card.Body>Default styling with borders, no shadow</Card.Body>
@@ -428,11 +448,11 @@ The `variant` prop is optional - if no variant is specified, the card will use t
 
 #### Gap Instead of Margins
 
-We've replaced the individual margins on `Card.Heading` and `Card.Body` with a `gap` prop on the
-card container. The card now uses `display: flex` with `flex-direction: column` by default, and the
-`gap` prop provides consistent spacing between all direct children. This provides more consistent
-spacing and better control over the layout. This is a **visual breaking change** that may affect the
-spacing between card elements.
+We've replaced the individual margins on `Card.Heading` and `Card.Body` with `gap`. The card now
+uses `display: flex` with `flex-direction: column` by default, and the `gap` prop provides
+consistent spacing between all direct children. This provides more consistent spacing and better
+control over the layout. This is a **visual breaking change** that may affect the spacing between
+card elements.
 
 **Before in v13**
 
@@ -465,7 +485,7 @@ emphasis for the badge.
 
 ```tsx
 <CountBadge /> // Default count badge with high emphasis
-<CountBadge variant="inverse" /> // Inverse default count badge
+<CountBadge variant="inverse" /> // Inverse default count badge to use on dark backgrounds
 // new
 <CountBadge emphasis="low" /> // Default count badge with low emphasis
 <CountBadge variant="inverse" emphasis="low" /> // Inverse count badge with low emphasis
@@ -485,8 +505,6 @@ emphasis for the badge.
 
 > 🤖 The codemod will handle the change of `altText` to `name` on `Expandable.Avatar`.
 
-These changes are only **visual** and should not affect the functionality of the component.
-
 ### Hyperlink and External Hyperlink
 
 **PR:** [#3390](https://github.com/Workday/canvas-kit/pull/3390)
@@ -494,7 +512,7 @@ These changes are only **visual** and should not affect the functionality of the
 - `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standaloneInverse` variant. This
   removes the underline text decoration for use outside the context of body text.
 
-**HyperLink and ExternalHyperlink in v14**
+**In v14**
 
 ```tsx
 <Hyperlink variant="standalone" href="#hyperlink">Hyperlink</Hyperlink>
@@ -510,16 +528,19 @@ These changes are only **visual** and should not affect the functionality of the
 
 **PR:** [#3393](https://github.com/Workday/canvas-kit/pull/3393)
 
-- We've updated the colors to match brand refresh. The default color changes from
+- We've updated the colors to match our brand refresh. The default color changes from
   `system.color.bg.alt.strong` to `system.color.bg.muted.strong`.
 - `LoadingDots` now has a `inverse` variant. Use this variant when the Loading Dots are on a dark
   background or image.
 
+**After in v14**
+
 ```tsx
+// Use inverse variant when the Loading Dots are on a dark background or image
 <LoadingDots variant="inverse" />
 ```
 
-### Pill
+### Pill (Preview)
 
 **PRs:** [#3430](https://github.com/Workday/canvas-kit/pull/3430),
 [#3446](https://github.com/Workday/canvas-kit/pull/3446)

package/dist/mdx/14.0-VISUAL-CHANGES.mdx

@@ -0,0 +1,44 @@
+import {Graphic} from '@workday/canvas-kit-react/icon';
+
+import avatarImage from './images/v14-avatar.png';
+import breadcrumbsImage from './images/v14-breadcrumbs.png';
+import cardImage from './images/v14-card.png';
+import checkboxImage from './images/v14-checkbox.png';
+import countBadgeImage from './images/v14-count-badge.png';
+import expandableImage from './images/v14-expandable.png';
+import infoHighlightImage from './images/v14-info-highlight.png';
+import loadingDotsImage from './images/v14-loading-dots.png';
+import pillImage from './images/v14-pill.png';
+import primaryButtonImage from './images/v14-primary-button.png';
+import radioImage from './images/v14-radio.png';
+import secondaryButtonImage from './images/v14-secondary-button.png';
+import selectImage from './images/v14-select.png';
+import statusIndicatorImage from './images/v14-status-indicator-preview.png';
+import tabsImage from './images/v14-tabs.png';
+import tertiaryButtonImage from './images/v14-tertiary-button.png';
+import textAreaImage from './images/v14-text-area.png';
+import textInputImage from './images/v14-text-input.png';
+
+
+# Canvas Kit 14.0 Visual Changes
+
+This guide contains an overview of the changes in Canvas Kit v14. If you have any issues, feel free to report them [here](https://github.com/Workday/canvas-kit/issues). For a mode detailed overview of the changes in v14, please view our [v14 Upgrade Guide](https://workday.github.io/canvas-kit/?path=/docs/guides-upgrade-guides-v14-0-overview--docs).
+
+<Graphic src={{url: avatarImage}} />
+<Graphic src={{url: breadcrumbsImage}} />
+<Graphic src={{url: cardImage}} />
+<Graphic src={{url: checkboxImage}} />
+<Graphic src={{url: countBadgeImage}} />
+<Graphic src={{url: expandableImage}} />
+<Graphic src={{url: infoHighlightImage}} />
+<Graphic src={{url: loadingDotsImage}} />
+<Graphic src={{url: pillImage}} />
+<Graphic src={{url: primaryButtonImage}} />
+<Graphic src={{url: radioImage}} />
+<Graphic src={{url: secondaryButtonImage}} />
+<Graphic src={{url: selectImage}} />
+<Graphic src={{url: statusIndicatorImage}} />
+<Graphic src={{url: tabsImage}} />
+<Graphic src={{url: tertiaryButtonImage}} />
+<Graphic src={{url: textAreaImage}} />
+<Graphic src={{url: textInputImage}} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1251-next.0",
+  "version": "14.0.0-alpha.1252-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": "^14.0.0-alpha.1251-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1251-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1251-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1251-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1252-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1252-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1252-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1252-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
     "@workday/canvas-tokens-web": "3.0.0-alpha.12",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "74f6a6aa07c8b1689b37208aed829b22b162acf0"
+  "gitHead": "80e4dc6c529068c00bce5b14c625ea69a6ee63c2"
 }