Skip to content

fix: Change color for hotspot rendered inside flashbar #3567

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 12, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 94 additions & 0 deletions pages/annotation-context/with-flashbar.page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React from 'react';

import AnnotationContext from '~components/annotation-context';
import Button from '~components/button';
import Flashbar, { FlashbarProps } from '~components/flashbar';
import Hotspot from '~components/hotspot';
import Link from '~components/link';

import { annotationContextStrings } from '../onboarding/i18n';
import tutorials from '../onboarding/tutorials';
import ScreenshotArea from '../utils/screenshot-area';

const tutorial = tutorials(() => {})[0];
const noop = () => {};

const dismissibleCommonProps: Partial<FlashbarProps.MessageDefinition> = {
dismissible: true,
dismissLabel: 'Dismiss',
onDismiss: noop,
};

export default function AnnotationScroll() {
return (
<>
<h1>Annotation Context: with Hotspots inside flashbar</h1>
<ScreenshotArea>
<AnnotationContext
currentTutorial={tutorial}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just a thought, if this will be a screenshot test, maybe better not to launch any tutorials by default so that popover doesn't cover hotspots on other flashitems?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried this. When tutorial is not active, hotspots are hidden too.

My plan for the screenshot test – dismiss the currently open popover before taking a screenshot

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P.S. need a new approval, because I needed to resolve merge conflicts with another style-dictionary change: #3558

i18nStrings={annotationContextStrings}
onStartTutorial={noop}
onExitTutorial={noop}
>
<Flashbar
items={[
{
...dismissibleCommonProps,
type: 'info',
content: (
<>
info variant{' '}
<Link href="#" color="inverted">
click me
</Link>
</>
),
action: (
<>
<Button>Click me</Button>
<Hotspot hotspotId={tutorial.tasks[0].steps[0].hotspotId}></Hotspot>
</>
),
},
{
...dismissibleCommonProps,
type: 'success',
content: 'success variant',
action: (
<>
<Button>Click me</Button>
<Hotspot hotspotId={tutorial.tasks[0].steps[2].hotspotId}></Hotspot>
</>
),
},
{
...dismissibleCommonProps,
type: 'warning',
content: 'warning variant',
action: (
<>
<Button>Click me</Button>
<Hotspot hotspotId={tutorial.tasks[0].steps[3].hotspotId}></Hotspot>
</>
),
},
{
...dismissibleCommonProps,
type: 'error',
content: 'error variant',
action: (
<>
<Button>Click me</Button>
<Hotspot hotspotId={tutorial.tasks[0].steps[4].hotspotId}></Hotspot>
</>
),
},
]}
/>
</AnnotationContext>
</ScreenshotArea>
</>
);
}
16 changes: 16 additions & 0 deletions src/__integ__/__snapshots__/themes.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -467,6 +467,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
"color-text-toggle-button-icon-pressed": "#16191f",
"color-text-toggle-button-normal-pressed": "#16191f",
"color-text-top-navigation-title": "#16191f",
"color-text-tutorial-hotspot-default": "#0073bb",
"color-text-tutorial-hotspot-hover": "#0a4a74",
"color-transparent": "transparent",
"font-box-value-large-weight": "300",
"font-button-letter-spacing": "0.25px",
Expand Down Expand Up @@ -1142,6 +1144,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
"color-text-toggle-button-icon-pressed": "#fafafa",
"color-text-toggle-button-normal-pressed": "#fafafa",
"color-text-top-navigation-title": "#fafafa",
"color-text-tutorial-hotspot-default": "#44b9d6",
"color-text-tutorial-hotspot-hover": "#99cbe4",
"color-transparent": "transparent",
"font-box-value-large-weight": "300",
"font-button-letter-spacing": "0.25px",
Expand Down Expand Up @@ -1817,6 +1821,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
"color-text-toggle-button-icon-pressed": "#16191f",
"color-text-toggle-button-normal-pressed": "#16191f",
"color-text-top-navigation-title": "#16191f",
"color-text-tutorial-hotspot-default": "#0073bb",
"color-text-tutorial-hotspot-hover": "#0a4a74",
"color-transparent": "transparent",
"font-box-value-large-weight": "300",
"font-button-letter-spacing": "0.25px",
Expand Down Expand Up @@ -2492,6 +2498,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
"color-text-toggle-button-icon-pressed": "#16191f",
"color-text-toggle-button-normal-pressed": "#16191f",
"color-text-top-navigation-title": "#16191f",
"color-text-tutorial-hotspot-default": "#0073bb",
"color-text-tutorial-hotspot-hover": "#0a4a74",
"color-transparent": "transparent",
"font-box-value-large-weight": "300",
"font-button-letter-spacing": "0.25px",
Expand Down Expand Up @@ -3167,6 +3175,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
"color-text-toggle-button-icon-pressed": "#0f141a",
"color-text-toggle-button-normal-pressed": "#002b66",
"color-text-top-navigation-title": "#0f141a",
"color-text-tutorial-hotspot-default": "#006ce0",
"color-text-tutorial-hotspot-hover": "#002b66",
"color-transparent": "transparent",
"font-box-value-large-weight": "700",
"font-button-letter-spacing": "0.005em",
Expand Down Expand Up @@ -3842,6 +3852,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-toggle-button-icon-pressed": "#0f141a",
"color-text-toggle-button-normal-pressed": "#002b66",
"color-text-top-navigation-title": "#0f141a",
"color-text-tutorial-hotspot-default": "#006ce0",
"color-text-tutorial-hotspot-hover": "#002b66",
"color-transparent": "transparent",
"font-box-value-large-weight": "700",
"font-button-letter-spacing": "0.005em",
Expand Down Expand Up @@ -4517,6 +4529,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-toggle-button-icon-pressed": "#f9f9fa",
"color-text-toggle-button-normal-pressed": "#75cfff",
"color-text-top-navigation-title": "#f9f9fa",
"color-text-tutorial-hotspot-default": "#42b4ff",
"color-text-tutorial-hotspot-hover": "#75cfff",
"color-transparent": "transparent",
"font-box-value-large-weight": "700",
"font-button-letter-spacing": "0.005em",
Expand Down Expand Up @@ -5192,6 +5206,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
"color-text-toggle-button-icon-pressed": "#f9f9fa",
"color-text-toggle-button-normal-pressed": "#75cfff",
"color-text-top-navigation-title": "#f9f9fa",
"color-text-tutorial-hotspot-default": "#42b4ff",
"color-text-tutorial-hotspot-hover": "#75cfff",
"color-transparent": "transparent",
"font-box-value-large-weight": "700",
"font-button-letter-spacing": "0.005em",
Expand Down
6 changes: 3 additions & 3 deletions src/annotation-context/annotation/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -72,17 +72,17 @@

> .icon {
position: relative;
stroke: awsui.$color-text-link-default;
stroke: awsui.$color-text-tutorial-hotspot-default;
}

&:hover {
> .icon {
stroke: awsui.$color-text-link-hover;
stroke: awsui.$color-text-tutorial-hotspot-hover;
}
}
&:active {
> .icon {
stroke: awsui.$color-text-link-default;
stroke: awsui.$color-text-tutorial-hotspot-default;
}
}
}
2 changes: 2 additions & 0 deletions style-dictionary/classic/contexts/flashbar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ const tokens = {
colorTextBodyDefault: '{colorGrey100}',
colorTextHeadingSecondary: '{colorGrey100}',
colorBorderDividerDefault: '{colorGrey100}',
colorTextTutorialHotspotDefault: '{colorGrey300}',
colorTextTutorialHotspotHover: '{colorGrey100}',
};

const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
Expand Down
2 changes: 2 additions & 0 deletions style-dictionary/utils/token-names.ts
Original file line number Diff line number Diff line change
Expand Up @@ -487,6 +487,8 @@ export type ColorsTokenName =
| 'colorTextStatusSuccess'
| 'colorTextStatusWarning'
| 'colorTextTopNavigationTitle'
| 'colorTextTutorialHotspotDefault'
| 'colorTextTutorialHotspotHover'
| 'colorBoardPlaceholderActive'
| 'colorBoardPlaceholderHover'
| 'colorDragPlaceholderActive'
Expand Down
2 changes: 2 additions & 0 deletions style-dictionary/visual-refresh/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
colorTextStatusSuccess: { light: '{colorGreen600}', dark: '{colorGreen500}' },
colorTextStatusWarning: { light: '{colorYellow900}', dark: '{colorYellow500}' },
colorTextTopNavigationTitle: { light: '{colorGrey950}', dark: '{colorGrey100}' },
colorTextTutorialHotspotDefault: '{colorTextLinkDefault}',
colorTextTutorialHotspotHover: '{colorTextLinkHover}',
colorBoardPlaceholderActive: { light: '{colorGrey250}', dark: '{colorGrey600}' },
colorBoardPlaceholderHover: { light: '{colorBlue100}', dark: '{colorBlue600}' },
colorDragPlaceholderActive: { light: '{colorGrey250}', dark: '{colorGrey600}' },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ export const sharedTokens: StyleDictionary.ColorsDictionary = {
colorTextHeadingSecondary: '{colorTextNotificationYellow}',
// Content
colorTextBodyDefault: '{colorTextNotificationYellow}',

// Tutorial hotspot
colorTextTutorialHotspotDefault: '{colorGrey600}',
colorTextTutorialHotspotHover: '{colorGrey900}',
};

const tokens: StyleDictionary.ColorsDictionary = {
Expand Down
2 changes: 2 additions & 0 deletions style-dictionary/visual-refresh/contexts/flashbar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ export const baseTokens: StyleDictionary.ColorsDictionary = {
colorTextBodyDefault: '{colorGrey100}',
colorTextHeadingSecondary: '{colorGrey100}',
colorBorderDividerDefault: '{colorGrey100}',
colorTextTutorialHotspotDefault: '{colorGrey300}',
colorTextTutorialHotspotHover: '{colorGrey100}',
};

const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
Expand Down
Loading