Merge branch 'prerelease/major' of https://github.com/Workday/canvas-kit

 into add-select-preview-24-09

.storybook/preview.js

@@ -1,4 +1,5 @@
-import {DocsPage, DocsContainer} from '@storybook/addon-docs';
+import React from 'react';
+import {DocsPage, DocsContainer, Unstyled} from '@storybook/addon-docs';
 import 'cypress-storybook/react';
 import routes from './routes';
 
@@ -12,6 +13,14 @@ import '@workday/canvas-tokens-web/css/system/_variables.css';
 // set routes on window for testing the validity of the routes
 window.__routes = routes;
 
+const UnstyledDocsContainer = ({children, ...props}) => {
+  return (
+    <DocsContainer {...props}>
+      <Unstyled>{children}</Unstyled>
+    </DocsContainer>
+  );
+};
+
 export const decorators = [CanvasProviderDecorator];
 
 export const parameters = {

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [v11.1.10](https://github.com/Workday/canvas-kit/releases/tag/v11.1.10) (2024-09-16)
+
+
+
+
+## [v11.1.9](https://github.com/Workday/canvas-kit/releases/tag/v11.1.9) (2024-09-16)
+
+### Documentation, examples
+
+- docs: Fixing NotificationBadge storybook example ([#2903](https://github.com/Workday/canvas-kit/pull/2903)) ([@williamjstanton](https://github.com/williamjstanton), William Stanton)
+
+
 ## [v11.1.8](https://github.com/Workday/canvas-kit/releases/tag/v11.1.8) (2024-09-06)
 
 ### Components

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "modules/**"
   ],
-  "version": "11.1.8",
+  "version": "11.1.10",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "command": {

modules/codemod/package.json

@@ -2,7 +2,7 @@
   "name": "@workday/canvas-kit-codemod",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
-  "version": "11.1.8",
+  "version": "11.1.10",
   "description": "A collection of codemods for use on Workday Canvas Kit packages.",
   "main": "dist/es6/index.js",
   "sideEffects": false,

modules/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-css",
-  "version": "11.1.8",
+  "version": "11.1.10",
   "description": "The parent module that contains all Workday Canvas Kit CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

modules/docs/lib/ExampleCodeBlock.tsx

@@ -48,7 +48,7 @@ export const ExampleCodeBlock = ({code}: any) => {
 
   return (
     <div {...cardStencil({opened: isCodeDisplayed})}>
-      <Card data-part="example-block">
+      <Card data-part="example-block" className="sb-unstyled">
         <Card.Body>
           {React.createElement(code)}
           {code && (

modules/docs/mdx/12.0-UPGRADE-GUIDE.mdx

@@ -39,6 +39,8 @@ A note to the reader:
 
 - [Canvas Tokens](#canvas-tokens)
 - [Codemod](#codemod)
+- [Styling Updates](#styling-updates)
+  - [Compatability Mode](#compatability-mode)
 - [Deprecations](#deprecations)
 - [Removals](#removals)
   - [InputIconContainer](#inputiconcontainer)
@@ -68,6 +70,12 @@ In v12, we have done some infrastructure updates with moving to Webpack 5 and St
 these updates has come some formatting issues after running our codemods. We recommend running a
 formatter to address the format issues that have been introduced in v12.
 
+## Styling Updates
+
+### Compatability Mode
+
+In v12, we have addressed a style merge issue with removing forced compatibility mode. For more information on this change, please read our [discussion](https://github.com/Workday/canvas-kit/discussions/2893).
+
 ## Deprecations
 
 We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove

modules/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.1.8",
+  "version": "11.1.10",
   "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": "^11.1.8",
-    "@workday/canvas-kit-preview-react": "^11.1.8",
-    "@workday/canvas-kit-react": "^11.1.8",
-    "@workday/canvas-kit-styling": "^11.1.8",
+    "@workday/canvas-kit-labs-react": "^11.1.10",
+    "@workday/canvas-kit-preview-react": "^11.1.10",
+    "@workday/canvas-kit-react": "^11.1.10",
+    "@workday/canvas-kit-styling": "^11.1.10",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "react-syntax-highlighter": "^15.5.0",

modules/labs-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-css",
-  "version": "11.1.8",
+  "version": "11.1.10",
   "description": "The parent module that contains all Workday Canvas Kit Labs CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

modules/labs-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "11.1.8",
+  "version": "11.1.10",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^11.1.8",
-    "@workday/canvas-kit-styling": "^11.1.8",
+    "@workday/canvas-kit-react": "^11.1.10",
+    "@workday/canvas-kit-styling": "^11.1.10",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8",

modules/popup-stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-popup-stack",
-  "version": "11.1.8",
+  "version": "11.1.10",
   "description": "Stack for managing popup UIs to coordinate global concerns like escape key handling and rendering order",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

modules/preview-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-css",
-  "version": "11.1.8",
+  "version": "11.1.10",
   "description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

modules/preview-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-preview-react",
-  "version": "11.1.8",
+  "version": "11.1.10",
   "description": "Canvas Kit Preview is made up of components that have the full design and a11y review, are part of the DS ecosystem and are approved for use in product. The API's could be subject to change, but not without strong communication and migration strategies.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -46,8 +46,8 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-react": "^11.1.8",
-    "@workday/canvas-kit-styling": "^11.1.8",
+    "@workday/canvas-kit-react": "^11.1.10",
+    "@workday/canvas-kit-styling": "^11.1.10",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8"

modules/react-fonts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react-fonts",
-  "version": "11.1.8",
+  "version": "11.1.10",
   "description": "Fonts for canvas-kit-react",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",

modules/react/badge/stories/CountBadge.mdx

@@ -43,10 +43,20 @@ messages on their first day back.
 
 ### Notification Badge
 
-Notifications are a major use case for `CountBadge`. Remember that any `CountBadge` with a
-live-updating value should be announced to screen readers with an `aria-live` region and an
-`aria-label` on the button to provide additional context, as in the example below. Please also read
-the Accessibility guidance below this example for aditional information.
+Notifications are a major use case for `CountBadge`. When the `CountBadge` value is updated in
+real-time, screen readers must be supported with an `AriaLiveRegion` that will automatically
+describe the change in the number of notifications. If the web app only updates `CountBadge` as part
+of another screen update, then this use of `AriaLiveRegion` is unnecessary and not recommended.
+
+#### Notes on accessibility for the example below
+
+- `Tooltip` is set on the `SecondaryButton` automatically applying the `aria-label` to the button.
+- `aria-describedby` property is conditionally set on the `SecondaryButton` when greater than zero
+  referencing a unique `id` for the `CountBadge` value .
+- `AriaLiveRegion` is used around the `CountBadge`, enabling screen readers to monitor changes in
+  value.
+- `aria-label` string is conditionally set on `AriaLiveRegion` when greater than zero, describing
+  "New notification"
 
 <ExampleCodeBlock code={NotificationBadge} />
 
@@ -55,17 +65,6 @@ the Accessibility guidance below this example for aditional information.
 Count Badge supports custom styling via the `cs` prop. For more information, check our
 ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--page).
 
-## Accessibility
-
-A common use case for `CountBadge` is displaying notifications, but there are other situations where
-they will have live-updated values. There are several accessibility concerns you'll want to keep in
-mind:
-
-- The button should have an aria-label that updates with the count
-- The elements inside the button should have `aria-hidden`
-- The live region should be outside the button
-- The live region should be visually hidden and only contain text
-
 ## Component API
 
 <SymbolDoc name="CountBadge" fileName="/react/" />

modules/react/badge/stories/examples/NotificationBadge.tsx

@@ -1,27 +1,26 @@
 import * as React from 'react';
 import {CountBadge} from '@workday/canvas-kit-react/badge';
 import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import {accessibleHide} from '@workday/canvas-kit-react/common';
+import {AriaLiveRegion, useUniqueId} from '@workday/canvas-kit-react/common';
 import {createStyles, cssVar} from '@workday/canvas-kit-styling';
 import {notificationsIcon} from '@workday/canvas-system-icons-web';
 import {base, system} from '@workday/canvas-tokens-web';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 function negate(value: string, fallback?: string) {
   return `calc(${cssVar(value, fallback)} * -1)`;
 }
 
 const container = createStyles({
   boxSizing: 'border-box',
-  display: 'flex',
   flexDirection: 'column',
   gap: system.space.x4,
 });
 
 const controls = createStyles({
   boxSizing: 'border-box',
-  borderBottom: `solid 1px ${cssVar(base.soap400)}`,
-  display: 'flex',
-  gap: system.space.x1,
+  gap: system.space.x2,
   padding: system.space.x1,
 });
 
@@ -33,40 +32,46 @@ const notificationContainerStyles = createStyles({
 const countBadgeStyles = createStyles({
   boxSizing: 'border-box',
   position: 'absolute',
-  top: negate(system.space.x4),
+  top: negate(system.space.x1),
   insetInlineEnd: negate(system.space.x1),
 });
 
-const accessibleHideStyles = createStyles(accessibleHide);
-
+// Testing notes (Aug. 30, 2024):
+// Windows 11
+// JAWS 2024 + Chrome / Edge: "New notifications" once, then only the count change "2"
+// JAWS 2024 + FF: "New notifications" once, then describes nothing
+// NVDA + Chrome / Edge: Consistently describes "{X} New notifications"
+// NVDA + FF: Consistently describes count value only "{X}"
+// macOS v14.6.1
+// VoiceOver + Chrome / Safari: Consistently describes "New notifications {X}"
 export function NotificationBadge() {
   const [count, setCount] = React.useState(4);
+  const badgeID = useUniqueId();
 
   return (
-    <div className={container}>
-      <div className={controls}>
+    <Flex cs={container}>
+      <Flex cs={controls}>
         <TertiaryButton size="small" onClick={() => setCount(count + 1)}>
           Add Notification
         </TertiaryButton>
         <TertiaryButton size="small" onClick={() => setCount(0)}>
           Clear
         </TertiaryButton>
-      </div>
-      <div>
+      </Flex>
+      <Flex>
         <span className={notificationContainerStyles}>
-          <SecondaryButton
-            aria-label={`Alerts ${count} new notifications`}
-            size="medium"
-            icon={notificationsIcon}
-          />
-          {!!count && (
-            <CountBadge count={count} limit={100} aria-hidden="true" cs={countBadgeStyles} />
-          )}
-          <div className={accessibleHideStyles} role="status" aria-live="polite" aria-atomic="true">
-            New notifications
-          </div>
+          <Tooltip title="Notifications">
+            <SecondaryButton
+              size="medium"
+              icon={notificationsIcon}
+              aria-describedby={!!count ? badgeID : undefined}
+            />
+          </Tooltip>
+          <AriaLiveRegion aria-label={!!count ? 'New notifications' : undefined}>
+            {!!count && <CountBadge id={badgeID} count={count} limit={100} cs={countBadgeStyles} />}
+          </AriaLiveRegion>
         </span>
-      </div>
-    </div>
+      </Flex>
+    </Flex>
   );
 }

modules/react/layout/spec/mergeStyles.spec.tsx

@@ -41,8 +41,7 @@ describe('mergeStyles', () => {
 
     expect(screen.getByTestId('base')).toHaveStyle({padding: padding.styleAttribute});
   });
-  // Skipping this for now while we enable compat mode to run all the time
-  it.skip('should allow the cs prop to override base styles', () => {
+  it('should allow the cs prop to override base styles', () => {
     const overrideStyles = createStyles({
       padding: padding.createStyles,
     });

modules/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.1.8",
+  "version": "11.1.10",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^11.1.8",
-    "@workday/canvas-kit-styling": "^11.1.8",
+    "@workday/canvas-kit-popup-stack": "^11.1.10",
+    "@workday/canvas-kit-styling": "^11.1.10",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.0.1",
     "@workday/design-assets-types": "^0.2.8",

modules/styling-transform/lib/utils/createStyleObjectNode.ts

@@ -6,7 +6,6 @@ import {generateUniqueId} from '@workday/canvas-kit-styling';
 
 import {prettyStringify} from './stylisFns';
 import {NestedStyleObject, TransformerContext} from './types';
-import {getHash} from './getHash';
 
 /**
  * Creates an AST node representation of the passed in `styleObj`, but in the format of `{name:
@@ -65,7 +64,7 @@ export function serializeStyles(
 ) {
   const {getFileName, styles, cache, names, extractedNames} = context;
   const fileName = getFileName(node.getSourceFile().fileName);
-  const hash = getHash(node, context);
+  const hash = generateUniqueId(); //getHash(node, context);
   const serialized = {...serializedStylesEmotion([input]), name: hash} as ReturnType<
     typeof serializedStylesEmotion
   >;

modules/styling-transform/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-styling-transform",
-  "version": "11.1.8",
+  "version": "11.1.10",
   "description": "The custom CSS in JS solution that takes JS styles and turns them into static CSS",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -34,7 +34,7 @@
   ],
   "dependencies": {
     "@emotion/serialize": "^1.0.2",
-    "@workday/canvas-kit-styling": "^11.1.8",
+    "@workday/canvas-kit-styling": "^11.1.10",
     "@workday/canvas-tokens-web": "^2.0.1",
     "stylis": "4.0.13",
     "typescript": "4.9"