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 c64a6ba

Browse files
pan-kotpan-kot
committed
fix: Flashbar context for key-value pairs and popover
1 parent f4ba263 commit c64a6ba

File tree

9 files changed

+138
-32
lines changed

9 files changed

+138
-32
lines changed

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

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
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="link">link button</Button>
52+
<Button variant="inline-link">inline link button</Button>
53+
<Link>link</Link>
54+
{showModal && (
55+
<Modal visible={true} onDismiss={() => setShowModal(false)} header="Modal">
56+
<DetailV2 />
57+
</Modal>
58+
)}
59+
</SpaceBetween>
60+
);
61+
}
62+
63+
function DetailV2() {
64+
return (
65+
<KeyValuePairs
66+
items={[
67+
{
68+
label: 'Distribution ID',
69+
value: 'E1WG1ZNPRXT0D4',
70+
info: (
71+
<Link variant="info" href="#">
72+
Info
73+
</Link>
74+
),
75+
},
76+
]}
77+
/>
78+
);
79+
}
80+
81+
function ProgressBarV1() {
82+
return (
83+
<ProgressBar
84+
variant="flash"
85+
status="in-progress"
86+
value={50}
87+
label="Label"
88+
description="Description"
89+
additionalInfo="Additional info"
90+
/>
91+
);
92+
}

‎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": "#21252c",
12540+
"light": "#21252c",
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": "#687078",
12827+
"light": "#687078",
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": "#131920",
12834+
"light": "#131920",
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": "#f3f3f7",
31165+
"light": "#f3f3f7",
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": "#1b232d",
33825+
"light": "#1b232d",
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": "#656871",
34112+
"light": "#656871",
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": "#131920",
34119+
"light": "#131920",
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/visual-refresh/contexts/flashbar-warning.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,21 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = {
3535
colorTextHeadingSecondary: '{colorTextNotificationYellow}',
3636
// Content
3737
colorTextBodyDefault: '{colorTextNotificationYellow}',
38+
colorTextBodySecondary: '{colorNeutral800}',
3839

3940
// Tutorial hotspot
4041
colorTextTutorialHotspotDefault: '{colorNeutral600}',
4142
colorTextTutorialHotspotHover: '{colorNeutral900}',
4243

4344
// Inline-code variant background in Box
4445
colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.1)',
46+
47+
// Key-value pairs
48+
colorTextLabel: '{colorTextNotificationYellow}',
49+
50+
// Info links
51+
colorTextLinkDefault: '{colorNeutral600}',
52+
colorTextLinkHover: '{colorNeutral900}',
4553
};
4654

4755
const tokens: StyleDictionary.ColorsDictionary = {

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,17 @@ export const baseTokens: StyleDictionary.ColorsDictionary = {
2020
colorTextExpandableSectionDefault: '{colorNeutral100}',
2121
colorTextExpandableSectionHover: '{colorWhite}',
2222
colorTextBodyDefault: '{colorNeutral100}',
23+
colorTextBodySecondary: '{colorNeutral200}',
2324
colorTextHeadingSecondary: '{colorNeutral100}',
2425
colorBorderDividerDefault: '{colorNeutral100}',
2526
colorTextTutorialHotspotDefault: '{colorNeutral300}',
2627
colorTextTutorialHotspotHover: '{colorNeutral100}',
2728
colorBackgroundInlineCode: 'rgba(0, 0, 0, 0.2)',
29+
// Key-value pairs
30+
colorTextLabel: '{colorNeutral100}',
31+
// Info links
32+
colorTextLinkDefault: '{colorNeutral100}',
33+
colorTextLinkHover: '{colorWhite}',
2834
};
2935

3036
const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(

0 commit comments

Comments
 (0)