@workday/canvas-kit-docs 14.0.0-alpha.1180-next.0 → 14.0.0-alpha.1185-next.0

package/dist/es6/lib/docs.js

@@ -252794,6 +252794,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
             "value": "`40ms`"
           }
         },
+        {
+          "kind": "property",
+          "name": "variant",
+          "required": false,
+          "type": {
+            "kind": "string",
+            "value": "inverse"
+          },
+          "description": "",
+          "declarations": [
+            {
+              "name": "variant",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/loading-dots/lib/LoadingDots.tsx"
+            }
+          ],
+          "tags": {}
+        },
         {
           "kind": "property",
           "name": "cs",

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

@@ -9,10 +9,11 @@ any questions.
 - [Codemod](#codemod)
   - [Instructions](#instructions)
 - [Component Updates](#component-updates)
-  - [Styling Changes](#styling-changes)
+  - [Branding Changes](#branding-changes)
   - [Card](#card)
   - [Expandable](#expandable)
   - [Hyperlink & ExternalHyperlink](#hyperlink-and-externalhyperlink)
+  - [Loading Dots](#loading-dots)
   - [SearchForm](#search-form)
 - [Removals](#removals)
   - [Menu (preview)](#menu-preview)
@@ -85,19 +86,16 @@ yarn remove @workday/canvas-kit-codemod
 
 ## Component Updates
 
-### Styling Changes 💅
+### Branding Changes 💅
 
-Several components have been refactored to use our Canvas tokens and styling API. The React
-interface has not changed, but Canvas Tokens are now used for dynamic properties.
-
-> **Note:** These components also support our cs prop for styling. Learn more about styling with cs
-> in our documentation.
+Several components have been refactored to reflect our new brand direction. Most of these changes revolve around the use of our new bran colors.
 
 The following components have been updated:
 
 - `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270)
-- `ColorPicker` (main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
+- `ColorPicker` (Main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
 - `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
+- `LoadingDots` (Main) [#3393](https://github.com/Workday/canvas-kit/pull/3393)
 - `Pagination` (Preview) [#3300](https://github.com/Workday/canvas-kit/pull/3300)
 - `SearchForm` (Labs) [#3303](https://github.com/Workday/canvas-kit/pull/3303)
 - `SegmentedControl` (Main) [#3278](https://github.com/Workday/canvas-kit/pull/3278)
@@ -220,6 +218,17 @@ These changes are only **visual** and should not affect the functionality of the
 
 > **Note:** Only use the `standalone` or `standalone-inverse` variant in cases where the `<HyperLink>` and `<ExternalHyperlink>` are used outside the context of body text.
 
+### Loading Dots
+
+**PR:** [#3393](https://github.com/Workday/canvas-kit/pull/3393)
+
+- We've updated the colors to match 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.
+
+```tsx
+<LoadingDots variant="inverse" />
+```
+
 ### Search Form 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)

package/dist/mdx/react/loading-dots/LoadingDots.mdx

@@ -4,6 +4,7 @@ import RTL from './examples/RTL';
 import Accessible from './examples/Accessible';
 import CustomShape from './examples/CustomShape';
 import CustomColorAndAnimation from './examples/CustomColorAndAnimation';
+import Inverse from './examples/Inverse';
 
 # Canvas Kit Loading Dots
 
@@ -22,8 +23,16 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
+Use Loading Dots to identify when a specific area of the page is loading (i.e. the content within a card).
+
 <ExampleCodeBlock code={Basic} />
 
+### Inverse Variant
+
+Use the `variant="inverse"` prop when the loading dots are on a dark background or image.
+
+<ExampleCodeBlock code={Inverse} />
+
 ### Right-to-Left (RTL)
 
 <ExampleCodeBlock code={RTL} />
@@ -39,11 +48,11 @@ yarn add @workday/canvas-kit-react
 ### Custom Styles
 
 Loading Dots supports custom styling via the `cs` prop. For more information, check our
-["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
+["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
 
 Custom styling is also supported through the [Loading Dots documented props below](#props).
 
-### Adding screen reader support to loading animations
+### Accessibility
 
 Sometimes, letting users know when content has finished loading is just as important as asking users
 to "please wait" while content is loading. The disappearance of an animation is information that

package/dist/mdx/react/loading-dots/examples/Accessible.tsx

@@ -40,7 +40,12 @@ export default () => {
       <SecondaryButton onClick={handleLoad}>Start</SecondaryButton>
       <AriaLiveRegion aria-label="Loading">
         {loadingState === 'loading' && (
-          <LoadingDots cs={styleOverrides.loadingStyles} role="img" aria-label="Please wait..." />
+          <LoadingDots
+            cs={styleOverrides.loadingStyles}
+            role="img"
+            variant="inverse"
+            aria-label="Please wait..."
+          />
         )}
         {loadingState === 'success' && <AccessibleHide>Complete.</AccessibleHide>}
       </AriaLiveRegion>

package/dist/mdx/react/loading-dots/examples/CustomShape.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import {LoadingDots, loadingDotsStencil} from '@workday/canvas-kit-react/loading-dots';
+import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
 import {system} from '@workday/canvas-tokens-web';
 import {createStyles, createStencil} from '@workday/canvas-kit-styling';
 
@@ -13,20 +12,19 @@ const styleOverrides = {
 const loadingStencil = createStencil({
   base: {
     borderRadius: system.shape.round,
-    backgroundColor: system.color.bg.overlay,
+    backgroundColor: system.color.bg.contrast.strong,
     height: 80,
     width: 80,
     alignItems: 'center',
     justifyContent: 'center',
     display: 'flex',
-    [loadingDotsStencil.vars.loadingDotColor]: system.color.icon.inverse,
   },
 });
 
 export default () => {
   return (
     <div className={styleOverrides.parentContainer}>
-      <LoadingDots cs={loadingStencil()} />
+      <LoadingDots variant="inverse" cs={loadingStencil()} />
     </div>
   );
 };

package/dist/mdx/react/loading-dots/examples/Inverse.tsx

@@ -0,0 +1,41 @@
+import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';
+import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+import {Graphic} from '@workday/canvas-kit-react/icon';
+
+const loadingStencil = createStencil({
+  base: {
+    background: system.color.bg.overlay,
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '100%',
+    height: '100%',
+  },
+});
+
+const containerStyles = createStyles({
+  position: 'relative',
+  width: px2rem(200),
+  height: px2rem(200),
+});
+
+export default () => {
+  return (
+    <div className={containerStyles}>
+      <LoadingDots variant="inverse" cs={loadingStencil()} />
+      <Graphic
+        alt="A magnifying glass"
+        width={200}
+        src={{
+          url: 'https://picsum.photos/200',
+        }}
+        srcset="https://picsum.photos/200 200w, https://picsum.photos/200 200w, https://picsum.photos/800 800w, https://picsum.photos/1200 1200w"
+      />
+    </div>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "14.0.0-alpha.1180-next.0",
+  "version": "14.0.0-alpha.1185-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,12 +45,12 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1180-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1180-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1180-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1180-next.0",
+    "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1185-next.0",
+    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1185-next.0",
+    "@workday/canvas-kit-react": "^14.0.0-alpha.1185-next.0",
+    "@workday/canvas-kit-styling": "^14.0.0-alpha.1185-next.0",
     "@workday/canvas-system-icons-web": "^3.0.35",
-    "@workday/canvas-tokens-web": "3.0.0-alpha.9",
+    "@workday/canvas-tokens-web": "3.0.0-alpha.10",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "5993dbdcabeebd9877c0abc60d63a29abd3129fd"
+  "gitHead": "9e540576d16adbd28a834f86cfcc6d327105db67"
 }