Skip to content

Commit 22151c3

Browse files
pan-kotpan-kot
authored
Merge branch 'main' into chore-style-api-v2-table
2 parents d7d13d5 + d25043b commit 22151c3

46 files changed

Lines changed: 2316 additions & 869 deletions

Some content is hidden

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

‎pages/action-card/style-api-v2.page.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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 { ActionCard, ActionCardProps, SpaceBetween } from '~components';
6+
7+
import { SimplePage } from '../app/templates';
8+
9+
import styles from './style-api-v2.scss';
10+
11+
// No card has an icon: `icon` is consumer content without a slot, so it would show in its default colour here.
12+
function StyledActionCard(props: ActionCardProps) {
13+
return (
14+
<div className={styles.cell}>
15+
<ActionCard
16+
description="Launch an instance from a template"
17+
{...props}
18+
{...{
19+
styleClassNames: {
20+
root: props.disabled ? styles['root-disabled'] : styles.root,
21+
header: props.disabled ? styles['header-disabled'] : styles.header,
22+
},
23+
}}
24+
/>
25+
</div>
26+
);
27+
}
28+
29+
export default function () {
30+
return (
31+
<SimplePage title="Action card - Style API v2" screenshotArea={{ disableAnimations: true }}>
32+
<SpaceBetween size="m" direction="horizontal">
33+
<StyledActionCard header="Default">Content</StyledActionCard>
34+
<StyledActionCard header="Disabled" disabled={true}>
35+
Content
36+
</StyledActionCard>
37+
<StyledActionCard header="Link" href="#">
38+
Content
39+
</StyledActionCard>
40+
<StyledActionCard header="Embedded" variant="embedded">
41+
Content
42+
</StyledActionCard>
43+
</SpaceBetween>
44+
<SpaceBetween size="m" direction="horizontal">
45+
<StyledActionCard header="No content" />
46+
<StyledActionCard>Content</StyledActionCard>
47+
<StyledActionCard ariaLabel="Content only" description={undefined}>
48+
Content only
49+
</StyledActionCard>
50+
</SpaceBetween>
51+
</SimplePage>
52+
);
53+
}

‎pages/action-card/style-api-v2.scss‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/*
2+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3+
SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
@use '~components/styling/action-card';
7+
@use '../style-api/palette' as palette;
8+
9+
.cell {
10+
inline-size: 240px;
11+
}
12+
13+
.root {
14+
@include action-card.root(
15+
$background: palette.$surface,
16+
$border-color: palette.$border-accent,
17+
$border-width: 2px,
18+
$border-radius: 16px,
19+
$focus-ring-color: palette.$info,
20+
$focus-ring-width: 3px,
21+
$focus-ring-radius: 18px
22+
);
23+
24+
&:has(:hover) {
25+
@include action-card.root($background: palette.$subtle-hover, $border-color: palette.$accent-hover);
26+
}
27+
28+
&:has(:active) {
29+
@include action-card.root($background: palette.$subtle-active, $border-color: palette.$accent-active);
30+
}
31+
}
32+
33+
.root-disabled {
34+
@include action-card.root(
35+
$background: palette.$control-bg-disabled,
36+
$border-color: palette.$border-disabled,
37+
$border-width: 2px,
38+
$border-radius: 16px,
39+
$focus-ring-color: palette.$info,
40+
$focus-ring-width: 3px,
41+
$focus-ring-radius: 18px
42+
);
43+
}
44+
45+
.header {
46+
@include action-card.header($background: palette.$genai-surface, $border-color: palette.$genai, $border-width: 2px);
47+
}
48+
49+
// stylelint-disable-next-line selector-combinator-disallowed-list
50+
.root:has(:hover) .header {
51+
@include action-card.header($background: palette.$subtle-hover, $border-color: palette.$genai-hover);
52+
}
53+
54+
// stylelint-disable-next-line selector-combinator-disallowed-list
55+
.root:has(:active) .header {
56+
@include action-card.header($background: palette.$subtle-active, $border-color: palette.$genai-active);
57+
}
58+
59+
.header-disabled {
60+
@include action-card.header(
61+
$background: palette.$control-bg-disabled,
62+
$border-color: palette.$border-disabled,
63+
$border-width: 2px
64+
);
65+
}

‎pages/dropdown/list-with-sticky-item.page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import React, { useContext, useRef, useState } from 'react';
55
import Box from '~components/box';
66
import Button from '~components/button';
77
import Dropdown from '~components/dropdown';
8+
import PlainList from '~components/internal/components/listbox/parts/plain-list';
89
import { DropdownOption } from '~components/internal/components/option/interfaces';
9-
import PlainList from '~components/select/parts/plain-list';
1010
import VirtualList from '~components/select/parts/virtual-list';
1111
import SpaceBetween from '~components/space-between';
1212

@@ -89,13 +89,13 @@ export default function MultiselectPage() {
8989
}
9090
content={
9191
<ListComponent
92-
menuProps={{ statusType: 'finished', ref, open }}
92+
listProps={{ statusType: 'finished', ref, open }}
9393
getOptionProps={(option, index) => ({ option: { ...option }, key: index, index: index, open })}
9494
filteredOptions={options}
9595
filteringValue={''}
9696
firstOptionSticky={true}
9797
highlightType={{ type: 'mouse', moveFocus: false }}
98-
useInteractiveGroups={true}
98+
selectionType="multi"
9999
/>
100100
}
101101
/>

‎pages/item-card/style-api-v2.page.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
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 { ItemCard, ItemCardProps, SpaceBetween } from '~components';
6+
7+
import { SimplePage } from '../app/templates';
8+
9+
import styles from './style-api-v2.scss';
10+
11+
interface StyledItemCardProps extends ItemCardProps {
12+
rootStyled?: boolean;
13+
headerStyled?: boolean | 'background';
14+
footerStyled?: boolean | 'background';
15+
withContent?: boolean;
16+
}
17+
18+
function StyledItemCard({ rootStyled, headerStyled, footerStyled, withContent = true, ...props }: StyledItemCardProps) {
19+
return (
20+
<ItemCard
21+
header="Card header"
22+
description="Card description"
23+
footer="Card footer"
24+
{...props}
25+
{...{
26+
styleClassNames: {
27+
root: rootStyled ? styles.root : undefined,
28+
header:
29+
headerStyled === 'background' ? styles['header-background'] : headerStyled ? styles.header : undefined,
30+
footer:
31+
footerStyled === 'background' ? styles['footer-background'] : footerStyled ? styles.footer : undefined,
32+
},
33+
}}
34+
>
35+
{withContent ? 'Card content' : null}
36+
</ItemCard>
37+
);
38+
}
39+
40+
export default function () {
41+
return (
42+
<SimplePage title="Item card - Style API v2" screenshotArea={{}}>
43+
<SpaceBetween size="m" direction="horizontal">
44+
<div className={styles.cell}>
45+
<StyledItemCard rootStyled={true} headerStyled={true} footerStyled={true} variant="default" />
46+
</div>
47+
<div className={styles.cell}>
48+
<StyledItemCard rootStyled={true} headerStyled={true} footerStyled={true} variant="embedded" />
49+
</div>
50+
</SpaceBetween>
51+
<SpaceBetween size="m" direction="horizontal">
52+
<div className={styles.cell}>
53+
<StyledItemCard rootStyled={true} />
54+
</div>
55+
<div className={styles.cell}>
56+
<StyledItemCard headerStyled={true} />
57+
</div>
58+
<div className={styles.cell}>
59+
<StyledItemCard footerStyled={true} />
60+
</div>
61+
</SpaceBetween>
62+
<SpaceBetween size="m" direction="horizontal">
63+
<div className={styles.cell}>
64+
<StyledItemCard headerStyled="background" withContent={false} footer={undefined} />
65+
</div>
66+
<div className={styles.cell}>
67+
<StyledItemCard footerStyled="background" withContent={false} header={undefined} description={undefined} />
68+
</div>
69+
</SpaceBetween>
70+
</SimplePage>
71+
);
72+
}

‎pages/item-card/style-api-v2.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*
2+
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
3+
SPDX-License-Identifier: Apache-2.0
4+
*/
5+
6+
@use '~components/styling/item-card';
7+
@use '../style-api/palette' as palette;
8+
9+
.cell {
10+
inline-size: 260px;
11+
}
12+
13+
.root {
14+
@include item-card.root(
15+
$background: palette.$surface,
16+
$box-shadow: 0 4px 12px palette.$subtle-active,
17+
$border-color: palette.$border-accent,
18+
$border-width: 2px,
19+
$border-radius: 24px
20+
);
21+
}
22+
23+
.header {
24+
@include item-card.header($background: palette.$genai-surface, $border-color: palette.$genai, $border-width: 2px);
25+
}
26+
27+
.footer {
28+
@include item-card.footer($background: palette.$info-surface, $border-color: palette.$info, $border-width: 3px);
29+
}
30+
31+
.header-background {
32+
@include item-card.header($background: palette.$genai-surface);
33+
}
34+
35+
.footer-background {
36+
@include item-card.footer($background: palette.$info-surface);
37+
}

‎pages/select/item.permutations.page.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
// SPDX-License-Identifier: Apache-2.0
33
import React from 'react';
44

5+
import Item, { ItemProps } from '~components/internal/components/listbox/parts/item';
56
import { DropdownOption } from '~components/internal/components/option/interfaces';
6-
import Item from '~components/select/parts/item';
7-
import { ItemProps } from '~components/select/parts/item';
87

98
import createPermutations from '../utils/permutations';
109
import PermutationsView from '../utils/permutations-view';
@@ -100,7 +99,7 @@ const permutations = createPermutations<Omit<ItemProps, 'index'>>([
10099
highlighted: [false, true],
101100
selected: [false, true],
102101
highlightType: ['keyboard'],
103-
hasCheckbox: [true],
102+
selectionType: ['multi'],
104103
},
105104
{
106105
option: [options.complexOption],
@@ -126,21 +125,21 @@ const permutations = createPermutations<Omit<ItemProps, 'index'>>([
126125
},
127126
{
128127
option: [options.complexDisabledOptionWithCustomSvg],
129-
hasCheckbox: [true],
128+
selectionType: ['multi'],
130129
},
131130
{
132131
option: [options.simpleOption, options.complexOption],
133132
highlighted: [false, true],
134133
highlightType: ['keyboard'],
135134
selected: [true],
136-
hasCheckbox: [false],
135+
selectionType: ['single'],
137136
},
138137
{
139138
option: [options.complexOptionGroup],
140139
highlighted: [false],
141140
highlightType: ['keyboard'],
142141
selected: [true],
143-
hasCheckbox: [false, true],
142+
selectionType: ['single', 'multi'],
144143
},
145144
]);
146145

0 commit comments

Comments
 (0)