diff --git a/src/pages/delete-one-click/index.jsx b/src/pages/delete-one-click/index.jsx index 876d196..0a71b24 100644 --- a/src/pages/delete-one-click/index.jsx +++ b/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() { } - breadcrumbs={} + breadcrumbs={ + + } navigation={} toolsHide={true} notifications={} diff --git a/src/pages/split-panel-comparison/utils.jsx b/src/pages/split-panel-comparison/utils.jsx index 28c80b8..d68202a 100644 --- a/src/pages/split-panel-comparison/utils.jsx +++ b/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' }, ]} /> ); diff --git a/src/pages/table-saved-filters/index.jsx b/src/pages/table-saved-filters/index.jsx index 1729e74..654e1ad 100644 --- a/src/pages/table-saved-filters/index.jsx +++ b/src/pages/table-saved-filters/index.jsx @@ -171,9 +171,12 @@ function App() { countText={getTextFilterCounterText(filteredItemsCount)} expandToViewport={true} customControl={ - - { } customFilterActions={} /> diff --git a/src/pages/table-select-filter/index.jsx b/src/pages/table-select-filter/index.jsx index 1f884d8..8a25bb9 100644 --- a/src/pages/table-select-filter/index.jsx +++ b/src/pages/table-select-filter/index.jsx @@ -182,34 +182,32 @@ function TableSelectFilter({ loadHelpPanelContent }) { />
- - { + setEngine(event.detail.selectedOption); + }} + ariaDescribedby={null} + expandToViewport={true} + />
- - { + setInstanceClass(event.detail.selectedOption); + }} + ariaDescribedby={null} + expandToViewport={true} + />
{(filterProps.filteringText || engine !== defaultEngine || instanceClass !== defaultClass) && ( diff --git a/src/pages/wizard/wizard-components.jsx b/src/pages/wizard/wizard-components.jsx index 364e8a9..28d2697 100644 --- a/src/pages/wizard/wizard-components.jsx +++ b/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 = () => ( ); diff --git a/src/styles/form.scss b/src/styles/form.scss index 0173b69..d33542b 100644 --- a/src/styles/form.scss +++ b/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; } diff --git a/src/styles/product-page.scss b/src/styles/product-page.scss index 2879051..83c87bd 100644 --- a/src/styles/product-page.scss +++ b/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; diff --git a/src/styles/table-select.scss b/src/styles/table-select.scss index 0f194d6..3e432c2 100644 --- a/src/styles/table-select.scss +++ b/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; } } diff --git a/src/styles/top-navigation.scss b/src/styles/top-navigation.scss index a456b10..5312026 100644 --- a/src/styles/top-navigation.scss +++ b/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 } diff --git a/src/styles/wizard.scss b/src/styles/wizard.scss index a6996d3..a73140c 100644 --- a/src/styles/wizard.scss +++ b/src/styles/wizard.scss @@ -4,7 +4,7 @@ @use './base'; .custom-input-small { - max-width: 11rem; + max-inline-size: 11rem; display: inline-block; } diff --git a/test/e2e/wizard-template.test.ts b/test/e2e/wizard-template.test.ts index 357de0e..7798665 100644 --- a/test/e2e/wizard-template.test.ts +++ b/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'); }) );