@workday/canvas-kit-docs 11.0.0-alpha.643-next.0 → 11.0.0-alpha.656-next.0

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

@@ -6,12 +6,15 @@ any questions.
 
 - [Codemod](#codemod)
 - [Deprecations](#deprecations)
-  - [FormField Main](#form-field-main)
-  - [TextInput Preview](#text-input-preview)
-  - [TextArea Preview](#text-input-preview)
+  - [Form Field Main](#form-field-main)
+  - [Text Input Preview](#text-input-preview)
+  - [Text Area Preview](#text-input-preview)
+  - [Label Text](#label-text)
 - [Component Updates](#component-updates)
-	- [FormField Preview](#form-field-preview)
-	- [Count Badge](#count-badge)
+  - [Card](#card)
+  - [Count Badge](#count-badge)
+  - [Text](#text)
+  - [Form Field Preview](#form-field-preview)
 
 ## Codemod
 
@@ -80,7 +83,7 @@ We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to co
 in a future major release. This signals consumers to migrate to a more stable alternative before the
 deprecated code is removed.
 
-### FormField Main
+### Form Field Main
 
 **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
 
@@ -91,7 +94,7 @@ instead.
 
 ---
 
-### TextInput Preview
+### Text Input Preview
 
 **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
 
@@ -102,7 +105,7 @@ instead.
 
 ---
 
-### TextArea Preview
+### Text Area Preview
 
 **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
 
@@ -113,8 +116,28 @@ instead.
 
 ---
 
+### Label Text
+
+**PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
+
+We've deprecated `LabelText` from [Main](#main) in favor of our compound component `FormField.Label`
+in [Preview](#preview). Please use
+[`FormField.Label`](https://workday.github.io/canvas-kit/?path=//docs/preview-inputs-form-field--basic)
+instead.
+
+If you still want to use a `label` element outside of the context of a form, you can use `Text`
+instead.
+
+---
+
 ## Component Updates
 
+### Card
+
+`Card` and its subcomponents have been refactored to use our new styling utilities and tokens.
+`Card` no longer extends the `Box` component, however, it still supports Emotion `styled` and style
+props.
+
 ### Count Badge
 
 **PR:** [#2442](https://github.com/Workday/canvas-kit/pull/2442)
@@ -122,7 +145,16 @@ instead.
 `CountBadge` now uses `createComponent`, Canvas Tokens, and our new styling utilities. The component
 API has not been changed, and it should behave identically as it did in previous versions.
 
-### FormField Preview
+### Text
+
+**PR:** [#2455](https://github.com/Workday/canvas-kit/pull/2455)
+
+`Text` has been refactored to use our new styling utilities and tokens. It no longer extends the
+`Box` component, however, it still supports Emotion `styled` and style props. Type level components:
+`Title`, `Heading`, `BodyText` and `Subtext`, have not been changed since they extend the `Text`
+component. These changes do not affect the components API.
+
+### Form Field Preview
 
 **PR:** [#2472](https://github.com/Workday/canvas-kit/pull/2472)
 

package/dist/mdx/preview-react/loading-sparkles/LoadingSparkles.mdx

@@ -0,0 +1,33 @@
+import {SymbolDoc} from '@workday/canvas-kit-docs';
+import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
+
+import Basic from './examples/Basic';
+import RTL from './examples/RTL';
+
+
+# Canvas Kit Loading Sparkles
+
+`LoadingSparkles` is a loading animation that makes users aware an AI operation is in progress.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+### Basic Example
+
+`LoadingSparkles` is designed to work out-of-the-box, but you'll need to add `aria-live="polite"`
+and a descriptive `aria-label` for screen reader accesibility.
+
+<ExampleCodeBlock code={Basic} />
+
+### Right-to-Left (RTL)
+
+<ExampleCodeBlock code={RTL} />
+
+## Component API
+
+<SymbolDoc name="LoadingSparkles" fileName="/preview-react/" />

package/dist/mdx/preview-react/loading-sparkles/examples/Basic.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
+
+export default () => {
+  return <LoadingSparkles aria-live="polite" aria-label="Generating content" />;
+};

package/dist/mdx/preview-react/loading-sparkles/examples/RTL.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {LoadingSparkles} from '@workday/canvas-kit-preview-react/loading-sparkles';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <LoadingSparkles />
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/card/card.mdx

@@ -45,9 +45,9 @@ Here's an example of a `Card` with a increased `depth` of `2`.
 ### Padding
 
 Set the `padding` prop of the `Card` (again, supported via `Box`) to adjust its padding. Card has a
-default padding of `l`.
+default padding of `x8` (`4rem` or `32px`).
 
-Here's an example of a `Card` with a reduced padding of `xs`.
+Here's an example of a `Card` with a reduced padding of `x3` (`0.75rem` or `12px`).
 
 <ExampleCodeBlock code={Padding} />
 

package/dist/mdx/react/card/examples/Depth.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import {Card} from '@workday/canvas-kit-react/card';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const cardCustomDepth = createStyles({
+  boxShadow: system.depth[2],
+});
 
 export default () => {
   return (
-    <Card depth={2}>
+    <Card cs={cardCustomDepth}>
       <Card.Heading>Canvas Supreme</Card.Heading>
       <Card.Body>
         Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,

package/dist/mdx/react/card/examples/Padding.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import {Card} from '@workday/canvas-kit-react/card';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {space} from '../../../tokens';
+
+const cardCustomPadding = createStyles({
+  padding: system.space.x3,
+});
 
 export default () => {
   return (
-    <Card padding="xs">
+    <Card cs={cardCustomPadding}>
       <Card.Heading>Canvas Supreme</Card.Heading>
       <Card.Body>
         Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,

package/dist/mdx/react/text/LabelText.mdx

@@ -1,4 +1,5 @@
 import {SymbolDoc} from '@workday/canvas-kit-docs';
+import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
 
 import Basic from './examples/LabelText/Basic';
 import Cursor from './examples/LabelText/Cursor';
@@ -7,6 +8,14 @@ import Disabled from './examples/LabelText/Disabled';
 
 # Canvas Kit Label Text
 
+<StatusIndicator variant="red">
+  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
+</StatusIndicator>
+
+`LabelText` has been deprecated and will be removed in a future major version. Please use
+[FormField.Label](https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-form-field--basic)
+from Preview instead.
+
 `LabelText` provides a simple way to render a label with built-in support for Canvas type tokens.
 
 ## Installation
@@ -19,7 +28,8 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-`LabelText` is built on top of [`Text`](/components/text/text/) and renders a `<label>` element.
+`LabelText` renders a `<label>` element. This component is deprecated in favor of `FormField.Label`
+since it should be used in tandem with form elements.
 
 <ExampleCodeBlock code={Basic} />
 

package/dist/mdx/react/text/examples/LabelText/Disabled.tsx

@@ -1,4 +1,24 @@
 import React from 'react';
 import {LabelText} from '@workday/canvas-kit-react/text';
 
-export default () => <LabelText disabled>Disabled Label</LabelText>;
+import {createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+
+const inverseBackground = createStyles({
+  backgroundColor: base.blueberry400,
+  padding: system.space.x4,
+  marginTop: system.space.x4,
+});
+
+export default () => {
+  return (
+    <div>
+      <LabelText disabled>Disabled Label</LabelText>
+      <div className={inverseBackground}>
+        <LabelText disabled variant="inverse">
+          Disabled Inverse Label
+        </LabelText>
+      </div>
+    </div>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.0-alpha.643-next.0",
+  "version": "11.0.0-alpha.656-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,12 +44,12 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.643-next.0",
-    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.643-next.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.643-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.643-next.0",
+    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.656-next.0",
+    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.656-next.0",
+    "@workday/canvas-kit-react": "^11.0.0-alpha.656-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.656-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^1.0.0",
+    "@workday/canvas-tokens-web": "^1.0.2",
     "markdown-to-jsx": "^6.10.3",
     "ts-node": "^10.9.1"
   },
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "33b74d55b0e8f051cb26865f7ba8face6856a752"
+  "gitHead": "571f72183c962ed851027dcf5d5a93c4111bde68"
 }