@workday/canvas-kit-docs 6.3.1 → 7.0.0-alpha.0-next.1

package/dist/commonjs/lib/specs.js

@@ -41,6 +41,62 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Banner.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Banner",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Error] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Sticky] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Breadcrumbs.spec.ts",

package/dist/es6/lib/specs.js

@@ -41,6 +41,62 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Banner.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Banner",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Error] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Components/Indicators/Banner/React, Sticky] story is rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should pass axe checks"
+              },
+              {
+                "type": "it",
+                "name": "should have an element with a role of \"button\""
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-labelledby\" that matches the action"
+              },
+              {
+                "type": "it",
+                "name": "should have an \"aria-describedby\" that matches the label"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Breadcrumbs.spec.ts",

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/7.0-MIGRATION-GUIDE.mdx

@@ -0,0 +1,61 @@
+# Canvas Kit 7.0 Migration Guide
+
+Below are the breaking changes made in Canvas Kit v7. Please
+[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
+any questions about the update.
+
+- [Codemod](#codemod)
+- [ActionBar Component Updates](#actionbar-component-updates)
+- [Status Indicator Width](#status-indicator-width)
+
+## Codemod
+
+Please use our [codemod package](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
+to automatically update your code to work with a majority of the breaking changes in the migration
+from Canvas Kit v6 to v7:
+
+```sh
+> npx @workday/canvas-kit-codemod v7 [path]
+```
+
+> Note: This codemod only works on `.js`, `.jsx`, `.ts`, and `.tsx` extensions. You may need to make
+> some manual changes in other file types (`.json`, `.mdx`, `.md`, etc.).
+
+> Note: You may need to run your linter after executing the codemod, as it's resulting formatting
+> (spacing, quotes, etc.) may not match your project's styling.
+
+**Breaking changes accounted for by this codemod will be marked with a 🤖.**
+
+**Please verify all changes made by the codemod. As a safety precaution, we recommend committing the
+changes from the codemod as a single isolated commit (separate from other changes) so you can
+rollback more easily if necessary.**
+
+[Let us know](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you
+encounter any issues or use cases that we've missed. The `@workday/canvas-kit-codemod` package will
+help us maintain additional codemod transforms to make future migrations easier.
+
+## ActionBar Component Updates
+
+We've refactored our ActionBar components to simplify logic.
+
+PR: https://github.com/Workday/canvas-kit/pull/1396
+
+**Changes:**
+
+- Component has been converted to compound component.
+- `fixed` prop has been removed from component.
+- Now ActionBar uses `position` prop to set container position instead `fixed` prop.
+- Fixed position has been set as default if there is not passed `position` prop.
+
+## Status Indicator Width
+
+Status Indicators currently truncate when they reach their max width of `150px`. After receiving
+requests to increase this, we have upped it by 25% to `200px`.
+
+We've also added a prop (`maxWidth`) to configure this if you need to. While this increases
+flexibility, please keep in mind that status text should be short, direct, and preferably a single
+word.
+
+```tsx
+<StatusIndicator label="Slightly Longer Status" type={StatusIndicator.Type.Gray} maxWidth={250} />
+```

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/action-bar/ActionBar.mdx

@@ -6,7 +6,7 @@ import Basic from './examples/Basic';
 
 # Canvas Kit Action Bar
 
-Full width button toolbar fixed to bottom of screen.
+Action Bar contains primary and secondary actions related to a page or task.
 
 ## Installation
 
@@ -19,38 +19,20 @@ yarn add @workday/canvas-kit-react
 ### Basic Example
 
 Here is a basic example of an `ActionBar` with two buttons. Although not required,
-[buttons](../../button) are often used in in action bars. The primary action button should be left
-aligned followed by secondary buttons. The primary button is on the right only in "progression-based
-UIs" and on mobile devices.
+[buttons](../../button) are often used in in action bars. The primary action button should be used
+only once and left aligned followed by secondary buttons.
 
 <ExampleCodeBlock code={Basic} />
 
-### Fixed
-
-The Action Bar generally lives at the bottom of the viewport. If you would like this behavior
-automatically (using `position: fixed`), you can use the `fixed` prop.
-
-```tsx
-<ActionBar fixed={true}>
-  <PrimaryButton>Button</PrimaryButton>
-  <SecondaryButton>Button</SecondaryButton>
-</ActionBar>
-```
-
 ## Responsive Behavior
 
-At 575px, responsive styles will take effect:
-
-- Applies a flex box to the buttons
-- Makes single-button groups full width
-- All buttons will become the same width (`flex: 1`).
-- Button order will become reversed, making left-aligned primary buttons right-aligned.
+At 768px, responsive styles will take effect:
 
-> When on a mobile form factor, the button placement should flip to have the primary button on the
-> far right.
+- All primary and secondary buttons will become the same width (`flex: 1`).
+- Container Bar padding will be decreased to small (`16px`) for all sides.
 
 ## Props
 
-Undocumented props are spread to the underlying container `<div>` element.
+Undocumented props are spread to the underlying `HStack` component.
 
 <ArgsTable of={ActionBar} />

package/dist/mdx/react/action-bar/examples/Basic.tsx

@@ -4,8 +4,8 @@ import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
 
 export default () => (
-  <ActionBar>
-    <PrimaryButton>Button</PrimaryButton>
-    <SecondaryButton>Button</SecondaryButton>
+  <ActionBar position="relative">
+    <PrimaryButton>First Action</PrimaryButton>
+    <SecondaryButton>Second Action</SecondaryButton>
   </ActionBar>
 );

package/dist/mdx/react/banner/Banner.mdx

@@ -4,11 +4,24 @@ import ActionText from './examples/ActionText';
 import Basic from './examples/Basic';
 import Error from './examples/Error';
 import Sticky from './examples/Sticky';
+import ThemedAlert from './examples/ThemedAlert';
+import ThemedError from './examples/ThemedError';
+import RefForwarding from './examples/RefForwarding';
+import StickyAnimation from './examples/StickyAnimation';
+import StickyRTL from './examples/StickyRTL';
+import {
+  BannerHoistedComponent,
+  BannerModelConfigComponent,
+  BannerIconComponent,
+  BannerLabelComponent,
+  BannerActionComponent,
+} from './PropTables.splitprops.tsx';
 
 
 # Canvas Kit Banner
 
-Banners surface important information and feedback to the user about a task, action, or state.
+`Banner` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+used surface important information and feedback to the user about a task, action, or state.
 
 [> Workday Design Reference](https://design.workday.com/components/indicators/banners)
 
@@ -22,38 +35,209 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
+Use the children of `Banner.Label` to set the main text for the `Banner`.
+
 <ExampleCodeBlock code={Basic} />
 
-### Error Type
+### Action Text
 
-Set the `error` prop of the Banner to designate the severity of the message presented in the banner.
-`error` accepts the following values:
+Use the children of `Banner.ActionText` to customize the action text contained in the `Banner`. The
+text has default value of `View All`.
 
-- `Banner.ErrorType.Alert` (Default)
-- `Banner.ErrorType.Error`
+<ExampleCodeBlock code={ActionText} />
 
-<ExampleCodeBlock code={Error} />
+### Error Type
 
-### Variant
+Set the `hasError` prop of the `Banner` to designate the severity of the message presented in the
+banner. This will change the defualt icon to `exclamationCircleIcon`.
 
-Banner is available in two variants. `variant` accepts the following values:
+<ExampleCodeBlock code={Error} />
 
-- `Banner.Variant.Full` (Default)
-- `Banner.Variant.Sticky`
+### Sticky
 
-Use the `Sticky` variant if the Banner is to be displayed along the right edge of the page.
+Set the `isSticky` prop of the `Banner` to display it along the right edge of the page. When true,
+the `Banner.ActionText` will be hidden. Some basic styles will be applied, but you will still need
+to manually set the css `position` value.
 
 <ExampleCodeBlock code={Sticky} />
 
-#### Action Text
+You can use keyframes to animate the `Banner` in.
 
-Set the `actionText` prop to customize the text of the link contained in the Banner. `actionText` is
-only available in the `Full` variant and has a default value of `View All`.
+<ExampleCodeBlock code={StickyAnimation} />
 
-<ExampleCodeBlock code={ActionText} />
+### RefForwarding
+
+`Banner` supports ref forwarding. It will forward ref to its underlying button element.
+
+<ExampleCodeBlock code={RefForwarding} />
+
+### Right-to-Left (RTL)
+
+Banner supports right-to-left languages when specified in the CanvasProvider theme.
+
+<ExampleCodeBlock code={StickyRTL} />
+
+### Themed Banners
+
+Banners use the `useThemedPalette` hook for themeing. By default, your alert theme is used. `main`
+will be used for the background, `dark` for the hover background, and `contrast` for the text.
+
+<ExampleCodeBlock code={ThemedAlert} />
+
+If you set the `hasError` prop, the banner will use your error theme.
+
+<ExampleCodeBlock code={ThemedError} />
+
+## Components
+
+### Banner
+
+#### Usage
+
+`Banner` is a container component rendered as a `<button>` element that is responsible for creating
+a `BannerModel` and sharing it with its subcomponents using React context.
+
+```tsx
+<Banner
+	isSticky={true}
+	hasError={true} id:
+	'custom-banner-id'
+	onClick={() => console.log('clicked banner')}
+>
+  {/* Child components */}
+</Banner>
+```
+
+Alternatively, you may pass in a model using the hoisted model pattern.
+
+```tsx
+const model = useBannerModel({
+  isSticky: true,
+  hasError: true,
+  id: 'custom-banner-id',
+});
+
+return (
+  <Banner onClick={() => console.log('clicked banner')} model={model}>
+    {/* Child components */}
+  </Banner>
+);
+```
+
+#### Props
+
+Undocumented props are spread to the underlying `<button>` element.
+
+<ArgsTable of={BannerModelConfigComponent} />
+
+If you're using the hoisted model pattern, follow this table instead (refer to the [Model](#model)
+section for more information about `BannerModel`):
+
+<ArgsTable of={BannerHoistedComponent} />
+
+### Banner.Icon
+
+#### Usage
+
+`Banner.Icon` is a styled `<SystemIcon>`. The icon defaults to exclamationTriangleIcon or
+exclamationCircleIcon when the model's hasError is true.
+
+```tsx
+<Banner.Icon />
+```
+
+#### Props
+
+You can override the default icon if needed.
+
+Undocumented props are spread to the underlying `<SystemIcon>` element.
+
+<ArgsTable of={BannerIconComponent} />
+
+### Banner.Label
+
+#### Usage
+
+`Banner.Label` is a styled `<Flex>`. This component will get an id that will be used for the
+aria-describedby on the top level `<button>`.
+
+```tsx
+<Banner.Label>3 Warnings</Banner.Label>
+```
+
+#### Props
+
+The children prop will be used as the Primary text of the Banner.
+
+Undocumented props are spread to the underlying `<Flex>` element.
+
+<ArgsTable of={BannerLabelComponent} />
+
+### Banner.ActionText
+
+#### Usage
+
+`Banner.ActionText` is a styled `<Box>`. This component will get an id that will be used for the
+aria-labelledby on the top level `<button>`. This component will be visually hidden when the model's
+`isSticky` prop is set to true.
+
+```tsx
+<Banner.ActionText>Custom call to action</Banner.ActionText>
+```
+
+#### Props
+
+The children prop will be used as the 'call to action' text of the Banner.
+
+Undocumented props are spread to the underlying `<Box>` element.
+
+<ArgsTable of={BannerActionComponent} />
+
+## Model
+
+If `Banner` was stripped of all its markup, attributes, and styling, what would remain is the
+[model](/getting-started/for-developers/resources/compound-components/#models). The model is an
+object that holds the `state`, i.e. a description of the current snapshot in time of the component.
+
+By default, `Banner` will create a model and share it internally with its subcomponents using React
+context. You may subscribe to `BannerContext` if you wish to create a custom subcomponent for your
+implementation. Here's a simple example.
+
+```tsx
+import * as React from 'react';
+import {Banner, BannerModelContext} from '@workday/canvas-kit-react/banner';
+
+const CustomText = (props: React.HTMLAttributes<HTMLSpanElement>) => {
+  const model = React.useContext(BannerModelContext);
+
+  return <span {...props}>{model.state.hasError ? 'Error:' : 'Warning:'}</span>;
+};
+
+export const CustomBanner = () => {
+  return (
+    <Banner>
+      <CustomText />
+      {/* Other subcomponents */}
+    </Banner>
+  );
+};
+```
+
+Alternatively, if you need direct access to the model's `state` outside of the `Banner` component,
+you may configure your own model with `useBannerModel` and pass it to `Banner` via a pattern called
+[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+
+```tsx
+const model = useBannerModel({
+  isError: true,
+});
+
+<Banner model={model}>{/* Child components */}</Banner>;
+```
 
-## Props
+### Config
 
-Undocumented props are spread to the outermost element rendered by Banner.
+`useBannerModel` accepts a configuration object with the following properties and returns a
+`BannerModel` with a `state` property.
 
-<ArgsTable of={Banner} />
+<ArgsTable of={BannerModelConfigComponent} />

package/dist/mdx/react/banner/PropTables.splitprops.tsx

@@ -0,0 +1,39 @@
+import {BannerModel, BannerModelConfig} from '@workday/canvas-kit-react/banner';
+import {CanvasSystemIcon} from '@workday/design-assets-types';
+import {BannerActionProps} from '../lib/BannerAction';
+
+// <ArgsTable of={Banner} /> generates a very large props table given that
+// BannerProps includes FlexProps. Use this dummy component instead to
+// limit the props shown.
+export const BannerHoistedComponent = (_: {model: BannerModel}) => <div />;
+
+// <ArgsTable of={Banner.Icon} /> generates a props table with
+// SystemIcon props. Use this dummy component instead to limit the props shown.
+export const BannerIconComponent = (_: {
+  /**
+   * Icon to show next to label
+   * @default `exclamationTriangleIcon` or `exclamationCircleIcon` when hasError is true
+   */
+  icon?: CanvasSystemIcon;
+}) => <div />;
+
+// <ArgsTable of={Banner.Label} /> generates a props table with
+// Flex props. Use this dummy component instead to limit the props shown.
+export const BannerLabelComponent = (_: {
+  /**
+   * The text of the Banner.
+   */
+  children: React.ReactNode;
+}) => <div />;
+
+// <ArgsTable of={Banner.ActionText} /> generates a props table with
+// Box props. Use this dummy component instead to limit the props shown.
+export const BannerActionComponent = (_: {
+  /**
+   * The text of the Banner action.
+   * @default 'View All'
+   */
+  children?: React.ReactNode;
+}) => <div />;
+
+export const BannerModelConfigComponent = (_: BannerModelConfig) => <div />;

package/dist/mdx/react/banner/examples/ActionText.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
+
 import {Banner} from '@workday/canvas-kit-react/banner';
 
 export default () => {
-  return <Banner actionText="Show Details" label="3 Warnings" />;
+  return (
+    <Banner>
+      <Banner.Icon />
+      <Banner.Label>3 Warnings</Banner.Label>
+      <Banner.ActionText>Show Details</Banner.ActionText>
+    </Banner>
+  );
 };

package/dist/mdx/react/banner/examples/Basic.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
+
 import {Banner} from '@workday/canvas-kit-react/banner';
 
 export default () => {
-  return <Banner label="3 Warnings" />;
+  return (
+    <Banner onClick={() => console.log('clicked banner')}>
+      <Banner.Icon />
+      <Banner.Label>3 Warnings</Banner.Label>
+      <Banner.ActionText />
+    </Banner>
+  );
 };

package/dist/mdx/react/banner/examples/Error.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
+
 import {Banner} from '@workday/canvas-kit-react/banner';
 
 export default () => {
-  return <Banner error={Banner.ErrorType.Error} label="3 Errors" />;
+  return (
+    <Banner hasError={true}>
+      <Banner.Icon />
+      <Banner.Label>3 Errors</Banner.Label>
+      <Banner.ActionText />
+    </Banner>
+  );
 };

package/dist/mdx/react/banner/examples/RefForwarding.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {changeFocus} from '@workday/canvas-kit-react/common';
+import {Banner} from '@workday/canvas-kit-react/banner';
+import {SecondaryButton} from '../../..';
+import {VStack} from '@workday/canvas-kit-labs-react';
+
+export default () => {
+  const bannerRef = React.useRef<HTMLButtonElement>(null);
+
+  const focusBanner = () => {
+    changeFocus(bannerRef.current);
+  };
+
+  return (
+    <VStack spacing="xs" alignItems="flex-start">
+      <Banner ref={bannerRef}>
+        <Banner.Icon />
+        <Banner.Label>3 Warnings</Banner.Label>
+        <Banner.ActionText />
+      </Banner>
+      <SecondaryButton onClick={focusBanner}>Focus Banner</SecondaryButton>
+    </VStack>
+  );
+};

package/dist/mdx/react/banner/examples/Sticky.tsx

@@ -1,16 +1,24 @@
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
 import React from 'react';
+
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
+import {Box, useThemeRTL} from '@workday/canvas-kit-labs-react/common';
 import {Banner} from '@workday/canvas-kit-react/banner';
-import {Box} from '@workday/canvas-kit-labs-react/common';
+
+const styles: CSSProperties = {
+  position: 'absolute',
+  right: 0,
+};
 
 export default () => {
   return (
     <Box height={64}>
-      <Banner
-        error={Banner.ErrorType.Error}
-        label="3 Errors"
-        variant={Banner.Variant.Sticky}
-        style={{position: 'absolute', right: 0}}
-      />
+      <Banner hasError={true} isSticky={true} css={styles}>
+        <Banner.Icon />
+        <Banner.Label>3 Errors</Banner.Label>
+        <Banner.ActionText />
+      </Banner>
     </Box>
   );
 };

package/dist/mdx/react/banner/examples/StickyAnimation.tsx

@@ -0,0 +1,62 @@
+/** @jsx jsx */
+import {jsx, keyframes} from '@emotion/core';
+import React from 'react';
+
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
+import {Box, useThemeRTL} from '@workday/canvas-kit-labs-react/common';
+import {loopIcon} from '@workday/canvas-system-icons-web';
+import {Banner} from '@workday/canvas-kit-react/banner';
+
+const containerStyles: CSSProperties = {
+  position: 'absolute',
+  right: 0,
+  overflow: 'hidden',
+};
+
+export default () => {
+  const {themeRTL, theme} = useThemeRTL();
+  const bannerRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [styles, setStyles] = React.useState<CSSProperties>();
+
+  const [rerun, setRerun] = React.useState(1); // Only needed for demo purposes
+
+  React.useLayoutEffect(() => {
+    let width = bannerRef.current.offsetWidth;
+    if (theme.canvas.direction === 'rtl') {
+      width *= -1;
+    }
+    const slideInKeyframes = keyframes({
+      '0%': {
+        transform: `translateX(${width}px)`,
+      },
+      '100%': {
+        transform: `translateX(0 * ${rerun})`,
+      },
+    });
+
+    setStyles({
+      margin: '4px 0px 4px 4px', // Room for focus outline since container is overflow hidden
+      animation: `${slideInKeyframes} .3s ease-out forwards`,
+    });
+  }, [theme.canvas.direction, rerun]);
+
+  return (
+    <Box height={64}>
+      <div css={containerStyles} ref={containerRef}>
+        <div css={themeRTL(styles)}>
+          <Banner
+            onClick={() => setRerun(r => r + 1)}
+            hasError={true}
+            isSticky={true}
+            ref={bannerRef}
+          >
+            <Banner.Icon icon={loopIcon} />
+            <Banner.Label>Click to run animation</Banner.Label>
+            <Banner.ActionText />
+          </Banner>
+        </div>
+      </div>
+    </Box>
+  );
+};

package/dist/mdx/react/banner/examples/StickyRTL.tsx

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import React from 'react';
+
+import {CSSProperties} from '@workday/canvas-kit-react/tokens';
+import {Box, useThemeRTL} from '@workday/canvas-kit-labs-react/common';
+import {
+  CanvasProvider,
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+} from '@workday/canvas-kit-react/common';
+import {Banner} from '@workday/canvas-kit-react/banner';
+
+const styles: CSSProperties = {
+  position: 'absolute',
+  left: 0,
+};
+
+const theme: PartialEmotionCanvasTheme = {
+  canvas: {
+    direction: ContentDirection.RTL,
+  },
+};
+
+export default () => {
+  const {themeRTL} = useThemeRTL();
+  return (
+    <CanvasProvider theme={theme}>
+      <Box height={64}>
+        <Banner isSticky={true} css={styles}>
+          <Banner.Icon />
+          <Banner.Label>3 אזהרות</Banner.Label>
+          <Banner.ActionText />
+        </Banner>
+      </Box>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/banner/examples/ThemedAlert.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {Banner} from '@workday/canvas-kit-react/banner';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        alert: {
+          main: colors.kiwi200,
+          dark: colors.kiwi300,
+        },
+      },
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <Banner>
+        <Banner.Icon />
+        <Banner.Label>3 Items</Banner.Label>
+        <Banner.ActionText />
+      </Banner>
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/banner/examples/ThemedError.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import {Banner} from '@workday/canvas-kit-react/banner';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        error: {
+          main: colors.islandPunch500,
+          dark: colors.islandPunch600,
+          contrast: colors.berrySmoothie100,
+        },
+      },
+    },
+  };
+
+  return (
+    <CanvasProvider theme={theme}>
+      <Banner hasError={true}>
+        <Banner.Icon />
+        <Banner.Label>3 Items</Banner.Label>
+        <Banner.ActionText />
+      </Banner>
+    </CanvasProvider>
+  );
+};

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/dist/mdx/react/status-indicator/StatusIndicator.mdx

@@ -3,6 +3,7 @@ import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
 import Basic from './examples/Basic';
 import Icon from './examples/Icon';
 import Emphasis from './examples/Emphasis';
+import MaxWidth from './examples/MaxWidth';
 
 
 # Canvas Kit Status Indicator
@@ -54,6 +55,17 @@ label.
 
 <ExampleCodeBlock code={Icon} />
 
+### Max Width
+
+By default, the maximum width of a Status Indicator is `200px`. When the text in the StatusIndicator
+exceeds the max width, it will be truncated with an ellipsis. This maxWidth can be customized.
+
+Avoid truncation wherever possible by using shorter text in Status Indicators. In the case where
+truncation is necessary, you should use an `OverflowTooltip`. For the full text to be accessible
+when you do this, you should make the tooltip focusable with `tabIndex`.
+
+<ExampleCodeBlock code={MaxWidth} />
+
 ## Props
 
 Undocumented props are spread to the outermost element rendered by Status Indicator.

package/dist/mdx/react/status-indicator/examples/MaxWidth.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
+import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
+import {space} from '@workday/canvas-kit-react/tokens';
+
+const StatusIndicators = styled('div')({
+  '& > *': {
+    margin: space.xxs,
+  },
+});
+
+export default () => {
+  return (
+    <StatusIndicators>
+      <StatusIndicator
+        label="Longer Than Normal Ellipsized Status"
+        type={StatusIndicator.Type.Blue}
+        maxWidth={250}
+      />
+      <OverflowTooltip>
+        <StatusIndicator
+          label="Overflow Tooltip On Hover/Focus Status"
+          type={StatusIndicator.Type.Green}
+          tabIndex={0}
+        />
+      </OverflowTooltip>
+    </StatusIndicators>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "6.3.1",
+  "version": "7.0.0-alpha.0-next.1+57471fa0",
   "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.3.1"
+    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.1+57471fa0"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -58,5 +58,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "^3.8.3"
   },
-  "gitHead": "687b8d43c6e258200c4b939d4efb922df96d92ea"
+  "gitHead": "57471fa0c73534126f9ef9a18203d49c5834d21e"
 }