chore: Sync examples and demos

src/pages/delete-one-click/index.jsx

@@ -2,10 +2,19 @@
 // SPDX-License-Identifier: MIT-0
 import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Alert, Button, Container, Form, Header, SpaceBetween, TagEditor } from '@cloudscape-design/components';
+import {
+  Alert,
+  BreadcrumbGroup,
+  Button,
+  Container,
+  Form,
+  Header,
+  SpaceBetween,
+  TagEditor,
+} from '@cloudscape-design/components';
 import { Navigation, Notifications } from '../commons/common-components';
 import { CustomAppLayout } from '../commons/common-components';
-import { Breadcrumbs } from '../details/common-components';
+import { resourceManageTagsBreadcrumbs } from '../../common/breadcrumbs';
 
 import '../../styles/base.scss';
 
@@ -108,7 +117,9 @@ function App() {
           </form>
         </SpaceBetween>
       }
-      breadcrumbs={<Breadcrumbs />}
+      breadcrumbs={
+        <BreadcrumbGroup items={resourceManageTagsBreadcrumbs} expandAriaLabel="Show path" ariaLabel="Breadcrumbs" />
+      }
       navigation={<Navigation activeHref="#/distributions" />}
       toolsHide={true}
       notifications={<Notifications />}

src/pages/split-panel-comparison/utils.jsx

@@ -184,7 +184,7 @@ export const Breadcrumbs = () => (
     ariaLabel="Breadcrumbs"
     items={[
       { text: 'Service', href: '#/ec2' },
-      { text: 'Instance', href: '#/ec2/instance' },
+      { text: 'Instances', href: '#/ec2/instances' },
     ]}
   />
 );

src/pages/table-saved-filters/index.jsx

@@ -5,7 +5,7 @@
 import { useCollection } from '@cloudscape-design/collection-hooks';
 import {
   ButtonDropdown,
   FormField,
   Flashbar,
   Pagination,
   PropertyFilter,
@@ -171,9 +171,12 @@
                 countText={getTextFilterCounterText(filteredItemsCount)}
                 expandToViewport={true}
                 customControl={
-                  <FormField label="Saved filter sets">
-                    {<Select {...selectProps} data-testid="saved-filters" ref={selectRef} />}
-                  </FormField>
+                  <Select
+                    {...selectProps}
+                    inlineLabelText="Saved filter sets"
+                    data-testid="saved-filters"
+                    ref={selectRef}
+                  />
                 }
                 customFilterActions={<ButtonDropdown {...buttonDropdownProps} data-testid="filter-actions" />}
               />

src/pages/table-select-filter/index.jsx

@@ -182,34 +182,32 @@ function TableSelectFilter({ loadHelpPanelContent }) {
             />
           </div>
           <div className="select-filter">
-            <FormField label="Filter engine">
-              <Select
-                data-testid="engine-filter"
-                options={selectEngineOptions}
-                selectedAriaLabel="Selected"
-                selectedOption={engine}
-                onChange={event => {
-                  setEngine(event.detail.selectedOption);
-                }}
-                ariaDescribedby={null}
-                expandToViewport={true}
-              />
-            </FormField>
+            <Select
+              data-testid="engine-filter"
+              inlineLabelText="Filter engine"
+              options={selectEngineOptions}
+              selectedAriaLabel="Selected"
+              selectedOption={engine}
+              onChange={event => {
+                setEngine(event.detail.selectedOption);
+              }}
+              ariaDescribedby={null}
+              expandToViewport={true}
+            />
           </div>
           <div className="select-filter">
-            <FormField label="Filter class">
-              <Select
-                data-testid="class-filter"
-                options={selectClassOptions}
-                selectedAriaLabel="Selected"
-                selectedOption={instanceClass}
-                onChange={event => {
-                  setInstanceClass(event.detail.selectedOption);
-                }}
-                ariaDescribedby={null}
-                expandToViewport={true}
-              />
-            </FormField>
+            <Select
+              inlineLabelText="Filter class"
+              data-testid="class-filter"
+              options={selectClassOptions}
+              selectedAriaLabel="Selected"
+              selectedOption={instanceClass}
+              onChange={event => {
+                setInstanceClass(event.detail.selectedOption);
+              }}
+              ariaDescribedby={null}
+              expandToViewport={true}
+            />
           </div>
           <div aria-live="polite">
             {(filterProps.filteringText || engine !== defaultEngine || instanceClass !== defaultClass) && (

src/pages/wizard/wizard-components.jsx

@@ -10,6 +10,7 @@ export const Breadcrumbs = () => (
     ariaLabel="Breadcrumbs"
     items={[
       { text: 'Service', href: '#/rds' },
+      { text: 'Instances', href: '#/instances' },
       { text: 'Launch DB instance', href: '#/launch' },
     ]}
     onFollow={onFollowHandler.bind(this)}
@@ -45,7 +46,7 @@ export const Navigation = () => (
   <SideNavigation
     header={{ text: 'Service', href: '#/home' }}
     items={navigationItems}
-    activeHref="#/dashboard"
+    activeHref="#/instances"
     onFollow={onFollowHandler.bind(this)}
   />
 );

src/styles/form.scss

@@ -4,11 +4,11 @@
 @use './base';
 
 .custom-header {
-  height: 100%;
+  block-size: 100%;
   display: flex;
   align-items: flex-end;
 }
 
 .date-time-container > * {
-  min-width: 18rem;
+  min-inline-size: 18rem;
 }

src/styles/product-page.scss

@@ -43,7 +43,7 @@ body {
 
 .product-page-aside-sticky {
   position: sticky;
-  top: 40px;
+  inset-block-start: 40px;
 }
 
 @media only screen and (max-width: $viewport-breakpoint-s) {
@@ -64,8 +64,8 @@ body {
 
 /* Simple separator */
 hr {
-  width: 100%;
-  height: 0;
+  inline-size: 100%;
+  block-size: 0;
   border: none;
   border-block-start: 1px solid cs.$color-border-divider-default;
 }
@@ -117,7 +117,7 @@ hr {
 .product-cards-list-item {
   flex: 1;
   flex-basis: 250px;
-  max-width: 312px;
+  max-inline-size: 312px;
 
   list-style-type: none;
   margin: 0;

src/styles/table-select.scss

@@ -9,45 +9,46 @@
   align-items: flex-end;
   order: 0;
   flex-grow: 10;
-  margin-right: 0;
-  margin-bottom: calc(-1 * #{cs.$space-scaled-m});
+  margin-inline-end: 0;
+  margin-block-end: calc(-1 * #{cs.$space-scaled-m});
 
   > *:not(:empty) {
-    margin-right: cs.$space-scaled-m;
-    margin-bottom: cs.$space-scaled-s;
+    margin-inline-end: cs.$space-scaled-m;
+    margin-block-end: cs.$space-scaled-s;
   }
 }
 
 .input-filter {
   order: 0;
   flex-grow: 6;
-  width: auto;
-  max-width: 728px;
+  inline-size: auto;
+  max-inline-size: 728px;
 }
 
 .select-filter {
-  max-width: 130px;
+  max-inline-size: 130px;
   flex-grow: 2;
-  width: auto;
+  inline-size: auto;
 }
 
 .filtering-results {
-  margin-left: 1rem;
-  line-height: 3rem;
+  display: block;
+  margin-inline-start: 1rem;
+  padding-block-end: calc(1px + #{cs.$space-scaled-xxs});
   color: cs.$color-text-form-default;
 }
 
 @media (max-width: 1152px) {
   .input-container {
-    margin-right: calc(-1 * #{cs.$space-scaled-m});
+    margin-inline-end: calc(-1 * #{cs.$space-scaled-m});
   }
 
   .select-filter {
-    max-width: none;
+    max-inline-size: none;
   }
 
   .input-filter {
-    width: 100%;
-    max-width: none;
+    inline-size: 100%;
+    max-inline-size: none;
   }
 }

src/styles/top-navigation.scss

@@ -6,5 +6,5 @@
 }
 
 .menu-list {
-  border-bottom: 1px solid #414750; // grey-650
+  border-block-end: 1px solid #414750; // grey-650
 }

src/styles/wizard.scss

@@ -4,7 +4,7 @@
 @use './base';
 
 .custom-input-small {
-  max-width: 11rem;
+  max-inline-size: 11rem;
   display: inline-block;
 }
 

test/e2e/wizard-template.test.ts

@@ -16,7 +16,7 @@ describe('Wizard', () => {
   test(
     'The initial state is correct',
     setupTest(async page => {
-      await expect(page.countBreadcrumbs()).resolves.toBe(2);
+      await expect(page.countBreadcrumbs()).resolves.toBe(3);
       await expect(page.isNavigationOpen()).resolves.toBe(false);
       await expect(page.isToolsOpen()).resolves.toBe(false);
       await expect(page.countSteps()).resolves.toBe(4);
@@ -31,7 +31,7 @@ describe('Wizard', () => {
     'Active navigation item is correct',
     setupTest(async page => {
       await page.openSideNavigation();
-      await expect(page.getActiveNavigationLinkText()).resolves.toBe('Dashboard');
+      await expect(page.getActiveNavigationLinkText()).resolves.toBe('Instances');
     })
   );