Skip to content

Commit ecf1389

Browse files
just-borisjust-boris
authored
Merge branch 'main' into fix-ref-types
2 parents 4694730 + fa5bdbd commit ecf1389

File tree

142 files changed

+9231
-4649
lines changed

Some content is hidden

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

142 files changed

+9231
-4649
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@
167167
{
168168
"path": "lib/components/internal/widget-exports.js",
169169
"brotli": false,
170-
"limit": "810 kB",
170+
"limit": "830 kB",
171171
"ignore": "react-dom"
172172
}
173173
],

‎pages/app-layout/runtime-drawers.page.tsx

Lines changed: 72 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -70,83 +70,85 @@ export default function WithDrawers() {
7070
breadcrumbs={<Breadcrumbs />}
7171
ref={appLayoutRef}
7272
content={
73-
<ContentLayout
74-
disableOverlap={true}
75-
header={
76-
<SpaceBetween size="m">
77-
<Header
78-
variant="h1"
79-
description="Sometimes you need custom drawers to get the job done."
80-
info={
81-
<Link
82-
data-testid="info-link-header"
83-
variant="info"
84-
onFollow={() => {
85-
setHelpPathSlug('header');
86-
setIsToolsOpen(true);
87-
appLayoutRef.current?.focusToolsClose();
88-
}}
89-
>
90-
Info
91-
</Link>
92-
}
93-
>
94-
Testing Custom Drawers!
95-
</Header>
73+
<div data-testid="app-layout-content-area">
74+
<ContentLayout
75+
disableOverlap={true}
76+
header={
77+
<SpaceBetween size="m">
78+
<Header
79+
variant="h1"
80+
description="Sometimes you need custom drawers to get the job done."
81+
info={
82+
<Link
83+
data-testid="info-link-header"
84+
variant="info"
85+
onFollow={() => {
86+
setHelpPathSlug('header');
87+
setIsToolsOpen(true);
88+
appLayoutRef.current?.focusToolsClose();
89+
}}
90+
>
91+
Info
92+
</Link>
93+
}
94+
>
95+
Testing Custom Drawers!
96+
</Header>
9697

97-
<SpaceBetween size="xs">
98-
<Toggle checked={hasTools} onChange={({ detail }) => setUrlParams({ hasTools: detail.checked })}>
99-
Use Tools
100-
</Toggle>
98+
<SpaceBetween size="xs">
99+
<Toggle checked={hasTools} onChange={({ detail }) => setUrlParams({ hasTools: detail.checked })}>
100+
Use Tools
101+
</Toggle>
101102

102-
<Toggle checked={hasDrawers} onChange={({ detail }) => setUrlParams({ hasDrawers: detail.checked })}>
103-
Use Drawers
104-
</Toggle>
103+
<Toggle checked={hasDrawers} onChange={({ detail }) => setUrlParams({ hasDrawers: detail.checked })}>
104+
Use Drawers
105+
</Toggle>
105106

106-
<Button
107-
onClick={() => awsuiPlugins.appLayout.openDrawer('circle4-global')}
108-
data-testid="open-drawer-button"
109-
>
110-
Open a drawer without a trigger
111-
</Button>
112-
<Button onClick={() => awsuiPlugins.appLayout.closeDrawer('circle4-global')}>
113-
Close a drawer without a trigger
114-
</Button>
107+
<Button
108+
onClick={() => awsuiPlugins.appLayout.openDrawer('circle4-global')}
109+
data-testid="open-drawer-button"
110+
>
111+
Open a drawer without a trigger
112+
</Button>
113+
<Button onClick={() => awsuiPlugins.appLayout.closeDrawer('circle4-global')}>
114+
Close a drawer without a trigger
115+
</Button>
115116

116-
<Button
117-
onClick={() => awsuiPlugins.appLayout.resizeDrawer('circle-global', 400)}
118-
data-testid="button-circle-global-resize"
119-
>
120-
Resize circle-global drawer to 400px
121-
</Button>
122-
<Button
123-
onClick={() => awsuiPlugins.appLayout.resizeDrawer('circle3-global', 500)}
124-
data-testid="button-circle3-global-resize"
125-
>
126-
Resize circle3-global drawer to 500px
127-
</Button>
117+
<Button
118+
onClick={() => awsuiPlugins.appLayout.resizeDrawer('circle-global', 400)}
119+
data-testid="button-circle-global-resize"
120+
>
121+
Resize circle-global drawer to 400px
122+
</Button>
123+
<Button
124+
onClick={() => awsuiPlugins.appLayout.resizeDrawer('circle3-global', 500)}
125+
data-testid="button-circle3-global-resize"
126+
>
127+
Resize circle3-global drawer to 500px
128+
</Button>
129+
</SpaceBetween>
128130
</SpaceBetween>
129-
</SpaceBetween>
130-
}
131-
>
132-
<Header
133-
info={
134-
<Link
135-
data-testid="info-link-content"
136-
variant="info"
137-
onFollow={() => {
138-
setHelpPathSlug('content');
139-
setIsToolsOpen(true);
140-
}}
141-
>
142-
Info
143-
</Link>
144131
}
145132
>
146-
Content
147-
</Header>
148-
<Containers />
149-
</ContentLayout>
133+
<Header
134+
info={
135+
<Link
136+
data-testid="info-link-content"
137+
variant="info"
138+
onFollow={() => {
139+
setHelpPathSlug('content');
140+
setIsToolsOpen(true);
141+
}}
142+
>
143+
Info
144+
</Link>
145+
}
146+
>
147+
Content
148+
</Header>
149+
<Containers />
150+
</ContentLayout>
151+
</div>
150152
}
151153
splitPanel={
152154
<SplitPanel header="Split panel header" i18nStrings={splitPaneli18nStrings}>

‎pages/app/index.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,18 @@ interface GlobalFlags {
2222
appLayoutWidget?: boolean;
2323
appLayoutToolbar?: boolean;
2424
}
25+
// used for local dev / testing
26+
interface CustomFlags {
27+
appLayoutDelayedWidget?: boolean;
28+
}
2529
const awsuiVisualRefreshFlag = Symbol.for('awsui-visual-refresh-flag');
2630
const awsuiGlobalFlagsSymbol = Symbol.for('awsui-global-flags');
31+
const awsuiCustomFlagsSymbol = Symbol.for('awsui-custom-flags');
2732

2833
interface ExtendedWindow extends Window {
2934
[awsuiVisualRefreshFlag]?: () => boolean;
3035
[awsuiGlobalFlagsSymbol]?: GlobalFlags;
36+
[awsuiCustomFlagsSymbol]?: CustomFlags;
3137
}
3238
declare const window: ExtendedWindow;
3339

@@ -86,15 +92,21 @@ function App() {
8692
}
8793

8894
const history = createHashHistory();
89-
const { direction, visualRefresh, appLayoutWidget, appLayoutToolbar } = parseQuery(history.location.search);
95+
const { direction, visualRefresh, appLayoutWidget, appLayoutToolbar, appLayoutDelayedWidget } = parseQuery(
96+
history.location.search
97+
);
9098

9199
// The VR class needs to be set before any React rendering occurs.
92100
window[awsuiVisualRefreshFlag] = () => visualRefresh;
93101
if (!window[awsuiGlobalFlagsSymbol]) {
94102
window[awsuiGlobalFlagsSymbol] = {};
95103
}
104+
if (!window[awsuiCustomFlagsSymbol]) {
105+
window[awsuiCustomFlagsSymbol] = {};
106+
}
96107
window[awsuiGlobalFlagsSymbol].appLayoutWidget = appLayoutWidget;
97108
window[awsuiGlobalFlagsSymbol].appLayoutToolbar = appLayoutToolbar;
109+
window[awsuiCustomFlagsSymbol].appLayoutDelayedWidget = appLayoutDelayedWidget;
98110

99111
// Apply the direction value to the HTML element dir attribute
100112
document.documentElement.setAttribute('dir', direction);

‎pages/checkbox/style-custom.page.tsx

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
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 { Checkbox, SpaceBetween } from '~components';
8+
9+
import { palette } from '../app/themes/style-api';
10+
import ScreenshotArea from '../utils/screenshot-area';
11+
12+
export default function CustomCheckbox() {
13+
const mode = useCurrentMode(useRef(document.body));
14+
15+
const colors = {
16+
light: {
17+
checked: palette.neutral100,
18+
default: palette.neutral100,
19+
disabled: palette.neutral60,
20+
indeterminate: palette.neutral100,
21+
readOnly: palette.neutral80,
22+
},
23+
dark: {
24+
checked: palette.neutral10,
25+
default: palette.neutral10,
26+
disabled: palette.neutral40,
27+
indeterminate: palette.neutral10,
28+
readOnly: palette.neutral40,
29+
},
30+
};
31+
32+
const style = {
33+
input: {
34+
fill: {
35+
checked: palette.teal80,
36+
default: palette.neutral10,
37+
disabled: palette.neutral40,
38+
indeterminate: palette.teal80,
39+
readOnly: palette.neutral40,
40+
},
41+
stroke: {
42+
checked: palette.teal80,
43+
default: palette.neutral80,
44+
disabled: palette.neutral40,
45+
indeterminate: palette.teal80,
46+
readOnly: palette.neutral40,
47+
},
48+
check: {
49+
stroke: {
50+
checked: palette.teal10,
51+
disabled: palette.neutral10,
52+
indeterminate: palette.teal10,
53+
readOnly: palette.neutral80,
54+
},
55+
},
56+
focusRing: {
57+
borderColor: palette.teal80,
58+
borderRadius: '0px',
59+
borderWidth: '3px',
60+
},
61+
},
62+
label: {
63+
color: { ...colors[mode] },
64+
},
65+
};
66+
67+
return (
68+
<ScreenshotArea>
69+
<h1>Custom Checkbox</h1>
70+
71+
<SpaceBetween size="m" direction="vertical">
72+
<SpaceBetween size="m" direction="horizontal">
73+
<Checkbox checked={false} style={style} data-testid="1">
74+
Custom 1
75+
</Checkbox>
76+
77+
<Checkbox checked={false} disabled={true} style={style}>
78+
Custom 2
79+
</Checkbox>
80+
81+
<Checkbox checked={false} disabled={false} readOnly={true} style={style}>
82+
Custom 3
83+
</Checkbox>
84+
</SpaceBetween>
85+
86+
<SpaceBetween size="m" direction="horizontal">
87+
<Checkbox checked={true} style={style} data-testid="4">
88+
Custom 4
89+
</Checkbox>
90+
91+
<Checkbox checked={true} disabled={true} readOnly={false} style={style}>
92+
Custom 5
93+
</Checkbox>
94+
95+
<Checkbox checked={true} disabled={false} readOnly={true} style={style}>
96+
Custom 6
97+
</Checkbox>
98+
</SpaceBetween>
99+
100+
<SpaceBetween size="m" direction="horizontal">
101+
<Checkbox checked={true} indeterminate={true} style={style}>
102+
Custom 7
103+
</Checkbox>
104+
105+
<Checkbox checked={true} indeterminate={true} disabled={true} readOnly={false} style={style}>
106+
Custom 8
107+
</Checkbox>
108+
109+
<Checkbox checked={true} indeterminate={true} disabled={false} readOnly={true} style={style}>
110+
Custom 9
111+
</Checkbox>
112+
</SpaceBetween>
113+
</SpaceBetween>
114+
</ScreenshotArea>
115+
);
116+
}

‎pages/date-input/permutations-formats.page.tsx

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
3+
34
import React from 'react';
45

6+
import { SpaceBetween } from '~components';
57
import Box from '~components/box';
68
import DateInput, { DateInputProps } from '~components/date-input';
79

@@ -10,12 +12,20 @@ import PermutationsView from '../utils/permutations-view';
1012
import ScreenshotArea from '../utils/screenshot-area';
1113
import { locales } from './common';
1214

13-
const permutationsFormats = createPermutations<DateInputProps>([
15+
const permutationsFormatsDay = createPermutations<DateInputProps>([
1416
{
1517
value: ['2020-01-02'],
1618
ariaLabel: ['Some label'],
1719
format: ['iso', 'slashed', 'long-localized'],
18-
granularity: ['day', 'month'],
20+
granularity: ['day'],
21+
},
22+
]);
23+
const permutationsFormatsMonth = createPermutations<DateInputProps>([
24+
{
25+
value: ['2020-01'],
26+
ariaLabel: ['Some label'],
27+
format: ['iso', 'slashed', 'long-localized'],
28+
granularity: ['month'],
1929
},
2030
]);
2131

@@ -34,19 +44,24 @@ export default function DateInputPermutations() {
3444
<Box padding="l">
3545
<h1>Date Input permutations - formats</h1>
3646
<ScreenshotArea>
37-
<PermutationsView
38-
permutations={permutationsFormats}
39-
render={permutation => <DateInput {...permutation} onChange={() => {}} />}
40-
/>
41-
42-
<br />
43-
<hr />
44-
<br />
45-
46-
<PermutationsView
47-
permutations={permutationsLongLocalizedLocales}
48-
render={permutation => <DateInput {...permutation} onChange={() => {}} />}
49-
/>
47+
<SpaceBetween size="m">
48+
<PermutationsView
49+
permutations={permutationsFormatsDay}
50+
render={permutation => <DateInput {...permutation} onChange={() => {}} />}
51+
/>
52+
53+
<PermutationsView
54+
permutations={permutationsFormatsMonth}
55+
render={permutation => <DateInput {...permutation} onChange={() => {}} />}
56+
/>
57+
58+
<hr />
59+
60+
<PermutationsView
61+
permutations={permutationsLongLocalizedLocales}
62+
render={permutation => <DateInput {...permutation} onChange={() => {}} />}
63+
/>
64+
</SpaceBetween>
5065
</ScreenshotArea>
5166
</Box>
5267
);

0 commit comments

Comments
 (0)