Skip to content

[BpkInfoBanner][ISO-1653] Add Critical info banner type#4317

Draft
Copilot wants to merge 9 commits intomainfrom
copilot/add-critical-infobanner-style
Draft

[BpkInfoBanner][ISO-1653] Add Critical info banner type#4317
Copilot wants to merge 9 commits intomainfrom
copilot/add-critical-infobanner-style

Conversation

Copy link
Contributor

Copilot AI commented Mar 24, 2026 •
edited
Loading

Adds a new CRITICAL type to BpkInfoBanner, including styling, examples, and stories.

Remember to include the following changes:

  • Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
  • README.md (If you have created a new component) — N/A (existing component)
  • Component README.md
  • Tests
  • Accessibility tests
    • The following checks were performed:
      • Ability to navigate using a keyboard only
      • Zoom functionality (Deque University explanation):
        • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
        • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
      • Ability to navigate using a screen reader only
  • Storybook examples created/updated
  • For breaking changes or deprecating components/properties, migration guides added to the description of the PR. — N/A (additive change only)

Summary of changes

  • Added CriticalExpandableWithAction example and story
  • Added CriticalDismissableBehaviourExample to examples.js and stories.js
  • In BpkInfoBanner.module.scss: overrode toggle-button fill and children-container color to white for --critical; used $bpk-status-danger-spot-day for the --critical background color
  • In BpkInfoBannerInner.tsx: passes alternate to BpkLink and onDark to BpkCloseButton when type is CRITICAL
  • In examples.js: replaced alert with the action utility (from bpk-storybook-utils) in CriticalExpandableWithActionExample, consistent with how other Storybook stories handle callbacks

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@mariia-shyn
Add Critical type to BpkInfoBanner component
7980bf3 
Co-authored-by: mariia-shyn <206853533+mariia-shyn@users.noreply.github.com>
Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/64bb988a-2672-4036-b8a2-7edde08ab8b0
@mariia-shyn
Copy link

mariia-shyn commented Mar 24, 2026

Copilot make sure all items in the PR description checklist are checked

@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Mar 24, 2026

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

@mariia-shyn
Update README with Critical type usage example
09a3b6a 
Co-authored-by: mariia-shyn <206853533+mariia-shyn@users.noreply.github.com>
Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/cb0d30ec-1ac6-4018-9ae9-2f78d6392e21
Copy link
Contributor Author

Copilot AI commented Mar 24, 2026

Copilot make sure all items in the PR description checklist are checked

Done in commit 09a3b6a. Updated the component README with a Critical usage example and marked all relevant checklist items — non-applicable items (new component README, breaking change migration guide) are noted as N/A.

@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Mar 24, 2026 •
edited
Loading

Warnings
⚠️

Package source files (e.g. packages/package-name/src/Component.js) were updated, but snapshots weren't. Have you checked that the tests still pass?

Browser support

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

Generated by 🚫 dangerJS against eb53715

Copilot AI requested a review from mariia-shyn March 24, 2026 15:40
@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Mar 24, 2026

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

@mariia-shyn mariia-shyn added the minor Non breaking change label Mar 25, 2026
@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Mar 25, 2026

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

@mariia-shyn mariia-shyn changed the title [BpkInfoBanner] Add Critical alert type with #E70866 background and white text/icon [BpkInfoBanner][ISO-1653] Add Critical alert type with #E70866 background and white text/icon Mar 25, 2026
@mariia-shyn mariia-shyn changed the title [BpkInfoBanner][ISO-1653] Add Critical alert type with #E70866 background and white text/icon [BpkInfoBanner][ISO-1653] Add Critical alert type Mar 25, 2026
@mariia-shyn mariia-shyn changed the title [BpkInfoBanner][ISO-1653] Add Critical alert type [BpkInfoBanner][ISO-1653] Add Critical info banner type Mar 25, 2026
Copilot AI mentioned this pull request Mar 25, 2026
Draft
15 tasks
@mariia-shyn
Replace $bpk-critical-background-day with tokens.$bpk-private-info-ba…
050e8c0 
…nner-error-day

Co-authored-by: mariia-shyn <206853533+mariia-shyn@users.noreply.github.com>
Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/70f2b967-6499-4ae4-a062-cbdd6bc48721
@mariia-shyn
Add CriticalExpandableWithAction example and story
27da05d 
Co-authored-by: mariia-shyn <206853533+mariia-shyn@users.noreply.github.com>
Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/37594918-75a6-4d57-bf1d-39b3b53bac98
@mariia-shyn
Add critical dismissible behaviour and white text/icons/actions for c…
a81b396 
…ritical type

Co-authored-by: mariia-shyn <206853533+mariia-shyn@users.noreply.github.com>
Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/014dac19-0112-48c7-99ea-09595cfc0b11
@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Mar 25, 2026

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

gert-janvercauteren
Gert-Jan Vercauteren (gert-janvercauteren) reviewed Mar 26, 2026
View reviewed changes
packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss Outdated
}

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

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

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

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

Done in commit 4b9d92d — changed the --critical background color to $bpk-status-danger-spot-day.

gert-janvercauteren
Gert-Jan Vercauteren (gert-janvercauteren) reviewed Mar 26, 2026
View reviewed changes
examples/bpk-component-info-banner/examples.js Outdated
<BpkInfoBannerExpandableState
message="Critical alert"
type={ALERT_TYPES.CRITICAL}
action={{title: "Sample Action", callback: () => alert('Hello from action')}} // eslint-disable-line no-alert
Copy link
Contributor

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

Choose a reason for hiding this comment

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

Copilot Adjust this alert to a console log, verify this is how other Storybook stories handle examples first.

Copy link
Contributor Author

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

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

Done in commit eb53715. The file already imports action from bpk-storybook-utils (the same pattern used by other stories), so replaced () => alert('Hello from action') with action('action clicked').

@gert-janvercauteren
Use $bpk-status-danger-spot-day for critical banner background color
4b9d92d 
Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com>
Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/c96500ff-487c-4429-b9f9-048a4f9f12a5
@gert-janvercauteren
Replace alert with action utility in CriticalExpandableWithActionExample
eb53715 
Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com>
Agent-Logs-Url: https://github.com/Skyscanner/backpack/sessions/db65e187-dd6d-497d-aecd-cf8276756f0d
Copy link
Contributor Author

Copilot AI commented Mar 26, 2026

Copilot make sure all items in the PR description checklist are checked

All checklist items are checked in the PR description.

@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Mar 26, 2026

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mariia-shyn mariia-shyn Awaiting requested review from mariia-shyn

@gert-janvercauteren Gert-Jan Vercauteren (gert-janvercauteren) Awaiting requested review from gert-janvercauteren

Copilot code review Copilot Awaiting requested review from Copilot Copilot will automatically review once the pull request is marked ready for review

At least 1 approving review is required to merge this pull request.

Assignees

Copilot code review Copilot

@mariia-shyn mariia-shyn

Labels

minor Non breaking change

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mariia-shyn @gert-janvercauteren