WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

Commit 0949f36

Browse files
pan-kotpan-kot
committed
fix: Flashbar context for key-value pairs and popover
1 parent 5f1e362 commit 0949f36

File tree

10 files changed

+147
-51
lines changed

10 files changed

+147
-51
lines changed

‎pages/visual-contexts/flashbar.page.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
import React, { useState } from 'react';
5+
6+
import { Box, Button, Flashbar, KeyValuePairs, Link, Modal, Popover, ProgressBar, SpaceBetween } from '~components';
7+
8+
import { SimplePage } from '../app/templates';
9+
10+
export default function () {
11+
const components = [
12+
{ key: 'detail-v1', content: <DetailV1 /> },
13+
{ key: 'detail-v2', content: <DetailV2 /> },
14+
{
15+
key: 'popover',
16+
content: (
17+
<Popover renderWithPortal={true} content={<DetailV1 />} header="Popover header">
18+
Click me
19+
</Popover>
20+
),
21+
},
22+
{ key: 'progressbar', content: <ProgressBarV1 /> },
23+
];
24+
25+
return (
26+
<SimplePage title="Flashbar visual context" screenshotArea={{}}>
27+
<SpaceBetween size="m">
28+
{components.map(({ key, content }) => (
29+
<Flashbar
30+
key={key}
31+
items={[
32+
{ id: 'i', type: 'info', content: <div data-testid={`${key}-info`}>{content}</div> },
33+
{ id: 'w', type: 'warning', content: <div data-testid={`${key}-warning`}>{content}</div> },
34+
]}
35+
/>
36+
))}
37+
</SpaceBetween>
38+
</SimplePage>
39+
);
40+
}
41+
42+
function DetailV1() {
43+
const [showModal, setShowModal] = useState(false);
44+
return (
45+
<SpaceBetween size="s" direction="horizontal">
46+
<Box variant="span">Text</Box>
47+
<Box variant="span" color="text-body-secondary">
48+
secondary text
49+
</Box>
50+
<Button onClick={() => setShowModal(true)}>show modal</Button>
51+
<Button variant="inline-link">inline link button</Button>
52+
<Link>link</Link>
53+
{showModal && (
54+
<Modal visible={true} onDismiss={() => setShowModal(false)} header="Modal">
55+
<DetailV2 />
56+
</Modal>
57+
)}
58+
</SpaceBetween>
59+
);
60+
}
61+
62+
function DetailV2() {
63+
return (
64+
<KeyValuePairs
65+
items={[
66+
{
67+
label: 'Distribution ID',
68+
value: 'E1WG1ZNPRXT0D4',
69+
info: (
70+
<Link variant="info" href="#">
71+
Info
72+
</Link>
73+
),
74+
},
75+
]}
76+
/>
77+
);
78+
}
79+
80+
function ProgressBarV1() {
81+
return (
82+
<ProgressBar
83+
variant="flash"
84+
status="in-progress"
85+
value={50}
86+
label="Label"
87+
description="Description"
88+
additionalInfo="Additional info"
89+
/>
90+
);
91+
}

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

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

33
exports[`Design tokens artifacts Design tokens JSON for classic matches the snapshot: classic 1`] = `
44
{
@@ -12536,8 +12536,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
1253612536
"color-text-body-secondary": {
1253712537
"$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
1253812538
"$value": {
12539-
"dark": "#d5dbdb",
12540-
"light": "#545b64",
12539+
"dark": "#16191f",
12540+
"light": "#16191f",
1254112541
},
1254212542
},
1254312543
"color-text-breadcrumb-current": {
@@ -12690,8 +12690,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
1269012690
"color-text-group-label": {
1269112691
"$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
1269212692
"$value": {
12693-
"dark": "#95a5a6",
12694-
"light": "#545b64",
12693+
"dark": "#16191f",
12694+
"light": "#16191f",
1269512695
},
1269612696
},
1269712697
"color-text-heading-default": {
@@ -12781,8 +12781,8 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
1278112781
"color-text-label": {
1278212782
"$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
1278312783
"$value": {
12784-
"dark": "#95a5a6",
12785-
"light": "#545b64",
12784+
"dark": "#16191f",
12785+
"light": "#16191f",
1278612786
},
1278712787
},
1278812788
"color-text-label-gen-ai": {
@@ -12823,15 +12823,15 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
1282312823
"color-text-link-default": {
1282412824
"$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
1282512825
"$value": {
12826-
"dark": "#44b9d6",
12827-
"light": "#0073bb",
12826+
"dark": "#16191f",
12827+
"light": "#16191f",
1282812828
},
1282912829
},
1283012830
"color-text-link-hover": {
1283112831
"$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
1283212832
"$value": {
12833-
"dark": "#99cbe4",
12834-
"light": "#0a4a74",
12833+
"dark": "#16191f",
12834+
"light": "#16191f",
1283512835
},
1283612836
},
1283712837
"color-text-notification-default": {
@@ -31161,8 +31161,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3116131161
"color-text-body-secondary": {
3116231162
"$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
3116331163
"$value": {
31164-
"dark": "#c6c6cd",
31165-
"light": "#424650",
31164+
"dark": "#f9f9fa",
31165+
"light": "#f9f9fa",
3116631166
},
3116731167
},
3116831168
"color-text-breadcrumb-current": {
@@ -31406,8 +31406,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3140631406
"color-text-label": {
3140731407
"$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
3140831408
"$value": {
31409-
"dark": "#dedee3",
31410-
"light": "#0f141a",
31409+
"dark": "#f9f9fa",
31410+
"light": "#f9f9fa",
3141131411
},
3141231412
},
3141331413
"color-text-label-gen-ai": {
@@ -31448,15 +31448,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3144831448
"color-text-link-default": {
3144931449
"$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
3145031450
"$value": {
31451-
"dark": "#42b4ff",
31452-
"light": "#006ce0",
31451+
"dark": "#f9f9fa",
31452+
"light": "#f9f9fa",
3145331453
},
3145431454
},
3145531455
"color-text-link-hover": {
3145631456
"$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
3145731457
"$value": {
31458-
"dark": "#75cfff",
31459-
"light": "#002b66",
31458+
"dark": "#ffffff",
31459+
"light": "#ffffff",
3146031460
},
3146131461
},
3146231462
"color-text-notification-default": {
@@ -33821,8 +33821,8 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3382133821
"color-text-body-secondary": {
3382233822
"$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
3382333823
"$value": {
33824-
"dark": "#c6c6cd",
33825-
"light": "#424650",
33824+
"dark": "#0f141a",
33825+
"light": "#0f141a",
3382633826
},
3382733827
},
3382833828
"color-text-breadcrumb-current": {
@@ -34066,7 +34066,7 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3406634066
"color-text-label": {
3406734067
"$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
3406834068
"$value": {
34069-
"dark": "#dedee3",
34069+
"dark": "#0f141a",
3407034070
"light": "#0f141a",
3407134071
},
3407234072
},
@@ -34108,15 +34108,15 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
3410834108
"color-text-link-default": {
3410934109
"$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
3411034110
"$value": {
34111-
"dark": "#42b4ff",
34112-
"light": "#006ce0",
34111+
"dark": "#0f141a",
34112+
"light": "#0f141a",
3411334113
},
3411434114
},
3411534115
"color-text-link-hover": {
3411634116
"$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
3411734117
"$value": {
34118-
"dark": "#75cfff",
34119-
"light": "#002b66",
34118+
"dark": "#0f141a",
34119+
"light": "#0f141a",
3412034120
},
3412134121
},
3412234122
"color-text-notification-default": {

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

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

33
exports[`Components definition for alert matches the snapshot: alert 1`] = `
44
{

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

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

33
exports[`test-utils selectors 1`] = `
44
{

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

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

33
exports[`Generate test utils ElementWrapper dom ElementWrapper matches the snapshot 1`] = `
44
"

‎src/internal/hooks/use-portal-mode-classes/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useVisualContext } from '../../components/visual-context';
99
import { ALWAYS_VISUAL_REFRESH } from '../../environment';
1010
import { useVisualRefresh } from '../use-visual-mode';
1111

12-
export function usePortalModeClasses(ref: React.RefObject<HTMLElement>) {
12+
export function usePortalModeClasses(ref: React.RefObject<HTMLElement>, options?: { resetVisualContext?: boolean }) {
1313
const colorMode = useCurrentMode(ref);
1414
const densityMode = useDensityMode(ref);
1515
const context = useVisualContext(ref);
@@ -19,6 +19,6 @@ export function usePortalModeClasses(ref: React.RefObject<HTMLElement>) {
1919
'awsui-polaris-dark-mode awsui-dark-mode': colorMode === 'dark',
2020
'awsui-polaris-compact-mode awsui-compact-mode': densityMode === 'compact',
2121
'awsui-visual-refresh': visualRefreshWithClass,
22-
[`awsui-context-${context}`]: context,
22+
[`awsui-context-${context}`]: context && !options?.resetVisualContext,
2323
});
2424
}

‎src/popover/internal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ function InternalPopover(
130130
};
131131
}, []);
132132

133-
const popoverClasses = usePortalModeClasses(triggerRef);
133+
const popoverClasses = usePortalModeClasses(triggerRef, { resetVisualContext: true });
134134

135135
const triggerProps = {
136136
// https://github.com/microsoft/TypeScript/issues/36659

‎style-dictionary/classic/contexts/flashbar.ts‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,11 @@ import merge from 'lodash/merge.js';
44

55
import { expandColorDictionary } from '../../utils/index.js';
66
import { StyleDictionary } from '../../utils/interfaces.js';
7+
import { sharedTokens } from '../../visual-refresh/contexts/flashbar.js';
78
import { tokens as parentTokens } from '../colors.js';
89

9-
const tokens = {
10-
colorBorderItemFocused: '{colorNeutral100}',
11-
colorTextExpandableSectionDefault: '{colorNeutral100}',
12-
colorTextExpandableSectionHover: '{colorNeutral100}',
13-
colorTextBodyDefault: '{colorNeutral100}',
14-
colorTextHeadingSecondary: '{colorNeutral100}',
15-
colorBorderDividerDefault: '{colorNeutral100}',
16-
colorTextTutorialHotspotDefault: '{colorNeutral300}',
17-
colorTextTutorialHotspotHover: '{colorNeutral100}',
18-
};
19-
2010
const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
21-
merge({}, parentTokens, tokens)
11+
merge({}, parentTokens, sharedTokens)
2212
);
2313

2414
export { expandedTokens as tokens };

‎style-dictionary/visual-refresh/contexts/flashbar-warning.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import { StyleDictionary } from '../../utils/interfaces.js';
77
import { tokens as parentTokens } from '../colors.js';
88
import { alertButtonTokens } from './alert.js';
99

10-
// Token configuration that is shared between classic and visual refresh
11-
export const sharedTokens: StyleDictionary.ColorsDictionary = {
10+
const baseTokens: StyleDictionary.ColorsDictionary = {
1211
// Links in flash should be using color="inverted", which makes them underlined by default in flashbars
1312
// and changes their color to match the surrounding text.
1413
colorTextNotificationDefault: '{colorTextNotificationYellow}',
@@ -35,25 +34,34 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = {
3534
colorTextHeadingSecondary: '{colorTextNotificationYellow}',
3635
// Content
3736
colorTextBodyDefault: '{colorTextNotificationYellow}',
37+
colorTextBodySecondary: '{colorTextNotificationYellow}',
3838

3939
// Tutorial hotspot
4040
colorTextTutorialHotspotDefault: '{colorNeutral600}',
4141
colorTextTutorialHotspotHover: '{colorNeutral900}',
4242

4343
// Inline-code variant background in Box
4444
colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.1)',
45+
46+
// Key-value pairs
47+
colorTextLabel: '{colorTextNotificationYellow}',
48+
49+
// Info links
50+
colorTextLinkDefault: '{colorTextNotificationYellow}',
51+
colorTextLinkHover: '{colorTextNotificationYellow}',
4552
};
4653

47-
const tokens: StyleDictionary.ColorsDictionary = {
48-
...sharedTokens,
54+
// Token configuration that is shared between classic and visual refresh
55+
export const sharedTokens: StyleDictionary.ColorsDictionary = {
56+
...baseTokens,
4957

5058
// For buttons we use the same tokens as alert. But because the warning flash messages
5159
// look the same in light and dark mode, we only pick the light mode colors.
5260
...pickState(expandColorDictionary(alertButtonTokens), 'light'),
5361
};
5462

5563
const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
56-
merge({}, parentTokens, tokens)
64+
merge({}, parentTokens, sharedTokens)
5765
);
5866

5967
export { expandedTokens as tokens };

‎style-dictionary/visual-refresh/contexts/flashbar.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import { expandColorDictionary } from '../../utils/index.js';
66
import { StyleDictionary } from '../../utils/interfaces.js';
77
import { tokens as parentTokens } from '../colors.js';
88

9-
export const baseTokens: StyleDictionary.ColorsDictionary = {
9+
// Token configuration that is shared between classic and visual refresh
10+
export const sharedTokens: StyleDictionary.ColorsDictionary = {
1011
colorTextButtonNormalDefault: '{colorNeutral100}',
1112
colorBorderButtonNormalDefault: '{colorNeutral100}',
1213
colorBackgroundButtonNormalDefault: 'transparent',
@@ -20,15 +21,21 @@ export const baseTokens: StyleDictionary.ColorsDictionary = {
2021
colorTextExpandableSectionDefault: '{colorNeutral100}',
2122
colorTextExpandableSectionHover: '{colorWhite}',
2223
colorTextBodyDefault: '{colorNeutral100}',
24+
colorTextBodySecondary: '{colorNeutral100}',
2325
colorTextHeadingSecondary: '{colorNeutral100}',
2426
colorBorderDividerDefault: '{colorNeutral100}',
2527
colorTextTutorialHotspotDefault: '{colorNeutral300}',
2628
colorTextTutorialHotspotHover: '{colorNeutral100}',
2729
colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)',
30+
// Key-value pairs
31+
colorTextLabel: '{colorNeutral100}',
32+
// Info links
33+
colorTextLinkDefault: '{colorNeutral100}',
34+
colorTextLinkHover: '{colorWhite}',
2835
};
2936

3037
const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
31-
merge({}, parentTokens, baseTokens)
38+
merge({}, parentTokens, sharedTokens)
3239
);
3340

3441
export { expandedTokens as tokens };

0 commit comments

Comments
 (0)