Skip to content

Commit 4a255bb

Browse files
authored
Merge branch 'main' into feat/core-radio-button-component
2 parents 7c7829f + 4550381 commit 4a255bb

40 files changed

+722
-122
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@
176176
{
177177
"path": "lib/components/internal/widget-exports.js",
178178
"brotli": false,
179-
"limit": "977 kB",
179+
"limit": "1000 kB",
180180
"ignore": "react-dom"
181181
}
182182
],

pages/app-layout/utils/external-widget.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -332,19 +332,28 @@ export const registerRuntimeBottomDrawer = () => {
332332

333333
mountContent: (container, mountContext) => {
334334
mount(
335-
<Drawer header={<Box variant="h2">Global drawer</Box>}>
335+
<Box padding={{ left: 'm' }}>
336336
<AutoIncrementCounter onVisibilityChange={mountContext?.onVisibilityChange}>
337337
global bottom panel
338338
{new Array(100).fill(null).map((_, index) => (
339339
<div key={index}>{index}</div>
340340
))}
341341
<div data-testid="circle-global-bottom-content">circle-global bottom content</div>
342342
</AutoIncrementCounter>
343-
</Drawer>,
343+
</Box>,
344344
container
345345
);
346346
},
347347
unmountContent: container => unmount(container),
348+
mountHeader: container => {
349+
mount(
350+
<Box variant="h2" padding="m">
351+
Global drawer
352+
</Box>,
353+
container
354+
);
355+
},
356+
unmountHeader: container => unmount(container),
348357
headerActions: [
349358
{
350359
type: 'icon-button',
Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React, { useState } from 'react';
4+
5+
import { SpaceBetween } from '~components';
6+
import Button from '~components/button';
7+
import Container from '~components/container';
8+
import Header from '~components/header';
9+
import Wizard, { WizardProps } from '~components/wizard';
10+
11+
import { i18nStrings } from './common';
12+
13+
const steps: WizardProps.Step[] = [
14+
{
15+
title: 'Step 1',
16+
content: (
17+
<>
18+
<Container header={<Header>Step 1, substep one</Header>}></Container>
19+
<Container header={<Header>Step 1, substep two</Header>}></Container>
20+
</>
21+
),
22+
},
23+
{
24+
title: 'Step 2',
25+
content: (
26+
<>
27+
<Container header={<Header>Step 2, substep one</Header>}></Container>
28+
<Container header={<Header>Step 2, substep two</Header>}></Container>
29+
</>
30+
),
31+
isOptional: true,
32+
},
33+
{
34+
title: 'Step 3',
35+
content: (
36+
<>
37+
<Container header={<Header>Step 3, substep one</Header>}></Container>
38+
<Container header={<Header>Step 3, substep two</Header>}></Container>
39+
</>
40+
),
41+
},
42+
];
43+
44+
export default function WizardPage() {
45+
const [activeStepIndex, setActiveStepIndex] = useState(0);
46+
47+
const onNext = () => {
48+
if (activeStepIndex >= steps.length) {
49+
return;
50+
}
51+
setActiveStepIndex(activeStepIndex + 1);
52+
};
53+
54+
const onPrevious = () => {
55+
if (activeStepIndex <= 0) {
56+
return;
57+
}
58+
setActiveStepIndex(activeStepIndex - 1);
59+
};
60+
61+
const onFinish = () => {
62+
alert('Finish');
63+
};
64+
65+
const customPrimaryActions = (
66+
<SpaceBetween size="xs" direction="horizontal">
67+
{activeStepIndex > 0 && (
68+
<Button variant="normal" onClick={onPrevious}>
69+
Custom Previous
70+
</Button>
71+
)}
72+
{activeStepIndex < steps.length - 1 && (
73+
<Button variant="primary" onClick={onNext}>
74+
Custom Next
75+
</Button>
76+
)}
77+
{activeStepIndex === steps.length - 1 && (
78+
<Button variant="primary" onClick={onFinish}>
79+
Custom Finish
80+
</Button>
81+
)}
82+
</SpaceBetween>
83+
);
84+
85+
return (
86+
<Wizard
87+
id="wizard"
88+
steps={steps}
89+
i18nStrings={i18nStrings}
90+
activeStepIndex={activeStepIndex}
91+
onNavigate={e => setActiveStepIndex(e.detail.requestedStepIndex)}
92+
secondaryActions={activeStepIndex === 2 ? <Button>Save as draft</Button> : null}
93+
customPrimaryActions={customPrimaryActions}
94+
/>
95+
);
96+
}

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2616,6 +2616,7 @@ A \`gridLayout\` is an array of breakpoint definitions. Each definition consists
26162616
},
26172617
{
26182618
"description": "An object containing all the necessary localized strings required by the component.",
2619+
"i18nTag": true,
26192620
"inlineType": {
26202621
"name": "AttributeEditorProps.I18nStrings<T>",
26212622
"properties": [
@@ -28391,6 +28392,14 @@ Use this if you need to wait for a response from the server before the user can
2839128392
},
2839228393
],
2839328394
"regions": [
28395+
{
28396+
"description": "Specifies right-aligned custom primary actions for the wizard. Overwrites existing buttons (e.g. Cancel, Next, Finish).",
28397+
"isDefault": false,
28398+
"name": "customPrimaryActions",
28399+
"systemTags": [
28400+
"core",
28401+
],
28402+
},
2839428403
{
2839528404
"description": "Specifies left-aligned secondary actions for the wizard. Use a button dropdown if multiple actions are required.",
2839628405
"isDefault": false,

src/app-layout/__tests__/__snapshots__/widget-contract-old.test.tsx.snap

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ Map {
124124
"setToolbarHeight": [Function],
125125
"setToolbarState": [Function],
126126
"splitPanelAnimationDisabled": true,
127-
"splitPanelControlId": "split-panel6",
127+
"splitPanelControlId": "split-panel4",
128128
"splitPanelFocusControl": {
129129
"refs": {
130130
"preferences": {
@@ -317,7 +317,7 @@ Map {
317317
"setToolbarHeight": [Function],
318318
"setToolbarState": [Function],
319319
"splitPanelAnimationDisabled": true,
320-
"splitPanelControlId": "split-panel6",
320+
"splitPanelControlId": "split-panel4",
321321
"splitPanelFocusControl": {
322322
"refs": {
323323
"preferences": {
@@ -471,7 +471,7 @@ Map {
471471
"setToolbarHeight": [Function],
472472
"setToolbarState": [Function],
473473
"splitPanelAnimationDisabled": true,
474-
"splitPanelControlId": "split-panel6",
474+
"splitPanelControlId": "split-panel4",
475475
"splitPanelFocusControl": {
476476
"refs": {
477477
"preferences": {
@@ -655,7 +655,7 @@ Map {
655655
"setToolbarHeight": [Function],
656656
"setToolbarState": [Function],
657657
"splitPanelAnimationDisabled": true,
658-
"splitPanelControlId": "split-panel6",
658+
"splitPanelControlId": "split-panel4",
659659
"splitPanelFocusControl": {
660660
"refs": {
661661
"preferences": {
@@ -809,7 +809,7 @@ Map {
809809
"setToolbarHeight": [Function],
810810
"setToolbarState": [Function],
811811
"splitPanelAnimationDisabled": true,
812-
"splitPanelControlId": "split-panel6",
812+
"splitPanelControlId": "split-panel4",
813813
"splitPanelFocusControl": {
814814
"refs": {
815815
"preferences": {
@@ -973,7 +973,7 @@ Map {
973973
"setToolbarHeight": [Function],
974974
"setToolbarState": [Function],
975975
"splitPanelAnimationDisabled": true,
976-
"splitPanelControlId": "split-panel9",
976+
"splitPanelControlId": "split-panel6",
977977
"splitPanelFocusControl": {
978978
"refs": {
979979
"preferences": {
@@ -1175,7 +1175,7 @@ Map {
11751175
"setToolbarHeight": [Function],
11761176
"setToolbarState": [Function],
11771177
"splitPanelAnimationDisabled": true,
1178-
"splitPanelControlId": "split-panel9",
1178+
"splitPanelControlId": "split-panel6",
11791179
"splitPanelFocusControl": {
11801180
"refs": {
11811181
"preferences": {
@@ -1335,7 +1335,7 @@ Map {
13351335
"setToolbarHeight": [Function],
13361336
"setToolbarState": [Function],
13371337
"splitPanelAnimationDisabled": true,
1338-
"splitPanelControlId": "split-panel9",
1338+
"splitPanelControlId": "split-panel6",
13391339
"splitPanelFocusControl": {
13401340
"refs": {
13411341
"preferences": {
@@ -1497,7 +1497,7 @@ Map {
14971497
"setToolbarHeight": [Function],
14981498
"setToolbarState": [Function],
14991499
"splitPanelAnimationDisabled": true,
1500-
"splitPanelControlId": "split-panel9",
1500+
"splitPanelControlId": "split-panel6",
15011501
"splitPanelFocusControl": {
15021502
"refs": {
15031503
"preferences": {
@@ -1689,7 +1689,7 @@ Map {
16891689
"setToolbarHeight": [Function],
16901690
"setToolbarState": [Function],
16911691
"splitPanelAnimationDisabled": true,
1692-
"splitPanelControlId": "split-panel9",
1692+
"splitPanelControlId": "split-panel6",
16931693
"splitPanelFocusControl": {
16941694
"refs": {
16951695
"preferences": {
@@ -1849,7 +1849,7 @@ Map {
18491849
"setToolbarHeight": [Function],
18501850
"setToolbarState": [Function],
18511851
"splitPanelAnimationDisabled": true,
1852-
"splitPanelControlId": "split-panel9",
1852+
"splitPanelControlId": "split-panel6",
18531853
"splitPanelFocusControl": {
18541854
"refs": {
18551855
"preferences": {
@@ -2023,7 +2023,7 @@ Map {
20232023
"setToolbarHeight": [Function],
20242024
"setToolbarState": [Function],
20252025
"splitPanelAnimationDisabled": true,
2026-
"splitPanelControlId": "split-panel12",
2026+
"splitPanelControlId": "split-panel8",
20272027
"splitPanelFocusControl": {
20282028
"refs": {
20292029
"preferences": {
@@ -2234,7 +2234,7 @@ Map {
22342234
"setToolbarHeight": [Function],
22352235
"setToolbarState": [Function],
22362236
"splitPanelAnimationDisabled": true,
2237-
"splitPanelControlId": "split-panel12",
2237+
"splitPanelControlId": "split-panel8",
22382238
"splitPanelFocusControl": {
22392239
"refs": {
22402240
"preferences": {
@@ -2404,7 +2404,7 @@ Map {
24042404
"setToolbarHeight": [Function],
24052405
"setToolbarState": [Function],
24062406
"splitPanelAnimationDisabled": true,
2407-
"splitPanelControlId": "split-panel12",
2407+
"splitPanelControlId": "split-panel8",
24082408
"splitPanelFocusControl": {
24092409
"refs": {
24102410
"preferences": {
@@ -2604,7 +2604,7 @@ Map {
26042604
"setToolbarHeight": [Function],
26052605
"setToolbarState": [Function],
26062606
"splitPanelAnimationDisabled": true,
2607-
"splitPanelControlId": "split-panel12",
2607+
"splitPanelControlId": "split-panel8",
26082608
"splitPanelFocusControl": {
26092609
"refs": {
26102610
"preferences": {
@@ -2774,7 +2774,7 @@ Map {
27742774
"setToolbarHeight": [Function],
27752775
"setToolbarState": [Function],
27762776
"splitPanelAnimationDisabled": true,
2777-
"splitPanelControlId": "split-panel12",
2777+
"splitPanelControlId": "split-panel8",
27782778
"splitPanelFocusControl": {
27792779
"refs": {
27802780
"preferences": {

src/app-layout/__tests__/__snapshots__/widget-contract-split-panel-old.test.tsx.snap

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ Map {
124124
"setToolbarHeight": [Function],
125125
"setToolbarState": [Function],
126126
"splitPanelAnimationDisabled": true,
127-
"splitPanelControlId": "split-panel10",
127+
"splitPanelControlId": "split-panel7",
128128
"splitPanelFocusControl": {
129129
"refs": {
130130
"preferences": {
@@ -317,7 +317,7 @@ Map {
317317
"setToolbarHeight": [Function],
318318
"setToolbarState": [Function],
319319
"splitPanelAnimationDisabled": true,
320-
"splitPanelControlId": "split-panel10",
320+
"splitPanelControlId": "split-panel7",
321321
"splitPanelFocusControl": {
322322
"refs": {
323323
"preferences": {
@@ -471,7 +471,7 @@ Map {
471471
"setToolbarHeight": [Function],
472472
"setToolbarState": [Function],
473473
"splitPanelAnimationDisabled": true,
474-
"splitPanelControlId": "split-panel10",
474+
"splitPanelControlId": "split-panel7",
475475
"splitPanelFocusControl": {
476476
"refs": {
477477
"preferences": {
@@ -662,7 +662,7 @@ Map {
662662
"setToolbarHeight": [Function],
663663
"setToolbarState": [Function],
664664
"splitPanelAnimationDisabled": true,
665-
"splitPanelControlId": "split-panel10",
665+
"splitPanelControlId": "split-panel7",
666666
"splitPanelFocusControl": {
667667
"refs": {
668668
"preferences": {
@@ -816,7 +816,7 @@ Map {
816816
"setToolbarHeight": [Function],
817817
"setToolbarState": [Function],
818818
"splitPanelAnimationDisabled": true,
819-
"splitPanelControlId": "split-panel10",
819+
"splitPanelControlId": "split-panel7",
820820
"splitPanelFocusControl": {
821821
"refs": {
822822
"preferences": {
@@ -974,7 +974,7 @@ Map {
974974
"setToolbarHeight": [Function],
975975
"setToolbarState": [Function],
976976
"splitPanelAnimationDisabled": true,
977-
"splitPanelControlId": "split-panel6",
977+
"splitPanelControlId": "split-panel4",
978978
"splitPanelFocusControl": {
979979
"refs": {
980980
"preferences": {
@@ -1167,7 +1167,7 @@ Map {
11671167
"setToolbarHeight": [Function],
11681168
"setToolbarState": [Function],
11691169
"splitPanelAnimationDisabled": true,
1170-
"splitPanelControlId": "split-panel6",
1170+
"splitPanelControlId": "split-panel4",
11711171
"splitPanelFocusControl": {
11721172
"refs": {
11731173
"preferences": {
@@ -1321,7 +1321,7 @@ Map {
13211321
"setToolbarHeight": [Function],
13221322
"setToolbarState": [Function],
13231323
"splitPanelAnimationDisabled": true,
1324-
"splitPanelControlId": "split-panel6",
1324+
"splitPanelControlId": "split-panel4",
13251325
"splitPanelFocusControl": {
13261326
"refs": {
13271327
"preferences": {
@@ -1511,7 +1511,7 @@ Map {
15111511
"setToolbarHeight": [Function],
15121512
"setToolbarState": [Function],
15131513
"splitPanelAnimationDisabled": true,
1514-
"splitPanelControlId": "split-panel6",
1514+
"splitPanelControlId": "split-panel4",
15151515
"splitPanelFocusControl": {
15161516
"refs": {
15171517
"preferences": {
@@ -1665,7 +1665,7 @@ Map {
16651665
"setToolbarHeight": [Function],
16661666
"setToolbarState": [Function],
16671667
"splitPanelAnimationDisabled": true,
1668-
"splitPanelControlId": "split-panel6",
1668+
"splitPanelControlId": "split-panel4",
16691669
"splitPanelFocusControl": {
16701670
"refs": {
16711671
"preferences": {

0 commit comments

Comments
 (0)