@workday/canvas-kit-docs 7.0.0-alpha.95-next.21 → 7.0.0

package/dist/commonjs/lib/specs.js

@@ -1299,6 +1299,46 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Hyperlink.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Button",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given internal hyperlinks are rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              },
+              {
+                "type": "it",
+                "name": "should render the correct text"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given external hyperlinks are rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              },
+              {
+                "type": "it",
+                "name": "should render the correct text"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Menu.spec.ts",
@@ -2635,6 +2675,36 @@ module.exports = {specifications: [
                 ]
               }
             ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Components/Popups/Popup/React, FocusRedirect] example is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when the \"Delete Item\" button is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should show the popup"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the \"Delete\" button has focus and the tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should hide the popup"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should redirect focus to the \"Next Focusable Button\" button"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
           }
         ]
       }

package/dist/es6/lib/specs.js

@@ -1299,6 +1299,46 @@ module.exports = {specifications: [
       }
     ]
   },
+  {
+    "type": "file",
+    "name": "Hyperlink.spec.ts",
+    "children": [
+      {
+        "type": "describe",
+        "name": "Button",
+        "children": [
+          {
+            "type": "describe",
+            "name": "given internal hyperlinks are rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              },
+              {
+                "type": "it",
+                "name": "should render the correct text"
+              }
+            ]
+          },
+          {
+            "type": "describe",
+            "name": "given external hyperlinks are rendered",
+            "children": [
+              {
+                "type": "it",
+                "name": "should not have any axe errors"
+              },
+              {
+                "type": "it",
+                "name": "should render the correct text"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
   {
     "type": "file",
     "name": "Menu.spec.ts",
@@ -2635,6 +2675,36 @@ module.exports = {specifications: [
                 ]
               }
             ]
+          },
+          {
+            "type": "describe",
+            "name": "given the [Components/Popups/Popup/React, FocusRedirect] example is rendered",
+            "children": [
+              {
+                "type": "describe",
+                "name": "when the \"Delete Item\" button is clicked",
+                "children": [
+                  {
+                    "type": "it",
+                    "name": "should show the popup"
+                  },
+                  {
+                    "type": "describe",
+                    "name": "when the \"Delete\" button has focus and the tab key is pressed",
+                    "children": [
+                      {
+                        "type": "it",
+                        "name": "should hide the popup"
+                      },
+                      {
+                        "type": "it",
+                        "name": "should redirect focus to the \"Next Focusable Button\" button"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
           }
         ]
       }

package/dist/mdx/{4.0-MIGRATION-GUIDE.mdx → 4.0-UPGRADE-GUIDE.mdx}

@@ -1,4 +1,4 @@
-# Canvas Kit 4.0 Migration Guide
+# Canvas Kit 4.0 Upgrade Guide
 
 Below are the breaking changes made in Canvas Kit v4. Please reach out if you have any questions
 about the update.

package/dist/mdx/{5.0-MIGRATION-GUIDE.mdx → 5.0-UPGRADE-GUIDE.mdx}

@@ -1,4 +1,4 @@
-# Canvas Kit 5.0 Migration Guide
+# Canvas Kit 5.0 Upgrade Guide
 
 Below are the breaking changes made in Canvas Kit v5. Please
 [reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
@@ -28,7 +28,7 @@ any questions about the update.
 
 We've introduced a
 [new codemod package](https://github.com/Workday/canvas-kit/tree/master/modules/codemod) you can use
-to automatically update your code to work with a majority of the breaking changes in the migration
+to automatically update your code to work with a majority of the breaking changes in the upgrade
 from Canvas Kit v4 to v5. Simply run:
 
 ```sh
@@ -49,7 +49,7 @@ 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.
+help us maintain additional codemod transforms to make future upgrades easier.
 
 ## General Changes
 

package/dist/mdx/{6.0-MIGRATION-GUIDE.mdx → 6.0-UPGRADE-GUIDE.mdx}

@@ -1,4 +1,4 @@
-# Canvas Kit 6.0 Migration Guide
+# Canvas Kit 6.0 Upgrade Guide
 
 Below are the breaking changes made in Canvas Kit v6. Please
 [reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
@@ -39,7 +39,7 @@ any questions about the update.
 ## 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
+to automatically update your code to work with a majority of the breaking changes in the upgrade
 from Canvas Kit v5 to v6:
 
 ```sh
@@ -60,7 +60,7 @@ 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.
+help us maintain additional codemod transforms to make future upgrades easier.
 
 ## Component Deprecations
 
@@ -80,7 +80,7 @@ warning.
 #### Hard Deprecation
 
 A hard-deprecated component or package is no longer available. You will need to follow the method
-prescribed in our migration guide to update your application. Please reach out to our team directly
+prescribed in our upgrade guide to update your application. Please reach out to our team directly
 if you need additional help.
 
 ### Cookie Banner

package/dist/mdx/{7.0-MIGRATION-GUIDE.mdx → 7.0-UPGRADE-GUIDE.mdx}

@@ -1,4 +1,4 @@
-# Canvas Kit 7.0 Migration Guide
+# Canvas Kit 7.0 Upgrade Guide
 
 This guide contains breaking changes in Canvas Kit v7. Please
 [reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
@@ -27,7 +27,7 @@ any questions.
 ## Codemod
 
 Please use our [codemod package](https://github.com/Workday/canvas-kit/tree/master/modules/codemod)
-to automatically update your code to work with many of the breaking changes as you migrate from
+to automatically update your code to work with many of the breaking changes as you upgrade from
 Canvas Kit v6 to v7:
 
 ```sh
@@ -383,7 +383,7 @@ warning.
 ##### Hard Deprecation
 
 A hard-deprecated component or package is no longer available. You will need to follow the method
-prescribed in our migration guide to update your application. Please
+prescribed in our upgrade guide to update your application. Please
 [reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) to our team
 directly if you need additional help.
 
@@ -431,17 +431,74 @@ The APIs for these promoted components remain unchanged.
 
 ### Action Bar
 
-We've updated `ActionBar` to use the
-[createComponent](/getting-started/for-developers/resources/creating-compound-components/#disclosurecontent-component)
-utility from our
-[common](https://github.com/Workday/canvas-kit/blob/ff77c5bd83e41c3ab2b9c55e41a8b7c1fde33a1b/modules/react/common/lib/utils/components.ts#L167)
-module; it now supports [ref forwarding](https://reactjs.org/docs/forwarding-refs.html) and using
-the `as` prop to change the rendered element.
+The ActionBar API changed to model API to support more generic behaviors to allow for other
+components to support responsive layouts using the same models and behaviors. It also allows to
+implement a responsive layout based on a container width
+([#1585](https://github.com/Workday/canvas-kit/pull/1585)).
+
+```tsx
+const model = useActionBarModel({
+  items: [
+    {
+      id: 'first',
+      text: 'First Action',
+    },
+  ],
+});
+
+<ActionBar model={model} />;
+```
+
+The ActionBar component can now handle responsive containers, but the support is not automatic. You
+must use the dynamic API and provide an overflow menu subcomponent. The dynamic API doesn't know the
+shape of your object, so render props must be used to instruct React how to render each item.
 
-We've removed the `fixed` prop from `ActionBar`. It now uses the `position` prop (defaults to
-`fixed`) to set the container position.
+```tsx
+const [items] = React.useState<MyActionItem[]>([
+  {
+    id: 'first',
+    text: 'First Action',
+  },
+  {
+    id: 'second',
+    text: 'Second Action',
+  },
+  {
+    id: 'third',
+    text: 'Third Action',
+  },
+  {
+    id: 'fourth',
+    text: 'Fourth Action',
+  },
+  {
+    id: 'fifth',
+    text: 'Fifth Action',
+  },
+]);
+
+const model = useActionBarModel({items});
+
+<ActionBar model={model}>
+  <ActionBar.List>
+    {item => <ActionBar.Item onClick={() => console.log(item.id)}>{item.text}</ActionBar.Item>}
+  </ActionBar.List>
+  <ActionBar.Menu.Popper>
+    <ActionBar.Menu.Card maxWidth={300} maxHeight={200}>
+      <ActionBar.Menu.List>
+        {item => (
+          <ActionBar.Menu.Item onClick={() => console.log(item.id)}>
+            {item.text}
+          </ActionBar.Menu.Item>
+        )}
+      </ActionBar.Menu.List>
+    </ActionBar.Menu.Card>
+  </ActionBar.Menu.Popper>
+</ActionBar>;
+```
 
-🤖 The codemod will remove uses of the `fixed` prop from `ActionBar`.
+🤖 The codemod will remove uses of the `fixed` prop from `ActionBar` and restructure component by
+creating `ActionBar.List` subcomponent and replacing all `ActionBar` children to it.
 
 ---
 
@@ -785,6 +842,65 @@ anyway since the buttons will no longer scroll with overflowed `Body` content.
 </Modal.Card>
 ```
 
+#### Popup Model
+
+In addition to the other [Model Changes](#model-changes), the `show` and `hide` events of all
+disclosure-type models have been updated to remove the extra event wrapper. This change allows
+developers to directly attach the `show` and `hide` events to React event handlers.
+
+The following models were affected:
+
+- `useDisclosureModel`
+- `usePopupModel`
+- `useModalModel`
+- `useDisclosureModel`
+
+```tsx
+// v6
+<button onClick={() => model.events.show()} /> // most use-cases look like this
+<button onClick={event => model.events.show({event})} />
+
+// v7
+<button onClick={model.events.show} />
+```
+
+Removing the object wrapper around the `event` allows us to directly pass the `show` or `hide` event
+to the `onClick` handler which is much more convenient. We couldn't find many uses of the `event` in
+the wild, so the impact will be minimal. Most usage of `show` or `hide` events are called without
+`event`, so this change will not impact most people. There is **no** codemod for this change,
+because the usage is very difficult to detect since most people pass a callback that doesn't take
+parameters.
+
+Guards and callback signatures have also changed to remove the object wrapper around the `event`.
+The following v6 example includes the [Model Changes](#model-changes) which this change compounds
+upon.
+
+```tsx
+// v6
+const model = usePopupModel({
+  shouldShow({data: {event}, state}) {
+    console.log(event, state);
+  },
+  onShow({data: {event}, prevState}) {
+    console.log(event, prevState);
+  },
+});
+
+// v7
+const model = usePopupModel({
+  shouldShow(event, state) {
+    console.log(event, state);
+  },
+  onShow(event, prevState) {
+    console.log(event, prevState);
+  },
+});
+```
+
+🤖 The codemod will update all inline guards and callbacks defined like they are in this example. If
+a guard or callback was defined outside the model config block, it will not be covered by the
+codemod.
+
 ---
 
 ### Segmented Control

package/dist/mdx/TESTING.mdx

@@ -162,7 +162,7 @@ different, but this will prevent snapshot tests that don't have any changes from
 
 ## Functional tests
 
-Canvas Kit uses [Cypress][https://cypress.io] for browser-based behavior testing (additional info:
+Canvas Kit uses [Cypress](https://cypress.io) for browser-based behavior testing (additional info:
 [Why Cypress?](https://github.com/Workday/canvas-kit/tree/master/cypress/WHY_CYPRESS.md)).
 Functional tests ensure the code meets functional specifications from a user's perspective. All
 functional tests are written against a Storybook Story. Specifications can come from many different

package/dist/mdx/preview-react/menu/examples/ContextMenu.tsx

@@ -19,9 +19,9 @@ const ContextMenuTarget = createComponent('div')({
 
     const onContextMenu = (event: React.MouseEvent) => {
       if (model.state.visibility === 'visible') {
-        model.events.hide({event});
+        model.events.hide(event);
       } else if (model.state.visibility === 'hidden') {
-        model.events.show({event});
+        model.events.show(event);
       }
 
       // Prevent the default context menu from showing to avoid double menus

package/dist/mdx/preview-react/pill/Pill.mdx

@@ -0,0 +1,241 @@
+import {Specifications} from '@workday/canvas-kit-docs';
+
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
+
+import WithReadOnly from './examples/WithReadOnly';
+import WithAvatar from './examples/WithAvatar';
+import Basic from './examples/Basic';
+import WithCount from './examples/WithCount';
+import WithRemovable from './examples/WithRemovable';
+import WithList from './examples/WithList';
+
+
+# Canvas Kit Pill
+
+`Pill`s are static or interactive indicators that allow users to input, filter, or label
+information.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+## Usage
+
+`Pill`s are used to visually label objects on a page for quick recognition. They’re offered as both
+static (read-only) and interactive elements. They allow users to filter a list or table, or label
+information to help with scanning and organization.
+
+### Basic Pills
+
+By default a Pill is considered interactive, therefore it's default variant is `default`.All leading
+elements (icons or avatars) are intended to be descriptive, helping support the label. Do not rely
+on the leading element to indicate the interaction behavior.
+
+#### Icon
+
+You can render an icon inside the `Pill` with `Pill.Icon`. It will render a `plusIcon` by default,
+but it can be customized by providing an icon to the `icon` prop. Because it uses `SystemIcon` under
+the hood, you also have to all `SystemIconProps`.
+
+<ExampleCodeBlock code={Basic} />
+
+#### Avatar
+
+You can render an avatar image inside the `Pill` with `Pill.Avatar`. It should appear before the
+`Pill` text. Because it uses `Avatar` under the hood, you also have access to all `AvatarProps`.
+
+<ExampleCodeBlock code={WithAvatar} />
+
+#### Count
+
+The count appears after the label. It is usually associated with the label. If you have a category,
+the count will dirrectly correlate to that category.
+
+<ExampleCodeBlock code={WithCount} />
+
+### Read Only
+
+If the `Pill` has `variant='readOnly'`, it will look like a read-only `Pill`. This is a
+non-interactive element that is used to display information.
+
+> **_NOTE:_** `maxWidth` measures the width of the `Pill.Label` (or text) and not the width of the
+> entire `Pill`. By default, this `maxWidth` is set to `200px` and the text will be truncated with
+> an ellipsis and render an OverflowTooltip on hover and focus. This max width can be changed by
+> providing a `maxWidth` prop on the Pill.
+
+<ExampleCodeBlock code={WithReadOnly} />
+
+### Removable Pills
+
+Removable `Pill`s display an `X` icon after the label. They have a smaller, more specific focus
+state and click target to be more intentional about their actions and to avoid unintended removal.
+
+You can define a removable `Pill` by providing a `variant='removable'` prop.
+
+```tsx
+<Pill variant="removable">
+  Pink Shirts
+  <Pill.IconButton onClick={() => console.warn('clicked')} />
+</Pill>
+```
+
+In this case, we use a `Pill.IconButton` because the `X` becomes the focusable and clickable
+element.
+
+The default icon for `Pill.IconButton` is `xSmallIcon` but this can also be overwritten by passing
+an `icon` prop to `Pill.IconButton`
+
+<ExampleCodeBlock code={WithRemovable} />
+
+### List of Pills
+
+`Pill`s can often represent multiple pieces of information such as a filtered list of categories or
+skills.
+
+In order to achieve this, use our `HStack` component to wrap each `Pill` and space them out
+accordingly.
+
+<ExampleCodeBlock code={WithList} />
+
+## Components
+
+### Pill
+
+By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive" we
+mean that the Pill container is a focusable element (a `<button>`). All leading elements (icons or
+avatars) are intended to be descriptive, helping support the label. They should not receive focus.
+
+`Pill` is the container component. It also provides a React context model for its subcomponents.
+Based on the `variant` prop this component will render different styled `Pill`s.
+
+#### Usage
+
+Example of read only:
+
+```tsx
+<Pill variant="readOnly">This is a read only</Pill>
+```
+
+Example of interactive:
+
+```tsx
+<Pill onClick={() => console.log('clicked')}>
+  <Pill.Avatar /> Regina Skeltor
+</Pill>
+```
+
+Example of removable:
+
+```tsx
+<Pill variant="removable">
+  <Pill.Avatar /> Regina Skeltor
+  <Pill.IconButton onClick={() => console.log('clicked')} />
+</Pill>
+```
+
+If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
+provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more intentional
+click target that prevents users from accidentally deleting an item.
+
+```tsx
+<Pill variant="removable">
+  Shoes
+  <Pill.IconButton onClick={() => console.log('handle remove')} />
+</Pill>
+```
+
+#### Props
+
+<ArgsTable of={Pill} />
+
+### Pill.Avatar
+
+This component renders an avatar. It supports all props of the `Avatar` component.
+
+#### Usage
+
+```tsx
+<Pill variant="removable">
+  <Pill.Avatar url={avatarUrl} />
+  Regina Skeltor
+  <Pill.IconButton onClick={() => console.log('handle remove')} />
+</Pill>
+```
+
+#### Props
+
+<ArgsTable of={Pill.Avatar} />
+
+### Pill.Count
+
+This component renders its `children` as the count.
+
+#### Usage
+
+```tsx
+<Pill onClick={() => console.warn('clicked')}>
+  Shoes
+  <Pill.Count>30</Pill.Count>
+</Pill>
+```
+
+#### Props
+
+<ArgsTable of={Pill.Count} />
+
+### Pill.Icon
+
+This component renders an `icon`. It not be used with the `default` styling – not `readOnly` or
+`removable` variants. By default it renders a `plusIcon` but it can be overridden by providing an
+icon to the `icon` prop.
+
+#### Usage
+
+```tsx
+<Pill onClick={() => console.warn('clicked')}>
+  <Pill.Icon />
+  <Pill.Label>Regina Skeltor</Pill.Label>
+</Pill>
+```
+
+#### Props
+
+<ArgsTable of={Pill.Icon} />
+
+### Pill.IconButton
+
+This component renders a custom icon button. It is only intended to be used with the `removable`
+variant. By default, it renders a `xSmallIcon` but can be overridden by providing an icon to the
+`icon` prop.
+
+#### Usage
+
+```tsx
+<Pill variant="removable">
+  Pink Shirts
+  <Pill.IconButton onClick={() => console.warn('clicked')} />
+</Pill>
+```
+
+#### Props
+
+<ArgsTable of={Pill.IconButton} />
+
+### Pill.Label
+
+This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
+There's no need to use this component directly since the overflow is handled for you automatically.
+
+#### Usage
+
+```tsx
+<Pill variant="readOnly">
+  <Pill.Label>Read-only</Pill.Label>
+</Pill>
+```
+
+#### Props
+
+<ArgsTable of={Pill.Label} />

package/dist/mdx/preview-react/pill/examples/Basic.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
+
+import {HStack} from '@workday/canvas-kit-react';
+
+export default () => (
+  <HStack spacing="xxs">
+    <Pill onClick={() => console.warn('clicked')}>
+      <Pill.Icon />
+      <Pill.Label>Regina Skeltor</Pill.Label>
+    </Pill>
+    <Pill onClick={() => console.warn('clicked')} disabled>
+      <Pill.Icon />
+      <Pill.Label>Regina Skeltor</Pill.Label>
+    </Pill>
+  </HStack>
+);

package/dist/mdx/preview-react/pill/examples/WithAvatar.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
+// @ts-ignore: Cannot find module error
+import testAvatar from './test-avatar.png';
+import {HStack} from '@workday/canvas-kit-react';
+
+export default () => {
+  return (
+    <HStack spacing="xxs">
+      <Pill onClick={() => console.warn('clicked')}>
+        <Pill.Avatar url={testAvatar} />
+        Regina Skeltor
+      </Pill>
+      <Pill onClick={() => console.warn('clicked')} disabled maxWidth={50}>
+        <Pill.Avatar url={testAvatar} />
+        Regina Skeltor
+      </Pill>
+    </HStack>
+  );
+};

package/dist/mdx/preview-react/pill/examples/WithCount.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
+
+export default () => (
+  <Pill onClick={() => console.warn('clicked')}>
+    Shoes
+    <Pill.Count>30</Pill.Count>
+  </Pill>
+);

package/dist/mdx/preview-react/pill/examples/WithList.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
+import {Flex} from '@workday/canvas-kit-react';
+
+const data = [
+  'Shoes',
+  'Pants',
+  'Dress Shoes',
+  'Color',
+  'Accessories',
+  'Luxury',
+  'Casual',
+  'Hats',
+  'Beanies',
+  'Glasses',
+  'Jewelry',
+];
+
+export default () => (
+  <Flex flexWrap="wrap">
+    {data.map((cat, index) => {
+      return (
+        <Pill key={index} variant="removable" marginBottom="xxs" marginInlineEnd="xxs">
+          <Pill.Label>{cat}</Pill.Label>
+          <Pill.IconButton onClick={() => console.log(`delete ${cat}`)} />
+        </Pill>
+      );
+    })}
+  </Flex>
+);

package/dist/mdx/preview-react/pill/examples/WithReadOnly.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
+
+import {HStack} from '@workday/canvas-kit-react';
+
+export default () => (
+  <HStack spacing="xxs">
+    <Pill variant="readOnly">Read-only</Pill>
+    <Pill variant="readOnly" maxWidth={250}>
+      Read-only but with super long text in case you want to read a paragraph in a Pill which we
+      don't recommend
+    </Pill>
+  </HStack>
+);

package/dist/mdx/preview-react/pill/examples/WithRemovable.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {Pill} from '@workday/canvas-kit-preview-react/pill';
+// @ts-ignore: Cannot find module error
+import testAvatar from './test-avatar.png';
+import {HStack} from '@workday/canvas-kit-react';
+
+export default () => (
+  <HStack spacing="xxs">
+    <Pill variant="removable">
+      Pink Shirts
+      <Pill.IconButton onClick={() => console.warn('clicked')} />
+    </Pill>
+    <Pill variant="removable">
+      <Pill.Avatar url={testAvatar} />
+      Carolyn Grimaldi
+      <Pill.IconButton onClick={() => console.warn('clicked')} />
+    </Pill>
+
+    <Pill variant="removable" disabled>
+      <Pill.Label>This is a category that should not exist because it is too long</Pill.Label>
+      <Pill.IconButton />
+    </Pill>
+  </HStack>
+);

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -2,11 +2,16 @@ import {ActionBar} from '@workday/canvas-kit-react/action-bar';
 import {Specifications} from '@workday/canvas-kit-docs';
 
 import Basic from './examples/Basic';
+import Icons from './examples/Icons';
+import OverflowActionBar from './examples/OverflowActionBar';
 
 
 # Canvas Kit Action Bar
 
-Action Bar contains primary and secondary actions related to a page or task.
+Action Bar is a [compound component](/getting-started/for-developers/resources/compound-components/)
+that contains primary and secondary actions related to a page or task.
+
+[> Workday Design Reference](https://design.workday.com/components/buttons/action-bar)
 
 ## Installation
 
@@ -18,21 +23,129 @@ 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 used
-only once and left aligned followed by secondary buttons.
+`ActionBar` includes a container `ActionBar` component and the following subcomponent:
+`ActionBar.List` which should contains `ActionBar.Item`.
+
+In a basic example of an `ActionBar` there are two buttons. The primary action button should be used
+only once and left aligned if content is left to right, followed by secondary buttons. Tertiary
+buttons should not be used in the Action Bar.
 
 <ExampleCodeBlock code={Basic} />
 
-## Responsive Behavior
+### Icons Example
+
+`ActionBar.Item` renders a `PrimaryButton` or `SecondaryButton`, so it's possible to use other
+Button props with `ActionBar.Item` such as `icon` or `size`.
+
+<ExampleCodeBlock code={Icons} />
+
+### Overflow Example
+
+`ActionBar` container can contain up to 3 actions and an Overflow Menu if there are more than 3
+actions, the other remaining actions should be placed into an Overflow Menu that is launched by
+clicking the Overflow Button.
+
+Also, ActionBar is a responsive component based on the width of its container. If the rendered
+actions exceed the width of the `ActionBar.List`, an overflow menu will be rendered. This only works
+against the dynamic API where you give the `ActionBarModel` an array of items to be rendered. The
+dynamic API handles the React `key` for you based on the item's identifier. The dynamic API requires
+either an `id` on each item object or a `getId` function that returns an identifier based on the
+item. The below example uses an `id` property on each item.
+
+The dynamic API takes in any object, but since nothing is known about your object, a
+[render prop](https://reactjs.org/docs/render-props.html) is necessary to instruct a list how it
+should render.
+
+<ExampleCodeBlock code={OverflowActionBar} />
+
+## Components
+
+### ActionBar
 
-At 768px, responsive styles will take effect:
+#### Usage
 
-- All primary and secondary buttons will become the same width (`flex: 1`).
-- Container Bar padding will be decreased to small (`16px`) for all sides.
+`ActionBar` is a container component that is responsible for creating a `ActionBarModel` and sharing
+it with its subcomponents using React context. It does not represent a real element.
+
+```tsx
+<ActionBar items={[]}>{/* Child components */}</ActionBar>
+```
+
+Alternatively, you may pass in a model using the hoisted model pattern.
+
+```tsx
+const model = useActionBarModel({
+  items: [],
+});
+
+<ActionBar model={model}>{/* Child components */}</ActionBar>;
+```
 
 ## Props
 
-Undocumented props are spread to the underlying `HStack` component.
+Note that if you pass in a `model` configured with `useActionBarModel`, configuration props passed
+to `ActionBar` will be ignored.
+
+<ArgsTable of={ActionBar} />
+
+### ActionBar.List
+
+#### Usage
+
+`ActionBar.List` is a `HStack` element. It is a container for `ActionBar.Item` subcomponents. To
+apply an overflow behavior for ActionBar `showOverflowButton` prop shold be true.
+
+```tsx
+<ActionBar.List>{/* ActionBar.Items */}</ActionBar.List>
+```
+
+#### Props
+
+Undocumented props are spread to the underlying `HStack` element.
+
+<ArgsTable of={ActionBar.List} />
+
+### ActionBar.Item
+
+#### Usage
+
+`ActionBar.Item` is a `button` element, by default it's a `SecondaryButton` unless an `as` prop
+passed.
+
+```tsx
+<ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>
+  First Action
+</ActionBar.Item>
+```
+
+#### Props
+
+Undocumented props are spread to the underlying `SecondaryButton` component.
+
+<ArgsTable of={ActionBar.Item} />
+
+## Model
+
+If `ActionBar` 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 composed of two parts: `state` which describes the current snapshot in time of the component
+and `events` which describes events that can be sent to the model.
+
+By default, `ActionBar` will create a model and share it internally with its subcomponents using
+React context. Alternatively, if you need direct access to the model's `state` and `events` outside
+of the `ActionBar` component, you may configure your own model with `useActionBarModel` and pass it
+to `ActionBar` via a pattern called
+[hoisting the model](/getting-started/for-developers/resources/compound-components/#configuring-a-model).
+
+```tsx
+const model = useActionBarModel({
+  items: [],
+});
+
+<ActionBar model={model}>{/* Child components */}</ActionBar>;
+```
+
+### Config
 
-<ArgsTable of={ActionBar} />
+`useActionBarModel` accepts a configuration object with the following properties and returns a
+`ActionBarModel` with `state` and `events` properties.

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

@@ -1,13 +1,14 @@
 import React from 'react';
-
 import {ActionBar} from '@workday/canvas-kit-react/action-bar';
-import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
-import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
 
 export default () => (
-  <ActionBar position="relative">
-    <PrimaryButton>First Action</PrimaryButton>
-    <SecondaryButton>Second Action</SecondaryButton>
-    <SecondaryButton icon={relatedActionsIcon} />
+  <ActionBar>
+    <ActionBar.List position="relative">
+      <ActionBar.Item as={PrimaryButton} onClick={() => console.log('first action')}>
+        First Action
+      </ActionBar.Item>
+      <ActionBar.Item>Second Action</ActionBar.Item>
+    </ActionBar.List>
   </ActionBar>
 );

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {ActionBar} from '@workday/canvas-kit-react/action-bar';
+import {notificationsIcon, alarmClockIcon} from '@workday/canvas-system-icons-web';
+import {PrimaryButton} from '@workday/canvas-kit-react/button';
+
+export default () => {
+  return (
+    <ActionBar>
+      <ActionBar.List position="relative">
+        <ActionBar.Item as={PrimaryButton} icon={notificationsIcon}>
+          First Action
+        </ActionBar.Item>
+        <ActionBar.Item icon={alarmClockIcon}>Second Action</ActionBar.Item>
+      </ActionBar.List>
+    </ActionBar>
+  );
+};

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

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {ActionBar, useActionBarModel} from '@workday/canvas-kit-react/action-bar';
+import {HStack} from '@workday/canvas-kit-react/layout';
+import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
+
+type MyActionItem = {
+  id: string;
+  text: React.ReactNode;
+};
+
+export default () => {
+  const [items] = React.useState<MyActionItem[]>([
+    {id: 'first', text: 'First Action'},
+    {id: 'second', text: 'Second Action'},
+    {id: 'third', text: 'Third Action'},
+    {id: 'fourth', text: 'Fourth Action'},
+    {id: 'fifth', text: 'Fifth Action'},
+  ]);
+
+  const model = useActionBarModel({items});
+  const [containerWidth, setContainerWidth] = React.useState('100%');
+
+  return (
+    <div style={{width: containerWidth}}>
+      <ActionBar model={model}>
+        <ActionBar.List position="relative">
+          {(item: MyActionItem, index) => (
+            <ActionBar.Item
+              as={index === 0 ? PrimaryButton : undefined}
+              onClick={() => console.log(item.id)}
+            >
+              {item.text}
+            </ActionBar.Item>
+          )}
+        </ActionBar.List>
+        <ActionBar.Menu.Popper>
+          <ActionBar.Menu.Card maxWidth={300} maxHeight={200}>
+            <ActionBar.Menu.List>
+              {(item: MyActionItem) => (
+                <ActionBar.Menu.Item onClick={() => console.log(item.id)}>
+                  {item.text}
+                </ActionBar.Menu.Item>
+              )}
+            </ActionBar.Menu.List>
+          </ActionBar.Menu.Card>
+        </ActionBar.Menu.Popper>
+      </ActionBar>
+      <hr />
+      <h4>Change action bar container size</h4>
+      <HStack spacing="xs">
+        <SecondaryButton onClick={() => setContainerWidth('100%')}>100%</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('1023px')}>Medium</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('767px')}>Small</SecondaryButton>
+        <SecondaryButton onClick={() => setContainerWidth('320px')}>Extra Small</SecondaryButton>
+      </HStack>
+    </div>
+  );
+};

package/dist/mdx/react/button/button/Hyperlink.mdx

@@ -0,0 +1,72 @@
+import {Hyperlink, ExternalHyperlink} from '@workday/canvas-kit-react/button';
+import {Specifications} from '@workday/canvas-kit-docs';
+
+import Link from './examples/Hyperlink';
+import LinkInverse from './examples/HyperlinkInverse';
+import ExternalLink from './examples/ExternalHyperlink';
+import ExternalLinkInverse from './examples/ExternalHyperlinkInverse';
+
+
+# Canvas Kit Hyperlinks
+
+Clickable anchor elements that extend the native `<a>` element with Canvas styling.
+
+[> Workday Design Reference](https://design.workday.com/components/buttons/buttons)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+### Hyperlink
+
+`Hyperlink`s should be used when you want to navigate away from the current page or to an anchor on
+the current page.
+
+<ExampleCodeBlock code={Link} />
+
+#### Inverse
+
+`Hyperlink`s also have an `inverse` variant. Use this variant when you need to place a `Hyperlink` on a
+dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={LinkInverse} />
+
+#### Props
+
+Undocumented props are spread to the underlying `<a>` element.
+
+<ArgsTable of={Hyperlink} />
+
+### ExternalHyperlink
+
+If your link should open in a new tab or window use the `ExternalHyperlink` component. It will let
+users know about the behavior by adding an icon, `extLinkIcon`. By default, the icon has a label of
+"Opens link in new window". You can override `aria-label` of the icon by using the `iconLabel`
+prop. This override will be needed for translations.
+
+<ExampleCodeBlock code={ExternalLink} />
+
+`ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the link on a dark or colorful background such as `blueberry400`.
+
+<ExampleCodeBlock code={ExternalLinkInverse} />
+
+#### Props
+
+Undocumented props are spread to the underlying `<a>` element.
+
+<ArgsTable of={ExternalHyperlink} />
+
+### Accessible Use of the `as` Prop
+
+Like many of our components, `Hyperlink` and `ExternalHyperlink` accept an `as` prop, which lets you change the underlying
+semantic element - usually an `<a>`, or a `<button>`. This should be done with caution to ensure the
+best accessibility. Generally, `<button>` elements should be used for actions, and `<a>` elements
+should be used for navigation.
+
+## Specifications
+
+<Specifications file="Hyperlink.spec.ts" name="Hyperlink" />

package/dist/mdx/react/button/button/examples/ExternalHyperlink.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+
+export default () => (
+  <ExternalHyperlink href="https://workday.com">External Hyperlink</ExternalHyperlink>
+);

package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+export default () => (
+  <Box backgroundColor="blueberry400" padding="s">
+    <ExternalHyperlink href="https://workday.com" variant="inverse">
+      Hyperlink
+    </ExternalHyperlink>
+  </Box>
+);

package/dist/mdx/react/button/button/examples/Hyperlink.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import {Hyperlink} from '@workday/canvas-kit-react/button';
+
+export default () => <Hyperlink href="#hyperlink">Hyperlink</Hyperlink>;

package/dist/mdx/react/button/button/examples/HyperlinkInverse.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {Hyperlink} from '@workday/canvas-kit-react/button';
+import {Box} from '@workday/canvas-kit-react/layout';
+
+export default () => (
+  <Box backgroundColor="blueberry400" padding="s">
+    <Hyperlink href="#hyperlink" variant="inverse">
+      Hyperlink
+    </Hyperlink>
+  </Box>
+);

package/dist/mdx/react/button/button/examples/Tertiary.tsx

@@ -5,8 +5,6 @@ import {HStack} from '@workday/canvas-kit-react/layout';
 import {
   plusIcon,
   relatedActionsVerticalIcon,
-  arrowLeftIcon,
-  arrowRightIcon,
   caretDownIcon,
 } from '@workday/canvas-system-icons-web';
 

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

@@ -99,7 +99,7 @@ hatches for when the default behavior becomes forced. Should you find none of th
 for your use case, we recommend using `Flex` instead of `Stack`, which will provide you with more
 flexibility.
 
-#### Valid Children
+### Valid Children
 
 Because `Stack` applies styles to children, it requires its immediate children to be valid child
 elements. For example, text outside of an HTML tag would not render if it was an immediate `Stack`

package/dist/mdx/react/popup/examples/FocusRedirect.tsx

@@ -49,7 +49,8 @@ export default () => {
               <Popup.CloseButton as={DeleteButton} onClick={handleDelete}>
                 Delete
               </Popup.CloseButton>
-              <Popup.CloseButton>Cancel</Popup.CloseButton>
+              {/* Disabled elements should not be focusable and focus should move to the next focusable element */}
+              <Popup.CloseButton disabled>Cancel</Popup.CloseButton>
             </HStack>
           </Popup.Card>
         </Popup.Popper>

package/dist/mdx/react/tabs/Tabs.mdx

@@ -75,9 +75,9 @@ trigger an event to change the active tab.
 
 ### Named Tabs
 
-`Tabs.Item` and `Tabs.Panel` both take an optional `name` attribute that is used for the
-`onActivate` callback. This example is identical to the Basic Example, but with named tabs for the
-`Tabs.Item` and `Tabs.Panel` subcomponents.
+`Tabs.Item` and `Tabs.Panel` both take an optional `data-id` attribute that is used for the
+`onActivate` callback. This example is identical to the Basic Example, but with tabs named using
+`data-id` for the `Tabs.Item` and `Tabs.Panel` subcomponents.
 
 <ExampleCodeBlock code={NamedTabs} />
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "7.0.0-alpha.95-next.21+da657912",
+  "version": "7.0.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.95-next.21+da657912"
+    "@workday/canvas-kit-react": "^7.0.0"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -49,5 +49,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "da657912adb9b86971737b33838e6f8f22d3264a"
+  "gitHead": "5f2a5c83ce927fa64ac24447f5391e467f51a406"
 }