fix(BpkInsetBannerSponsored): remove per-item icons from bottom sheet, make title optional#4498
Open
Daniel Villanueva (villanuevadani) wants to merge 3 commits into
Conversation
Per the DSA Legal Names spec, bottom-sheet content sections should render as plain text only — no ViewIcon or InfoIcon per item. This is a clean removal for all consumers; the CTA trigger (i) icon that opens the sheet is unchanged. Also makes bottomSheetContent[].title optional so title-less intro sections (e.g. the DSA intro body paragraph) can be rendered without a heading. Known consumers: - carhire-homepage InlinePlusAd: benefits directly from icon removal and optional title. - web-platform SponsoredPricingItem: currently shows ViewIcon (index 0); after this change it will show title + description only. Confirm with Sponsored Airlines team before merging. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Copilot started reviewing on behalf of
Daniel Villanueva (villanuevadani)
May 19, 2026 14:25
View session
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates BpkInsetBannerSponsored (V2) to comply with the DSA Legal Names spec by removing per-section icons from the bottom sheet content and allowing bottom-sheet sections to omit a title (to support an intro/body-only first section).
Changes:
- Removed the hardcoded per-item icons in the bottom sheet content and deleted the now-unused SCSS rule.
- Made
bottomSheetContent[].titleoptional and updated rendering to only show the title block when present. - Updated tests and added a Storybook example covering the “DSA shape” (title-less first item + titled sections).
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/common-types.ts |
Widens the bottom sheet item shape by making title optional. |
packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.tsx |
Removes per-item bottom sheet icons and conditionally renders section titles; updates React keys. |
packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.stories.tsx |
Adds a DSA-style story and updates existing copy to reflect icon removal. |
packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.module.scss |
Removes styling for the deleted bottom sheet icon wrapper. |
packages/backpack-web/src/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored-test.tsx |
Updates assertions for icon absence and adds coverage for title-less first section rendering. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {callToAction.bottomSheetContent.map((item, index) => ( | ||
| <div | ||
| key={item.title} | ||
| key={item.title ?? `section-${index}`} |
|
Visit https://backpack.github.io/storybook-prs/4498 to see this build running in a browser. |
…ng with DSA spec - heading4 → heading5 for section titles (matches InlineAd DSA bottom sheet) - title margin-bottom: md → sm (tighter gap to description) - section padding-bottom: xl → lg (matches inter-section rhythm) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Visit https://backpack.github.io/storybook-prs/4498 to see this build running in a browser. |
…A spec - Remove explicit top padding from bottom sheet (was base, default is none) - Reduce inter-section padding-bottom: lg → base Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Visit https://backpack.github.io/storybook-prs/4498 to see this build running in a browser. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ViewIcon(item 0) andInfoIcon(subsequent items) that were rendered inside each bottom-sheet section ofBpkInsetBannerSponsoredV2. The DSA Legal Names spec calls for icon-free section content across all surfaces.bottomSheetContent[].titleoptional (title?: string) so a title-less first section (e.g. the DSA intro body) is a valid shape.key={item.title}with a stablekey={item.title ?? \section-${index}`}` to avoid React key collisions when a title is absent.(i)icon that opens the bottom sheet is unchanged — this PR only affects the per-item icons inside the sheet.&--bottom-sheet-iconSCSS rule since the wrapper it styled is gone.Visual change
Each bottom-sheet item previously rendered a leading icon (
ViewIconfor the first,InfoIconfor the rest). After this PR, items render text only. This is a visible change for all consumers.Known consumers
carhire-homepagelibs/cars-results/features/src/Adverts/InlinePlusAd/InlinePlusAd.tsxweb-platformlibs/flights-booking-panel/.../SponsoredPricingItem.tsxViewIcon. After this PR it shows title + description only. Cross-team heads-up sent to Sponsored Airlines team.Checklist
npm test -- src/bpk-component-inset-banner)WithDsaStyleBottomSheetExampleV2Lightcommon-types.ts—titlewidened to optional&--bottom-sheet-iconrule removed