Skip to content

[CAPY-1594][BpkNavigationTabGroup/BpkBubble] Create and integrate 'new' bubble tooltip in navigation tab bar #3909

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 32 commits into from
Aug 18, 2025
Merged

[CAPY-1594][BpkNavigationTabGroup/BpkBubble] Create and integrate 'new' bubble tooltip in navigation tab bar #3909

merged 32 commits into from
Aug 18, 2025

Conversation

tranculent
Copy link
Contributor

@tranculent tranculent commented Aug 13, 2025 •
edited
Loading

Overview:

We want to launch a 'Packages' tab in the GC and Banana headers. Additionally, we want to include 'New' bubble so that it can be more easily seen by users.

This PR introduces the 'New' bubble tooltip.

Implementation details:

  • Created a new component BpkBubble that represents the bubble - it is split it into two parts in its jsx: BpkText and svg. Svg is the down-arrow and the text is translated string 'New'.
  • Instead of adding a new property to BpkNavigationTabGroup, I have added a new prop newBadgeString to each TabItem. This makes it more scalable as more than 1 tabs can have the 'new' handle and can be more customizable.
  • Since the tooltip is outside of the tab button, I needed to use absolute and relative positioning to get it like it is done in the design.
  • I have added stories/examples for the new BpkBubble component (though on their own they are a bit pointless as the component has been created to be paired up mainly with the BpkNavigationTabGroup. Though it can be easily customized to be paired with other components, e.g. Headings as well).
  • I have added a new story for BpkNavigationTabGroup to include the new bubble.

Screenshots:

Simple ('New' EN string)
image
Rtl ON
image
Long String ('Nouveau' DE string)
image

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)
  • 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. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@tranculent tranculent added the patch Patch production bug label Aug 13, 2025
@tranculent tranculent changed the title BpkBubble draft [CAPY-1594][BpkNavigationTabGroup/BpkBubble] Create and integrate 'new' bubble tooltip in navigation tab bar Aug 13, 2025
@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Aug 13, 2025 •
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 8512e8d

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

gert-janvercauteren
gert-janvercauteren reviewed Aug 14, 2025
View reviewed changes
gert-janvercauteren
gert-janvercauteren reviewed Aug 14, 2025
View reviewed changes
packages/bpk-component-tab-new-bubble/src/BpkBubble.tsx Outdated
<BpkText textStyle="label-3" tagName="span">
{label}
</BpkText>
<svg
Copy link
Contributor

Choose a reason for hiding this comment

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

Unsure if there's a better way to deal with inline SVG's in react, Could we take a page from how we do icons?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I extracted the svg in a separate Component (BpkArrow.tsx)/icon and import it in the BpkBadge jsx.

gert-janvercauteren
gert-janvercauteren reviewed Aug 14, 2025
View reviewed changes
packages/bpk-component-tab-new-bubble/src/BpkBubble.module.scss Outdated
display: inline-flex;
width: auto;
min-width: tokens.bpk-spacing-xxl();
max-width: tokens.bpk-spacing-xxl() * 2;
Copy link
Contributor

Choose a reason for hiding this comment

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

Unsure if we want to limit the size in the base implementation

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sorry, here do you mean decrease the max-width or move it to the parent?

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

gert-janvercauteren
gert-janvercauteren reviewed Aug 15, 2025
View reviewed changes
packages/bpk-component-tab-badge/src/BpkBadge.module.scss Outdated
@include typography.bpk-text--xs;
}

.bpk-badge-arrow {
Copy link
Contributor

Choose a reason for hiding this comment

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

thought: could placement be achieved with flexbox/grid? instead of using absolute positioning

Copy link
Contributor Author

Choose a reason for hiding this comment

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

thanks for the review @gert-janvercauteren.

I believe in this case, we can't use flexbox/grid reliable because:

  • flexbox: we can align the arrow horizontally but we can't position it below the main content without affecting layout height
  • grid: we can make a 2-row layout (row 1: text, row 2:arrow) but again: the arrow becomes part of the layout and can't poke out visually

We lose the ability to let the arrow 'escape' the bottom of the bubble without distorting its spacing or flow.
Plus I don't think we can make the arrow visually overlap outside the bubble unless we absolutely position it anyway

Copy link
Contributor

Choose a reason for hiding this comment

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

Makes perfect sense

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

gert-janvercauteren
gert-janvercauteren reviewed Aug 15, 2025
View reviewed changes
@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

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

Copilot
Copilot AI reviewed Aug 15, 2025
View reviewed changes
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR introduces a new BpkBubble component and integrates it with BpkNavigationTabGroup to display "New" badges on navigation tabs. The implementation allows individual tabs to display bubble tooltips by adding a badgeText property to tab items.

  • Creates a reusable BpkBubble component with a pill-shaped design and downward arrow
  • Adds badgeText property to navigation tab items for displaying bubble badges
  • Implements positioning logic for bubble placement relative to tabs with RTL support

Reviewed Changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
packages/bpk-component-bubble/src/BpkBubble.tsx New bubble component with text and arrow icon
packages/bpk-component-bubble/src/BpkBubble.module.scss Styling for bubble appearance and arrow positioning
packages/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.tsx Integration of bubble component with tab items
packages/bpk-component-navigation-tab-group/src/BpkNavigationTabGroup.module.scss Positioning styles for bubble within tab context
packages/bpk-component-bubble/src/BpkBubble-test.tsx Unit tests for bubble component
packages/bpk-component-bubble/src/accessibility-test.tsx Accessibility tests for bubble component
examples/bpk-component-navigation-tab-group/examples.tsx Example implementation with bubble badges
examples/bpk-component-bubble/examples.tsx Standalone bubble component examples

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@skyscanner-backpack-bot
Copy link

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

kerrie625
kerrie625 reviewed Aug 18, 2025
View reviewed changes
@skyscanner-backpack-bot
Copy link

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

kerrie625
kerrie625 approved these changes Aug 18, 2025
View reviewed changes
Copy link
Contributor

@kerrie625 kerrie625 left a comment

Choose a reason for hiding this comment

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

LGTM

@kerrie625 kerrie625 merged commit f1390bd into main Aug 18, 2025
10 checks passed
@kerrie625 kerrie625 deleted the CAPY-1594-new-bubble branch August 18, 2025 07:42
gert-janvercauteren added a commit that referenced this pull request Aug 26, 2025
@gert-janvercauteren
Merge branch 'main' into feature/mcp-code-connect
4d5fd0f 
* main:
  Bump actions/download-artifact in the artifacts-actions group (#3907)
  Bump actions/checkout from 4 to 5 (#3913)
  Fix closeText style of BpkModal in dark mode (#3919)
  Bump the babel group across 1 directory with 5 updates (#3917)
  Bump @babel/runtime in the npm_and_yarn group across 1 directory (#3884)
  Bump actions/cache from 4.2.3 to 4.2.4 (#3905)
  Bump webpack from 5.99.8 to 5.101.2 (#3916)
  QUAR-1046 Fix CTA Button Alignment, Logo Sizing, and Logo Vertical Alignment in Inset Banner (#3912)
  chore: removed duplicate aria-label (#3911)
  [CAPY-1594][BpkNavigationTabGroup/BpkBubble] Create and integrate 'new' bubble tooltip in navigation tab bar (#3909)
  [CLOV-381][BpkBreakpoint] update bpk breakpoint readme (#3910)
  [CYB-3904][BpkGraphicPromo] Render wrapper as semantic anchor tag to improve SEO (#3904)
  [CLOVER-532][BpkText] Add BpkText color prop with leverage css classname (#3900)
  fix: A11y and icon issue for inset banner sponsored (#3901)

# Conflicts:
#	packages/bpk-component-text/README.md
#	packages/bpk-component-text/src/BpkText-test.tsx
#	packages/bpk-component-text/src/BpkText.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gert-janvercauteren gert-janvercauteren gert-janvercauteren left review comments

Copilot code review Copilot Copilot left review comments

@lucascomp lucascomp lucascomp approved these changes

@kerrie625 kerrie625 kerrie625 approved these changes

Assignees
No one assigned
Labels
patch Patch production bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@tranculent @gert-janvercauteren @lucascomp @kerrie625