@workday/canvas-kit-docs 12.0.0-alpha.852-next.0 → 12.0.0-alpha.862-next.0

package/dist/es6/lib/specs.js

@@ -538,7 +538,7 @@ module.exports = {specifications: [
         "children": [
           {
             "type": "describe",
-            "name": "given default avatar light is rendered",
+            "name": "given default avatar is rendered",
             "children": [
               {
                 "type": "it",

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

@@ -42,10 +42,9 @@ A note to the reader:
   - [InputIconContainer](#inputiconcontainer)
   - [Select (Preview)](#select-preview)
 - [Component Updates](#component-updates)
-  - [Popup, Dialog and Modal](#popup-dialog-and-modal)
-  - [Toast](#toast)
-- [Style Utility Updates](#style-utility-updates)
-  - [createStencil](#createstencil)
+  - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+  - [Avatar](#avatar)
+  - [Text Area](#text-area)
 - [Troubleshooting](#troubleshooting)
 - [Glossary](#glossary)
   - [Main](#main)
@@ -57,8 +56,8 @@ A note to the reader:
 In v12, all the components listed in this guide have started using our new
 [Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
 
-In v12 you must add `@workday/canvas-tokens-web` to ensure our components are properly styled and the
-variables are defined. For more information on installing and using, please reference our tokens
+In v12 you must add `@workday/canvas-tokens-web` to ensure our components are properly styled and
+the variables are defined. For more information on installing and using, please reference our tokens
 [docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
 
 ## Deprecations
@@ -68,19 +67,24 @@ in a future major release. This signals consumers to migrate to a more stable al
 deprecated code is removed.
 
 ## Removals
-Removals are deletions from our codebase and you can no longer consume this component. We've either promoted or replaced a component or utility.
+
+Removals are deletions from our codebase and you can no longer consume this component. We've either
+promoted or replaced a component or utility.
 
 ### Select (Preview)
 
 **PR:** [#2796](https://github.com/Workday/canvas-kit/pull/2796)
 
-We've removed the `Select` component that was in Preview. Please use the compound [Select component from Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic).
+We've removed the `Select` component that was in Preview. Please use the compound
+[Select component from Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic).
 
 ### InputIconContainer
 
 **PR:** [#2838](https://github.com/Workday/canvas-kit/pull/2838)
 
-We've removed `InputIconContainer` from Main. Please use [InputGroup](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons) from Main instead.
+We've removed `InputIconContainer` from Main. Please use
+[InputGroup](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--icons)
+from Main instead.
 
 ---
 
@@ -88,6 +92,10 @@ We've removed `InputIconContainer` from Main. Please use [InputGroup](https://wo
 
 ### Styling API and CSS Tokens
 
+**PRs:** [#2825](https://github.com/Workday/canvas-kit/pull/2825),
+[#2795](https://github.com/Workday/canvas-kit/pull/2795),
+[#2793](https://github.com/Workday/canvas-kit/pull/2793)
+
 Several components have been refactored to use our new
 [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
 [styling API](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
@@ -95,24 +103,42 @@ The React interface **has not changed**, but CSS variables are now used for dyna
 
 The following components are affected:
 
-- `Popup`
+- `Avatar`
 - `Dialog`
 - `Modal`
+- `Popup`
+- `TextArea`
+- `TextInput`
 - `Toast`
 
 > **Note:** These components also support our new `cs` prop for styling. Learn more about styling
 > with `cs` in our
 > [documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--cs-prop).
 
-### Popup, Dialog and Modal
+### Avatar
+
+- Avatar no longer uses `SystemIconCircle` for sizing.
+- `Avatar.Size` is no longer supported. The `size` prop type has change to accept the following:
+  `"extraExtraLarge" | "extraLarge" | "large" | "medium" | "small" | "extraSmall" | (string{})`
+- `Avatar.Variant` is no longer supported. Enum `AvatarVariant` has been removed. The `variant` type
+  prop now accepts `"dark" | "light"`
+- The `as` prop now accepts any element, not just `div`.
+
+### Text Area
 
-**PR:** [#2795](https://github.com/Workday/canvas-kit/pull/2795)
+**PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825)
 
-### Toast
+`TextAreaResizeDirection` is no longer a TypeScript enum, but a JavaScript object. This change does
+not effect runtime at all, but may cause TypeScript errors if you use `TextAreaResizeDirection` as a
+type.
 
-**PR:** [#2795](https://github.com/Workday/canvas-kit/pull/2795)
+```tsx
+// v11
+interface MyProps { resize?: TextAreaResizeDirection }
 
-## Style Utility Updates
+// 12 type ValueOf<T> = T[keyof T]; interface MyProps { resize?:
+ValueOf<typeof TextAreaResizeDirection> }
+```
 
 ## Troubleshooting
 

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

@@ -31,7 +31,7 @@ export default () => (
       <TertiaryButton aria-label="messages" icon={assistantIcon} />
       <TertiaryButton aria-label="notifications" icon={notificationsIcon} />
       <TertiaryButton aria-label="inbox" icon={inboxIcon} />
-      <Avatar size={Avatar.Size.m} variant={Avatar.Variant.Light} />
+      <Avatar size="medium" variant="light" />
     </GlobalHeader.Item>
   </GlobalHeader>
 );

package/dist/mdx/react/avatar/avatar/Avatar.mdx

@@ -0,0 +1,93 @@
+import {Specifications, SymbolDoc, SymbolDescription} from '@workday/canvas-kit-docs';
+
+import {Basic} from '../avatar/examples/Basic';
+import {Button} from '../avatar/examples/Button';
+import {Image} from '../avatar/examples/Image';
+import {LazyLoad} from '../avatar/examples/LazyLoad';
+import {ObjectFit} from '../avatar/examples/ObjectFit';
+import {Size} from '../avatar/examples/Size';
+import {Variant} from '../avatar/examples/Variant';
+import {CustomStyles} from '../avatar/examples/CustomStyles';
+
+
+# Canvas Kit Avatar
+
+Represents a person's profile.
+
+[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/avatar)
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Usage
+
+<SymbolDescription name="Avatar" fileName="/react/" />
+
+The example below shows multiple instances of a `Avatar` with various configurations.
+
+### Basic
+
+By default, the Avatar renders a `button` element. If yo'd like to change the default element, use
+the `as` prop.
+
+<ExampleCodeBlock code={Basic} />
+
+### Button
+
+Like many of our components, Avatar accepts an `as` prop, which lets you change the underlying
+semantic element to a `div`. This should be done with caution to ensure the best accessibility.
+Generally, `<button>` elements should be used for actions.
+
+<ExampleCodeBlock code={Button} />
+
+### Variant
+
+Avatar defaults to using a `"light"` `variant` property. You can change the `variant` prop to "dark"
+by including `variant="dark"`.
+
+<ExampleCodeBlock code={Variant} />
+
+### Size
+
+Avatar defaults to using a `"medium"` `size` property. You can change the `size` prop to various
+sizing options. See Component API for more details.
+
+Additionally, you can explicitly specify the size you want for the Avatar in pixels or rems.
+
+<ExampleCodeBlock code={Size} />
+
+### Image
+
+Avatar renders an image when the `url` prop is defined.
+
+<ExampleCodeBlock code={Image} />
+
+### Object Fit
+
+Avatar defaults to using `contain` for object-fit. You can change this property to any other
+acceptable `object-fit` properties. For best fit, try to use square images.
+
+<ExampleCodeBlock code={ObjectFit} />
+
+### Lazy Load
+
+Example of implementing lazy load behavior with Avatar.
+
+<ExampleCodeBlock code={LazyLoad} />
+
+### Custom Styling
+
+To change the background color of the Avatar, you can use our `createStencil` functionality.
+
+<ExampleCodeBlock code={CustomStyles} />
+
+## Component API
+
+<SymbolDoc name="Avatar" fileName="/react/" />
+
+## Specifications
+
+<Specifications file="Avatar.spec.ts" name="Avatar" />

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export default () => (
+  <div className={containerStyles}>
+    <Avatar onClick={handleAvatarButtonClick} />
+    <Avatar as="div" />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/Button.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../test-avatar.png';
+
+const handleAvatarButtonClick = () => console.log('AvatarButton clicked');
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export default () => (
+  <div className={containerStyles}>
+    <Avatar variant="dark" onClick={handleAvatarButtonClick} />
+    <Avatar onClick={handleAvatarButtonClick} />
+    <Avatar url={testAvatar} onClick={handleAvatarButtonClick} />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/CustomStyles.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {createStencil, createStyles} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+import {systemIconStencil} from '../../../../icon';
+
+const customBlueAvatarStencil = createStencil({
+  base: {
+    backgroundColor: base.berrySmoothie400,
+    ['[data-slot="avatar-icon"]']: {
+      [systemIconStencil.vars.color]: base.berrySmoothie100,
+    },
+  },
+});
+
+const customGreenAvatarStencil = createStencil({
+  base: {
+    backgroundColor: base.watermelon400,
+    ['[data-slot="avatar-icon"]']: {
+      [systemIconStencil.vars.color]: base.watermelon100,
+    },
+  },
+});
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export default () => (
+  <div className={containerStyles}>
+    <Avatar as="div" {...customBlueAvatarStencil()} />
+    <Avatar as="div" {...customGreenAvatarStencil()} />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/Image.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../test-avatar.png';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: system.space.x2,
+});
+
+export default () => (
+  <div className={containerStyles}>
+    <h3>Working Images</h3>
+    <Avatar size="extraExtraLarge" as="div" url={testAvatar} />
+    <Avatar size="extraLarge" as="div" url={testAvatar} />
+    <Avatar size="large" as="div" url={testAvatar} />
+    <Avatar size="medium" as="div" url={testAvatar} />
+    <Avatar size="small" as="div" url={testAvatar} />
+    <Avatar size="extraSmall" as="div" url={testAvatar} />
+    <h3>Broken Image</h3>
+    <Avatar url="/fake/path/to/image.png" as="div" />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/LazyLoad.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+// @ts-ignore: Cannot find module error
+import testAvatar from '../../test-avatar.png';
+
+export default () => (
+  <div className="story">
+    {Array.from({length: 5}, (v, index) => (
+      <>
+        <Avatar key={index} as="div" size="medium" url={testAvatar + '?v=' + index} />
+        <br />
+      </>
+    ))}
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/ObjectFit.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {px2rem} from '@workday/canvas-kit-styling';
+
+export default () => (
+  <div className="story">
+    <h3>Original Rectangle Image</h3>
+    <img alt="" src="https://picsum.photos/id/237/300/200" />
+    <h3>Object fit on a Rectangle Image</h3>
+    <Avatar as="div" url="https://picsum.photos/id/237/300/200" />
+    <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
+    <Avatar
+      as="div"
+      size={px2rem(200)}
+      url="https://picsum.photos/id/237/300/200"
+      objectFit="contain"
+    />
+    <h3>Original Square Image</h3>
+    <img alt="" src="https://picsum.photos/id/237/300/300" />
+    <h3>Object fit on a Square Image</h3>
+    <Avatar as="div" url="https://picsum.photos/id/237/300/300" />
+    <h3>Object fit on a Square Image using Dynamic Size</h3>
+    <Avatar as="div" size={px2rem(200)} url="https://picsum.photos/id/237/300/300" />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/Size.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {px2rem} from '@workday/canvas-kit-styling';
+
+export default () => (
+  <div className="story">
+    <h3>Extra-Extra Large</h3>
+    <Avatar as="div" size="extraExtraLarge" />
+    <h3>Extra Large</h3>
+    <Avatar as="div" size="extraLarge" />
+    <h3>Large</h3>
+    <Avatar as="div" size="large" />
+    <h3>Medium</h3>
+    <Avatar as="div" size="medium" />
+    <h3>Small</h3>
+    <Avatar as="div" size="small" />
+    <h3>Extra Small</h3>
+    <Avatar as="div" size="extraSmall" />
+    <h3>30px</h3>
+    <Avatar as="div" size={px2rem(30)} />
+    <h3>40px</h3>
+    <Avatar as="div" size={px2rem(40)} />
+    <h3>3rem</h3>
+    <Avatar as="div" size="3rem" />
+    <h3>4rem</h3>
+    <Avatar as="div" size="4rem" />
+  </div>
+);

package/dist/mdx/react/avatar/avatar/examples/Variant.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+
+export default () => (
+  <div className="story">
+    <h3>Light</h3>
+    <Avatar as="div" size="medium" />
+    <h3>Dark</h3>
+    <Avatar as="div" size="medium" variant="dark" />
+  </div>
+);

package/dist/mdx/react/popup/Popup.mdx

@@ -160,7 +160,7 @@ the popup's stack context when entering/exiting fullscreen.
 
 <ExampleCodeBlock code={FullScreen} />
 
-### Opening an external window
+### Opening an External Window
 
 A popup can open an external window. This isn't supported directly. The `Popup.Popper` subcomponent
 is replaced with a custom subcomponent that connects to the Popup model and controls the lifecycle

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

@@ -16,7 +16,7 @@ import {
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {Popup, usePopupModel} from '@workday/canvas-kit-react/popup';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
-import {Flex} from '../../../layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 const mainContentStyles = createStyles({
   padding: system.space.x4,
@@ -106,7 +106,6 @@ const ExternalWindowPortal = ({
       onWindowClose();
     };
 
-
     window.addEventListener('unload', closeWindow);
     newWindow?.addEventListener('unload', closeWindow);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.0.0-alpha.852-next.0",
+  "version": "12.0.0-alpha.862-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.852-next.0",
-    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.852-next.0",
-    "@workday/canvas-kit-react": "^12.0.0-alpha.852-next.0",
-    "@workday/canvas-kit-styling": "^12.0.0-alpha.852-next.0",
+    "@workday/canvas-kit-labs-react": "^12.0.0-alpha.862-next.0",
+    "@workday/canvas-kit-preview-react": "^12.0.0-alpha.862-next.0",
+    "@workday/canvas-kit-react": "^12.0.0-alpha.862-next.0",
+    "@workday/canvas-kit-styling": "^12.0.0-alpha.862-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.0",
     "markdown-to-jsx": "^7.2.0",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "bbd7343aec2a6657b8eff4981a7aa4a6e47af161"
+  "gitHead": "3b7726adda5b24aff4229e4ee8ca9f4f83522be3"
 }