@workday/canvas-kit-docs 13.0.0-alpha.1080-next.0 → 13.0.0-alpha.1084-next.0

package/dist/es6/lib/widgets/enhancedComponent.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { Expandable } from '@workday/canvas-kit-labs-react/expandable';
+import { Expandable } from '@workday/canvas-kit-react/expandable';
 import { defaultJSDoc } from '../../docgen/docParser';
 import { MDX } from '../MDXElements';
 import { SymbolDoc } from '../SymbolDoc';

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

@@ -18,6 +18,8 @@ any questions.
   - [Instructions](#instructions)
 - [Component Updates](#component-updates)
   - [Styling API and CSS Tokens](#styling-api-and-css-tokens)
+  - [Avatar](#avatar)
+  - [Expandable](#expandable)
   - [External Hyperlink](#external-hyperlink)
   - [Pill](#pill)
   - [Tabs](#tabs)
@@ -121,6 +123,34 @@ The following components are affected:
 - `Tabs`
 - `Tooltip`
 
+### Avatar
+
+**PR:** [#3231](https://github.com/Workday/canvas-kit/pull/3231)
+
+A few changes have been made to `Avatar` to ensure proper accessibility.
+
+##### Breaking Changes
+
+- The `altText` prop no longer has a default of `"Avatar"` for better internalization. The default was an English word (“Avatar”) and this has caused issues in the past with translations.
+
+>**Note:** You *must* provide an `altText` for `<Avatar />, <Pill.Avatar />, <Expandable.Avatar />` to ensure proper accessibility.  Our examples have been updated to reflect this change.
+
+### Expandable
+
+**PR:** [#3213](https://github.com/Workday/canvas-kit/pull/3213)
+
+We've promoted `Expandable` from [Labs](#labs) to [Main](#main).
+
+```tsx
+// v12
+import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+
+// v13
+import {Expandable} from '@workday/canvas-kit-react/expandable';
+```
+
+🤖 The codemod will handle the change of imports as shown above.
+
 ### External Hyperlink
 
 **PR:** [#3101](https://github.com/Workday/canvas-kit/pull/3101)
@@ -170,11 +200,11 @@ A few changes have been made to `Pill` to ensure proper accessibility and styles
 We've removed the outdated Dub Logos in Main and promoted the new logos that were previously in our Preview package to Main as part of the brand refresh.
 
 | Old Logo Name | New Logo Name |
-| --------------- | ----------------- | 
-| dubLogoBlue | dubLogoPrimary | 
-| dubLogoWhite | dubLogoReversed | 
-| wdayLogoBlue | wdayLogoPrimary | 
-| wdayLogoWhite | wdayLogoReversed | 
+| --------------- | ----------------- |
+| dubLogoBlue | dubLogoPrimary |
+| dubLogoWhite | dubLogoReversed |
+| wdayLogoBlue | wdayLogoPrimary |
+| wdayLogoWhite | wdayLogoReversed |
 
 ```tsx
 // In v12

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 url={testAvatar} />
+          <Pill.Avatar altText="Avatar" url={testAvatar} />
           <Pill.Label>Regina Skeltor</Pill.Label>
         </Pill>
         <Pill disabled>
-          <Pill.Avatar />
+          <Pill.Avatar altText="Avatar" />
           <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 url={testAvatar} />
+          <Pill.Avatar altText="Avatar" url={testAvatar} />
           <Pill.Label>Carolyn Grimaldi</Pill.Label>
           <Pill.IconButton
             aria-label="Remove"

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

@@ -149,7 +149,7 @@ export default () => {
             <TertiaryButton icon={inboxIcon} />
           </Tooltip>
           <Tooltip title="Profile">
-            <Avatar />
+            <Avatar altText="Avatar" />
           </Tooltip>
         </GlobalHeader.Item>
       </GlobalHeader>

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

@@ -3,7 +3,7 @@ import {base, system} from '@workday/canvas-tokens-web';
 import {SidePanel, useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {Heading, Subtext, Text} from '@workday/canvas-kit-react/text';
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {Hyperlink, TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Menu} from '@workday/canvas-kit-react/menu';

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

@@ -11,7 +11,7 @@ const containerStyles = createStyles({
 
 export default () => (
   <div className={containerStyles}>
-    <Avatar onClick={handleAvatarButtonClick} />
-    <Avatar as="div" />
+    <Avatar altText="Avatar" onClick={handleAvatarButtonClick} />
+    <Avatar altText="Avatar" as="div" />
   </div>
 );

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

@@ -13,8 +13,8 @@ const containerStyles = createStyles({
 
 export default () => (
   <div className={containerStyles}>
-    <Avatar variant="dark" onClick={handleAvatarButtonClick} />
-    <Avatar onClick={handleAvatarButtonClick} />
-    <Avatar url={testAvatar} onClick={handleAvatarButtonClick} />
+    <Avatar altText="Avatar" variant="dark" onClick={handleAvatarButtonClick} />
+    <Avatar altText="Avatar" onClick={handleAvatarButtonClick} />
+    <Avatar altText="Avatar" url={testAvatar} onClick={handleAvatarButtonClick} />
   </div>
 );

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

@@ -28,7 +28,7 @@ const containerStyles = createStyles({
 
 export default () => (
   <div className={containerStyles}>
-    <Avatar as="div" {...customBlueAvatarStencil()} />
-    <Avatar as="div" {...customGreenAvatarStencil()} />
+    <Avatar altText="Avatar" as="div" {...customBlueAvatarStencil()} />
+    <Avatar altText="Avatar" as="div" {...customGreenAvatarStencil()} />
   </div>
 );

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

@@ -13,13 +13,13 @@ const containerStyles = createStyles({
 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} />
+    <Avatar altText="Avatar" size="extraExtraLarge" as="div" url={testAvatar} />
+    <Avatar altText="Avatar" size="extraLarge" as="div" url={testAvatar} />
+    <Avatar altText="Avatar" size="large" as="div" url={testAvatar} />
+    <Avatar altText="Avatar" size="medium" as="div" url={testAvatar} />
+    <Avatar altText="Avatar" size="small" as="div" url={testAvatar} />
+    <Avatar altText="Avatar" size="extraSmall" as="div" url={testAvatar} />
     <h3>Broken Image</h3>
-    <Avatar url="/fake/path/to/image.png" as="div" />
+    <Avatar altText="Avatar" url="/fake/path/to/image.png" as="div" />
   </div>
 );

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

@@ -6,7 +6,13 @@ export default () => (
   <div className="story">
     {Array.from({length: 5}, (v, index) => (
       <>
-        <Avatar key={index} as="div" size="medium" url={testAvatar + '?v=' + index} />
+        <Avatar
+          altText="Avatar"
+          key={index}
+          as="div"
+          size="medium"
+          url={testAvatar + '?v=' + index}
+        />
         <br />
       </>
     ))}

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

@@ -6,9 +6,10 @@ export default () => (
     <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" />
+    <Avatar altText="Avatar" as="div" url="https://picsum.photos/id/237/300/200" />
     <h3>Object fit on a Rectangle Image using Dynamic Size</h3>
     <Avatar
+      altText="Avatar"
       as="div"
       size={px2rem(200)}
       url="https://picsum.photos/id/237/300/200"
@@ -17,8 +18,13 @@ export default () => (
     <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" />
+    <Avatar altText="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" />
+    <Avatar
+      altText="Avatar"
+      as="div"
+      size={px2rem(200)}
+      url="https://picsum.photos/id/237/300/300"
+    />
   </div>
 );

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

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

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

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

package/dist/mdx/{labs-react → react}/expandable/Expandable.mdx

@@ -16,7 +16,7 @@ import HoistedModel from './examples/HoistedModel';
 ## Installation
 
 ```sh
-yarn add @workday/canvas-kit-labs-react
+yarn add @workday/canvas-kit-react
 ```
 
 ## Usage
@@ -79,4 +79,4 @@ the example below, we're hoisting the models to expand and collapse all three co
 
 ## Component API
 
-<SymbolDoc name="Expandable" fileName="/labs-react/" />
+<SymbolDoc name="Expandable" fileName="/react/" />

package/dist/mdx/{labs-react → react}/expandable/examples/Avatar.tsx

@@ -1,4 +1,4 @@
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
 
@@ -7,7 +7,7 @@ export default () => (
     <Expandable>
       <Expandable.Target headingLevel="h4">
         <Expandable.Icon iconPosition="start" />
-        <Expandable.Avatar url={testAvatar} />
+        <Expandable.Avatar altText="Avatar" url={testAvatar} />
         <Expandable.Title>Title</Expandable.Title>
       </Expandable.Target>
 
@@ -15,7 +15,7 @@ export default () => (
     </Expandable>
     <Expandable>
       <Expandable.Target headingLevel="h4">
-        <Expandable.Avatar url={testAvatar} />
+        <Expandable.Avatar altText="Avatar" url={testAvatar} />
         <Expandable.Title>Title</Expandable.Title>
         <Expandable.Icon iconPosition="end" />
       </Expandable.Target>

package/dist/mdx/{labs-react → react}/expandable/examples/Depth.tsx

@@ -1,5 +1,4 @@
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
-import {space} from '@workday/canvas-kit-react/tokens';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 
 export default () => {
   return (

package/dist/mdx/{labs-react → react}/expandable/examples/EndIcon.tsx

@@ -1,4 +1,4 @@
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 
 export default () => (
   <Expandable>

package/dist/mdx/{labs-react → react}/expandable/examples/HoistedModel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Expandable, useExpandableModel} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable, useExpandableModel} from '@workday/canvas-kit-react/expandable';
 import {Flex} from '@workday/canvas-kit-react/layout';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 

package/dist/mdx/{labs-react → react}/expandable/examples/LongTitle.tsx

@@ -1,4 +1,4 @@
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 // @ts-ignore: Cannot find module error
 import testAvatar from './test-avatar.png';
 
@@ -6,7 +6,7 @@ export default () => (
   <Expandable>
     <Expandable.Target headingLevel="h4">
       <Expandable.Icon iconPosition="start" />
-      <Expandable.Avatar url={testAvatar} />
+      <Expandable.Avatar altText="Avatar" url={testAvatar} />
       <Expandable.Title>
         Our house special supreme pizza includes pepperoni, sausage, bell peppers, mushrooms,
         onions, and oregano.

package/dist/mdx/{labs-react → react}/expandable/examples/RTL.tsx

@@ -1,4 +1,4 @@
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 
 export default () => {

package/dist/mdx/{labs-react → react}/expandable/examples/StartIcon.tsx

@@ -1,4 +1,4 @@
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 
 export default () => (
   <Expandable>

package/dist/mdx/react/menu/Menu.mdx

@@ -3,6 +3,7 @@ import Basic from './examples/Basic';
 import ContextMenu from './examples/ContextMenu';
 import Icons from './examples/Icons';
 import SelectableMenu from './examples/SelectableMenu';
+import Grouping from './examples/Grouping';
 
 # Canvas Kit Menu
 
@@ -69,6 +70,17 @@ behaviors depend on many other things. To see a full example of all these behavi
 
 <ExampleCodeBlock code={SelectableMenu} />
 
+### Grouping
+
+Grouping adds hierarchy and categorization to menu items. Group headers do not represent menu items
+and are not selectable with the keyboard or mouse.
+
+> **Note**: Grouping is not supported in virtual rendering. Menus by default have `shouldVirtualize`
+> set to `false`. Setting to `true` results in unspecified behavior. We use `react-virtual` which
+> doesn't support nested virtualization.
+
+<ExampleCodeBlock code={Grouping} />
+
 ## Component API
 
 <SymbolDoc name="Menu" fileName="/react/" />

package/dist/mdx/react/menu/examples/Grouping.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {BodyText} from '@workday/canvas-kit-react/text';
+
+export default () => {
+  const [selected, setSelected] = React.useState('');
+  return (
+    <>
+      <Menu onSelect={data => setSelected(data.id)}>
+        <Menu.Target>Open Menu</Menu.Target>
+        <Menu.Popper>
+          <Menu.Card>
+            <Menu.List>
+              <Menu.Group title="First Group">
+                <Menu.Item>First Item</Menu.Item>
+                <Menu.Item>Second Item</Menu.Item>
+              </Menu.Group>
+              <Menu.Group title="Second Group">
+                <Menu.Item>Third Item (with a really, really, really long label)</Menu.Item>
+                <Menu.Item aria-disabled>Fourth Item</Menu.Item>
+              </Menu.Group>
+            </Menu.List>
+          </Menu.Card>
+        </Menu.Popper>
+        <BodyText size="small" marginTop="s">
+          Selected: <span data-testid="output">{selected}</span>
+        </BodyText>
+      </Menu>
+    </>
+  );
+};

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

@@ -22,6 +22,7 @@ export default () => {
   const [value, setValue] = React.useState('');
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    console.log('change', event.currentTarget.value);
     setValue(event.target.value);
   };
 

package/lib/widgets/enhancedComponent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 
 import {defaultJSDoc} from '../../docgen/docParser';
 import {EnhancedComponentValue} from '../../docgen/plugins/customTypes';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.0.0-alpha.1080-next.0",
+  "version": "13.0.0-alpha.1084-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": "^13.0.0-alpha.1080-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1080-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.1080-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.1080-next.0",
+    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.1084-next.0",
+    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.1084-next.0",
+    "@workday/canvas-kit-react": "^13.0.0-alpha.1084-next.0",
+    "@workday/canvas-kit-styling": "^13.0.0-alpha.1084-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "3a91b45efddac2543b8c0d88f2e33f54133778ea"
+  "gitHead": "7e212f823aba1ffbb1965c6ffdf8e270ad575a96"
 }