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 }) {
/>
-
-
+
-
-
+
{(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');
})
);