Expandable Section - container variant
- -Expandable Section - focus tests
+ + + +
+
+ ),
+ },
+ {
+ title: 'Step 2',
+ content: Content 1
+ {errorMode === 1 && This is an error on the step level }
+
+ {errorMode === 2 && (
+ A container around the alert}>
+ This is an error on the substep level
+
+ )}
+
+
+ {errorMode === 3 && (
+ <>
+ This is an error on the step level
+ A container around the alert}>
+ This is an error on the substep level
+
+
+ )}
+
+ Content 2
,
+ },
+ ];
+
+ return (
+
-
-
+
diff --git a/pages/mixed-line-bar-chart/fit-height.page.tsx b/pages/mixed-line-bar-chart/fit-height.page.tsx
new file mode 100644
index 0000000000..fb1c833d8e
--- /dev/null
+++ b/pages/mixed-line-bar-chart/fit-height.page.tsx
@@ -0,0 +1,80 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import { Box, Button, Checkbox, MixedLineBarChart, SpaceBetween } from '~components';
+import AppContext, { AppContextType } from '../app/app-context';
+import ScreenshotArea from '../utils/screenshot-area';
+import { barChartInstructions, commonProps, data3, data4 } from './common';
+import { colorChartsThresholdInfo } from '~design-tokens';
+
+type DemoContext = React.Context<
+ AppContextType<{ fitHeight: boolean; hideFilter: boolean; hideLegend: boolean; minHeight: number }>
+>;
+
+export default function () {
+ const { urlParams, setUrlParams } = useContext(AppContext as DemoContext);
+ const minHeight = parseInt(urlParams.minHeight?.toString() || '0');
+ const heights = [800, 600, 400, 300, 200, 100];
+ const fitHeight = urlParams.fitHeight ?? true;
+ return (
+ Mixed chart fit height
+ +
+ x !== 'Chocolate') },
+ { title: 'Calories', type: 'line', data: data3 },
+ { title: 'Threshold', type: 'threshold', y: 420, color: colorChartsThresholdInfo },
+ ]}
+ xDomain={data3.map(d => d.x)}
+ yDomain={[0, 650]}
+ xTitle="Food"
+ yTitle="Calories (kcal)"
+ xScaleType="categorical"
+ ariaLabel="Mixed chart 1"
+ ariaDescription={barChartInstructions}
+ detailPopoverFooter={xValue => }
+ />
+
+ Pie chart fit height
+ +
+
+ {...commonProps}
+ fitHeight={fitHeight}
+ hideFilter={urlParams.hideFilter}
+ hideLegend={urlParams.hideLegend}
+ data={data1}
+ ariaLabel="Food facts"
+ size={minSize}
+ detailPopoverFooter={segment => }
+ variant="donut"
+ innerMetricValue="180"
+ />
+
+ + {' '} +
+ This instance contains insufficient memory. Stop the instance, choose a different instance type with more + memory, and restart it. +
+ + + } + dismissAriaLabel="Close" + id="focus-trap-button" + renderWithPortal={renderWithPortal} + triggerType="custom" + > + +- Popover without dismiss button should not trap focus when opened
- Popover without dismiss button should close when focus leaves the trigger diff --git a/pages/status-indicator/permutations.page.tsx b/pages/status-indicator/permutations.page.tsx index 010ee7c9a5..870ecf6c40 100644 --- a/pages/status-indicator/permutations.page.tsx +++ b/pages/status-indicator/permutations.page.tsx @@ -1,12 +1,12 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import React from 'react'; -import StatusIndicator, { StatusIndicatorProps } from '~components/status-indicator'; +import StatusIndicator, { InternalStatusIndicatorProps } from '~components/status-indicator/internal'; import createPermutations from '../utils/permutations'; import PermutationsView from '../utils/permutations-view'; import ScreenshotArea from '../utils/screenshot-area'; -const permutations = createPermutations
-
- {permutation.children ?? <>Status {permutation.type}}
-
+ [] = [
+ ...simpleColumns,
+ {
+ id: 'action',
+ header: 'Actions',
+ cell: item => (
+
+ ),
+ },
+];
+const columnDefinitionsMultiple: TableProps.ColumnDefinition[] = [
+ ...simpleColumns,
+ {
+ id: 'action',
+ header: 'Actions',
+ cell: item => (
+
+ {item.state === 'TERMINATING' || item.state === 'TERMINATED' ? (
+ <>
+
+
+
+ ) : item.state === 'RUNNING' ? (
+
+ ) : item.state === 'STOPPED' ? (
+
+ ) : item.state === 'STOPPING' ? (
+
+ ) : (
+ '-'
+ )}
+
+ ),
+ },
+];
+const columnDefinitionsDropdown: TableProps.ColumnDefinition[] = [
+ ...simpleColumns,
+ {
+ id: 'action',
+ header: 'Actions',
+ cell: item => (
+
+
+ ),
+ },
+];
+const columnDefinitionsMixed: TableProps.ColumnDefinition[] = [
+ {
+ id: 'id',
+ header: 'Task name',
+ cell: item => {item.id},
+ sortingField: 'id',
+ },
+ columnsConfig[1],
+ {
+ id: 'dnsName',
+ header: 'value',
+ cell: item => item.dnsName || '-',
+ sortingField: 'dnsName',
+ },
+ {
+ id: 'action',
+ header: 'Actions',
+ cell: item => (
+
+
+
+ ),
+ },
+];
+const columnDefinitionsOnlyIcons: TableProps.ColumnDefinition[] = [
+ ...simpleColumns,
+ {
+ id: 'action',
+ header: 'Actions',
+ cell: item => (
+
+
+
+
+
+ ),
+ },
+];
+
+export default function () {
+ return (
+
+
+
+ Table with single actions}
+ columnDefinitions={columnDefinitionsSingle}
+ items={items}
+ />
+ Table with multiple actions}
+ columnDefinitions={columnDefinitionsMultiple}
+ items={items}
+ />
+
+ Table with mixed actions}
+ columnDefinitions={columnDefinitionsMixed}
+ items={items}
+ />
+ Table with only icon actions}
+ columnDefinitions={columnDefinitionsOnlyIcons}
+ items={items}
+ />
+
+
+
+ );
+}
diff --git a/pages/utils/screenshot-area.tsx b/pages/utils/screenshot-area.tsx
index 750ec43cea..d46b6f7d78 100644
--- a/pages/utils/screenshot-area.tsx
+++ b/pages/utils/screenshot-area.tsx
@@ -2,9 +2,9 @@
// SPDX-License-Identifier: Apache-2.0
import clsx from 'clsx';
import React from 'react';
-import { useContainerQuery } from '~components/internal/hooks/container-queries';
import { colorTextStatusError } from '~design-tokens';
import styles from './screenshot-area.scss';
+import { useContainerQuery } from '@cloudscape-design/component-toolkit';
// replicates the same constant from BrowserTestTools package
const MAX_PAGE_HEIGHT = 16000;
diff --git a/pages/wizard/with-validation.page.tsx b/pages/wizard/with-validation.page.tsx
new file mode 100644
index 0000000000..3b6ac67904
--- /dev/null
+++ b/pages/wizard/with-validation.page.tsx
@@ -0,0 +1,85 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import { i18nStrings } from './common';
+import { Container, FormField, Header, Input, Link, Wizard, WizardProps } from '~components';
+
+export default function WizardPage() {
+ const [activeStepIndex, setActiveStepIndex] = useState(0);
+ const [value, setValue] = useState('');
+ const [attemptedToSubmit, setAttemptedToSubmit] = useState(false);
+ const [counter, setCounter] = useState(1);
+
+ const steps: WizardProps['steps'] = [
+ {
+ title: 'Step 1',
+ content: (
+
+
)}
/>
diff --git a/pages/table/inline-actions.page.tsx b/pages/table/inline-actions.page.tsx
new file mode 100644
index 0000000000..e912828ce9
--- /dev/null
+++ b/pages/table/inline-actions.page.tsx
@@ -0,0 +1,210 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import Box from '~components/box';
+import Button from '~components/button';
+import ButtonDropdown from '~components/button-dropdown';
+import Header from '~components/header';
+import SpaceBetween from '~components/space-between';
+import Table, { TableProps } from '~components/table';
+import ScreenshotArea from '../utils/screenshot-area';
+import { Instance, generateItems } from './generate-data';
+import { columnsConfig, selectionLabels } from './shared-configs';
+import Link from '~components/link';
+
+const items = generateItems(10);
+
+const simpleColumns = [columnsConfig[0], columnsConfig[1], columnsConfig[3], columnsConfig[4]];
+
+const columnDefinitionsSingle: TableProps.ColumnDefinition
+
+ {permutation.children ?? <>Status {permutation.type}}
+
+