Merge remote-tracking branch 'origin/main' into feat/widgetize-app-layout-skeleton-event-base

Author: georgylobko

build-tools/tasks/package-json.js

@@ -121,6 +121,13 @@ module.exports = parallel([
   ]),
   generatePackageJson(path.join(workspace.targetPath, 'components-definitions'), {
     name: '@cloudscape-design/components-definitions',
+    exports: {
+      './components': './components/index.js',
+      './test-utils-doc/dom': './test-utils-doc/dom.js',
+      './test-utils-doc/selectors': './test-utils-doc/selectors.js',
+      // this directory is generated down the line in other builds
+      './styles/*.json': './styles/*.json',
+    },
   }),
   styleDictionaryPackageJson,
   componentsThemeablePackageJson,

package.json

@@ -164,7 +164,7 @@
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "786 kB",
+      "limit": "790 kB",
       "ignore": "react-dom"
     }
   ],

pages/funnel-analytics/with-table.page.tsx

@@ -91,7 +91,7 @@ export default function WithTablePage() {
         }}
         selectionType="multi"
         header={
-          <Header headingTagOverride="h1" counter={`(${allItems.length})`}>
+          <Header headingTagOverride="h1" counter={`(1/${allItems.length})`}>
             Table title
           </Header>
         }

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -17368,13 +17368,10 @@ scroll parent scrolls to reveal the first row of the table.",
     {
       "description": "Specifies alternative text for the selection components (checkboxes and radio buttons) as follows:
 * \`itemSelectionLabel\` ((SelectionState, Item) => string) - Specifies the alternative text for an item.
+You can use the first argument of type \`SelectionState\` to access the current selection state of the component
+(for example, the \`selectedItems\` list). The second argument is the corresponding  \`Item\` object.
 * \`allItemsSelectionLabel\` ((SelectionState) => string) - Specifies the alternative text for multi-selection column header.
 * \`selectionGroupLabel\` (string) - Specifies the alternative text for the whole selection and single-selection column header.
-                                   It is prefixed to \`itemSelectionLabel\` and \`allItemsSelectionLabel\` when they are set.
-You can use the first argument of type \`SelectionState\` to access the current selection
-state of the component (for example, the \`selectedItems\` list). The \`itemSelectionLabel\` for individual
-items also receives the corresponding  \`Item\` object. You can use the \`selectionGroupLabel\` to
-add a meaningful description to the whole selection.
 * \`tableLabel\` (string) - Provides an alternative text for the table. If you use a header for this table, you may reuse the string
                           to provide a caption-like description. For example, tableLabel=Instances will be announced as 'Instances table'.
 * \`resizerRoleDescription\` (string) - Provides role description for table column resizer buttons.

src/__tests__/snapshot-tests/documenter.test.ts

@@ -1,6 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { getAllComponents, requireComponentDefinition } from '../utils';
+import definitions from '../../../lib/components-definitions/components';
+import { getAllComponents } from '../utils';
+
+function requireComponentDefinition(componentName: string) {
+  return definitions[componentName];
+}
 
 describe('Documenter', () => {
   test.each<string>(getAllComponents())(`definition for %s matches the snapshot`, (componentName: string) => {

src/__tests__/utils.tsx

@@ -5,7 +5,6 @@ import fs from 'fs';
 import path from 'path';
 
 import { SplitPanelContextProvider } from '../../lib/components/internal/context/split-panel-context';
-import definitions from '../../lib/components-definitions/components';
 import { defaultSplitPanelContextProps } from './required-props-for-components';
 
 const componentsDir = path.resolve(__dirname, '../../lib/components');
@@ -68,10 +67,6 @@ export function requireComponent(componentName: string): any {
   return require(path.join(componentsDir, componentName));
 }
 
-export function requireComponentDefinition(componentName: string) {
-  return definitions[componentName];
-}
-
 export function requireDesignTokensFile(fileName: string): any {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
   return require(path.join(designTokensDir, fileName));

src/annotation-context/__integ__/annotation-scroll.test.ts

@@ -8,11 +8,17 @@ import createWrapper from '../../../lib/components/test-utils/selectors';
 const wrapper = createWrapper();
 const annotationWrapper = wrapper.findAnnotation();
 
+function setupTest(testFn: (page: BasePageObject) => Promise<void>) {
+  return useBrowser(async browser => {
+    const page = new BasePageObject(browser);
+    await browser.url('#/light/annotation-context/annotation-scroll');
+    await testFn(page);
+  });
+}
+
 test(
   'scrolls annotation in view with fixed elements',
-  useBrowser(async browser => {
-    await browser.url('#/light/annotation-context/annotation-scroll');
-    const page = new BasePageObject(browser);
+  setupTest(async page => {
     const nextButtonSelector = annotationWrapper.findNextButton().toSelector();
     await page.waitForVisible(nextButtonSelector);
     await page.click(nextButtonSelector);
@@ -37,6 +43,21 @@ test(
   })
 );
 
+test(
+  'does not update popover position when annotation is rendered offscreen',
+  setupTest(async page => {
+    await expect(page.isDisplayedInViewport(annotationWrapper.toSelector())).resolves.toEqual(true);
+    // scroll to the page bottom to make annotation offscreen
+    await page.windowScrollTo({ top: 1200 });
+    await expect(page.isDisplayedInViewport(annotationWrapper.toSelector())).resolves.toEqual(false);
+    const positionBefore = await page.getBoundingBox(annotationWrapper.toSelector());
+    // click somewhere to trigger the regression
+    await page.click('main');
+    const positionAfter = await page.getBoundingBox(annotationWrapper.toSelector());
+    expect(positionBefore).toEqual(positionAfter);
+  })
+);
+
 function overlap(one: ElementRect, two: ElementRect) {
   if (one.right < two.left || one.left > two.right) {
     return false;

src/app-layout/__tests__/mobile.test.tsx

@@ -26,8 +26,6 @@ import visualRefreshRefactoredStyles from '../../../lib/components/app-layout/vi
 import toolbarNotificationsStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/notifications/styles.css.js';
 import toolbarSkeletonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/styles.css.js';
 import toolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/styles.css.js';
-import toolbarTriggerButtonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js';
-import iconStyles from '../../../lib/components/icon/styles.css.js';
 
 function AppLayoutWithControlledNavigation({
   initialNavigationOpen,
@@ -77,8 +75,6 @@ describeEachAppLayout({ sizes: ['mobile'] }, ({ theme }) => {
     classic: `.${styles['notifications-sticky']}`,
   };
 
-  const triggerBadgeClassName =
-    theme === 'refresh-toolbar' ? toolbarTriggerButtonStyles['trigger-badge-wrapper'] : iconStyles.badge;
   const isUnfocusable = (element: HTMLElement) =>
     !!findUpUntil(element, current => current.classList.contains(unfocusableClassName));
 
@@ -577,7 +573,8 @@ describeEachAppLayout({ sizes: ['mobile'] }, ({ theme }) => {
 
   test('should render badge when defined', () => {
     const { wrapper } = renderComponent(<AppLayout drawers={manyDrawers} />);
-    expect(wrapper.findDrawerTriggerById('security')!.getElement().children[0]).toHaveClass(triggerBadgeClassName);
+    expect(wrapper.findDrawerTriggerById('security')).toBeTruthy();
+    expect(wrapper.findDrawerTriggerById('security', { hasBadge: true })).toBeTruthy();
   });
 
   test('renders roles only when aria labels are not provided', () => {

src/app-layout/__tests__/runtime-drawers.test.tsx

@@ -22,11 +22,9 @@ import {
   testDrawer,
 } from './utils';
 
-import triggerStyles from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
 import skeletonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js';
 import toolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/styles.selectors.js';
 import toolbarTriggerStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.selectors.js';
-import iconStyles from '../../../lib/components/icon/styles.selectors.js';
 
 beforeEach(() => {
   awsuiPluginsInternal.appLayout.clearRegisteredDrawers();
@@ -64,7 +62,7 @@ const drawerDefaults: DrawerConfig = {
   unmountContent: () => {},
 };
 
-describeEachAppLayout(({ theme, size }) => {
+describeEachAppLayout(({ size }) => {
   test('does not render runtime drawers when it is explicitly disabled', async () => {
     awsuiPlugins.appLayout.registerDrawer(drawerDefaults);
     const { wrapper } = await renderComponent(<AppLayout {...({ __disableRuntimeDrawers: true } as any)} />);
@@ -111,33 +109,21 @@ describeEachAppLayout(({ theme, size }) => {
     const { wrapper } = await renderComponent(<AppLayout />);
     // the 2nd trigger is for tools
     expect(wrapper.findDrawersTriggers()).toHaveLength(2);
-    const drawerTrigger = wrapper.findDrawerTriggerById(drawerDefaults.id);
-
-    const triggerParent = drawerTrigger!.getElement().parentElement;
-    const triggerParentWrapper = createWrapper(triggerParent!);
 
     awsuiPlugins.appLayout.updateDrawer({
       id: drawerDefaults.id,
       badge: true,
     });
     await delay();
-    const badgeSelector =
-      theme === 'refresh-toolbar'
-        ? toolbarTriggerStyles.badge
-        : theme === 'refresh' && size === 'desktop'
-          ? triggerStyles.badge
-          : iconStyles.badge;
-
-    expect(triggerParentWrapper!.findByClassName(badgeSelector)!.getElement()).toBeInTheDocument();
+    expect(wrapper.findDrawerTriggerById(drawerDefaults.id, { hasBadge: true })).toBeTruthy();
 
     awsuiPlugins.appLayout.updateDrawer({
       id: drawerDefaults.id,
       badge: false,
     });
     await delay();
 
-    // re-querying the dot element
-    expect(triggerParentWrapper!.findByClassName(badgeSelector)).toBeNull();
+    expect(wrapper.findDrawerTriggerById(drawerDefaults.id, { hasBadge: false })).toBeTruthy();
   });
 
   (size === 'desktop' ? test : test.skip)('update runtime drawers config resizable validation', async () => {

src/app-layout/visual-refresh-toolbar/drawer/styles.scss

@@ -206,8 +206,8 @@ $drawer-resize-handle-size: awsui.$space-m;
       > .drawer-actions {
         position: absolute;
         display: flex;
-        align-self: flex-start;
-        justify-self: flex-end;
+        inset-block-start: 0;
+        inset-inline-end: 0;
         padding-inline-end: awsui.$space-m;
         padding-block-start: constants.$toolbar-vertical-panel-icon-offset;
       }