@workday/canvas-kit-docs 14.0.0-alpha.1212-next.0 → 14.0.0-alpha.1213-next.0

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

@@ -10,6 +10,7 @@ any questions.
   - [Instructions](#instructions)
 - [Theming](#theming)
 - [Component Updates](#component-updates)
+  - [Avatar in Preview](#avatar-in-preview)
   - [Branding Changes](#branding-changes)
   - [Buttons](#buttons)
   - [Card](#card)
@@ -17,9 +18,11 @@ any questions.
   - [Expandable](#expandable)
   - [Hyperlink & ExternalHyperlink](#hyperlink-and-externalhyperlink)
   - [Loading Dots](#loading-dots)
+  - [Pill](#pill)
   - [SearchForm](#search-form)
   - [Status Indicator (Preview)](#status-indicator-preview)
 - [Deprecations](#deprecations)
+  - [Avatar in Main](#avatar-in-main)
   - [Combobox (Labs)](#combobox-labs)
   - [Radio (Main)](#radio-main)
   - [Segmented Control (Main)](#segmented-control-main)
@@ -104,6 +107,31 @@ yarn remove @workday/canvas-kit-codemod
 
 ## Component Updates
 
+### Avatar in Preview
+
+**PR:** [#3430](https://github.com/Workday/canvas-kit/pull/3430)
+
+A new `Avatar` component has been added to the `@workday/canvas-kit-preview-react` package that matches our brand refresh.
+
+#### API Changes from the Main Avatar
+
+- `Avatar` has a `name` prop. This is required to ensure a fallback if a `url` is not provided. The `name` prop also determines the initials and the `alt` text for the image if a `url` is provided.
+- `url` stays the same. This prop is optional and will be used to display an image `Avatar`.
+- `variant` defines the color of the `Avatar`. The default is `blue` but you can choose one of the following colors:
+  - `teal`
+  - `purple`
+  - `amber`
+  - `blue`
+- By default, the `Avatar` will render a `div` element. If you need to render a `button` element use the `BaseAvatar` component.
+- `size` accepts the following values:
+  - `extraExtraLarge`
+  - `extraLarge`
+  - `large`
+  - `medium`
+  - `small`
+  - `extraSmall`
+	- `extraExtraSmall`
+
 ### Branding Changes 💅
 
 Several components have been refactored to reflect our new brand direction. Most of these changes
@@ -248,12 +276,16 @@ emphasis for the badge.
 
 ### Expandable
 
-**PR:** [#3389](https://github.com/Workday/canvas-kit/pull/3389)
+**PRs:** [#3389](https://github.com/Workday/canvas-kit/pull/3389), [#3430](https://github.com/Workday/canvas-kit/pull/3430)
 
 - `<Expandable.Target>` hover state has been update to use `system.color.bg.alt.soft` instead of
   `system.color.bg.alt.default` to match our new brand directions.
 - The `focus` state has been update to use `system.color.border.primary.default` to ensure the same
   focus state color across all components.
+- `Expandable.Avatar` has been updated to use the `Avatar` component from Preview. This change requires that you update the `altText` prop to `name`.
+
+> 🤖 The codemod will handle the change of `altText` to `name` on `Expandable.Avatar`.
+
 
 These changes are only **visual** and should not affect the functionality of the component.
 
@@ -289,6 +321,15 @@ These changes are only **visual** and should not affect the functionality of the
 <LoadingDots variant="inverse" />
 ```
 
+### Pill
+
+**PR:** [#3430](https://github.com/Workday/canvas-kit/pull/3430)
+
+- `Pill` has been updated to use the `Avatar` component from Preview. This change requires that you provide a value for the `name` prop.
+
+> 🤖 The codemod will handle the change of `altText` to `name` on `Pill.Avatar`.
+
+
 ### Search Form 🚨
 
 **PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
@@ -367,6 +408,43 @@ We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to co
 in a future major release. This signals consumers to migrate to a more stable alternative before the
 deprecated code is removed.
 
+### Avatar in Main
+
+**PR:** [#3430](https://github.com/Workday/canvas-kit/pull/3430)
+
+We've deprecated the `Avatar` component in `@workday/canvas-kit-react` Main package. Please use the `Avatar` component in our Preview package.
+
+**Before in v13**
+
+```tsx
+import { Avatar } from '@workday/canvas-kit-react/avatar';
+
+// For Avatars that where divs
+<Avatar altText="John Doe" size="extraExtraLarge" as="div" url={yourImageUrl} />
+
+// For Avatars that where buttons
+<Avatar altText="John Doe" onClick={() => console.log('Avatar clicked')} />
+```
+
+**After in v14**
+
+```tsx
+import { Avatar } from '@workday/canvas-kit-preview-react/avatar';
+// name is used as a fallback if the image url is broken or still loading
+// variant light or dark are not used. Instead, variant defines the color of the Avatar
+<Avatar name="John Doe" size="extraExtraLarge" variant='teal' url={yourImageUrl} />
+```
+
+If you need to render a `button` element use the `BaseAvatar` component.
+
+```tsx
+import { BaseAvatar } from '@workday/canvas-kit-preview-react/avatar';
+
+<BaseAvatar name="John Doe" size="extraExtraLarge" variant='teal' as="button" onClick={() => console.log('Avatar clicked')}>
+  <BaseAvatar.Name name="John Doe" />
+</BaseAvatar>
+```
+
 ### Combobox (Labs)
 
 The Combobox component in `@workday/canvas-kit-labs-react/combobox` has been deprecated and will be

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

@@ -0,0 +1,80 @@
+import {SymbolDoc, Specifications, ExampleCodeBlock} from '@workday/canvas-kit-docs';
+
+import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import Basic from './examples/Basic';
+import Image from './examples/Image';
+import Size from './examples/Size';
+import Variant from './examples/Variant';
+import Custom from './examples/Custom';
+import Decorative from './examples/Decorative';
+
+
+# Avatar
+
+
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-preview-react
+```
+
+
+## Usage
+
+### Basic Example
+
+The most basic usage requires only a `name` prop. The component automatically extracts and displays
+the initials. If you want to display a different set of initials, you can use the `preferredInitials` prop.
+
+<ExampleCodeBlock code={Basic} />
+
+### Image Avatar
+
+You can display a profile image by providing the `url` prop.
+
+> Note: The `url` and the `name` prop is required for the image avatar. The `name` is used for the `alt` attribute on the image.
+
+#### Image Fallback Behavior
+
+The Avatar component includes intelligent fallback handling:
+
+- While the image loads, the user's initials are displayed using the `name` prop
+- If the image fails to load, initials remain visible
+- The `name` prop serves as both the alt text and fallback content
+
+<ExampleCodeBlock code={Image} />
+
+### Sizes
+
+The Avatar component supports the following sizes:
+- `extraExtraSmall` is 24px x 24px
+- `extraSmall` is 32px x 32px
+- `small` is 40px x 40px
+- `medium` is 48px x 48px
+- `large` is 72px x 72px
+- `extraLarge` is 96px x 96px
+- `extraExtraLarge` is 120px x 120px
+
+<ExampleCodeBlock code={Size} />
+
+### Variants
+
+Choose from four predefined color schemes:
+
+<ExampleCodeBlock code={Variant} />
+
+### Advanced Custom Component
+
+For complete control over styling and behavior, use the `BaseAvatar` component:
+
+<ExampleCodeBlock code={Custom} />
+
+### Accessibility
+If the Avatar is purely decorative, you can set the `isDecorative` prop to `true` to prevent the `name` prop from being forwarded to the `alt` attribute of the image.
+
+<ExampleCodeBlock code={Decorative} />
+
+## Component API
+
+<SymbolDoc name="Avatar" fileName="/preview-react/" hideDescription />

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

@@ -0,0 +1,5 @@
+import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+
+export default () => {
+  return <Avatar name="John Doe" />;
+};

package/dist/mdx/preview-react/avatar/examples/Custom.tsx

@@ -0,0 +1,31 @@
+import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
+import {createStyles, px2rem} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+
+const customStyles = createStyles({
+  cursor: 'pointer',
+  backgroundColor: base.magenta300,
+  color: base.magenta700,
+  borderRadius: '50%',
+  border: 'none',
+  padding: '0',
+  margin: '0',
+  display: 'flex',
+  alignItems: 'center',
+  span: {
+    cursor: 'pointer',
+  },
+});
+
+export default () => {
+  return (
+    <BaseAvatar
+      size={px2rem(56)}
+      cs={customStyles}
+      as="button"
+      onClick={() => console.log('clicked')}
+    >
+      <BaseAvatar.Name name="John Doe Jane" />
+    </BaseAvatar>
+  );
+};

package/dist/mdx/preview-react/avatar/examples/Decorative.tsx

@@ -0,0 +1,25 @@
+import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+// @ts-ignore
+import nicholasAvatar from './nicholas-avatar.png';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {Text} from '@workday/canvas-kit-react/text';
+import {system} from '@workday/canvas-tokens-web';
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+  alignItems: 'center',
+});
+export default () => {
+  return (
+    <div className={containerStyles}>
+      <Avatar
+        name="Nicholas Smith"
+        isDecorative
+        url={nicholasAvatar}
+        objectFit="cover"
+        size="small"
+      />
+      <Text>Nicholas Smith</Text>
+    </div>
+  );
+};

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

@@ -0,0 +1,12 @@
+import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+
+export default () => {
+  return (
+    <Avatar
+      name="Happy Doggo"
+      url={'https://picsum.photos/id/237/300/200'}
+      objectFit="cover"
+      size="medium"
+    />
+  );
+};

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

@@ -0,0 +1,22 @@
+import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export default () => {
+  return (
+    <div className={containerStyles}>
+      <Avatar name="John Doe" size="extraExtraSmall" />
+      <Avatar name="Logan McNeil" size="extraSmall" />
+      <Avatar name="Wonder Woman" size="small" />
+      <Avatar name="Iron Man" size="medium" />
+      <Avatar name="Peter Parker" size="large" />
+      <Avatar name="Bruce Banner" size="extraLarge" />
+      <Avatar name="Elektra" size="extraExtraLarge" />
+    </div>
+  );
+};

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

@@ -0,0 +1,19 @@
+import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
+import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
+
+const containerStyles = createStyles({
+  display: 'inline-flex',
+  gap: system.space.x2,
+});
+
+export default () => {
+  return (
+    <div className={containerStyles}>
+      <Avatar name="John Doe" variant="blue" />
+      <Avatar name="Logan McNeil" variant="amber" />
+      <Avatar name="Wonder Woman" variant="teal" />
+      <Avatar name="Elektra" variant="purple" />
+    </div>
+  );
+};

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

@@ -18,11 +18,11 @@ export default () => {
     <div>
       <div className={flexStyles}>
         <Pill onClick={() => setText('The first pill is clicked!')}>
-          <Pill.Avatar altText="Avatar" url={testAvatar} />
+          <Pill.Avatar name="Regina Skeltor" url={testAvatar} />
           <Pill.Label>Regina Skeltor</Pill.Label>
         </Pill>
         <Pill disabled>
-          <Pill.Avatar altText="Avatar" />
+          <Pill.Avatar name="Regina Skeltor" />
           <Pill.Label>Regina Skeltor</Pill.Label>
         </Pill>
       </div>

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

@@ -25,7 +25,7 @@ export default () => {
           />
         </Pill>
         <Pill variant="removable">
-          <Pill.Avatar altText="Avatar" url={testAvatar} />
+          <Pill.Avatar name="Avatar" url={testAvatar} />
           <Pill.Label>Carolyn Grimaldi</Pill.Label>
           <Pill.IconButton
             aria-label="Remove"

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

@@ -20,7 +20,7 @@ import {
 } from '@workday/canvas-system-icons-web';
 
 import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {Avatar} from '@workday/canvas-kit-preview-react/avatar';
 import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 import {LoadReturn} from '@workday/canvas-kit-react/collection';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
@@ -149,7 +149,7 @@ export default () => {
             <TertiaryButton icon={inboxIcon} />
           </Tooltip>
           <Tooltip title="Profile">
-            <Avatar altText="Avatar" />
+            <Avatar name="Avatar" />
           </Tooltip>
         </GlobalHeader.Item>
       </GlobalHeader>

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

@@ -1,4 +1,5 @@
-import {Specifications, SymbolDoc, SymbolDescription, ExampleCodeBlock} from '@workday/canvas-kit-docs';
+import {Specifications, SymbolDoc, SymbolDescription, ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
+import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
 
 import Basic from './examples/Basic';
 import Button from './examples/Button';
@@ -10,7 +11,16 @@ import Variant from './examples/Variant';
 import CustomStyles from './examples/CustomStyles';
 
 
-# Canvas Kit Avatar
+# Canvas Kit Avatar <StorybookStatusIndicator type="deprecated" />
+
+<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
+  <InformationHighlight.Icon />
+  <InformationHighlight.Body>
+    `Avatar` in Main has been deprecated and will be removed in a future major version.
+    Please use [Avatar](https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--basic) in
+    Preview instead.
+  </InformationHighlight.Body>
+</InformationHighlight>
 
 Represents a person's profile.
 

package/dist/mdx/react/expandable/examples/Avatar.tsx

@@ -7,7 +7,7 @@ export default () => (
     <Expandable>
       <Expandable.Target headingLevel="h4">
         <Expandable.Icon iconPosition="start" />
-        <Expandable.Avatar altText="Avatar" url={testAvatar} />
+        <Expandable.Avatar name="Avatar" url={testAvatar} />
         <Expandable.Title>Title</Expandable.Title>
       </Expandable.Target>
 
@@ -15,7 +15,7 @@ export default () => (
     </Expandable>
     <Expandable>
       <Expandable.Target headingLevel="h4">
-        <Expandable.Avatar altText="Avatar" url={testAvatar} />
+        <Expandable.Avatar name="Avatar" url={testAvatar} />
         <Expandable.Title>Title</Expandable.Title>
         <Expandable.Icon iconPosition="end" />
       </Expandable.Target>

package/dist/mdx/react/expandable/examples/LongTitle.tsx

@@ -6,7 +6,7 @@ export default () => (
   <Expandable>
     <Expandable.Target headingLevel="h4">
       <Expandable.Icon iconPosition="start" />
-      <Expandable.Avatar altText="Avatar" url={testAvatar} />
+      <Expandable.Avatar name="Avatar" url={testAvatar} />
       <Expandable.Title>
         Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
         onions, and oregano.

package/dist/mdx/react/expandable/examples/RTL.tsx

@@ -12,7 +12,7 @@ export default () => {
       <Expandable>
         <Expandable.Target headingLevel="h4">
           <Expandable.Icon iconPosition="start" />
-          <Expandable.Avatar />
+          <Expandable.Avatar name="Avatar" />
           <Expandable.Title>Title</Expandable.Title>
         </Expandable.Target>
 
@@ -20,7 +20,7 @@ export default () => {
       </Expandable>
       <Expandable>
         <Expandable.Target headingLevel="h4">
-          <Expandable.Avatar />
+          <Expandable.Avatar name="Avatar" />
           <Expandable.Title>Title</Expandable.Title>
           <Expandable.Icon iconPosition="end" />
         </Expandable.Target>

package/package.json

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