Skip to content

Commit fb71cc1

Browse files
georgylobkogeorgylobko
committed
Merge remote-tracking branch 'origin/main' into feat/widgetize-app-layout-skeleton-event-base
# Conflicts: # src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
2 parents 6f4dfff + 8fa9df2 commit fb71cc1

File tree

152 files changed

+124657
-344
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

152 files changed

+124657
-344
lines changed

‎eslint.config.mjs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import globals from 'globals';
1414
import path from 'node:path';
1515
import tsEslint from 'typescript-eslint';
1616

17+
import cloudscapeCommonRules from '@cloudscape-design/build-tools/eslint/index.js';
18+
1719
import cloudscapeComponentsRules from './build-tools/eslint/index.js';
1820

1921
// https://github.com/Stuk/eslint-plugin-header/issues/57
@@ -46,6 +48,7 @@ export default tsEslint.config(
4648
plugins: {
4749
'simple-import-sort': simpleImportSortPlugin,
4850
'@cloudscape-design/components': cloudscapeComponentsRules,
51+
'@cloudscape-design/build-tools': cloudscapeCommonRules,
4952
unicorn: unicornPlugin,
5053
header: headerPlugin,
5154
},
@@ -61,6 +64,7 @@ export default tsEslint.config(
6164
'react/no-unstable-nested-components': ['error', { allowAsProps: true }],
6265
'react/prop-types': 'off',
6366
'react/jsx-boolean-value': ['error', 'always'],
67+
'@cloudscape-design/build-tools/react-server-components-directive': 'error',
6468
'@cloudscape-design/components/ban-files': [
6569
'error',
6670
[

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"test:motion": "gulp test:motion",
1818
"lint": "npm-run-all --parallel lint:*",
1919
"lint:eslint": "eslint .",
20-
"lint:stylelint": "stylelint --ignore-path .gitignore --fix '{src,pages}/**/*.{css,scss}'",
20+
"lint:stylelint": "stylelint --ignore-path .gitignore '{src,pages}/**/*.{css,scss}'",
2121
"start": "npm-run-all --parallel start:watch start:dev",
2222
"start:watch": "gulp watch",
2323
"start:dev": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.cjs",

‎pages/autosuggest/permutations.page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ const permutations = createPermutations<AutosuggestProps>([
127127
{
128128
value: 'option1',
129129
label: 'Option 1',
130-
iconAlt: 'amazon-logo',
130+
iconAriaLabel: 'amazon-logo',
131131
iconUrl: img,
132132
},
133133
{

‎pages/badge.page.tsx

Lines changed: 1 addition & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,3 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3-
import * as React from 'react';
4-
5-
import Badge, { BadgeProps } from '~components/badge';
6-
7-
import createPermutations from './utils/permutations';
8-
import PermutationsView from './utils/permutations-view';
9-
import ScreenshotArea from './utils/screenshot-area';
10-
11-
const permutations = createPermutations<BadgeProps>([
12-
{
13-
color: [
14-
'blue',
15-
'grey',
16-
'green',
17-
'red',
18-
'severity-critical',
19-
'severity-high',
20-
'severity-medium',
21-
'severity-low',
22-
'severity-neutral',
23-
],
24-
children: [
25-
'ABC',
26-
'Badge With A Very Long Text',
27-
<>
28-
Badge with <strong>html</strong>
29-
</>,
30-
],
31-
},
32-
]);
33-
34-
export default function BadgePermutations() {
35-
return (
36-
<>
37-
<h1>Badge permutations</h1>
38-
<ScreenshotArea disableAnimations={true}>
39-
<PermutationsView permutations={permutations} render={permutation => <Badge {...permutation} />} />
40-
</ScreenshotArea>
41-
</>
42-
);
43-
}
3+
export { default } from './badge/permutations.page';

‎pages/badge/permutations.page.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import * as React from 'react';
4+
5+
import Badge, { BadgeProps } from '~components/badge';
6+
7+
import createPermutations from '../utils/permutations';
8+
import PermutationsView from '../utils/permutations-view';
9+
import ScreenshotArea from '../utils/screenshot-area';
10+
11+
const permutations = createPermutations<BadgeProps>([
12+
{
13+
color: [
14+
'blue',
15+
'grey',
16+
'green',
17+
'red',
18+
'severity-critical',
19+
'severity-high',
20+
'severity-medium',
21+
'severity-low',
22+
'severity-neutral',
23+
],
24+
children: [
25+
'ABC',
26+
'Badge With A Very Long Text',
27+
<>
28+
Badge with <strong>html</strong>
29+
</>,
30+
],
31+
},
32+
]);
33+
34+
export default function BadgePermutations() {
35+
return (
36+
<>
37+
<h1>Badge permutations</h1>
38+
<ScreenshotArea disableAnimations={true}>
39+
<PermutationsView permutations={permutations} render={permutation => <Badge {...permutation} />} />
40+
</ScreenshotArea>
41+
</>
42+
);
43+
}

‎pages/badge/style-custom-types.page.tsx

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React, { useRef } from 'react';
4+
5+
import { useCurrentMode } from '@cloudscape-design/component-toolkit/internal';
6+
7+
import { Badge as CloudscapeBadge, SpaceBetween } from '~components';
8+
9+
import { palette } from '../app/themes/style-api';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
export default function CustomBadgeTypes() {
13+
return (
14+
<ScreenshotArea>
15+
<h1>Custom Badge Types</h1>
16+
<SpaceBetween direction="horizontal" size="m">
17+
<CustomBadge colorTheme="blue">Blue</CustomBadge>
18+
<CustomBadge colorTheme="critical">Critical</CustomBadge>
19+
<CustomBadge colorTheme="high">High</CustomBadge>
20+
<CustomBadge colorTheme="medium">Medium</CustomBadge>
21+
<CustomBadge colorTheme="low">Low</CustomBadge>
22+
<CustomBadge colorTheme="neutral">Neutral</CustomBadge>
23+
</SpaceBetween>
24+
</ScreenshotArea>
25+
);
26+
}
27+
28+
interface CustomBadgeProps {
29+
children?: React.ReactNode;
30+
colorTheme: 'blue' | 'critical' | 'high' | 'medium' | 'low' | 'neutral';
31+
}
32+
33+
function CustomBadge({ children, colorTheme }: CustomBadgeProps) {
34+
const mode = useCurrentMode(useRef(document.body));
35+
const background = backgrounds[mode][colorTheme];
36+
const borderColor = borderColors[mode][colorTheme];
37+
const borderWidth = borderWidths[colorTheme];
38+
const color = colors[mode];
39+
return (
40+
<CloudscapeBadge
41+
style={{
42+
root: {
43+
background,
44+
borderColor,
45+
borderRadius: '8px',
46+
color,
47+
borderWidth,
48+
paddingBlock: '8px',
49+
paddingInline: '12px',
50+
},
51+
}}
52+
>
53+
<span style={{ fontSize: '16px' }}>{children}</span>
54+
</CloudscapeBadge>
55+
);
56+
}
57+
58+
const backgrounds = {
59+
light: {
60+
blue: palette.blue80,
61+
critical: palette.red80,
62+
high: palette.red60,
63+
medium: palette.green80,
64+
low: palette.teal90,
65+
neutral: palette.neutral80,
66+
},
67+
dark: {
68+
blue: palette.blue40,
69+
critical: palette.red30,
70+
high: palette.red30,
71+
medium: palette.green20,
72+
low: palette.teal20,
73+
neutral: palette.neutral20,
74+
},
75+
};
76+
77+
const colors = {
78+
light: palette.neutral10,
79+
dark: palette.neutral100,
80+
};
81+
82+
const borderColors = {
83+
light: {
84+
blue: palette.neutral80,
85+
critical: palette.blue90,
86+
high: palette.red80,
87+
medium: palette.green80,
88+
low: palette.neutral80,
89+
neutral: palette.teal80,
90+
},
91+
dark: {
92+
blue: palette.neutral20,
93+
critical: palette.red60,
94+
high: palette.red10,
95+
medium: palette.green30,
96+
low: palette.neutral20,
97+
neutral: palette.teal40,
98+
},
99+
};
100+
101+
const borderWidths = {
102+
blue: '2px',
103+
critical: '4px',
104+
high: '0px',
105+
medium: '0px',
106+
low: '0px',
107+
neutral: '0px',
108+
};

‎pages/list/permutations.page.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ const items: Item[] = [
2525
{ content: 'Item 4', description: 'Description', timestamp: 'January 1 2025' },
2626
];
2727

28-
/* eslint-disable react/jsx-key */
2928
const permutations = createPermutations<
3029
ListProps<Item> & { viewportWidth: number; _disablePaddings: boolean | 'item' }
3130
>([
@@ -62,7 +61,6 @@ const permutations = createPermutations<
6261
],
6362
},
6463
]);
65-
/* eslint-enable react/jsx-key */
6664

6765
export default function ListItemPermutations() {
6866
return (

‎pages/popover/use-position-observer.page.tsx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React, { useRef, useState } from 'react';
4+
5+
import Box from '~components/box';
6+
import ExpandableSection from '~components/expandable-section';
7+
import Arrow from '~components/popover/arrow';
8+
import PopoverContainer from '~components/popover/container';
9+
import Slider from '~components/slider';
10+
import SpaceBetween from '~components/space-between';
11+
12+
const sliderI18nStrings = {
13+
valueTextRange: (previousValue: string, value: number, nextValue: string) =>
14+
`${value}, between ${previousValue} and ${nextValue}`,
15+
};
16+
17+
export default function () {
18+
const keepPositionRef = useRef<HTMLDivElement>(null);
19+
const updatePositionRef = useRef<HTMLDivElement>(null);
20+
const [sliderValue, setSliderValue] = useState(0);
21+
return (
22+
<article>
23+
<Box margin={'xl'}>
24+
<h1>Position observer test</h1>
25+
<SpaceBetween size="xxl">
26+
{/* Expanded section with and without keepPosition */}
27+
<>
28+
<ExpandableSection headerText="Expandable section">Test content</ExpandableSection>
29+
<SpaceBetween direction="horizontal" size="xxl">
30+
<>
31+
<div ref={keepPositionRef} style={{ maxWidth: '50px' }}>
32+
Test
33+
</div>
34+
<PopoverContainer
35+
className="keepPositionPopover"
36+
size="small"
37+
fixedWidth={false}
38+
position="bottom"
39+
trackRef={keepPositionRef}
40+
keepPosition={true}
41+
arrow={position => <Arrow position={position} />}
42+
>
43+
Keep position
44+
</PopoverContainer>
45+
</>
46+
47+
<>
48+
<div ref={updatePositionRef} style={{ maxWidth: '50px', marginLeft: '50px' }}>
49+
Test
50+
</div>
51+
<PopoverContainer
52+
className="updatePositionPopover"
53+
size="small"
54+
fixedWidth={false}
55+
position="bottom"
56+
trackRef={updatePositionRef}
57+
keepPosition={false}
58+
arrow={position => <Arrow position={position} />}
59+
>
60+
Update position
61+
</PopoverContainer>
62+
</>
63+
</SpaceBetween>
64+
</>
65+
66+
{/* Slider */}
67+
<Slider
68+
ariaLabel="Slider test"
69+
min={0}
70+
max={100}
71+
value={sliderValue}
72+
onChange={({ detail }) => setSliderValue(detail.value)}
73+
i18nStrings={sliderI18nStrings}
74+
/>
75+
</SpaceBetween>
76+
</Box>
77+
</article>
78+
);
79+
}

‎pages/select/screenshot.page.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@ import ScreenshotArea from '../utils/screenshot-area';
1010

1111
const options: SelectProps.Options = [
1212
{ value: 'first', label: 'Simple' },
13-
{ value: 'second', label: 'With small icon', iconName: 'folder' },
13+
{ value: 'second', label: 'With small icon', iconAriaLabel: 'folder icon alt label', iconName: 'folder' },
1414
{
1515
value: 'third',
1616
label: 'With big icon icon',
1717
description: 'Very big option',
18+
iconAriaLabel: 'very big option icon alt label',
1819
iconSvg: (
1920
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false">
2021
<circle cx="8" cy="8" r="7" />

‎pages/tree-view/permutations.page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function TreeViewPermuations() {
4646
const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
4747

4848
return (
49-
<ScreenshotArea>
49+
<ScreenshotArea disableAnimations={true}>
5050
<h1>Tree view permutations</h1>
5151

5252
<Checkbox

0 commit comments

Comments
 (0)