Skip to content

Commit 6f52618

Browse files
teodoranemesteodoranemes
committed
Merge main into light-dark-style-updates
2 parents 763810b + a943c56 commit 6f52618

File tree

58 files changed

+2108
-214
lines changed

Some content is hidden

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

58 files changed

+2108
-214
lines changed

‎build-tools/utils/custom-css-properties.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,5 +99,6 @@ const customCssPropertiesList = [
9999
'alertFocusRingBorderRadius',
100100
'alertFocusRingBorderWidth',
101101
'alertFocusRingBoxShadow',
102+
'alertIconColor',
102103
];
103104
module.exports = customCssPropertiesList;

‎pages/alert/style-custom-types.page.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,15 @@ interface CustomAlertProps {
6666
}
6767

6868
function CustomAlert({ children, type, dismissible, action }: CustomAlertProps) {
69+
<<<<<<< HEAD
70+
=======
71+
const mode = useCurrentMode(useRef(document.body));
72+
const background = backgrounds[mode][type];
73+
const borderColor = borderColors[mode][type];
74+
const borderWidth = borderWidths[type];
75+
const color = colors[mode];
76+
const iconColor = iconColors[mode][type];
77+
>>>>>>> origin/main
6978
return (
7079
<CloudscapeAlert
7180
dismissible={dismissible}
@@ -86,7 +95,11 @@ function CustomAlert({ children, type, dismissible, action }: CustomAlertProps)
8695
},
8796
},
8897
icon: {
98+
<<<<<<< HEAD
8999
color: getIconColor(type),
100+
=======
101+
color: iconColor,
102+
>>>>>>> origin/main
90103
},
91104
dismissButton: {
92105
color: getDismissButtonColor(type),
@@ -137,6 +150,7 @@ function getBorderWidth(type: string) {
137150
return borderWidths[type as keyof typeof borderWidths];
138151
}
139152

153+
<<<<<<< HEAD
140154
function getIconColor(type: string) {
141155
const iconColors = {
142156
info: `light-dark(${palette.orange80}, ${palette.red30})`,
@@ -149,6 +163,25 @@ function getIconColor(type: string) {
149163

150164
function getDismissButtonColor(type: string) {
151165
const dismissButtonColors = {
166+
=======
167+
const iconColors = {
168+
light: {
169+
info: palette.orange80,
170+
success: palette.red60,
171+
error: palette.blue80,
172+
warning: palette.neutral10,
173+
},
174+
dark: {
175+
info: palette.red30,
176+
success: palette.red60,
177+
error: palette.blue40,
178+
warning: palette.neutral90,
179+
},
180+
};
181+
182+
const dismissButtonColors = {
183+
light: {
184+
>>>>>>> origin/main
152185
info: {
153186
default: `light-dark(${palette.green60}, ${palette.neutral40})`,
154187
hover: `light-dark(${palette.neutral80}, ${palette.neutral20})`,

‎pages/container-queries.page.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@ function MeasureReporter(props: { id?: string; style?: React.CSSProperties; type
2121
[props.type]
2222
);
2323
if (value === null) {
24-
return <div ref={ref}>Loading...</div>;
24+
return (
25+
<div ref={ref} style={{ ...boxStyles, ...props.style }}>
26+
Loading...
27+
</div>
28+
);
2529
}
2630
return (
2731
<div id={props.id} ref={ref} style={{ ...boxStyles, ...props.style }}>
@@ -72,8 +76,15 @@ export default function ColumnLayoutPage() {
7276
type={measureType}
7377
/>
7478

79+
<h2>Reports content-box dimensions when border is present</h2>
80+
<MeasureReporter
81+
id="test-border"
82+
style={{ inlineSize: 300, blockSize: 50, border: '2px solid blue' }}
83+
type={measureType}
84+
/>
85+
7586
<h2>Adjusts as the element changes size (resize browser)</h2>
76-
<MeasureReporter id="test-updates" style={{ blockSize: 50 }} type={measureType} />
87+
<MeasureReporter id="test-updates" style={{ blockSize: 50, border: '2px solid blue' }} type={measureType} />
7788

7889
<h2>Returns correct breakpoints</h2>
7990
<BreakpointReporter id="test-breakpoints" style={{ blockSize: 50 }} />

‎pages/tree-view/basic.page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
44
import clsx from 'clsx';
55

66
import Box from '~components/box';
7+
import Button from '~components/button';
78
import Container from '~components/container';
89
import FormField from '~components/form-field';
910
import Grid from '~components/grid';
@@ -107,6 +108,8 @@ export default function BasicTreeView() {
107108
</Grid>
108109

109110
<div style={{ marginTop: '10px' }}>Expanded items: {expandedItems.map(id => `Item ${id}`).join(', ')}</div>
111+
112+
<Button>Element to focus for testing single tab stop</Button>
110113
</ScreenshotArea>
111114
);
112115
}

‎pages/tree-view/common.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,11 @@ export function Actions(
3535
{
3636
actionType,
3737
itemLabel,
38+
disabled,
3839
}: {
3940
actionType?: 'button-group' | 'button-dropdown' | 'inline-button-dropdown' | 'text' | 'custom-inline-button-group';
4041
itemLabel?: string;
42+
disabled?: boolean;
4143
} = {
4244
actionType: 'inline-button-dropdown',
4345
}
@@ -58,6 +60,7 @@ export function Actions(
5860
iconName: 'settings',
5961
type: 'icon-button',
6062
text: 'Settings',
63+
disabled,
6164
},
6265
{
6366
type: 'icon-toggle-button',
@@ -66,6 +69,7 @@ export function Actions(
6669
pressed: markedAsFavorite,
6770
iconName: 'star',
6871
pressedIconName: 'star-filled',
72+
disabled,
6973
},
7074
{
7175
id: 'menu',
@@ -109,12 +113,13 @@ export function Actions(
109113
if (actionType === 'custom-inline-button-group') {
110114
return (
111115
<SpaceBetween direction="horizontal" size="s">
112-
<Button variant="inline-icon" iconName="settings" ariaLabel={`Settings for ${itemLabel}`} />
113-
<Button variant="inline-icon" iconName="star" ariaLabel={`Favorite ${itemLabel}`} />
116+
<Button variant="inline-icon" iconName="settings" disabled={disabled} ariaLabel={`Settings for ${itemLabel}`} />
117+
<Button variant="inline-icon" iconName="star" disabled={disabled} ariaLabel={`Favorite ${itemLabel}`} />
114118
<ButtonDropdown
115119
items={buttonDropdownItems}
116120
ariaLabel={`Control instance for ${itemLabel}`}
117121
variant="inline-icon"
122+
disabled={disabled}
118123
/>
119124
</SpaceBetween>
120125
);
@@ -126,6 +131,7 @@ export function Actions(
126131
items={buttonDropdownItems}
127132
ariaLabel={`Control instance for ${itemLabel}`}
128133
variant="inline-icon"
134+
disabled={disabled}
129135
/>
130136
);
131137
}

‎pages/tree-view/dynamic-items.page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export default function DynamicItemsPage() {
5858
</SpaceBetween>
5959
</Box>
6060
) : undefined,
61+
announcementLabel: item.name,
6162
};
6263
}}
6364
getItemId={item => item.id}

‎pages/tree-view/items/keyboard-navigation-page-items.tsx‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import Button from '~components/button';
6+
import Link from '~components/link';
7+
import Popover from '~components/popover';
8+
import { TreeViewProps } from '~components/tree-view';
9+
10+
import { Actions } from '../common';
11+
12+
export interface Item extends TreeViewProps.TreeItem {
13+
id: string;
14+
children?: Item[];
15+
hasToggleButton?: boolean;
16+
}
17+
18+
export const stsnRegisteredItems: Item[] = [
19+
{
20+
id: 'cds1',
21+
content: (
22+
<>
23+
Item 1{' '}
24+
<Popover size="small" content="popover content" dismissButton={false}>
25+
popover
26+
</Popover>
27+
</>
28+
),
29+
actions: <Actions actionType="button-dropdown" itemLabel="Item 1" />,
30+
announcementLabel: 'Item 1 popover',
31+
},
32+
{
33+
id: 'cds2',
34+
content: (
35+
<>
36+
Item 2{' '}
37+
<Popover
38+
size="medium"
39+
content={
40+
<>
41+
Popover content and a <Button>button</Button>
42+
</>
43+
}
44+
header="Header"
45+
>
46+
popover with dismiss button
47+
</Popover>
48+
</>
49+
),
50+
actions: <Actions actionType="button-group" itemLabel="Item 2" />,
51+
announcementLabel: 'Item 2 popover with dismiss button',
52+
children: [
53+
{
54+
id: 'cds2.1',
55+
content: 'Item 2.1',
56+
actions: <Actions actionType="button-group" itemLabel="Item 2.1" />,
57+
},
58+
{
59+
id: 'cds2.2',
60+
content: 'Item 2.2',
61+
actions: <Actions actionType="button-group" itemLabel="Item 2.2" />,
62+
},
63+
],
64+
},
65+
{
66+
id: 'cds3',
67+
content: 'Item 3',
68+
hasToggleButton: true,
69+
actions: <Actions actionType="inline-button-dropdown" itemLabel="Item 3" />,
70+
announcementLabel: 'Item 3',
71+
children: [
72+
{
73+
id: 'cds3.1',
74+
content: 'Item 3.1',
75+
actions: <Actions actionType="inline-button-dropdown" itemLabel="Item 3.1" disabled={true} />,
76+
announcementLabel: 'Item 3.1',
77+
hasToggleButton: true,
78+
},
79+
{
80+
id: 'cds3.2',
81+
content: 'Item 3.2',
82+
actions: <Actions actionType="inline-button-dropdown" itemLabel="Item 3.2" />,
83+
announcementLabel: 'Item 3.2',
84+
hasToggleButton: true,
85+
children: [
86+
{
87+
id: 'cds3.2.1',
88+
content: 'Item 3.2.1',
89+
actions: <Actions actionType="button-group" itemLabel="Item 3.2.1" />,
90+
},
91+
{
92+
id: 'cds3.2.2',
93+
content: 'Item 3.2.2',
94+
actions: <Actions actionType="button-group" itemLabel="Item 3.2.2" />,
95+
},
96+
{
97+
id: 'cds3.2.3',
98+
content: 'Item 3.2.3',
99+
actions: <Actions actionType="button-group" itemLabel="Item 3.2.3" />,
100+
},
101+
],
102+
},
103+
],
104+
},
105+
{
106+
id: 'cds4',
107+
content: 'Item 4',
108+
actions: <Actions disabled={true} actionType="inline-button-dropdown" itemLabel="Item 4" />,
109+
secondaryContent: (
110+
<>
111+
Description with{' '}
112+
<Link href="#" variant="primary">
113+
link
114+
</Link>
115+
</>
116+
),
117+
children: [
118+
{
119+
id: 'cds4.1',
120+
content: 'Item 4.1',
121+
},
122+
],
123+
},
124+
{
125+
id: 'cds5',
126+
content: 'Item 5',
127+
actions: <Actions actionType="button-group" itemLabel="Item 5" />,
128+
children: [
129+
{
130+
id: 'cds5.1',
131+
content: 'Item 5.1',
132+
},
133+
],
134+
},
135+
{
136+
id: 'cds6',
137+
content: (
138+
<>
139+
Item 6{' '}
140+
<Popover
141+
size="medium"
142+
content={
143+
<>
144+
Popover content and a <Button>button</Button>
145+
</>
146+
}
147+
header="Header"
148+
>
149+
popover with dismiss button
150+
</Popover>
151+
</>
152+
),
153+
secondaryContent: (
154+
<>
155+
Description with{' '}
156+
<Link href="#" variant="primary">
157+
link
158+
</Link>
159+
</>
160+
),
161+
actions: <Actions actionType="button-group" itemLabel="Item 6" />,
162+
announcementLabel: 'Item 6 popover with dismiss button',
163+
},
164+
];
165+
166+
export const nonStsnRegisteredItems: Item[] = [
167+
{
168+
id: 'non-cds1',
169+
content: 'Item 1',
170+
actions: <button>Action</button>,
171+
children: [
172+
{
173+
id: 'non-cds1.1',
174+
content: 'Item 1.1',
175+
actions: <button>Action</button>,
176+
},
177+
{
178+
id: 'non-cds1.2',
179+
content: 'Item 1.2',
180+
actions: <button>Action</button>,
181+
},
182+
],
183+
},
184+
{
185+
id: 'non-cds2',
186+
content: (
187+
<>
188+
Item 2 with <a href="#">link</a>
189+
</>
190+
),
191+
actions: <button>Action</button>,
192+
announcementLabel: 'Item 2 with link',
193+
children: [
194+
{
195+
id: 'non-cds2.1',
196+
content: (
197+
<>
198+
Item 2.1 with <a href="#">link</a>
199+
</>
200+
),
201+
announcementLabel: 'Item 2.1 with link',
202+
},
203+
],
204+
},
205+
{
206+
id: 'non-cds3',
207+
content: 'Item 3',
208+
actions: (
209+
<div style={{ display: 'flex', flexDirection: 'row', gap: '5px' }}>
210+
<button>Action 1</button>
211+
<button>Action 2</button>
212+
</div>
213+
),
214+
},
215+
];

0 commit comments

Comments
 (0)