[BpkFloatingNotification] [ISO-1654] Add critical floating notification type by Copilot · Pull Request #4323 · Skyscanner/backpack

Copilot · 2026-03-25T14:08:50Z

Remove $bpk-critical-background-day: #e70866; local variable from BpkFloatingNotification.module.scss
Replace background-color: $bpk-critical-background-day with background-color: tokens.$bpk-status-danger-spot-day in the &--critical block (uses a proper semantic status token rather than a cross-component private token, to avoid unpredictable theming)
Add CriticalWithIcon Storybook example (critical notification with icon)
Add CriticalWithCta Storybook example (critical notification with CTA)
All 13 tests pass

Remember to include the following changes:

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: mariia-shyn <206853533+mariia-shyn@users.noreply.github.com> Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/f174a053-ae89-4460-92e0-5ba588025df6

skyscanner-backpack-bot · 2026-03-25T14:16:46Z

Visit https://backpack.github.io/storybook-prs/4323 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-25T14:18:46Z

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 02dc863

…er-error-day Co-authored-by: mariia-shyn <206853533+mariia-shyn@users.noreply.github.com> Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/8ecf1b22-dd87-4bbf-a8a5-6176ca2ba3d6

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-03-26T07:44:15Z

packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss

  }

+  &--critical {
+    background-color: tokens.$bpk-private-info-banner-error-day;


We should not use a component token from another component. When we do this it will make theming unpredictable.

Copilot please use $bpk-status-danger-spot-day for the background color.

Updated in b09f27b to use tokens.$bpk-status-danger-spot-day — a proper semantic status token rather than the cross-component private token.

Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/b87498a9-d2e1-4a93-bcb7-7fd55fb89daa

skyscanner-backpack-bot · 2026-03-26T13:19:54Z

Visit https://backpack.github.io/storybook-prs/4323 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-27T12:22:24Z

Visit https://backpack.github.io/storybook-prs/4323 to see this build running in a browser.

mariia-shyn · 2026-03-27T12:22:58Z

Copilot add 2 more examples: critical with icon and critical with cta

Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/c73947fb-4b06-4fa6-89ae-0057b375edc9

Copilot · 2026-03-27T12:26:13Z

Copilot add 2 more examples: critical with icon and critical with cta

Added in e3cf115 — CriticalWithIcon and CriticalWithCta story examples are now exported from stories.tsx.

skyscanner-backpack-bot · 2026-03-27T12:34:49Z

Visit https://backpack.github.io/storybook-prs/4323 to see this build running in a browser.

Copilot

Pull request overview

Adds a new “critical” variant to BpkFloatingNotification, enabling consumers to render a more urgent-looking floating notification using a semantic status token.

Changes:

Introduced NOTIFICATION_TYPES and a new type prop (default/critical) to apply a critical modifier class.
Added --critical styling using tokens.$bpk-status-danger-spot-day and updated snapshots/tests accordingly.
Added README usage plus new Storybook examples for critical (base, with icon, with CTA).

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx	Adds `NOTIFICATION_TYPES` + `type` prop and applies the critical modifier class.
packages/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss	Adds `&--critical` styling using semantic danger token.
packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx	Adds snapshot coverage for the critical type.
packages/bpk-component-floating-notification/src/snapshots/BpkFloatingNotification-test.tsx.snap	Stores new snapshot output for the critical type.
packages/bpk-component-floating-notification/index.ts	Re-exports `NOTIFICATION_TYPES` from the package entrypoint.
packages/bpk-component-floating-notification/README.md	Documents how to use the new critical type.
examples/bpk-component-floating-notification/examples.tsx	Adds critical examples (base, with icon, with CTA).
examples/bpk-component-floating-notification/stories.tsx	Exposes the new critical examples in Storybook.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx

GC Zhu (gc-skyscanner) · 2026-04-01T06:28:46Z

packages/bpk-component-floating-notification/src/BpkFloatingNotification-test.tsx


 import BpkIconHeart from '../../bpk-component-icon/sm/heart';

-import BpkFloatingNotification from './BpkFloatingNotification';


could you help add an accessibility test for rendering critical style in packages/bpk-component-floating-notification/src/accessibility-test.tsx

GC Zhu (gc-skyscanner) · 2026-04-01T06:44:08Z

packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx

considering a critical notification may need interrupt, should we use assertive aria-live for BpkAriaLive when NOTIFICATION_TYPES.critical ? As-is, screen-reader users receive the same deferred announcement for critical and default variants.

skyscanner-backpack-bot · 2026-04-01T08:09:05Z

Visit https://backpack.github.io/storybook-prs/4323 to see this build running in a browser.

skyscanner-backpack-bot · 2026-04-01T08:47:05Z

Visit https://backpack.github.io/storybook-prs/4323 to see this build running in a browser.

skyscanner-backpack-bot · 2026-04-01T09:05:24Z

Visit https://backpack.github.io/storybook-prs/4323 to see this build running in a browser.

GC Zhu (gc-skyscanner) · 2026-04-01T09:20:47Z

packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx

+        <BpkAriaLive
+          aria-hidden
+          politenessSetting={
+            type === NOTIFICATION_TYPES.critical ? 'assertive' : 'polite'


I supposed we could use POLITENESS_SETTINGS.assertive and POLITENESS_SETTINGS.polite here rather than hardcode

skyscanner-backpack-bot · 2026-04-01T09:41:42Z

Visit https://backpack.github.io/storybook-prs/4323 to see this build running in a browser.

GC Zhu (gc-skyscanner) · 2026-04-01T09:52:51Z

packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx

 import { CSSTransition } from 'react-transition-group';

 import BpkAriaLive from '../../bpk-component-aria-live';
+import { POLITENESS_SETTINGS } from '../../bpk-component-aria-live/src/BpkAriaLive';


Suggested change

import { POLITENESS_SETTINGS } from '../../bpk-component-aria-live/src/BpkAriaLive';

import BpkAriaLive, { POLITENESS_SETTINGS } from '../../bpk-component-aria-live';

I have this error when trying to import POLITENESS_SETTINGS.

should I use ARIA_LIVE_POLITENESS_SETTINGS?

Aha, sorry for the mistake, yes, you can use ARIA_LIVE_POLITENESS_SETTINGS

skyscanner-backpack-bot · 2026-04-01T10:28:37Z

Visit https://backpack.github.io/storybook-prs/4323 to see this build running in a browser.

feat: add critical type to bpk-component-floating-notification

6fa79d4

Co-authored-by: mariia-shyn <206853533+mariia-shyn@users.noreply.github.com> Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/f174a053-ae89-4460-92e0-5ba588025df6

Copilot AI assigned Copilot and mariia-shyn Mar 25, 2026

Copilot created this pull request from a session on behalf of mariia-shyn March 25, 2026 14:08 View session

mariia-shyn added the minor Non breaking change label Mar 25, 2026

mariia-shyn changed the title ~~[BpkFloatingNotification] Add critical type~~ [BpkFloatingNotification] [ISO-1654] Add critical floating notification type Mar 25, 2026

Copilot started work on behalf of mariia-shyn March 25, 2026 14:39 View session

fix: replace hardcoded critical bg with tokens.$bpk-private-info-bann…

2f2997d

…er-error-day Co-authored-by: mariia-shyn <206853533+mariia-shyn@users.noreply.github.com> Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/8ecf1b22-dd87-4bbf-a8a5-6176ca2ba3d6

Copilot AI requested a review from mariia-shyn March 25, 2026 14:44

Copilot finished work on behalf of mariia-shyn March 25, 2026 14:44

Gert-Jan Vercauteren (gert-janvercauteren) reviewed Mar 26, 2026

View reviewed changes

Copilot started work on behalf of Gert-Jan Vercauteren (gert-janvercauteren) March 26, 2026 13:08 View session

fix: use tokens.$bpk-status-danger-spot-day for critical background

b09f27b

Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/b87498a9-d2e1-4a93-bcb7-7fd55fb89daa

Copilot AI requested a review from Gert-Jan Vercauteren (gert-janvercauteren) March 26, 2026 13:12

Copilot finished work on behalf of Gert-Jan Vercauteren (gert-janvercauteren) March 26, 2026 13:12

Merge branch 'main' into copilot/add-critical-type-floating-notification

e14f28d

Copilot started work on behalf of mariia-shyn March 27, 2026 12:23 View session

feat: add CriticalWithIcon and CriticalWithCta storybook examples

e3cf115

Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/c73947fb-4b06-4fa6-89ae-0057b375edc9

Copilot finished work on behalf of mariia-shyn March 27, 2026 12:26

mariia-shyn marked this pull request as ready for review March 27, 2026 12:40

Copilot AI review requested due to automatic review settings March 27, 2026 12:40

Copilot started reviewing on behalf of mariia-shyn March 27, 2026 12:40 View session

Copilot AI reviewed Mar 27, 2026

View reviewed changes

packages/bpk-component-floating-notification/src/BpkFloatingNotification.tsx Show resolved Hide resolved

GC Zhu (gc-skyscanner) reviewed Apr 1, 2026

View reviewed changes

Merge branch 'main' into copilot/add-critical-type-floating-notification

eb69a37

PR comments

7186bc2

Updated snapshot

19f1aaa

GC Zhu (gc-skyscanner) reviewed Apr 1, 2026

View reviewed changes

Used variable

1562870

GC Zhu (gc-skyscanner) reviewed Apr 1, 2026

View reviewed changes

mariia-shyn added 2 commits April 1, 2026 12:19

Used correct variable

dc44d74

Merge branch 'main' into copilot/add-critical-type-floating-notification

02dc863

GC Zhu (gc-skyscanner) approved these changes Apr 1, 2026

View reviewed changes


		import BpkIconHeart from '../../bpk-component-icon/sm/heart';

		import BpkFloatingNotification from './BpkFloatingNotification';

	import { POLITENESS_SETTINGS } from '../../bpk-component-aria-live/src/BpkAriaLive';
	import BpkAriaLive, { POLITENESS_SETTINGS } from '../../bpk-component-aria-live';

Conversation

Copilot AI commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skyscanner-backpack-bot bot commented Mar 25, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Mar 26, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 27, 2026

Uh oh!

mariia-shyn commented Mar 27, 2026

Uh oh!

Copilot AI commented Mar 27, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Apr 1, 2026

Uh oh!

skyscanner-backpack-bot bot commented Apr 1, 2026

Uh oh!

skyscanner-backpack-bot bot commented Apr 1, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Apr 1, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Copilot AI commented Mar 25, 2026 •

edited

Loading

skyscanner-backpack-bot bot commented Mar 25, 2026 •

edited

Loading