chore: Temp only. Experimenting with API changes for month granularity of date-range-picker

pages/app-layout/disable-paddings-breadcrumbs.page.tsx

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import clsx from 'clsx';
 
 import AppLayout from '~components/app-layout';
 import Box from '~components/box';
@@ -17,7 +16,7 @@ export default function () {
       <AppLayout
         ariaLabels={labels}
         disableContentPaddings={true}
-        breadcrumbs={<div className={clsx(styles.highlightBorder, styles.textContent)}>Breadcrumbs</div>}
+        breadcrumbs={<div className={styles.highlightBorder}>Breadcrumbs</div>}
         notifications={
           <div className={styles.highlightBorder}>
             <Box variant="h2">Notifications</Box>

pages/app-layout/navigation-with-scrollbar.page.tsx

@@ -0,0 +1,55 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import AppLayout from '~components/app-layout';
+import Select from '~components/select';
+import SideNavigation, { SideNavigationProps } from '~components/side-navigation';
+
+import labels from './utils/labels';
+
+const items: SideNavigationProps.Item[] = new Array(50).fill(null).map((_, index) => ({
+  type: 'link',
+  text: `Link to page ${index + 1} with long enough text to wrap`,
+  href: '#',
+}));
+
+const itemsControl = (
+  <Select
+    options={[
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+    ]}
+    selectedOption={{ value: 'option1', label: 'Option 1' }}
+    onChange={() => null}
+  />
+);
+
+export default function SideNavigationPage() {
+  const [open, setOpen] = React.useState(true);
+
+  return (
+    <AppLayout
+      navigationOpen={open}
+      onNavigationChange={({ detail }) => {
+        setOpen(detail.open);
+      }}
+      ariaLabels={labels}
+      navigation={
+        <SideNavigation
+          header={{
+            href: '#/',
+            text: 'Header title',
+          }}
+          items={items}
+          itemsControl={itemsControl}
+        />
+      }
+      content={
+        <>
+          <h1>App Layout with scrollable Side navigation</h1>
+        </>
+      }
+    />
+  );
+}

pages/app-layout/runtime-drawers-persist-open-state.page.tsx

@@ -0,0 +1,64 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+import AppLayout from '~components/app-layout';
+import Header from '~components/header';
+import HelpPanel from '~components/help-panel';
+import awsuiPlugins from '~components/internal/plugins';
+
+import { Breadcrumbs, Counter } from './utils/content-blocks';
+import appLayoutLabels from './utils/labels';
+
+awsuiPlugins.appLayout.registerDrawer({
+  id: 'runtime-drawer-persist-open-state',
+  type: 'global',
+
+  trigger: {
+    iconSvg: `<svg viewBox="0 0 16 16" focusable="false">
+      <circle stroke-width="2" stroke="currentColor" fill="none" cx="8" cy="8" r="7" />
+      <rect fill="currentColor" x="5" y="5" width="6" height="6" />
+    </svg>`,
+  },
+
+  ariaLabels: {
+    closeButton: 'Close button',
+    content: 'Content',
+    triggerButton: 'Trigger button',
+    resizeHandle: 'Resize handle',
+  },
+
+  mountContent: (container, { onVisibilityChange }) => {
+    awsuiPlugins.appLayout.updateDrawer({ id: 'runtime-drawer-persist-open-state', defaultActive: true });
+    onVisibilityChange(isVisible => {
+      awsuiPlugins.appLayout.updateDrawer({ id: 'runtime-drawer-persist-open-state', defaultActive: isVisible });
+    });
+    render(<Counter id="runtime-drawer-persist-open-state" />, container);
+  },
+  unmountContent: container => {
+    unmountComponentAtNode(container);
+  },
+});
+
+export default function () {
+  const [key, setKey] = useState(0);
+  return (
+    <AppLayout
+      key={key}
+      ariaLabels={appLayoutLabels}
+      breadcrumbs={<Breadcrumbs />}
+      content={
+        <>
+          <Header variant="h1" description="This drawer can automatically reopen after app layout instance changes">
+            Drawer with state persistence
+          </Header>
+          <button data-testid="remount-app-layout" onClick={() => setKey(key => key + 1)}>
+            Remount app layout
+          </button>
+        </>
+      }
+      tools={<HelpPanel header={<h2>Info</h2>}>Here is some info for you</HelpPanel>}
+    />
+  );
+}

pages/app-layout/stateful.page.tsx

@@ -1,26 +1,13 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
+import React from 'react';
 
 import AppLayout from '~components/app-layout';
 import Header from '~components/header';
 
+import { Counter } from './utils/content-blocks';
 import labels from './utils/labels';
 
-import styles from './styles.scss';
-
-function Counter({ id }: { id: string }) {
-  const [count, setCount] = useState(0);
-  return (
-    <div className={styles.textContent}>
-      <span id={`${id}-text`}>Clicked: {count}</span>
-      <button id={`${id}-button`} onClick={() => setCount(count + 1)}>
-        Click me
-      </button>
-    </div>
-  );
-}
-
 export default function AppLayoutStatefulDemo() {
   return (
     <AppLayout

pages/app-layout/styles.scss

@@ -35,10 +35,6 @@
   border-inline: 1px solid red;
 }
 
-.textContent {
-  color: awsui.$color-text-body-default;
-}
-
 .longContent {
   block-size: 200vh;
 }

pages/app-layout/utils/content-blocks.tsx

@@ -195,3 +195,15 @@ export function CustomDrawerContent() {
     </div>
   );
 }
+
+export function Counter({ id }: { id: string }) {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <span id={`${id}-text`}>Clicked: {count}</span>
+      <button id={`${id}-button`} onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}

pages/app-layout/utils/external-widget.tsx

@@ -6,7 +6,7 @@ import ReactDOM, { unmountComponentAtNode } from 'react-dom';
 import Drawer from '~components/drawer';
 import awsuiPlugins from '~components/internal/plugins';
 
-import { CustomDrawerContent } from './content-blocks';
+import { Counter, CustomDrawerContent } from './content-blocks';
 
 const searchParams = new URL(location.hash.substring(1), location.href).searchParams;
 
@@ -46,6 +46,9 @@ awsuiPlugins.appLayout.registerDrawer({
   },
 
   defaultActive: !!searchParams.get('force-default-active'),
+  onToggle: event => {
+    console.log('security drawer on toggle', event.detail);
+  },
 
   resizable: true,
   defaultSize: 320,
@@ -84,18 +87,6 @@ awsuiPlugins.appLayout.registerDrawer({
   unmountContent: container => unmountComponentAtNode(container),
 });
 
-const Counter: React.FC = ({ children }) => {
-  const [count, setCount] = useState(0);
-
-  return (
-    <div>
-      <span data-testid="count">{count}</span>
-      <button onClick={() => setCount(count + 1)}>+</button>
-      {children}
-    </div>
-  );
-};
-
 const AutoIncrementCounter: React.FC<{
   onVisibilityChange?: (callback: (isVisible: boolean) => void) => void;
 }> = ({ children, onVisibilityChange }) => {
@@ -143,6 +134,9 @@ awsuiPlugins.appLayout.registerDrawer({
     triggerButton: 'Trigger button',
     resizeHandle: 'Resize handle',
   },
+  onToggle: event => {
+    console.log('circle-global drawer on toggle', event.detail);
+  },
 
   trigger: {
     iconSvg: `<svg viewBox="0 0 16 16" focusable="false">
@@ -192,7 +186,13 @@ awsuiPlugins.appLayout.registerDrawer({
   },
 
   mountContent: container => {
-    ReactDOM.render(<Counter>global widget content circle 2</Counter>, container);
+    ReactDOM.render(
+      <>
+        <Counter id="circle2-global" />
+        global widget content circle 2
+      </>,
+      container
+    );
   },
   unmountContent: container => unmountComponentAtNode(container),
 });
@@ -219,7 +219,13 @@ awsuiPlugins.appLayout.registerDrawer({
   },
 
   mountContent: container => {
-    ReactDOM.render(<Counter>global widget content circle 3</Counter>, container);
+    ReactDOM.render(
+      <>
+        <Counter id="circle3-global" />
+        global widget content circle 3
+      </>,
+      container
+    );
   },
   unmountContent: container => unmountComponentAtNode(container),
 });
@@ -237,6 +243,9 @@ awsuiPlugins.appLayout.registerDrawer({
     triggerButton: 'Trigger button',
     resizeHandle: 'Resize handle',
   },
+  onToggle: event => {
+    console.log('circle4-global drawer on toggle', event.detail);
+  },
 
   mountContent: container => {
     ReactDOM.render(<CustomDrawerContent />, container);

src/__integ__/__snapshots__/themes.test.ts.snap

@@ -2684,7 +2684,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-button-primary-hover": "#002b66",
   "color-background-calendar-current-date": "#f3f3f7",
   "color-background-cell-shaded": "#f6f6f9",
-  "color-background-chat-bubble-incoming": "#f3f3f7",
+  "color-background-chat-bubble-incoming": "#f6f6f9",
   "color-background-chat-bubble-outgoing": "transparent",
   "color-background-code-editor-gutter-active-line-default": "#656871",
   "color-background-code-editor-gutter-active-line-error": "#db0000",
@@ -3341,7 +3341,7 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-button-primary-hover": "#002b66",
   "color-background-calendar-current-date": "#f3f3f7",
   "color-background-cell-shaded": "#f6f6f9",
-  "color-background-chat-bubble-incoming": "#f3f3f7",
+  "color-background-chat-bubble-incoming": "#f6f6f9",
   "color-background-chat-bubble-outgoing": "transparent",
   "color-background-code-editor-gutter-active-line-default": "#656871",
   "color-background-code-editor-gutter-active-line-error": "#db0000",

src/__integ__/use-browser-with-scrollbars.ts

@@ -0,0 +1,66 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+
+// Workaround until scrollbars are generally shown in tests (AWSUI-59983)
+
+interface TestFunction {
+  (browser: WebdriverIO.Browser): Promise<void> | void;
+}
+
+const options = {
+  capabilities: {
+    'goog:chromeOptions': {
+      args: [
+        // Same array as in
+        // https://github.com/cloudscape-design/browser-test-tools/blob/4aaed9e410b13e05a7d5dbace17231776d250b97/src/browsers/capabilities.ts
+        // but without --hide-scrollbar.
+        '--disable-background-timer-throttling',
+        '--disable-breakpad',
+        '--disable-client-side-phishing-detection',
+        '--disable-cloud-import',
+        '--disable-default-apps',
+        '--disable-dev-shm-usage',
+        '--disable-extensions',
+        '--disable-gesture-typing',
+        '--disable-hang-monitor',
+        '--disable-infobars',
+        '--disable-notifications',
+        '--disable-offer-store-unmasked-wallet-cards',
+        '--disable-offer-upload-credit-cards',
+        '--disable-popup-blocking',
+        '--disable-print-preview',
+        '--disable-prompt-on-repost',
+        '--disable-setuid-sandbox',
+        '--disable-speech-api',
+        '--disable-sync',
+        '--disable-tab-for-desktop-share',
+        '--disable-translate',
+        '--disable-voice-input',
+        '--disable-wake-on-wifi',
+        '--disk-cache-size=33554432',
+        '--enable-async-dns',
+        '--enable-simple-cache-backend',
+        '--enable-tcp-fast-open',
+        '--enable-webgl',
+        '--ignore-gpu-blacklist',
+        '--media-cache-size=33554432',
+        '--metrics-recording-only',
+        '--mute-audio',
+        '--no-default-browser-check',
+        '--no-first-run',
+        '--no-pings',
+        '--no-zygote',
+        '--password-store=basic',
+        '--prerender-from-omnibox=disabled',
+        '--no-sandbox',
+        '--disable-gpu',
+        '--headless=new',
+      ],
+    },
+  },
+};
+
+export default function (testFn: TestFunction): () => Promise<void> {
+  return useBrowser(options, testFn);
+}