@workday/canvas-kit-docs 6.2.1 → 6.3.0-next.1

package/dist/commonjs/lib/specs.js

@@ -6013,7 +6013,7 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when the \"Delete\" button is hovered",
+                "name": "when the \"Some Text\" text is hovered",
                 "children": [
                   {
                     "type": "it",

package/dist/es6/lib/specs.js

@@ -6013,7 +6013,7 @@ module.exports = {specifications: [
               },
               {
                 "type": "describe",
-                "name": "when the \"Delete\" button is hovered",
+                "name": "when the \"Some Text\" text is hovered",
                 "children": [
                   {
                     "type": "it",

package/dist/mdx/6.0-MIGRATION-GUIDE.mdx

@@ -216,8 +216,11 @@ const CustomGlobalHeader = props => {
 };
 ```
 
-You may continue to use this component exactly as you did in v5, but note that we plan to hard-deprecate it in Canvas Kit v7.
-If you would like to migrate away from this deprecated component now, you can reference [this example](https://workday.github.io/canvas-kit/?path=/story/examples-global-header-react--basic) instead.
+You may continue to use this component exactly as you did in v5, but note that we plan to
+hard-deprecate it in Canvas Kit v7. If you would like to migrate away from this deprecated component
+now, you can reference
+[this example](https://workday.github.io/canvas-kit/?path=/story/examples-global-header-react--basic)
+instead.
 
 ### Page Header
 
@@ -270,8 +273,11 @@ export const CustomPageHeader = (props: CustomPageHeaderProps) => {
 };
 ```
 
-You may continue to use this component exactly as you did in v5, but note that we plan to hard-deprecate it in Canvas Kit v7.
-If you would like to migrate away from this deprecated component now, you can reference [this example](https://workday.github.io/canvas-kit/?path=/story/examples-page-header-react--basic) instead.
+You may continue to use this component exactly as you did in v5, but note that we plan to
+hard-deprecate it in Canvas Kit v7. If you would like to migrate away from this deprecated component
+now, you can reference
+[this example](https://workday.github.io/canvas-kit/?path=/story/examples-page-header-react--basic)
+instead.
 
 ## Component Migrations
 
@@ -380,7 +386,8 @@ Also for reference, these are our viewport ranges:
 `max-width: 575px`. They now use `max-width: 767.5px` – the upper limit of the `small` range. This
 will have two effects for this component:
 
-- Container padding will decrease from `s` (`16px`) to `xxs` (`8px`) on all viewports less than `768px` wide
+- Container padding will decrease from `s` (`16px`) to `xxs` (`8px`) on all viewports less than
+  `768px` wide
   - This was previously happening only on viewports less than `576px` wide
 - Button order will be reversed on all viewports less than `768px` wide
   - This was previously happening only on viewports less than `576px` wide

package/dist/mdx/TESTING.mdx

@@ -29,7 +29,7 @@ do. A "test" simply has to pass. A specification requires meaning.
 test('SomeComponent should render correctly', async () => {
   const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
 
-  const component = await getByTestId('test');
+  const component = getByTestId('test');
 
   expect(component.textContent).toEqual('foo');
   expect(component.getAttribute('aria-label')).toEqual('foo');
@@ -53,14 +53,14 @@ describe('SomeComponent', () => {
   it('should render the "text" prop as the text', async () => {
     const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
 
-    const component = await getByTestId('test');
+    const component = getByTestId('test');
     expect(component).toHaveTextContent('foo');
   });
 
   it('should render the "text" prop as an aria-label for accessibility', async () => {
     const {getByTestId} = render(<SomeComponent data-testid="test" text="foo" />);
 
-    const component = await getByTestId('test');
+    const component = getByTestId('test');
     expect(component).toHaveAttribute('aria-label', 'foo');
   });
 });
@@ -124,8 +124,8 @@ const {getByTestId} = render(
   </SomeComponent>
 );
 
-const component = await getByTestId('container');
-const child = await getByTestId('test');
+const component = getByTestId('container');
+const child = getByTestId('test');
 
 expect(component).toContainElement(child);
 ```
@@ -136,6 +136,30 @@ specification is met). Also this example will have a more useful failure message
 `.toContainElement` has the context that it is expecting an element in another element vs a match of
 a string.
 
+### Snapshot tests
+
+Canvas Kit does not contain DOM-based snapshot tests and uses [Visual Tests](#visual-tests) instead.
+DOM snapshots failures are often difficult to parse. Humans tend to be better at noticing and
+discerning visual changes than changes to a DOM structure.
+
+If your project uses snapshot tests and Canvas Kit, chances are you'll run into issues with changing
+ids and other ARIA attributes. Canvas Kit generates unique ids that are different every time the
+page loads. This can be a problem with snapshot tests. To fix this, you'll need to add special code
+to your test bootstrap file. For example:
+
+```ts
+import {setUniqueSeed, resetUniqueIdCount} from '@workday/canvas-kit-react/common';
+
+beforeEach(() => {
+  setUniqueSeed('a'); // set a static seed
+  resetUniqueIdCount(); // reset the id counter before every test
+});
+```
+
+This will ensure snapshot tests have stable ids for each snapshot. It is still possible to get ids
+changing if you add an additional component that uses id generation - subsequent ids will be
+different, but this will prevent snapshot tests that don't have any changes from showing diffs.
+
 ## Functional tests
 
 Canvas Kit uses [Cypress][https://cypress.io] for browser-based behavior testing (additional info:

package/dist/mdx/changelog.stories.mdx

@@ -1,5 +1,4 @@
 import Changelog from '../../../CHANGELOG.md';
 import Markdown from '../../../utils/storybook/Markdown.tsx';
 
-
 <Markdown content={Changelog} />

package/dist/mdx/labs-react/layout/Stack.mdx

@@ -170,8 +170,8 @@ wrapping children in `Stack.Item`s. A `Stack.Item` is a `Box` with some preset s
 overridden if needed.
 
 In the example below, we wanted to keep our `li` elements as direct children of the `ul` stack. So
-we're wrapping each of the links with `Stack.Item`s, casting them as `li`s and applying custom styles to each.
-This would not be possible with `shouldWrapChildren`.
+we're wrapping each of the links with `Stack.Item`s, casting them as `li`s and applying custom
+styles to each. This would not be possible with `shouldWrapChildren`.
 
 <ExampleCodeBlock code={StackItems} />
 

package/dist/mdx/labs-react/search-form/SearchForm.mdx

@@ -31,8 +31,7 @@ based on search input.
 
 ### Grow
 
-If you'd like `SearchForm` to grow to the width of its container, set the `grow` prop to
-`true`.
+If you'd like `SearchForm` to grow to the width of its container, set the `grow` prop to `true`.
 
 <ExampleCodeBlock code={Grow} />
 
@@ -51,7 +50,6 @@ Below is a table of attributes that can be supplied to `SearchForm`:
 
 <ArgsTable of={ThemeAttributes} />
 
-
 ### RTL (Right-To-Left)
 
 `SearchForm` provides bidirectional support out of the box. You shouldn't need to provide any

package/dist/mdx/react/_examples/GlobalHeader.mdx

@@ -4,6 +4,9 @@ import Basic from './examples/GlobalHeader';
 # Canvas Kit Examples
 
 ## GlobalHeader
-Developers building internal Workday applications will likely not need to create this component. However, if you're building components to be used outside of Workday, this is a helpful reference for building a global navigation header that looks like our internal `GlobalHeader`.
+
+Developers building internal Workday applications will likely not need to create this component.
+However, if you're building components to be used outside of Workday, this is a helpful reference
+for building a global navigation header that looks like our internal `GlobalHeader`.
 
 <ExampleCodeBlock code={Basic} />

package/dist/mdx/react/_examples/PageHeader.mdx

@@ -1,4 +1,4 @@
-import {Basic} from "./examples/PageHeader";
+import Basic from './examples/PageHeader';
 
 
 # Canvas Kit Examples

package/dist/mdx/react/button/button/Button.mdx

@@ -66,8 +66,8 @@ for every size and can be positioned to the `left` or `right` with the `iconPosi
 
 <ExampleCodeBlock code={Secondary} />
 
-Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button on
-a dark or colorful background such as `blueberry400`.
+Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button
+on a dark or colorful background such as `blueberry400`.
 
 <ExampleCodeBlock code={SecondaryInverse} />
 
@@ -84,17 +84,16 @@ the user may not often be looking to do. Tertiary Buttons have lower prominence
 not visible until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View
 More”, “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
 
-Tertiary Buttons have three sizes: `extraSmall`, `small`, and `medium`. Icons are supported
-for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
+Tertiary Buttons have three sizes: `extraSmall`, `small`, and `medium`. Icons are supported for
+every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
 
 <ExampleCodeBlock code={Tertiary} />
 
-Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button on
-a dark or colorful background such as `blueberry400`.
+Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button
+on a dark or colorful background such as `blueberry400`.
 
 <ExampleCodeBlock code={TertiaryInverse} />
 
-
 #### Props
 
 Undocumented props are spread to the underlying `<button>` element.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.2.1",
+  "version": "6.3.0-next.1+698811ca",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -50,7 +50,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^6.2.1"
+    "@workday/canvas-kit-react": "^6.3.0-next.1+698811ca"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -58,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "5182205f93321ee45e30db5458ae7e4a9775d7d3"
+  "gitHead": "698811ca5c25f3cb4282c0f30cef4d196590c659"
 }