Skip to content

Commit 00df280

Browse files
mxschllmxschll
committed
refactor: rename children prop to content
1 parent 62efe83 commit 00df280

25 files changed

+464
-447
lines changed

‎pages/calendar/simple.page.tsx‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,37 +18,40 @@ export default function CalendarPage() {
1818
onDropdownClose={() => {}}
1919
onMouseDown={() => {}}
2020
trigger={null}
21-
>
22-
<Calendar
23-
value="2021-8-20"
24-
onChange={() => {}}
25-
locale="en-GB"
26-
ariaLabel="Certificate expiration date, calendar"
27-
startOfWeek={1}
28-
isDateEnabled={date => date.getDay() !== 6 && date.getDay() !== 0}
29-
dateDisabledReason={date => {
30-
if (date.getDay() === 6) {
31-
return 'Saturday';
32-
}
21+
content={
22+
<>
23+
<Calendar
24+
value="2021-8-20"
25+
onChange={() => {}}
26+
locale="en-GB"
27+
ariaLabel="Certificate expiration date, calendar"
28+
startOfWeek={1}
29+
isDateEnabled={date => date.getDay() !== 6 && date.getDay() !== 0}
30+
dateDisabledReason={date => {
31+
if (date.getDay() === 6) {
32+
return 'Saturday';
33+
}
3334

34-
if (date.getDay() === 0) {
35-
return 'Sunday';
36-
}
35+
if (date.getDay() === 0) {
36+
return 'Sunday';
37+
}
3738

38-
return '';
39-
}}
40-
i18nStrings={i18nStrings}
41-
/>
42-
<Calendar
43-
value=""
44-
onChange={() => {}}
45-
locale="en-GB"
46-
ariaLabel="Scheduled launch date, calendar"
47-
startOfWeek={1}
48-
isDateEnabled={date => date.getDay() !== 6 && date.getDay() !== 0}
49-
i18nStrings={i18nStrings}
50-
/>
51-
</Dropdown>
39+
return '';
40+
}}
41+
i18nStrings={i18nStrings}
42+
/>
43+
<Calendar
44+
value=""
45+
onChange={() => {}}
46+
locale="en-GB"
47+
ariaLabel="Scheduled launch date, calendar"
48+
startOfWeek={1}
49+
isDateEnabled={date => date.getDay() !== 6 && date.getDay() !== 0}
50+
i18nStrings={i18nStrings}
51+
/>
52+
</>
53+
}
54+
/>
5255
</article>
5356
);
5457
}

‎pages/date-range-picker/month-calendar-permutations.page.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -101,11 +101,12 @@ export default function DateRangePickerCalendarPage() {
101101
onDropdownClose={() => {}}
102102
onMouseDown={() => {}}
103103
trigger={null}
104-
>
105-
<Box padding="m">
106-
<Calendar {...permutation} />
107-
</Box>
108-
</Dropdown>
104+
content={
105+
<Box padding="m">
106+
<Calendar {...permutation} />
107+
</Box>
108+
}
109+
/>
109110
</div>
110111
);
111112
}}

‎pages/date-range-picker/year-calendar-permutations.page.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,12 @@ export default function DateRangePickerCalendarPage() {
8181
onDropdownClose={() => {}}
8282
onMouseDown={() => {}}
8383
trigger={null}
84-
>
85-
<Box padding="m">
86-
<Calendar {...permutation} granularity="month" />
87-
</Box>
88-
</Dropdown>
84+
content={
85+
<Box padding="m">
86+
<Calendar {...permutation} granularity="month" />
87+
</Box>
88+
}
89+
/>
8990
</div>
9091
);
9192
}}

‎pages/dropdown/common.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,8 @@ export function SampleDropdown({ id, children }: { id: string; children: React.R
1717
}
1818
open={isOpened}
1919
onDropdownClose={() => setOpened(false)}
20-
>
21-
{children}
22-
</Dropdown>
20+
content={children}
21+
/>
2322
);
2423
}
2524

‎pages/dropdown/fixed-container.page.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,8 @@ export default function () {
3333
}
3434
open={open}
3535
onDropdownClose={() => setOpen(false)}
36-
>
37-
<ListContent n={5} />
38-
</Dropdown>
36+
content={<ListContent n={5} />}
37+
/>
3938
</div>
4039
<div className={styles.placeholder}>An extra element to enable page scroll</div>
4140
</ScreenshotArea>

‎pages/dropdown/focus-trap.page.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -106,12 +106,13 @@ export default function DropdownScenario() {
106106
}
107107
expandToViewport={expandToViewport}
108108
loopFocus={loopFocus}
109-
>
110-
<div style={{ padding: 8 }}>
111-
<Button disabled={disableContent}>content-1</Button>
112-
<Button disabled={disableContent}>content-2</Button>
113-
</div>
114-
</Dropdown>
109+
content={
110+
<div style={{ padding: 8 }}>
111+
<Button disabled={disableContent}>content-1</Button>
112+
<Button disabled={disableContent}>content-2</Button>
113+
</div>
114+
}
115+
/>
115116
</div>
116117
</SpaceBetween>
117118
</Box>

‎pages/dropdown/interior-fitting.page.tsx‎

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -41,25 +41,25 @@ export default function DropdownScenario() {
4141
}
4242
open={openParent1}
4343
onDropdownClose={() => setOpenParent1(false)}
44-
>
45-
<ul className={styles.list}>
46-
<li id="childDropdown1">
47-
<Dropdown
48-
interior={true}
49-
stretchWidth={false}
50-
trigger={
51-
<div className="trigger" onClick={() => setOpenChild1(!openChild1)}>
52-
Expandable trigger
53-
</div>
54-
}
55-
open={openChild1}
56-
onDropdownClose={() => setOpenChild1(false)}
57-
>
58-
<ListContent n={5} withSpaces={true} repeat={8} />
59-
</Dropdown>
60-
</li>
61-
</ul>
62-
</Dropdown>
44+
content={
45+
<ul className={styles.list}>
46+
<li id="childDropdown1">
47+
<Dropdown
48+
interior={true}
49+
stretchWidth={false}
50+
trigger={
51+
<div className="trigger" onClick={() => setOpenChild1(!openChild1)}>
52+
Expandable trigger
53+
</div>
54+
}
55+
open={openChild1}
56+
onDropdownClose={() => setOpenChild1(false)}
57+
content={<ListContent n={5} withSpaces={true} repeat={8} />}
58+
/>
59+
</li>
60+
</ul>
61+
}
62+
/>
6363
</div>
6464
</div>
6565
<div className={clsx(styles.container, styles['container-wide'])}>
@@ -73,25 +73,25 @@ export default function DropdownScenario() {
7373
}
7474
open={openParent2}
7575
onDropdownClose={() => setOpenParent2(false)}
76-
>
77-
<ul className={styles.list} style={{ overflowY: 'auto', blockSize: '100px' }}>
78-
<li id="childDropdown2">
79-
<Dropdown
80-
interior={true}
81-
stretchWidth={false}
82-
trigger={
83-
<div className="trigger" onClick={() => setOpenChild2(!openChild2)}>
84-
Expandable trigger
85-
</div>
86-
}
87-
open={openChild2}
88-
onDropdownClose={() => setOpenChild2(false)}
89-
>
90-
<ListContent n={5} withSpaces={true} repeat={8} />
91-
</Dropdown>
92-
</li>
93-
</ul>
94-
</Dropdown>
76+
content={
77+
<ul className={styles.list} style={{ overflowY: 'auto', blockSize: '100px' }}>
78+
<li id="childDropdown2">
79+
<Dropdown
80+
interior={true}
81+
stretchWidth={false}
82+
trigger={
83+
<div className="trigger" onClick={() => setOpenChild2(!openChild2)}>
84+
Expandable trigger
85+
</div>
86+
}
87+
open={openChild2}
88+
onDropdownClose={() => setOpenChild2(false)}
89+
content={<ListContent n={5} withSpaces={true} repeat={8} />}
90+
/>
91+
</li>
92+
</ul>
93+
}
94+
/>
9595
</div>
9696
</div>
9797
<div className={clsx(styles.container, styles['container-wide'])}>
@@ -105,25 +105,25 @@ export default function DropdownScenario() {
105105
}
106106
open={openParent3}
107107
onDropdownClose={() => setOpenParent3(false)}
108-
>
109-
<ul className={styles.list}>
110-
<li id="childDropdown3">
111-
<Dropdown
112-
interior={true}
113-
stretchWidth={false}
114-
trigger={
115-
<div className="trigger" onClick={() => setOpenChild3(!openChild3)}>
116-
Expandable trigger
117-
</div>
118-
}
119-
open={openChild3}
120-
onDropdownClose={() => setOpenChild3(false)}
121-
>
122-
<ListContent n={5} withSpaces={true} repeat={8} />
123-
</Dropdown>
124-
</li>
125-
</ul>
126-
</Dropdown>
108+
content={
109+
<ul className={styles.list}>
110+
<li id="childDropdown3">
111+
<Dropdown
112+
interior={true}
113+
stretchWidth={false}
114+
trigger={
115+
<div className="trigger" onClick={() => setOpenChild3(!openChild3)}>
116+
Expandable trigger
117+
</div>
118+
}
119+
open={openChild3}
120+
onDropdownClose={() => setOpenChild3(false)}
121+
content={<ListContent n={5} withSpaces={true} repeat={8} />}
122+
/>
123+
</li>
124+
</ul>
125+
}
126+
/>
127127
</div>
128128
</div>
129129
<div className={clsx(styles.container, styles['container-wide'])}>
@@ -141,25 +141,25 @@ export default function DropdownScenario() {
141141
}
142142
open={openParent4}
143143
onDropdownClose={() => setOpenParent4(false)}
144-
>
145-
<ul className={styles.list}>
146-
<li id="childDropdown4">
147-
<Dropdown
148-
interior={true}
149-
stretchWidth={false}
150-
trigger={
151-
<div className="trigger" onClick={() => setOpenChild4(!openChild4)}>
152-
Expandable trigger
153-
</div>
154-
}
155-
open={openChild4}
156-
onDropdownClose={() => setOpenChild4(false)}
157-
>
158-
<ListContent n={5} withSpaces={true} repeat={8} />
159-
</Dropdown>
160-
</li>
161-
</ul>
162-
</Dropdown>
144+
content={
145+
<ul className={styles.list}>
146+
<li id="childDropdown4">
147+
<Dropdown
148+
interior={true}
149+
stretchWidth={false}
150+
trigger={
151+
<div className="trigger" onClick={() => setOpenChild4(!openChild4)}>
152+
Expandable trigger
153+
</div>
154+
}
155+
open={openChild4}
156+
onDropdownClose={() => setOpenChild4(false)}
157+
content={<ListContent n={5} withSpaces={true} repeat={8} />}
158+
/>
159+
</li>
160+
</ul>
161+
}
162+
/>
163163
</div>
164164
</div>
165165
</article>

‎pages/dropdown/interior-stretch-height.page.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,8 @@ export default function DropdownScenario() {
4242
}
4343
open={openParent1}
4444
onDropdownClose={() => setOpenParent1(false)}
45-
>
46-
<ListContent n={15} withSpaces={true} repeat={20} />
47-
</Dropdown>
45+
content={<ListContent n={15} withSpaces={true} repeat={20} />}
46+
/>
4847
</div>
4948
</div>
5049
<div
@@ -62,9 +61,8 @@ export default function DropdownScenario() {
6261
}
6362
open={openParent2}
6463
onDropdownClose={() => setOpenParent2(false)}
65-
>
66-
<ListContent n={15} withSpaces={true} repeat={20} />
67-
</Dropdown>
64+
content={<ListContent n={15} withSpaces={true} repeat={20} />}
65+
/>
6866
</div>
6967
</div>
7068
<div
@@ -82,11 +80,12 @@ export default function DropdownScenario() {
8280
}
8381
open={openParent3}
8482
onDropdownClose={() => setOpenParent3(false)}
85-
>
86-
<div style={{ inlineSize: '400px' }}>
87-
<ListContent n={15} withSpaces={true} repeat={20} />
88-
</div>
89-
</Dropdown>
83+
content={
84+
<div style={{ inlineSize: '400px' }}>
85+
<ListContent n={15} withSpaces={true} repeat={20} />
86+
</div>
87+
}
88+
/>
9089
</div>
9190
</div>
9291
</article>

0 commit comments

Comments
 (0)