Skip to content

Commit 5024307

Browse files
avinashbotavinashbot
authored
feat: Add directional resize buttons to split panel and drawers (#3423)
1 parent 87e4a10 commit 5024307

File tree

59 files changed

+335
-478
lines changed

Some content is hidden

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

59 files changed

+335
-478
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@
164164
{
165165
"path": "lib/components/internal/widget-exports.js",
166166
"brotli": false,
167-
"limit": "764 kB",
167+
"limit": "775 kB",
168168
"ignore": "react-dom"
169169
}
170170
],

‎pages/app-layout/disable-paddings-with-split-panel.page.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import AppContext, { AppContextType } from '../app/app-context';
1010
import ScreenshotArea from '../utils/screenshot-area';
1111
import { Breadcrumbs, Navigation, Tools } from './utils/content-blocks';
1212
import labels from './utils/labels';
13+
import { splitPaneli18nStrings } from './utils/strings';
1314
import * as toolsContent from './utils/tools-content';
1415

1516
type SplitPanelDemoContext = React.Context<
@@ -41,21 +42,7 @@ export default function () {
4142
splitPanelOpen={splitPanelOpen}
4243
onSplitPanelToggle={event => setUrlParams({ splitPanelOpen: event.detail.open })}
4344
splitPanel={
44-
<SplitPanel
45-
header="Split panel header"
46-
i18nStrings={{
47-
preferencesTitle: 'Preferences',
48-
preferencesPositionLabel: 'Split panel position',
49-
preferencesPositionDescription: 'Choose the default split panel position for the service.',
50-
preferencesPositionSide: 'Side',
51-
preferencesPositionBottom: 'Bottom',
52-
preferencesConfirm: 'Confirm',
53-
preferencesCancel: 'Cancel',
54-
closeButtonAriaLabel: 'Close panel',
55-
openButtonAriaLabel: 'Open panel',
56-
resizeHandleAriaLabel: 'Slider',
57-
}}
58-
>
45+
<SplitPanel header="Split panel header" i18nStrings={splitPaneli18nStrings}>
5946
<Box>Content</Box>
6047
</SplitPanel>
6148
}

‎pages/app-layout/legacy-nav-scrollable-with-split-panel.page.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import SplitPanel from '~components/split-panel';
99
import ScreenshotArea from '../utils/screenshot-area';
1010
import { Breadcrumbs, Containers, Footer, Navigation, Tools } from './utils/content-blocks';
1111
import labels from './utils/labels';
12+
import { splitPaneli18nStrings } from './utils/strings';
1213
import * as toolsContent from './utils/tools-content';
1314

1415
const DEMO_CONTENT = (
@@ -59,21 +60,7 @@ export default function () {
5960
splitPanelOpen={splitPanelOpen}
6061
onSplitPanelToggle={event => setSplitPanelOpen(event.detail.open)}
6162
splitPanel={
62-
<SplitPanel
63-
header="Split panel header"
64-
i18nStrings={{
65-
preferencesTitle: 'Preferences',
66-
preferencesPositionLabel: 'Split panel position',
67-
preferencesPositionDescription: 'Choose the default split panel position for the service.',
68-
preferencesPositionSide: 'Side',
69-
preferencesPositionBottom: 'Bottom',
70-
preferencesConfirm: 'Confirm',
71-
preferencesCancel: 'Cancel',
72-
closeButtonAriaLabel: 'Close panel',
73-
openButtonAriaLabel: 'Open panel',
74-
resizeHandleAriaLabel: 'Slider',
75-
}}
76-
>
63+
<SplitPanel header="Split panel header" i18nStrings={splitPaneli18nStrings}>
7764
{DEMO_CONTENT}
7865
</SplitPanel>
7966
}

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import AppContext, { AppContextType } from '../app/app-context';
2121
import { Breadcrumbs, Containers, CustomDrawerContent } from './utils/content-blocks';
2222
import { drawerLabels } from './utils/drawers';
2323
import appLayoutLabels from './utils/labels';
24+
import { splitPaneli18nStrings } from './utils/strings';
2425

2526
type DemoContext = React.Context<
2627
AppContextType<{
@@ -135,21 +136,7 @@ export default function WithDrawers() {
135136
</ContentLayout>
136137
}
137138
splitPanel={
138-
<SplitPanel
139-
header="Split panel header"
140-
i18nStrings={{
141-
preferencesTitle: 'Preferences',
142-
preferencesPositionLabel: 'Split panel position',
143-
preferencesPositionDescription: 'Choose the default split panel position for the service.',
144-
preferencesPositionSide: 'Side',
145-
preferencesPositionBottom: 'Bottom',
146-
preferencesConfirm: 'Confirm',
147-
preferencesCancel: 'Cancel',
148-
closeButtonAriaLabel: 'Close panel',
149-
openButtonAriaLabel: 'Open panel',
150-
resizeHandleAriaLabel: 'Slider',
151-
}}
152-
>
139+
<SplitPanel header="Split panel header" i18nStrings={splitPaneli18nStrings}>
153140
This is the Split Panel!
154141
</SplitPanel>
155142
}

‎pages/app-layout/utils/drawers.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const getAriaLabels = (title: string, badge: boolean) => {
1414
drawerName: `${title}`,
1515
triggerButton: `${title} trigger button${badge ? ' (Unread notifications)' : ''}`,
1616
resizeHandle: `${title} resize handle`,
17+
resizeHandleTooltipText: 'Drag or select to resize',
1718
};
1819
};
1920

‎pages/app-layout/utils/strings.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { SplitPanelProps } from '~components/split-panel';
55
export const discreetSplitPanelI18nStrings: SplitPanelProps.I18nStrings = {
66
closeButtonAriaLabel: 'Close panel',
77
resizeHandleAriaLabel: 'Slider',
8+
resizeHandleTooltipText: 'Drag or select to resize',
89
};
910

1011
export const splitPaneli18nStrings: SplitPanelProps.I18nStrings = {

‎pages/app-layout/with-drawers-empty.page.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { AppLayout, ContentLayout, Header, SplitPanel } from '~components';
77
import ScreenshotArea from '../utils/screenshot-area';
88
import { Breadcrumbs, Containers } from './utils/content-blocks';
99
import appLayoutLabels from './utils/labels';
10+
import { splitPaneli18nStrings } from './utils/strings';
1011

1112
export default function WithDrawers() {
1213
return (
@@ -29,21 +30,7 @@ export default function WithDrawers() {
2930
</ContentLayout>
3031
}
3132
splitPanel={
32-
<SplitPanel
33-
header="Split panel header"
34-
i18nStrings={{
35-
preferencesTitle: 'Preferences',
36-
preferencesPositionLabel: 'Split panel position',
37-
preferencesPositionDescription: 'Choose the default split panel position for the service.',
38-
preferencesPositionSide: 'Side',
39-
preferencesPositionBottom: 'Bottom',
40-
preferencesConfirm: 'Confirm',
41-
preferencesCancel: 'Cancel',
42-
closeButtonAriaLabel: 'Close panel',
43-
openButtonAriaLabel: 'Open panel',
44-
resizeHandleAriaLabel: 'Slider',
45-
}}
46-
>
33+
<SplitPanel header="Split panel header" i18nStrings={splitPaneli18nStrings}>
4734
This is the Split Panel!
4835
</SplitPanel>
4936
}

‎pages/app-layout/with-drawers-scrollable.page.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828
ScrollableDrawerContent,
2929
} from './utils/content-blocks';
3030
import appLayoutLabels from './utils/labels';
31+
import { splitPaneli18nStrings } from './utils/strings';
3132

3233
type DemoContext = React.Context<
3334
AppContextType<{
@@ -220,21 +221,7 @@ export default function WithDrawersScrollable() {
220221
</ContentLayout>
221222
}
222223
splitPanel={
223-
<SplitPanel
224-
header="Split panel header"
225-
i18nStrings={{
226-
preferencesTitle: 'Preferences',
227-
preferencesPositionLabel: 'Split panel position',
228-
preferencesPositionDescription: 'Choose the default split panel position for the service.',
229-
preferencesPositionSide: 'Side',
230-
preferencesPositionBottom: 'Bottom',
231-
preferencesConfirm: 'Confirm',
232-
preferencesCancel: 'Cancel',
233-
closeButtonAriaLabel: 'Close panel',
234-
openButtonAriaLabel: 'Open panel',
235-
resizeHandleAriaLabel: 'Slider',
236-
}}
237-
>
224+
<SplitPanel header="Split panel header" i18nStrings={splitPaneli18nStrings}>
238225
<SpaceBetween size="l">
239226
<ScrollableDrawerContent />
240227
<ScrollableDrawerContent contentType="image" />

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

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import ScreenshotArea from '../utils/screenshot-area';
1010
import { Breadcrumbs, Containers } from './utils/content-blocks';
1111
import { drawerItems, drawerLabels } from './utils/drawers';
1212
import appLayoutLabels from './utils/labels';
13+
import { splitPaneli18nStrings } from './utils/strings';
1314

1415
import styles from './styles.scss';
1516

@@ -78,21 +79,7 @@ export default function WithDrawers() {
7879
}}
7980
disableContentPaddings={disableContentPaddings}
8081
splitPanel={
81-
<SplitPanel
82-
header="Split panel header"
83-
i18nStrings={{
84-
preferencesTitle: 'Preferences',
85-
preferencesPositionLabel: 'Split panel position',
86-
preferencesPositionDescription: 'Choose the default split panel position for the service.',
87-
preferencesPositionSide: 'Side',
88-
preferencesPositionBottom: 'Bottom',
89-
preferencesConfirm: 'Confirm',
90-
preferencesCancel: 'Cancel',
91-
closeButtonAriaLabel: 'Close panel',
92-
openButtonAriaLabel: 'Open panel',
93-
resizeHandleAriaLabel: 'Slider',
94-
}}
95-
>
82+
<SplitPanel header="Split panel header" i18nStrings={splitPaneli18nStrings}>
9683
<SpaceBetween size="l">
9784
<div className={styles.contentPlaceholder} />
9885
<div className={styles.contentPlaceholder} />

‎pages/app-layout/with-side-content.page.tsx‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import SplitPanel from '~components/split-panel';
99
import ScreenshotArea from '../utils/screenshot-area';
1010
import { Breadcrumbs, Containers } from './utils/content-blocks';
1111
import labels from './utils/labels';
12+
import { splitPaneli18nStrings } from './utils/strings';
1213

1314
export default function () {
1415
const [splitPanelOpen, setSplitPanelOpen] = useState(true);
@@ -63,21 +64,7 @@ export default function () {
6364
</>
6465
}
6566
splitPanel={
66-
<SplitPanel
67-
header="Split panel header"
68-
i18nStrings={{
69-
preferencesTitle: 'Preferences',
70-
preferencesPositionLabel: 'Split panel position',
71-
preferencesPositionDescription: 'Choose the default split panel position for the service.',
72-
preferencesPositionSide: 'Side',
73-
preferencesPositionBottom: 'Bottom',
74-
preferencesConfirm: 'Confirm',
75-
preferencesCancel: 'Cancel',
76-
closeButtonAriaLabel: 'Close panel',
77-
openButtonAriaLabel: 'Open panel',
78-
resizeHandleAriaLabel: 'Slider',
79-
}}
80-
>
67+
<SplitPanel header="Split panel header" i18nStrings={splitPaneli18nStrings}>
8168
This is some placeholder content for the split panel content area.
8269
</SplitPanel>
8370
}

0 commit comments

Comments
 (0)