feat: Add data component attributes - Phase 8: Modals & Dialogs by gert-janvercauteren · Pull Request #4185 · Skyscanner/backpack

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-01-30T03:20:30Z

Summary

Adds data-backpack-ds-component attributes to Modals & Dialogs

Phase 8 of 11

Modal, dialog, and overlay components

Type of Change

New feature

Testing

Tests updated
Snapshots updated

Checklist

Changes follow the code style of this project
No TypeScript errors
No breaking changes

Phase 8/11 of data-backpack-ds-component migration This phase adds data-backpack-ds-component attributes to modals & dialogs components.

Copilot

Pull request overview

This PR adds data-backpack-ds-component attributes to Modal, Dialog, and overlay components as part of Phase 8 of the data component attribute initiative. The changes enable tracking and identification of these components in the rendered DOM.

Changes:

Added getDataComponentAttribute function imports across modal, dialog, drawer, popover, and bottom sheet components
Applied data component attributes to component elements using the spread operator
Updated test snapshots to reflect the new data attributes in rendered output

Reviewed changes

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

Show a summary per file

File	Description
packages/bpk-component-popover/src/BpkPopover.tsx	Added data attribute to Popover dialog element
packages/bpk-component-modal/src/BpkModalInner.tsx	Added data attribute to ModalInner heading element
packages/bpk-component-modal/src/BpkModal.tsx	Added data attribute to Modal component
packages/bpk-component-modal/src/BpkModalV2/BpkModal.tsx	Added data attribute to ModalV2 wrapper
packages/bpk-component-drawer/src/BpkDrawerContent.tsx	Added data attribute to DrawerContent section
packages/bpk-component-drawer/src/BpkDrawer.tsx	Added data attribute to Drawer Portal
packages/bpk-component-dialog/src/BpkDialogInner.tsx	Added data attribute to dialog section element
packages/bpk-component-dialog/src/BpkDialog.tsx	Added data attribute to Dialog component
packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx	Added data attribute to BottomSheet wrapper
packages/bpk-component-modal/src/snapshots/BpkModalInner-test.tsx.snap	Updated snapshots with new data attributes and corrected NavigationBar rendering
packages/bpk-component-modal/src/snapshots/BpkModal-test.tsx.snap	Updated snapshots with Scrim and ModalInner data attributes
packages/bpk-component-modal/src/BpkModalV2/snapshots/BpKModal-test.tsx.snap	Updated snapshots with ModalV2 and child component data attributes
packages/bpk-component-drawer/src/snapshots/BpkDrawerContent-test.tsx.snap	Updated snapshots with DrawerContent data attributes
packages/bpk-component-dialog/src/snapshots/BpkDialog-test.tsx.snap	Updated snapshots with Dialog and Scrim data attributes

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

Copilot · 2026-01-30T03:21:13Z

      <nav
        aria-labelledby="bpk-modal-heading-my-modal"
-        class="bpk-navigation-bar bpk-navigation-bar--default bpk-modal__navigation"
+        class="bpk-navigation-bar bpk-navigation-bar--default {...getDataComponentAttribute('NavigationBar')} bpk-modal__navigation"


The function call {...getDataComponentAttribute('NavigationBar')} is being rendered as a literal string in the class attribute instead of being evaluated. This indicates the attribute is being applied to the wrong element or in the wrong way in the source code, causing the spread operator and function call to appear in the rendered HTML output.

Copilot · 2026-01-30T03:21:14Z

 import BpkCloseButton from '../../../bpk-component-close-button';
 import BpkText, { TEXT_STYLES } from '../../../bpk-component-text';
-import { cssModules, withDefaultProps } from '../../../bpk-react-utils';
+import { cssModules, withDefaultProps , getDataComponentAttribute } from '../../../bpk-react-utils';


Inconsistent spacing around commas in the import statement. There should be no space before the comma after withDefaultProps.

Suggested change

import { cssModules, withDefaultProps , getDataComponentAttribute } from '../../../bpk-react-utils';

import { cssModules, withDefaultProps, getDataComponentAttribute } from '../../../bpk-react-utils';

Copilot · 2026-01-30T03:21:14Z

 import { useState, useEffect } from 'react';

-import { Portal, isDeviceIpad, isDeviceIphone } from '../../bpk-react-utils';
+import {  Portal, isDeviceIpad, isDeviceIphone , getDataComponentAttribute } from '../../bpk-react-utils';


Inconsistent spacing in import statement with extra spaces after the opening brace and before the comma after isDeviceIphone.

Suggested change

import { Portal, isDeviceIpad, isDeviceIphone , getDataComponentAttribute } from '../../bpk-react-utils';

import { Portal, isDeviceIpad, isDeviceIphone, getDataComponentAttribute } from '../../bpk-react-utils';

Copilot · 2026-01-30T03:21:14Z

 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkContentBubble } from '../../bpk-component-flare';
-import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
+import {  TransitionInitialMount, cssModules , getDataComponentAttribute } from '../../bpk-react-utils';


Inconsistent spacing in import statement with extra spaces after the opening brace and before the comma after cssModules.

Suggested change

import { TransitionInitialMount, cssModules , getDataComponentAttribute } from '../../bpk-react-utils';

import { TransitionInitialMount, cssModules, getDataComponentAttribute } from '../../bpk-react-utils';

Copilot · 2026-01-30T03:21:14Z

        aria-modal={ariaModal}
        className={classNames}
        ref={dialogRef}
+        {...getDataComponentAttribute('withScrim')}


The component name 'withScrim' doesn't match the actual component 'BpkDialogInner'. This appears to reference a higher-order component wrapper rather than the component itself, which may be confusing for component tracking purposes.

Suggested change

{...getDataComponentAttribute('withScrim')}

{...getDataComponentAttribute('BpkDialogInner')}

Copilot · 2026-01-30T03:21:15Z

 import type { ReactNode } from 'react';

-import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
+import { Portal, cssModules, isDeviceIphone , getDataComponentAttribute } from '../../bpk-react-utils';


Inconsistent spacing in import statement with an extra space before the comma after isDeviceIphone.

Suggested change

import { Portal, cssModules, isDeviceIphone , getDataComponentAttribute } from '../../bpk-react-utils';

import { Portal, cssModules, isDeviceIphone, getDataComponentAttribute } from '../../bpk-react-utils';

skyscanner-backpack-bot · 2026-01-30T03:27:12Z

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

…ttr-phase-8

skyscanner-backpack-bot · 2026-01-30T07:50:02Z

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

* main: [IRN-6174] [BpkCardList] - Child components all same height (#4143) feat: Add data component attributes - Phase 1: Foundation (#4178)

skyscanner-backpack-bot · 2026-01-30T10:02:03Z

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

skyscanner-backpack-bot · 2026-01-30T10:03:40Z

Browser support

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

Generated by 🚫 dangerJS against d977abb

Gert-Jan Vercauteren (gert-janvercauteren) · 2026-02-01T03:04:49Z

Copilot open a new pull request to apply changes based on the comments in this thread

Copilot · 2026-02-01T03:04:57Z

Gert-Jan Vercauteren (@gert-janvercauteren) I've opened a new pull request, #4195, to work on those changes. Once the pull request is ready, I'll request review from you.

…#4195) * Initial plan * fix: Address PR review comments for spacing and component naming Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com>

skyscanner-backpack-bot · 2026-02-01T04:02:33Z

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

Remove data-backpack-ds-component attributes from inner components (BpkDialogInner, BpkDrawerContent, BpkModalInner) to ensure only the public API components get the tracking attribute. Also fix import spacing and formatting issues. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Vincent Liu (xiaogliu)

LGTM

skyscanner-backpack-bot · 2026-02-03T02:16:38Z

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

feat: Add data component attributes - Modals & Dialogs

ac1c9a1

Phase 8/11 of data-backpack-ds-component migration This phase adds data-backpack-ds-component attributes to modals & dialogs components.

Copilot AI review requested due to automatic review settings January 30, 2026 03:20

Gert-Jan Vercauteren (gert-janvercauteren) added skip-changelog ai-week labels Jan 30, 2026

Copilot AI reviewed Jan 30, 2026

View reviewed changes

Merge remote-tracking branch 'origin/main' into feat/data-component-a…

0757310

…ttr-phase-8

Gert-Jan Vercauteren (gert-janvercauteren) added 2 commits January 30, 2026 17:54

Merge branch 'main' into feat/data-component-attr-phase-8

785fde9

* main: [IRN-6174] [BpkCardList] - Child components all same height (#4143) feat: Add data component attributes - Phase 1: Foundation (#4178)

chore: update snapshots

2598613

Gert-Jan Vercauteren (gert-janvercauteren) added the ds-usage-measure label Jan 30, 2026

Gert-Jan Vercauteren (gert-janvercauteren) enabled auto-merge (squash) January 30, 2026 10:14

Copilot AI mentioned this pull request Feb 1, 2026

fix: Address PR review comments - import spacing and component naming #4195

Merged

12 tasks

Gert-Jan Vercauteren (gert-janvercauteren) added the ai: claude label Feb 1, 2026

Vincent Liu (xiaogliu) approved these changes Feb 3, 2026

View reviewed changes

Gert-Jan Vercauteren (gert-janvercauteren) merged commit da39b08 into main Feb 3, 2026
12 checks passed

Gert-Jan Vercauteren (gert-janvercauteren) deleted the feat/data-component-attr-phase-8 branch February 3, 2026 02:20

	import { cssModules, withDefaultProps , getDataComponentAttribute } from '../../../bpk-react-utils';
	import { cssModules, withDefaultProps, getDataComponentAttribute } from '../../../bpk-react-utils';

	import { Portal, isDeviceIpad, isDeviceIphone , getDataComponentAttribute } from '../../bpk-react-utils';
	import { Portal, isDeviceIpad, isDeviceIphone, getDataComponentAttribute } from '../../bpk-react-utils';

	import { TransitionInitialMount, cssModules , getDataComponentAttribute } from '../../bpk-react-utils';
	import { TransitionInitialMount, cssModules, getDataComponentAttribute } from '../../bpk-react-utils';

	{...getDataComponentAttribute('withScrim')}
	{...getDataComponentAttribute('BpkDialogInner')}

	import { Portal, cssModules, isDeviceIphone , getDataComponentAttribute } from '../../bpk-react-utils';
	import { Portal, cssModules, isDeviceIphone, getDataComponentAttribute } from '../../bpk-react-utils';

Conversation

Gert-Jan Vercauteren (gert-janvercauteren) commented Jan 30, 2026

Summary

Phase 8 of 11

Related

Type of Change

Testing

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot Bot commented Jan 30, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 30, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Jan 30, 2026

Uh oh!

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

Uh oh!

Browser support

Uh oh!

Gert-Jan Vercauteren (gert-janvercauteren) commented Feb 1, 2026

Uh oh!

Copilot AI commented Feb 1, 2026

Uh oh!

skyscanner-backpack-bot Bot commented Feb 1, 2026

Uh oh!

Vincent Liu (xiaogliu) left a comment

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot Bot commented Feb 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

skyscanner-backpack-bot Bot commented Jan 30, 2026 •

edited

Loading