@workday/canvas-kit-docs 14.0.0-alpha.1211-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,9 +107,35 @@ 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 revolve around the use of our new brand colors.
+Several components have been refactored to reflect our new brand direction. Most of these changes
+revolve around the use of our new brand colors.
 
 The following components have been updated:
 
@@ -114,6 +143,7 @@ The following components have been updated:
 - `Buttons` [#3394](https://github.com/Workday/canvas-kit/pull/3394)
 - `ColorPicker` (Main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
 - `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
+- `InformationHighlight` [#3443](https://github.com/Workday/canvas-kit/pull/3443)
 - `LoadingDots` (Main) [#3393](https://github.com/Workday/canvas-kit/pull/3393)
 - `Pagination` (Preview) [#3300](https://github.com/Workday/canvas-kit/pull/3300)
 - `SearchForm` (Labs) [#3303](https://github.com/Workday/canvas-kit/pull/3303)
@@ -126,9 +156,9 @@ The following components have been updated:
 
 #### TertiaryButton
 
-The `TertiaryButton` component no longer supports the `isThemable` prop.
-To customize the appearance of `TertiaryButton`, use the `cs` prop for custom styles or the `colors`
-prop for palette-based color overrides.
+The `TertiaryButton` component no longer supports the `isThemable` prop. To customize the appearance
+of `TertiaryButton`, use the `cs` prop for custom styles or the `colors` prop for palette-based
+color overrides.
 
 The shape of `TertiaryButton` has changed to have rounded corners, aligning with other buttons and
 our new brand direction.
@@ -246,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.
 
@@ -287,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)
@@ -344,16 +387,20 @@ const customTheme = {
 
 **PR:** [#3287](https://github.com/Workday/canvas-kit/pull/3287)
 
-Preview `StatusIndicator` is a rounder and more vibrant base emphasis (`low`). The `emphasis` prop is now deprecated and the `high` emphasis will be removed in a later version.
+Preview `StatusIndicator` is a rounder and more vibrant base emphasis (`low`). The `emphasis` prop
+is now deprecated and the `high` emphasis will be removed in a later version.
 
 Variant names of the preview `StatusIndicator` have been updated by the following mapping:
+
 - `blue` -> `primary`
 - `green` -> `success`
 - `orange` -> `caution`
 - `red` -> `critical`
 - `gray` -> `neutral`
 
-The `StatusIndicatorVariant` type has been updated to contain the new variant names listed above. If you use the old variant values, update to use the new ones mapped above. It has also been deprecated. Use `StatusIndicatorProps['variant']` instead.
+The `StatusIndicatorVariant` type has been updated to contain the new variant names listed above. If
+you use the old variant values, update to use the new ones mapped above. It has also been
+deprecated. Use `StatusIndicatorProps['variant']` instead.
 
 ## Deprecations
 
@@ -361,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
@@ -405,9 +489,13 @@ promoted or replaced a component or utility.
 
 **PR:** [#3429](https://github.com/Workday/canvas-kit/pull/3439)
 
-Long overdue, but a sign of moving forward, we are removing our `DeprecatedButton`. Our design system supported this for quite some time, but with the advancement in theming, our components API and our flexibility, it is time for us to finally remove this component. This component has served as a reminder of how far we've come and it part we're thankful for this change.
+Long overdue, but a sign of moving forward, we are removing our `DeprecatedButton`. Our design
+system supported this for quite some time, but with the advancement in theming, our components API
+and our flexibility, it is time for us to finally remove this component. This component has served
+as a reminder of how far we've come and it part we're thankful for this change.
 
-Al though unlikely, but not impossible, if you were using `DeprecatedButton` please use our flexible and themable buttons like `PrimaryButton`, `ScondaryButton` or `TertiaryButton`.
+Al though unlikely, but not impossible, if you were using `DeprecatedButton` please use our flexible
+and themable buttons like `PrimaryButton`, `ScondaryButton` or `TertiaryButton`.
 
 ### Menu (preview)
 

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.1211-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.1211-next.0",
-    "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1211-next.0",
-    "@workday/canvas-kit-react": "^14.0.0-alpha.1211-next.0",
-    "@workday/canvas-kit-styling": "^14.0.0-alpha.1211-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": "ea68386b221f4e06e84726aad21c22687919d139"
+  "gitHead": "b5997d670fcef518d13ff761d9a15d54e1d60a21"
 }