Merge branch 'main' into components-themeable

pan-kot · web-flow · commit 958bd5a7b1e2 · 2025-12-16T13:31:23.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,9 +76,9 @@
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^8.24.1",
     "@typescript-eslint/parser": "^8.24.1",
-    "@vitejs/plugin-react": "^4.2.1",
-    "@vitest/coverage-v8": "^3.0.7",
-    "@vitest/eslint-plugin": "^1.1.31",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/eslint-plugin": "^1.3.13",
     "change-case": "^4.1.2",
     "chokidar-cli": "^3.0.0",
     "deep-freeze-es6": "^1.4.1",
@@ -111,12 +111,13 @@
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-prettier": "^5.0.2",
     "typescript": "^4.9.4",
-    "vite": "^6.3.4",
-    "vitest": "^3.0.7"
+    "vite": "^6.4.1",
+    "vitest": "^3.2.4"
   },
   "//": "ensure that typedoc uses latest typescript. It prints a warning, but works",
   "overrides": {
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "glob": "^10.5.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
diff --git a/pages/app/app-context.tsx b/pages/app/app-context.tsx
@@ -13,6 +13,7 @@ interface AppUrlParams {
   direction: "ltr" | "rtl";
   motionDisabled: boolean;
   i18n: boolean;
+  screenshotMode: boolean;
 }
 
 export interface AppContextType<T = unknown> {
@@ -29,6 +30,7 @@ const appContextDefaults: AppContextType = {
     direction: "ltr",
     motionDisabled: false,
     i18n: true,
+    screenshotMode: false,
   },
   setUrlParams: () => {},
 };
diff --git a/pages/app/page-layout.module.css b/pages/app/page-layout.module.css
diff --git a/pages/app/page-layout.tsx b/pages/app/page-layout.tsx
diff --git a/pages/app/screenshot-area.module.css b/pages/app/screenshot-area.module.css
@@ -0,0 +1,17 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+/*
+  Spinner animations do not follow our general motion configuration, we need to disable them explicitly to get stable
+  screenshot testing results
+*/
+.no-animation {
+  *,
+  *:before,
+  *:after {
+    animation: none !important;
+    transition: none !important;
+  }
+}
diff --git a/pages/app/screenshot-area.tsx b/pages/app/screenshot-area.tsx
@@ -1,8 +1,14 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { ReactNode } from "react";
+import { ReactNode, useContext } from "react";
+import clsx from "clsx";
+
+import AppContext from "./app-context";
+
+import styles from "./screenshot-area.module.css";
 
 export function ScreenshotArea({ children }: { children: ReactNode }) {
-  return <div className="screenshot-area">{children}</div>;
+  const { urlParams } = useContext(AppContext);
+  return <div className={clsx("screenshot-area", urlParams.screenshotMode && styles["no-animation"])}>{children}</div>;
 }
diff --git a/scripts/docs.js b/scripts/docs.js
@@ -2,9 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import path from "node:path";
 
-import { documentTestUtils, writeComponentsDocumentation } from "@cloudscape-design/documenter";
-
-import { writeSourceFile } from "./utils/files.js";
+import { writeComponentsDocumentation, writeTestUtilsDocumentation } from "@cloudscape-design/documenter";
 
 const targetDir = "lib/components/internal/api-docs";
 
@@ -20,16 +18,16 @@ function componentDocs() {
 }
 
 function testUtilDocs() {
-  const tsconfig = path.resolve("src/test-utils/tsconfig.json");
-  ["dom", "selectors"].forEach((testUtilType) => {
-    const componentWrapperDefinitions = documentTestUtils({ tsconfig }, `**/{${testUtilType},types}/**/*`);
-
-    const indexContent = `module.exports = {
-      classes: ${JSON.stringify(componentWrapperDefinitions)}
-    }
-    `;
-
-    const outPath = path.join(targetDir, "test-utils-doc", `${testUtilType}.js`);
-    writeSourceFile(outPath, indexContent);
+  writeTestUtilsDocumentation({
+    outDir: path.join(targetDir, "test-utils-doc"),
+    tsconfigPath: path.resolve("src/test-utils/tsconfig.json"),
+    domUtils: {
+      root: "src/test-utils/dom/index.ts",
+      extraExports: ["default", "ElementWrapper"],
+    },
+    selectorsUtils: {
+      root: "src/test-utils/selectors/index.ts",
+      extraExports: ["default", "ElementWrapper"],
+    },
   });
 }
diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
@@ -78,17 +78,6 @@ Use it to define initials that uniquely identify the avatar's owner.",
       "type": "boolean",
     },
     {
-      "description": "Specifies an object of selectors and properties that are used to apply custom styles.
-
-- \`root.background\` (string) - (Optional) Background of the avatar.
-- \`root.borderColor\` (string) - (Optional) Border color of the avatar.
-- \`root.borderRadius\` (string) - (Optional) Border radius of the avatar.
-- \`root.borderWidth\` (string) - (Optional) Border width of the avatar.
-- \`root.boxShadow\` (string) - (Optional) Box shadow of the avatar.
-- \`root.color\` (string) - (Optional) Text color of the avatar.
-- \`root.focusRing.borderColor\` (string) - (Optional) Focus ring border color.
-- \`root.focusRing.borderRadius\` (string) - (Optional) Focus ring border radius.
-- \`root.focusRing.borderWidth\` (string) - (Optional) Focus ring border width.",
       "inlineType": {
         "name": "AvatarProps.Style",
         "properties": [
diff --git a/src/__tests__/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/__snapshots__/test-utils-wrappers.test.tsx.snap
@@ -104,7 +104,10 @@ findAllSupportPromptGroups(selector?: string): Array<SupportPromptGroupWrapper>;
 
 
 ElementWrapper.prototype.findAvatar = function(selector) {
-  const rootSelector = \`.\${AvatarWrapper.rootSelector}\`;
+  let rootSelector = \`.\${AvatarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AvatarWrapper && AvatarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AvatarWrapper.rootSelector}, .\${AvatarWrapper.legacyRootSelector})\`;
+  }
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AvatarWrapper);
@@ -114,7 +117,10 @@ ElementWrapper.prototype.findAllAvatars = function(selector) {
   return this.findAllComponents(AvatarWrapper, selector);
 };
 ElementWrapper.prototype.findChatBubble = function(selector) {
-  const rootSelector = \`.\${ChatBubbleWrapper.rootSelector}\`;
+  let rootSelector = \`.\${ChatBubbleWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ChatBubbleWrapper && ChatBubbleWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ChatBubbleWrapper.rootSelector}, .\${ChatBubbleWrapper.legacyRootSelector})\`;
+  }
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ChatBubbleWrapper);
@@ -124,7 +130,10 @@ ElementWrapper.prototype.findAllChatBubbles = function(selector) {
   return this.findAllComponents(ChatBubbleWrapper, selector);
 };
 ElementWrapper.prototype.findLoadingBar = function(selector) {
-  const rootSelector = \`.\${LoadingBarWrapper.rootSelector}\`;
+  let rootSelector = \`.\${LoadingBarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in LoadingBarWrapper && LoadingBarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${LoadingBarWrapper.rootSelector}, .\${LoadingBarWrapper.legacyRootSelector})\`;
+  }
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LoadingBarWrapper);
@@ -134,7 +143,10 @@ ElementWrapper.prototype.findAllLoadingBars = function(selector) {
   return this.findAllComponents(LoadingBarWrapper, selector);
 };
 ElementWrapper.prototype.findSupportPromptGroup = function(selector) {
-  const rootSelector = \`.\${SupportPromptGroupWrapper.rootSelector}\`;
+  let rootSelector = \`.\${SupportPromptGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SupportPromptGroupWrapper && SupportPromptGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SupportPromptGroupWrapper.rootSelector}, .\${SupportPromptGroupWrapper.legacyRootSelector})\`;
+  }
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SupportPromptGroupWrapper);
@@ -250,7 +262,10 @@ findAllSupportPromptGroups(selector?: string): MultiElementWrapper<SupportPrompt
 
 
 ElementWrapper.prototype.findAvatar = function(selector) {
-  const rootSelector = \`.\${AvatarWrapper.rootSelector}\`;
+  let rootSelector = \`.\${AvatarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in AvatarWrapper && AvatarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${AvatarWrapper.rootSelector}, .\${AvatarWrapper.legacyRootSelector})\`;
+  }
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, AvatarWrapper);
@@ -260,7 +275,10 @@ ElementWrapper.prototype.findAllAvatars = function(selector) {
   return this.findAllComponents(AvatarWrapper, selector);
 };
 ElementWrapper.prototype.findChatBubble = function(selector) {
-  const rootSelector = \`.\${ChatBubbleWrapper.rootSelector}\`;
+  let rootSelector = \`.\${ChatBubbleWrapper.rootSelector}\`;
+  if("legacyRootSelector" in ChatBubbleWrapper && ChatBubbleWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${ChatBubbleWrapper.rootSelector}, .\${ChatBubbleWrapper.legacyRootSelector})\`;
+  }
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, ChatBubbleWrapper);
@@ -270,7 +288,10 @@ ElementWrapper.prototype.findAllChatBubbles = function(selector) {
   return this.findAllComponents(ChatBubbleWrapper, selector);
 };
 ElementWrapper.prototype.findLoadingBar = function(selector) {
-  const rootSelector = \`.\${LoadingBarWrapper.rootSelector}\`;
+  let rootSelector = \`.\${LoadingBarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in LoadingBarWrapper && LoadingBarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${LoadingBarWrapper.rootSelector}, .\${LoadingBarWrapper.legacyRootSelector})\`;
+  }
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, LoadingBarWrapper);
@@ -280,7 +301,10 @@ ElementWrapper.prototype.findAllLoadingBars = function(selector) {
   return this.findAllComponents(LoadingBarWrapper, selector);
 };
 ElementWrapper.prototype.findSupportPromptGroup = function(selector) {
-  const rootSelector = \`.\${SupportPromptGroupWrapper.rootSelector}\`;
+  let rootSelector = \`.\${SupportPromptGroupWrapper.rootSelector}\`;
+  if("legacyRootSelector" in SupportPromptGroupWrapper && SupportPromptGroupWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${SupportPromptGroupWrapper.rootSelector}, .\${SupportPromptGroupWrapper.legacyRootSelector})\`;
+  }
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, SupportPromptGroupWrapper);
diff --git a/src/avatar/interfaces.ts b/src/avatar/interfaces.ts
@@ -63,17 +63,6 @@ export interface AvatarProps {
   imgUrl?: string;
 
   /**
-   * Specifies an object of selectors and properties that are used to apply custom styles.
-   *
-   * - `root.background` (string) - (Optional) Background of the avatar.
-   * - `root.borderColor` (string) - (Optional) Border color of the avatar.
-   * - `root.borderRadius` (string) - (Optional) Border radius of the avatar.
-   * - `root.borderWidth` (string) - (Optional) Border width of the avatar.
-   * - `root.boxShadow` (string) - (Optional) Box shadow of the avatar.
-   * - `root.color` (string) - (Optional) Text color of the avatar.
-   * - `root.focusRing.borderColor` (string) - (Optional) Focus ring border color.
-   * - `root.focusRing.borderRadius` (string) - (Optional) Focus ring border radius.
-   * - `root.focusRing.borderWidth` (string) - (Optional) Focus ring border width.
    * @awsuiSystem core
    */
   style?: AvatarProps.Style;
diff --git a/src/avatar/internal.tsx b/src/avatar/internal.tsx
@@ -104,14 +104,7 @@ export default function InternalAvatar({
       {...tooltipAttributes}
       style={{ [customCssProps.avatarSize]: `${computedSize}px`, ...getRootStyles(style) }}
     >
-      {showTooltip && tooltipText && (
-        <Tooltip
-          value={tooltipText}
-          trackRef={handleRef}
-          // This is added to ensure tooltip is closed when clicked for consistency with other tooltip usages
-          contentAttributes={{ onPointerDown: () => setShowTooltip(false) }}
-        />
-      )}
+      {showTooltip && tooltipText && <Tooltip className={styles.tooltip} value={tooltipText} trackRef={handleRef} />}
 
       {/* aria-hidden is added so that screen readers focus only the parent div */}
       {/* when it is not hidden, it becomes unstable in JAWS */}
diff --git a/src/avatar/styles.scss b/src/avatar/styles.scss
@@ -76,3 +76,7 @@
     );
   }
 }
+
+.tooltip {
+  /* used in test-utils */
+}
diff --git a/src/test-utils/dom/avatar/index.ts b/src/test-utils/dom/avatar/index.ts
@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import TooltipWrapper from "@cloudscape-design/components/test-utils/dom/internal/tooltip";
-import { ComponentWrapper } from "@cloudscape-design/test-utils-core/dom";
+import { ComponentWrapper, ElementWrapper } from "@cloudscape-design/test-utils-core/dom";
 
 import createWrapper from "..";
 
@@ -10,7 +9,7 @@ import avatarStyles from "../../../avatar/styles.selectors.js";
 export default class AvatarWrapper extends ComponentWrapper {
   static rootSelector: string = avatarStyles.root;
 
-  findTooltip(): TooltipWrapper | null {
-    return createWrapper().findComponent(`.${TooltipWrapper.rootSelector}`, TooltipWrapper);
+  findTooltip(): ElementWrapper | null {
+    return createWrapper().find(`.${avatarStyles.tooltip}`);
   }
 }
diff --git a/test/utils.ts b/test/utils.ts
@@ -13,7 +13,7 @@ export function setupTest<P extends BasePageObject & { init?(): Promise<void> }>
   test: (page: P) => Promise<void>,
 ) {
   return useBrowser(windowSize, async (browser) => {
-    await browser.url(url);
+    await browser.url(`${url}?screenshotMode=true`);
     const page = new PageClass(browser);
     await page.waitForVisible("main");
 
