Skip to content

[BpkButton]Rename BpkButtonV2 folder to BpkButton#4268

Open
Faye (Faye-Xiao) wants to merge 3 commits intomainfrom
renaming-bpkbutton-v2-folder
Open

[BpkButton]Rename BpkButtonV2 folder to BpkButton#4268
Faye (Faye-Xiao) wants to merge 3 commits intomainfrom
renaming-bpkbutton-v2-folder

Conversation

@Faye-Xiao
Copy link
Contributor

@Faye-Xiao Faye (Faye-Xiao) commented Mar 10, 2026

Rename the BpkButtonV2 folder and all its references to BpkButton, completing the cleanup of the legacy V2 naming convention.

Changes include:

  • src/BpkButtonV2/src/BpkButton/ folder rename
  • index.ts updated to import from new path and export BpkButton directly (removed legacy BpkButtonV2 named export and alias)
  • examples/bpk-component-layout/stack-examples.tsx updated to use BpkButton

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

Copilot AI review requested due to automatic review settings March 10, 2026 08:08
@Faye-Xiao Faye (Faye-Xiao) added the major Breaking change label Mar 10, 2026
@Faye-Xiao Faye (Faye-Xiao) added this to the V42 milestone Mar 10, 2026
@Faye-Xiao Faye (Faye-Xiao) changed the title Rename BpkButtonV2 folder to BpkButton [BpkButton]Rename BpkButtonV2 folder to BpkButton Mar 10, 2026
Copy link
Contributor

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

Renames the bpk-component-button implementation from BpkButtonV2 to BpkButton, updating imports/exports and example usage to align with the new folder and default export.

Changes:

  • Moved button implementation/types/styles into src/BpkButton/ and switched the component to a default export.
  • Updated package entrypoint (index.ts) to import from the new path and removed the BpkButtonV2 named export.
  • Updated tests and an example to import/use BpkButton instead of BpkButtonV2.

Reviewed changes

Copilot reviewed 7 out of 9 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/bpk-component-button/src/BpkButton/common-types.tsx Adds button public types/constants under the new BpkButton folder.
packages/bpk-component-button/src/BpkButton/accessibility-test.tsx Updates accessibility tests to import the default BpkButton.
packages/bpk-component-button/src/BpkButton/BpkButton.tsx Converts component export from named (BpkButtonV2) to default (BpkButton).
packages/bpk-component-button/src/BpkButton/BpkButton.module.scss Adds styles for the new BpkButton module.
packages/bpk-component-button/src/BpkButton/BpkButton.figma.tsx Updates Figma Code Connect file to import the default BpkButton.
packages/bpk-component-button/src/BpkButton/BpkButton-test.tsx Updates unit tests to import the default BpkButton.
packages/bpk-component-button/index.ts Switches entrypoint to src/BpkButton and removes the BpkButtonV2 named export.
packages/bpk-component-button/README.md Removes the migration note about BpkButtonV2BpkButton.
examples/bpk-component-layout/stack-examples.tsx Updates example usage to use BpkButton default import.
Comments suppressed due to low confidence (2)

packages/bpk-component-button/index.ts:41

  • This removes the BpkButtonV2 named export from the package public API. If this package is consumed externally, that’s a breaking change for any consumers importing { BpkButtonV2 }. Consider keeping export { default as BpkButtonV2 } as a deprecated alias for at least one major release (or ensure this ships with an intentional major version bump and migration notes).
import BpkButton from './src/BpkButton/BpkButton';

export {
  BUTTON_TYPES,
  SIZE_TYPES,
  type ButtonType,
  type SizeType,
  type Props,
} from './src/BpkButton/common-types';

export {
  buttonThemeAttributes,
  primaryThemeAttributes,
  primaryOnDarkThemeAttributes,
  primaryOnLightThemeAttributes,
  secondaryThemeAttributes,
  secondaryOnDarkThemeAttributes,
  featuredThemeAttributes,
  destructiveThemeAttributes,
} from './src/themeAttributes';

export default BpkButton;

packages/bpk-component-button/README.md:44

  • The README previously documented the BpkButtonV2BpkButton rename/migration guidance, but that section has been removed while the PR also drops the BpkButtonV2 named export. It would be helpful to keep a short migration note (or link to release notes) so consumers understand why { BpkButtonV2 } no longer exists and what to import instead.
### Button Link
The button which has `link` or `linkOnDark` type. Detail in [Button Link Type](./docs/button-link-type.md)


## Props

Check out the full list of props on Skyscanner's [design system documentation website](https://www.skyscanner.design/latest/components/button/web-eI5EFTLO#section-button-props-48).

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

@skyscanner-backpack-bot
Copy link

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

@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Mar 10, 2026

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 f0b2458

### Button Link
The button which has `link` or `linkOnDark` type. Detail in [Button Link Type](./docs/button-link-type.md)

## BpkButton (formerly BpkButtonV2)
Copy link
Contributor

Choose a reason for hiding this comment

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

the .specify/memory/constitution also should update

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Modified it in b0bcb81

*/

import { BpkButtonV2, BUTTON_TYPES } from '../../packages/bpk-component-button';
import BpkButton, { BUTTON_TYPES } from '../../packages/bpk-component-button';
Copy link
Contributor

Choose a reason for hiding this comment

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

there are many cases in README.md still using
import { BpkButton } from '@skyscanner/backpack-web/bpk-component-button'; should update to import BpkButton from '../../packages/bpk-component-button';, eg bottom-sheet

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good catch! Modified it in b0bcb81

Copy link
Contributor

@Supremeyh Ezreal Yang (Supremeyh) left a comment

Choose a reason for hiding this comment

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

lgtm

@skyscanner-backpack-bot
Copy link

Visit https://backpack.github.io/storybook-prs/4268 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

Labels

major Breaking change

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants