Skip to content

Commit 1a8c2e1

Browse files
gethinwebstergethinwebster
committed
Address initial PR feedback
1 parent 5b0044a commit 1a8c2e1

File tree

12 files changed

+116
-122
lines changed

12 files changed

+116
-122
lines changed

‎pages/panel-layout/app-layout-panel.page.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import ScreenshotArea from '../utils/screenshot-area';
1818
interface PanelLayoutContentProps {
1919
longPanelContent: boolean;
2020
longMainContent: boolean;
21+
buttons: boolean;
2122
minPanelSize: number;
2223
maxPanelSize: number;
2324
minContentSize: number;
@@ -29,6 +30,7 @@ type PageContext = React.Context<AppContextType<Partial<PanelLayoutContentProps>
2930
const PanelLayoutContent = ({
3031
longPanelContent,
3132
longMainContent,
33+
buttons,
3234
minContentSize,
3335
minPanelSize,
3436
maxPanelSize,
@@ -59,6 +61,8 @@ const PanelLayoutContent = ({
5961
onPanelResize={({ detail }) => setSize(detail.panelSize)}
6062
display={display}
6163
panelPosition={panelPosition}
64+
mainFocusable={longMainContent && !buttons ? { ariaLabel: 'Main content' } : undefined}
65+
panelFocusable={longPanelContent && !buttons ? { ariaLabel: 'Panel content' } : undefined}
6266
panelContent={
6367
<Box padding="m">
6468
<Header>Panel content</Header>
@@ -67,7 +71,7 @@ const PanelLayoutContent = ({
6771
.map((t, i) => (
6872
<div key={i}>{t}</div>
6973
))}
70-
<Button>Button</Button>
74+
{buttons && <Button>Button</Button>}
7175
</Box>
7276
}
7377
mainContent={
@@ -78,7 +82,7 @@ const PanelLayoutContent = ({
7882
.map((t, i) => (
7983
<div key={i}>{t}</div>
8084
))}
81-
<Button>button</Button>
85+
{buttons && <Button>button</Button>}
8286
</Box>
8387
}
8488
/>
@@ -92,6 +96,7 @@ export default function PanelLayoutPage() {
9296
urlParams: {
9397
longPanelContent = false,
9498
longMainContent = false,
99+
buttons = true,
95100
minPanelSize = 200,
96101
maxPanelSize = 600,
97102
minContentSize = 600,
@@ -121,6 +126,9 @@ export default function PanelLayoutPage() {
121126
>
122127
Long panel content
123128
</Checkbox>
129+
<Checkbox checked={buttons} onChange={({ detail }) => setUrlParams({ buttons: detail.checked })}>
130+
Include interactive content
131+
</Checkbox>
124132
<FormField label="Minimum panel size">
125133
<Input
126134
type="number"
@@ -178,6 +186,7 @@ export default function PanelLayoutPage() {
178186
<PanelLayoutContent
179187
longMainContent={longMainContent}
180188
longPanelContent={longPanelContent}
189+
buttons={buttons}
181190
minPanelSize={minPanelSize}
182191
maxPanelSize={maxPanelSize}
183192
minContentSize={minContentSize}

‎pages/panel-layout/nested.page.tsx‎

Lines changed: 54 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,10 @@ import React, { useContext } from 'react';
44

55
import { Container, FormField, Header, SegmentedControl, SpaceBetween } from '~components';
66
import Button from '~components/button';
7-
import { I18nProvider } from '~components/i18n';
8-
import messages from '~components/i18n/messages/all.en';
97
import PanelLayout, { PanelLayoutProps } from '~components/panel-layout';
108

119
import AppContext, { AppContextType } from '../app/app-context';
12-
import ScreenshotArea from '../utils/screenshot-area';
10+
import { SimplePage } from '../app/templates';
1311

1412
interface NestedPanelLayoutProps {
1513
outerPanelPosition: PanelLayoutProps.PanelPosition;
@@ -87,72 +85,62 @@ export default function NestedPanelLayoutPage() {
8785
} = useContext(AppContext as PageContext);
8886

8987
return (
90-
<I18nProvider messages={[messages]} locale="en">
91-
<ScreenshotArea disableAnimations={true} gutters={false}>
92-
<SpaceBetween size="l">
93-
<Container
94-
header={
95-
<Header variant="h1" description="Demonstrates how panel layouts can be nested within each other">
96-
Nested Panel Layout Demo
97-
</Header>
98-
}
99-
>
100-
<SpaceBetween size="m">
101-
<p>
102-
This page demonstrates nested panel layouts, where one panel layout contains another panel layout in
103-
either its panel or main content area.
104-
</p>
105-
<p>
106-
Each panel layout maintains its own resize behavior and can be configured with different panel positions
107-
and constraints.
108-
</p>
88+
<SimplePage title="Nested Panel Layout Demo" i18n={{}} screenshotArea={{}}>
89+
<SpaceBetween size="l">
90+
<Container>
91+
<p>
92+
This page demonstrates nested panel layouts, where one panel layout contains another panel layout in either
93+
its panel or main content area.
94+
</p>
95+
<p>
96+
Each panel layout maintains its own resize behavior and can be configured with different panel positions and
97+
constraints.
98+
</p>
10999

110-
<SpaceBetween size="s" direction="horizontal">
111-
<FormField label="Outer panel position">
112-
<SegmentedControl
113-
options={[
114-
{ id: 'side-start', text: 'side-start' },
115-
{ id: 'side-end', text: 'side-end' },
116-
]}
117-
selectedId={outerPanelPosition}
118-
onChange={({ detail }) => setUrlParams({ outerPanelPosition: detail.selectedId as any })}
119-
/>
120-
</FormField>
100+
<SpaceBetween size="s" direction="horizontal">
101+
<FormField label="Outer panel position">
102+
<SegmentedControl
103+
options={[
104+
{ id: 'side-start', text: 'side-start' },
105+
{ id: 'side-end', text: 'side-end' },
106+
]}
107+
selectedId={outerPanelPosition}
108+
onChange={({ detail }) => setUrlParams({ outerPanelPosition: detail.selectedId as any })}
109+
/>
110+
</FormField>
121111

122-
<FormField label="Inner panel position">
123-
<SegmentedControl
124-
options={[
125-
{ id: 'side-start', text: 'side-start' },
126-
{ id: 'side-end', text: 'side-end' },
127-
]}
128-
selectedId={innerPanelPosition}
129-
onChange={({ detail }) => setUrlParams({ innerPanelPosition: detail.selectedId as any })}
130-
/>
131-
</FormField>
112+
<FormField label="Inner panel position">
113+
<SegmentedControl
114+
options={[
115+
{ id: 'side-start', text: 'side-start' },
116+
{ id: 'side-end', text: 'side-end' },
117+
]}
118+
selectedId={innerPanelPosition}
119+
onChange={({ detail }) => setUrlParams({ innerPanelPosition: detail.selectedId as any })}
120+
/>
121+
</FormField>
132122

133-
<FormField label="Nested location">
134-
<SegmentedControl
135-
options={[
136-
{ id: 'panel', text: 'In panel' },
137-
{ id: 'main', text: 'In main' },
138-
]}
139-
selectedId={nestedLocation}
140-
onChange={({ detail }) => setUrlParams({ nestedLocation: detail.selectedId as any })}
141-
/>
142-
</FormField>
143-
</SpaceBetween>
144-
</SpaceBetween>
145-
</Container>
123+
<FormField label="Nested location">
124+
<SegmentedControl
125+
options={[
126+
{ id: 'panel', text: 'In panel' },
127+
{ id: 'main', text: 'In main' },
128+
]}
129+
selectedId={nestedLocation}
130+
onChange={({ detail }) => setUrlParams({ nestedLocation: detail.selectedId as any })}
131+
/>
132+
</FormField>
133+
</SpaceBetween>
134+
</Container>
146135

147-
<div style={{ maxHeight: '600px' }}>
148-
<NestedPanelLayoutDemo
149-
outerPanelPosition={outerPanelPosition}
150-
innerPanelPosition={innerPanelPosition}
151-
nestedLocation={nestedLocation}
152-
/>
153-
</div>
154-
</SpaceBetween>
155-
</ScreenshotArea>
156-
</I18nProvider>
136+
<div style={{ maxHeight: '600px' }}>
137+
<NestedPanelLayoutDemo
138+
outerPanelPosition={outerPanelPosition}
139+
innerPanelPosition={innerPanelPosition}
140+
nestedLocation={nestedLocation}
141+
/>
142+
</div>
143+
</SpaceBetween>
144+
</SimplePage>
157145
);
158146
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Components definition for alert matches the snapshot: alert 1`] = `
44
{
@@ -18047,7 +18047,7 @@ exports[`Components definition for panel-layout matches the snapshot: panel-layo
1804718047
{
1804818048
"description": "Initial panel size, for uncontrolled behavior.
1804918049

18050-
The actual size may vary, depending on \`minPanelSize\` and \`maxPanelSize\`.",
18050+
The actual size will be constrained by \`minPanelSize\` and \`maxPanelSize\`, if set.",
1805118051
"name": "defaultPanelSize",
1805218052
"optional": true,
1805318053
"type": "number",
@@ -18184,7 +18184,7 @@ Provide either \`{ariaLabel: "Panel label"}\` or \`{ariaLabelledby: "panel-label
1818418184
"description": "Size of the panel. If provided, and panel is resizable, the component is controlled,
1818518185
so you must also provide \`onPanelResize\`.
1818618186

18187-
The actual size may vary, depending on \`minPanelSize\` and \`maxPanelSize\`.",
18187+
The actual size will be constrained by \`minPanelSize\` and \`maxPanelSize\`, if set.",
1818818188
"name": "panelSize",
1818918189
"optional": true,
1819018190
"type": "number",

‎src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`test-utils selectors 1`] = `
44
{
@@ -459,8 +459,8 @@ exports[`test-utils selectors 1`] = `
459459
"panel-layout": [
460460
"awsui_content_119z0",
461461
"awsui_panel_119z0",
462+
"awsui_resize-handle_119z0",
462463
"awsui_root_119z0",
463-
"awsui_slider_119z0",
464464
],
465465
"pie-chart": [
466466
"awsui_inner-content_1edmh",

‎src/i18n/messages/all.en.json‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -180,10 +180,6 @@
180180
"i18nStrings.descriptionText": "{hasFeedback, select, true {Refresh to try again. We are tracking this issue, but you can share <Feedback>more information here</Feedback>.} other {Refresh to try again.}}",
181181
"i18nStrings.refreshActionText": "Refresh page"
182182
},
183-
"features-notification-drawer": {
184-
"i18nStrings.title": "Latest feature releases",
185-
"i18nStrings.viewAll": "View all feature releases"
186-
},
187183
"file-token-group": {
188184
"i18nStrings.limitShowFewer": "Show fewer",
189185
"i18nStrings.limitShowMore": "Show more",

‎src/panel-layout/__integ__/app-layout-panel.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ class PanelLayoutAppLayoutPage extends BasePageObject {
3838
return null;
3939
}
4040

41-
const element = await this.browser.$(panel.toSelector());
41+
const element = await this.browser.$(panel.toSelector()).parentElement();
4242
const size = await element.getCSSProperty('inline-size');
4343
return size.value;
4444
}

0 commit comments

Comments
 (0)