[CLOV-657][BpkLink] Refactor BpkLink with add as prop #4094

Ezreal Yang (Supremeyh) · 2025-12-22T07:43:19Z

Refactor BpkLink: Add Polymorphic as Prop Support, Add as prop to support BpkLink

Summary

This PR refactors BpkLink to be a fully polymorphic component, allowing it to render as different HTML elements (<a>, <button>, <span>, <div>) while maintaining consistent link styling and type safety.

Key Changes

🏗️ Architecture

Polymorphic as prop: Component can now render as different HTML elements
New common-types.ts: Centralized type definitions for better organization
Simplified exports: Single BpkLinkProps<E> type with default E='a' for backward compatibility
Mark BpkButtonLink as deprecated, maintained for backwards compatibility but will be removed in a future major version.

✨ Features

Element selection via string literals:
```
  <BpkLink as="button" onClick={handleClick}>Action</BpkLink>
  <BpkLink as="span">Non-interactive text</BpkLink>
```
- Type-safe props inference: Props are correctly typed based on the as value
- as="a" → requires href, supports blank, rel
- as="button" → supports onClick, disabled, type (defaults to "button")
Proper ref forwarding: Ref types match the rendered element

🔧 Internal Improvements

Extracted processAnchorProps and processButtonProps for cleaner logic separation
Simplified getClassNames using lookup table pattern
Replaced verbose if/else chains with declarative patterns

📦 Exports

Export	Description
`BpkLink` (default)	The polymorphic link component
`BpkLinkProps<E>`	Props type (defaults to anchor when `E` omitted)
`BpkButtonLink`	⚠️ Deprecated - use `<BpkLink as="button">`

Breaking Changes

None. This is backward compatible:

Default behavior (as="a") remains unchanged
All existing props and exports preserved
BpkLinkProps without generic parameter works exactly like before

Migration Guide

// Before: Using deprecated BpkButtonLink
import { BpkButtonLink } from '@skyscanner/backpack-web/bpk-component-link';
<BpkButtonLink onClick={handleClick}>Action</BpkButtonLink>

// After: Using polymorphic BpkLink
import BpkLink from '@skyscanner/backpack-web/bpk-component-link';
<BpkLink as="button" onClick={handleClick}>Action</BpkLink>## Important Notes

⚠️ Behavior Details

as="button" defaults type to "button" - Prevents accidental form submission. Override with type="submit" if needed.
as="a" requires href - TypeScript enforces this. Use href={null} for disabled states.
Security for external links - When blank={true}, automatically adds rel="noopener noreferrer".
Non-interactive elements (span/div) - Should only be used for styling purposes, not for interactive elements.

🔍 Type Safety

The polymorphic type system ensures compile-time validation:

✅ href is only valid when as="a"
✅ blank and rel are only valid when as="a"
✅ disabled, type, form are only valid when as="button"
✅ Ref type matches the rendered element

Snapshots

Before	After

Remember to include the following changes:

Copilot

Pull request overview

This PR adds a polymorphic as prop to BpkLink, enabling it to render as different HTML elements (a, button, span, div) while maintaining consistent link styling. This improves component flexibility and deprecates the legacy BpkButtonLink component in favor of <BpkLink as="button" />.

Key Changes:

Implemented polymorphic component pattern with type-safe element-specific props
Added comprehensive accessibility tests for all supported element types
Deprecated BpkButtonLink with migration guidance to use <BpkLink as="button" />

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/bpk-component-link/src/BpkLink.tsx	Refactored to support polymorphic `as` prop with conditional type inference for element-specific props
packages/bpk-component-link/src/BpkLink-test.tsx	Added comprehensive test coverage for all supported element types (anchor, button, span, div)
packages/bpk-component-link/src/accessibility-test.tsx	Added keyboard navigation and ARIA tests for each element type
packages/bpk-component-link/src/BpkButtonLink.tsx	Added deprecation notice for BpkButtonLink
packages/bpk-component-link/index.ts	Exported new polymorphic type definitions
packages/bpk-component-link/README.md	Updated documentation with polymorphic usage examples and migration guide
examples/bpk-component-link/stories.tsx	Added wrapper component to support Storybook controls for polymorphic props
examples/bpk-component-link/examples.tsx	Added PolymorphicOverviewExample showcasing all element variants
examples/bpk-component-link/examples.module.scss	Added styling for polymorphic examples
packages/bpk-component-link/src/snapshots/BpkLink-test.tsx.snap	Updated snapshots with new test descriptions

Comments suppressed due to low confidence (1)

packages/bpk-component-link/src/BpkLink.tsx:110

The CSS class name bpk-link-underlined-implicit--alternate appears to have inconsistent naming compared to the other underlined variants. The other variants use double hyphens before modifiers (e.g., bpk-link-underlined--implicit), but this one only has single hyphens between 'underlined' and 'implicit'. Consider renaming to bpk-link-underlined--implicit--alternate for consistency.

      getClassName('bpk-link-underlined-implicit--alternate'),

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

packages/bpk-component-link/src/BpkLink.tsx

examples/bpk-component-link/stories.tsx

skyscanner-backpack-bot · 2025-12-22T07:49:29Z

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

skyscanner-backpack-bot · 2025-12-22T07:51:18Z

	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?
⚠️	These new files implement overriding className which is restricted: packages/bpk-component-link/src/common-types.ts. Please update this component to remove the className prop.

Browser support

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

Generated by 🚫 dangerJS against b4cad1a

skyscanner-backpack-bot · 2025-12-22T08:04:49Z

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

Gert-Jan Vercauteren (gert-janvercauteren)

Hi Ezreal Yang (@Supremeyh)!
Awesome work, finishing touches would be to remove any mention of BpkButtonLink in this PR.

I'm not saying to remove it altogether, but just not mention it in new stories/demo/readme

examples/bpk-component-link/examples.module.scss

Gert-Jan Vercauteren (gert-janvercauteren) · 2025-12-23T05:40:13Z

packages/bpk-component-link/README.md

+<BpkLink as="button" href="/">Action</BpkLink>
+```
+
+### Legacy BpkButtonLink (deprecated)


nit: Can we remove any mention of BpkButtonLink?

remove BpkButtonLink in README and storybook

skyscanner-backpack-bot · 2025-12-23T07:04:03Z

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

skyscanner-backpack-bot · 2025-12-23T07:21:18Z

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

skyscanner-backpack-bot · 2025-12-23T07:33:17Z

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

skyscanner-backpack-bot · 2025-12-23T08:20:03Z

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

skyscanner-backpack-bot · 2025-12-23T08:35:59Z

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

skyscanner-backpack-bot · 2025-12-23T09:32:33Z

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

skyscanner-backpack-bot · 2025-12-23T10:23:46Z

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

skyscanner-backpack-bot · 2025-12-23T10:46:29Z

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

skyscanner-backpack-bot · 2025-12-23T10:57:23Z

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

skyscanner-backpack-bot · 2025-12-24T03:13:10Z

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

skyscanner-backpack-bot · 2025-12-24T03:23:22Z

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

skyscanner-backpack-bot · 2025-12-24T04:05:51Z

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

skyscanner-backpack-bot · 2025-12-24T06:22:11Z

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

Flora Cheng (floracheng292)

Amazing work!

* [CLOV-657] Add as prop to support BpkLink * update ref type * use BpkPanel in storybook examples * remove BpkButtonLink in README and storybook * simplify with react type * introduce const LINK_AS * update LINK_AS cases * update as Element * update snapshots * ArgTypes specify API * add href null * common-types * update import and export path * remove LINK_AS * remove BpkLinkPolymorphicProps * update processAnchorProps and getClassNames * remove LinksAs type

@ts-expect-error

* fix issue with carousel alignment * Fix issue with carousel alignment on mobile * optimize mobile left space and the code itself * Revert "optimize mobile left space and the code itself" This reverts commit eaf2cbe. * Revert "Fix issue with carousel alignment on mobile" This reverts commit 83a293f. * [CLOV-951][BpkButton] Mark BpkButton v1 as deprecated (#4039) * [CLOV-964][BpkButton] Export legacy props and types (#4044) * [CLOV-964] Export legacy props and types * lint * [CLOV-30][BpkCheckbox] TS migration for BpkCheckbox (#4040) * BpkCheckbox is migrated to Typescirpt now and export type BpkCheckboxProps * [CLOV-950] [BpkButton] Migrate BpkButton to BpkButtonV2 (#4048) * [CLOV-950] [BpkButton] Migrate BpkButton to BpkButtonV2 * update type order * update props and other path * Bump glob (#4046) Bumps [glob](https://github.com/isaacs/node-glob) to 10.5.0 and updates ancestor dependency . These dependencies need to be updated together. Updates `glob` from 10.4.5 to 10.5.0 - [Changelog](https://github.com/isaacs/node-glob/blob/main/changelog.md) - [Commits](isaacs/node-glob@v10.4.5...v10.5.0) Updates `glob` from 11.0.3 to 11.1.0 - [Changelog](https://github.com/isaacs/node-glob/blob/main/changelog.md) - [Commits](isaacs/node-glob@v10.4.5...v10.5.0) --- updated-dependencies: - dependency-name: glob dependency-version: 10.5.0 dependency-type: indirect - dependency-name: glob dependency-version: 11.1.0 dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> * Bump core-js from 3.45.1 to 3.46.0 (#4028) Bumps [core-js](https://github.com/zloirock/core-js/tree/HEAD/packages/core-js) from 3.45.1 to 3.46.0. - [Release notes](https://github.com/zloirock/core-js/releases) - [Changelog](https://github.com/zloirock/core-js/blob/master/CHANGELOG.md) - [Commits](https://github.com/zloirock/core-js/commits/v3.46.0/packages/core-js) --- updated-dependencies: - dependency-name: core-js dependency-version: 3.46.0 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> * [CLOV-19][BpkFieldset] BpkFieldset TS Migration (#4045) * covert BpkFielset to TS * add check and label type check * Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * change any type * fix typecheck error --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * [GOOSE-559][BpkSwapButton] Override padding alignment set by Safari User Agent (#4052) * Override padding alignment set by Safari User Agent * simplify * fix: allow word wrap anywhere when the autosuggest value is joined by _ or long words in general (#4054) * [CLOV-349][BpkAutosuggest]Fix keyboard up and down blur issue (#4043) * fix up and down blur issue * fix up down issue * fix fistHightLight * suppress the runtime error * modify comment * prevent autosuggest flickering on input change * optimise highlight Index function * fix typecheck error * fix test onSuggestionSelected * Bump js-yaml from 3.14.1 to 3.14.2 (#4047) Bumps [js-yaml](https://github.com/nodeca/js-yaml) from 3.14.1 to 3.14.2. - [Changelog](https://github.com/nodeca/js-yaml/blob/master/CHANGELOG.md) - [Commits](nodeca/js-yaml@3.14.1...3.14.2) --- updated-dependencies: - dependency-name: js-yaml dependency-version: 3.14.2 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> * Bump the babel group across 1 directory with 2 updates (#4027) Bumps the babel group with 2 updates in the / directory: [@babel/preset-react](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-react) and [@babel/preset-typescript](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-typescript). Updates `@babel/preset-react` from 7.27.1 to 7.28.5 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.28.5/packages/babel-preset-react) Updates `@babel/preset-typescript` from 7.27.0 to 7.28.5 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.28.5/packages/babel-preset-typescript) --- updated-dependencies: - dependency-name: "@babel/preset-react" dependency-version: 7.28.5 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: babel - dependency-name: "@babel/preset-typescript" dependency-version: 7.28.5 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: babel ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> * Bump @skyscanner/eslint-config-skyscanner from 22.5.1 to 22.6.0 (#4026) Bumps [@skyscanner/eslint-config-skyscanner](https://github.com/Skyscanner/eslint-config-skyscanner) from 22.5.1 to 22.6.0. - [Release notes](https://github.com/Skyscanner/eslint-config-skyscanner/releases) - [Changelog](https://github.com/Skyscanner/eslint-config-skyscanner/blob/main/CHANGELOG.md) - [Commits](Skyscanner/eslint-config-skyscanner@22.5.1...22.6.0) --- updated-dependencies: - dependency-name: "@skyscanner/eslint-config-skyscanner" dependency-version: 22.6.0 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> * Bump actions/checkout from 5 to 6 (#4051) Bumps [actions/checkout](https://github.com/actions/checkout) from 5 to 6. - [Release notes](https://github.com/actions/checkout/releases) - [Changelog](https://github.com/actions/checkout/blob/main/CHANGELOG.md) - [Commits](actions/checkout@v5...v6) --- updated-dependencies: - dependency-name: actions/checkout dependency-version: '6' dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> * Bump the artifacts-actions group with 2 updates (#4025) Bumps the artifacts-actions group with 2 updates: [actions/upload-artifact](https://github.com/actions/upload-artifact) and [actions/download-artifact](https://github.com/actions/download-artifact). Updates `actions/upload-artifact` from 4.6.2 to 5.0.0 - [Release notes](https://github.com/actions/upload-artifact/releases) - [Commits](actions/upload-artifact@v4.6.2...v5.0.0) Updates `actions/download-artifact` from 5.0.0 to 6.0.0 - [Release notes](https://github.com/actions/download-artifact/releases) - [Commits](actions/download-artifact@v5.0.0...v6.0.0) --- updated-dependencies: - dependency-name: actions/upload-artifact dependency-version: 5.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: artifacts-actions - dependency-name: actions/download-artifact dependency-version: 6.0.0 dependency-type: direct:production update-type: version-update:semver-major dependency-group: artifacts-actions ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> * Bump actions/setup-node from 5 to 6 (#4016) Bumps [actions/setup-node](https://github.com/actions/setup-node) from 5 to 6. - [Release notes](https://github.com/actions/setup-node/releases) - [Commits](actions/setup-node@v5...v6) --- updated-dependencies: - dependency-name: actions/setup-node dependency-version: '6' dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> * Bump webpack from 5.101.2 to 5.103.0 (#4059) Bumps [webpack](https://github.com/webpack/webpack) from 5.101.2 to 5.103.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](webpack/webpack@v5.101.2...v5.103.0) --- updated-dependencies: - dependency-name: webpack dependency-version: 5.103.0 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> * Bump @skyscanner/stylelint-config-skyscanner from 13.1.0 to 14.2.0 (#4060) * Bump @skyscanner/stylelint-config-skyscanner from 13.1.0 to 14.2.0 Bumps [@skyscanner/stylelint-config-skyscanner](https://github.com/Skyscanner/stylelint-config-skyscanner) from 13.1.0 to 14.2.0. - [Release notes](https://github.com/Skyscanner/stylelint-config-skyscanner/releases) - [Changelog](https://github.com/Skyscanner/stylelint-config-skyscanner/blob/main/CHANGELOG.md) - [Commits](Skyscanner/stylelint-config-skyscanner@13.1.0...14.2.0) --- updated-dependencies: - dependency-name: "@skyscanner/stylelint-config-skyscanner" dependency-version: 14.2.0 dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * fix check error --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Kerrie Wu <kerrie.wu@skyscanner.net> * Bump the storybook group across 1 directory with 5 updates (#4058) * Bump the storybook group across 1 directory with 5 updates Bumps the storybook group with 5 updates in the / directory: | Package | From | To | | --- | --- | --- | | [@storybook/addon-a11y](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/a11y) | `9.1.13` | `10.1.2` | | [@storybook/addon-docs](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/docs) | `9.1.13` | `10.1.2` | | [@storybook/addon-webpack5-compiler-babel](https://github.com/storybookjs/addon-webpack5-compiler-babel) | `3.0.6` | `4.0.0` | | [@storybook/react-webpack5](https://github.com/storybookjs/storybook/tree/HEAD/code/frameworks/react-webpack5) | `9.1.13` | `10.1.2` | | [storybook](https://github.com/storybookjs/storybook/tree/HEAD/code/core) | `9.1.13` | `10.1.2` | Updates `@storybook/addon-a11y` from 9.1.13 to 10.1.2 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.1.2/code/addons/a11y) Updates `@storybook/addon-docs` from 9.1.13 to 10.1.2 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.1.2/code/addons/docs) Updates `@storybook/addon-webpack5-compiler-babel` from 3.0.6 to 4.0.0 - [Release notes](https://github.com/storybookjs/addon-webpack5-compiler-babel/releases) - [Changelog](https://github.com/storybookjs/addon-webpack5-compiler-babel/blob/main/CHANGELOG.md) - [Commits](storybookjs/addon-webpack5-compiler-babel@v3.0.6...v4.0.0) Updates `@storybook/react-webpack5` from 9.1.13 to 10.1.2 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.1.2/code/frameworks/react-webpack5) Updates `storybook` from 9.1.13 to 10.1.2 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.1.2/code/core) --- updated-dependencies: - dependency-name: "@storybook/addon-a11y" dependency-version: 10.1.2 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/addon-docs" dependency-version: 10.1.2 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/addon-webpack5-compiler-babel" dependency-version: 4.0.0 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/react-webpack5" dependency-version: 10.1.2 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: storybook dependency-version: 10.1.2 dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook ... Signed-off-by: dependabot[bot] <support@github.com> * fix storybook update issue * fix conflict and issue --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> Co-authored-by: Kerrie Wu <kerrie.wu@skyscanner.net> * Bump jws from 3.2.2 to 3.2.3 (#4066) * Bump jws from 3.2.2 to 3.2.3 Bumps [jws](https://github.com/brianloveswords/node-jws) from 3.2.2 to 3.2.3. - [Release notes](https://github.com/brianloveswords/node-jws/releases) - [Changelog](https://github.com/auth0/node-jws/blob/master/CHANGELOG.md) - [Commits](auth0/node-jws@v3.2.2...v3.2.3) --- updated-dependencies: - dependency-name: jws dependency-version: 3.2.3 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> * update package-lock.json --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: gc.zhu <gc.zhu@skyscanner.net> * [CLOV-907][BpkButton] Update BpkButton link and linkOnDark type style (#4076) * [CLOV-907][BpkButton] Update BpkButton link and linkOnDark type style * add implicit to BpkPaginationNudger and BpkFloatingNotification and ExpandAccessoryContent * adjust linkOnDark hover color * add Links example * update link on dark hover style * remove full props in README * update BpkPaginationNudger to iconOnly * remove bpk-buttob-link-disabled * button link aligned * support inline display svg * add button-link-type README * rename bpk-button--link-icon-only-aligned * rename bpk-button--link-icon-only * [CLOV-958][BpkButton] Remove BpkButton (v1) code and alias BpkButton to BpkButtonV2 (#4078) * remove BpkButton code and alias BpkButton to BpkButtonV2 * refine themeAttributes file structure * update readme * correct file format * udpate readme * update readme --------- Co-authored-by: Ezreal Yang <supremeyh@126.com> * [CLOV-907][BpkButton] Fix BpkButton linkOnDark alignment (#4086) * Bump lint-staged from 16.1.5 to 16.2.7 (#4071) Bumps [lint-staged](https://github.com/lint-staged/lint-staged) from 16.1.5 to 16.2.7. - [Release notes](https://github.com/lint-staged/lint-staged/releases) - [Changelog](https://github.com/lint-staged/lint-staged/blob/main/CHANGELOG.md) - [Commits](lint-staged/lint-staged@v16.1.5...v16.2.7) --- updated-dependencies: - dependency-name: lint-staged dependency-version: 16.2.7 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: IrinaWei <irina.wei@skyscanner.net> * Bump glob from 11.1.0 to 13.0.0 (#4072) Bumps [glob](https://github.com/isaacs/node-glob) from 11.1.0 to 13.0.0. - [Changelog](https://github.com/isaacs/node-glob/blob/main/changelog.md) - [Commits](isaacs/node-glob@v11.1.0...v13.0.0) --- updated-dependencies: - dependency-name: glob dependency-version: 13.0.0 dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: IrinaWei <irina.wei@skyscanner.net> * [BpkLink] Migrate component to TypeScript (#4063) * Initial plan * Initial exploration Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> * Migrate BpkLink component to TypeScript Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> * Add missing semicolon in examples.tsx Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> * Remove unused @ts-expect-error directives for bpk-component-link imports Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> * Remove duplicate JS files Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> * Update packages/bpk-component-link/src/BpkLink.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update examples/bpk-component-link/examples.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update packages/bpk-component-link/src/BpkLink.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix TypeScript errors: convert null to undefined for href and rel attributes Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> * Make href prop required in BpkLink to match original Flow type and ensure accessibility Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> * Extend AnchorHTMLAttributes instead of using index signature for better Storybook docgen support Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> * Extend ButtonHTMLAttributes for BpkButtonLink to match BpkLink pattern and improve Storybook docgen Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> * omit props * address rel --------- 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> Co-authored-by: Gert-Jan Vercauteren <gert-jan.vercauteren@skyscanner.net> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Ezreal Yang <supremeyh@126.com> * bump bpk-foundations-web to 24.0.0 (#4092) Co-authored-by: Flora Cheng <flora.cheng@skyscanner.net> * feat[BpkPrice]: added variant size medium (#4089) * feat: added variant size medium to bpkPrice * fix: fixed spacing issues picked up in PR * chore: run tests --------- Co-authored-by: Gert-Jan Vercauteren <gert-jan.vercauteren@skyscanner.net> * [CLOV-657][BpkLink] Refactor BpkLink with add as prop (#4094) * [CLOV-657] Add as prop to support BpkLink * update ref type * use BpkPanel in storybook examples * remove BpkButtonLink in README and storybook * simplify with react type * introduce const LINK_AS * update LINK_AS cases * update as Element * update snapshots * ArgTypes specify API * add href null * common-types * update import and export path * remove LINK_AS * remove BpkLinkPolymorphicProps * update processAnchorProps and getClassNames * remove LinksAs type * [CLOV-909][BpkLink] Mark BpkButtonLink deprecated (#4096) * [CLOV-909][BpkButtonLink] Mark BpkButtonLink deprecated * type label and pass rest * [CLOV-957][BpkButton] Replace BpkButtonV2 with BpkButton across codebase (#4097) * [CLOV-957][BpkButton] Replace BpkButtonV2 with BpkButton across codebase * update figma path * [Clov-353][BpkAutosuggest]Export Autosuggest default theme (#4098) * export default them * Update packages/bpk-component-autosuggest/index.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Bump storybook from 10.1.2 to 10.1.11 (#4100) * Bump storybook from 10.1.2 to 10.1.11 Bumps [storybook](https://github.com/storybookjs/storybook/tree/HEAD/code/core) from 10.1.2 to 10.1.11. - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v10.1.11/code/core) --- updated-dependencies: - dependency-name: storybook dependency-version: 10.1.11 dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> * Update package-lock.json --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Flora Cheng <flora.cheng@skyscanner.net> * [BpkCode] Migrate component to TypeScript (#4106) * Initial plan * Migrate BpkCode component to TypeScript Co-authored-by: Faye-Xiao <20058385+Faye-Xiao@users.noreply.github.com> * Refactor BpkCode to use consistent className handling approach Co-authored-by: Faye-Xiao <20058385+Faye-Xiao@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Replace snapshot tests with Jest expect assertions Co-authored-by: Faye-Xiao <20058385+Faye-Xiao@users.noreply.github.com> * Remove unused @ts-expect-error directive for BpkCode import Co-authored-by: Faye-Xiao <20058385+Faye-Xiao@users.noreply.github.com> * Update README to tsx and add rest props type support Co-authored-by: Faye-Xiao <20058385+Faye-Xiao@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: Faye-Xiao <20058385+Faye-Xiao@users.noreply.github.com> Co-authored-by: Faye <faye.xiao@skyscanner.net> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Fix issue with carousel alignment on mobile * optimize mobile left space and the code itself * Revert "optimize mobile left space and the code itself" This reverts commit eaf2cbe. --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Vincent Liu <xiaogliu@outlook.com> Co-authored-by: Irina-Wei <irina.wei@skyscanner.net> Co-authored-by: Ezreal Yang <supremeyh@126.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kerrie-wu <52308828+kerrie-wu@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Noel Rajan <14931745+FireRedNinja@users.noreply.github.com> Co-authored-by: Gert-Jan Vercauteren <gert-jan.vercauteren@skyscanner.net> Co-authored-by: Kerrie Wu <kerrie.wu@skyscanner.net> Co-authored-by: gc.zhu <gc.zhu@skyscanner.net> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: gert-janvercauteren <728889+gert-janvercauteren@users.noreply.github.com> Co-authored-by: Flora Cheng <122813126+floracheng292@users.noreply.github.com> Co-authored-by: Flora Cheng <flora.cheng@skyscanner.net> Co-authored-by: Nic da Costa <1333205+nicdaCosta@users.noreply.github.com> Co-authored-by: Faye-Xiao <20058385+Faye-Xiao@users.noreply.github.com> Co-authored-by: Faye <faye.xiao@skyscanner.net>

[CLOV-657] Add as prop to support BpkLink

a4af6ab

Copilot AI review requested due to automatic review settings December 22, 2025 07:43

Ezreal Yang (Supremeyh) added the minor Non breaking change label Dec 22, 2025

Copilot AI reviewed Dec 22, 2025

View reviewed changes

packages/bpk-component-link/src/BpkLink.tsx Outdated Show resolved Hide resolved

examples/bpk-component-link/stories.tsx Outdated Show resolved Hide resolved

update ref type

e1bfdb7

Ezreal Yang (Supremeyh) changed the title ~~[CLOV-657] Add as prop to support BpkLink~~ [CLOV-657][BpkLink] Add as prop to support BpkLink Dec 22, 2025

Ezreal Yang (Supremeyh) marked this pull request as draft December 22, 2025 08:14

gert-janvercauteren previously approved these changes Dec 23, 2025

View reviewed changes

use BpkPanel in storybook examples

4de714b

Ezreal Yang (Supremeyh) dismissed Gert-Jan Vercauteren (gert-janvercauteren)’s stale review via 4de714b December 23, 2025 06:57

remove BpkButtonLink in README and storybook

437e578

simplify with react type

f352c93

introduce const LINK_AS

1e2c866

update LINK_AS cases

06b469f

Ezreal Yang (Supremeyh) marked this pull request as ready for review December 23, 2025 08:29

Merge branch 'main' into ez/clov-1073_add_as_prop_to_bpklink

6d5dae1

update as Element

2f90482

Ezreal Yang (Supremeyh) added 3 commits December 23, 2025 18:12

update snapshots

642841d

ArgTypes specify API

d7be5c6

add href null

18c8d2d

common-types

98d21d8

update import and export path

97d6863

Ezreal Yang (Supremeyh) changed the title ~~[CLOV-657][BpkLink] Add as prop to support BpkLink~~ [CLOV-657][BpkLink] Refactor BpkLink Polymorphic Component with Type-Safe Element Selection Dec 23, 2025

Ezreal Yang (Supremeyh) changed the title ~~[CLOV-657][BpkLink] Refactor BpkLink Polymorphic Component with Type-Safe Element Selection~~ [CLOV-657][BpkLink] Refactor with Add as prop to support BpkLink Dec 23, 2025

remove LINK_AS

cf7bfbf

remove BpkLinkPolymorphicProps

3ae0b49

update processAnchorProps and getClassNames

0d3a7e6

Ezreal Yang (Supremeyh) changed the title ~~[CLOV-657][BpkLink] Refactor with Add as prop to support BpkLink~~ [CLOV-657][BpkLink] Refactor BpkLink with add as prop Dec 24, 2025

remove LinksAs type

b4cad1a

floracheng292 approved these changes Dec 24, 2025

View reviewed changes

Ezreal Yang (Supremeyh) merged commit 0f94b12 into main Dec 24, 2025
11 checks passed

Ezreal Yang (Supremeyh) deleted the ez/clov-1073_add_as_prop_to_bpklink branch December 24, 2025 07:29

Ezreal Yang (Supremeyh) self-assigned this Dec 24, 2025

[CLOV-657][BpkLink] Refactor BpkLink with add as prop #4094

[CLOV-657][BpkLink] Refactor BpkLink with add as prop #4094

Uh oh!

Conversation

Ezreal Yang (Supremeyh) commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Key Changes

🏗️ Architecture

✨ Features

🔧 Internal Improvements

📦 Exports

Breaking Changes

Migration Guide

⚠️ Behavior Details

🔍 Type Safety

Snapshots

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

skyscanner-backpack-bot bot commented Dec 22, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

skyscanner-backpack-bot bot commented Dec 22, 2025

Uh oh!

Gert-Jan Vercauteren (gert-janvercauteren) left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Gert-Jan Vercauteren (gert-janvercauteren) Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

Ezreal Yang (Supremeyh) Dec 23, 2025

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Dec 23, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 23, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 23, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 23, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 23, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 23, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 23, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 23, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 23, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 24, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 24, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 24, 2025

Uh oh!

skyscanner-backpack-bot bot commented Dec 24, 2025

Uh oh!

Flora Cheng (floracheng292) left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

Ezreal Yang (Supremeyh) commented Dec 22, 2025 •

edited

Loading

skyscanner-backpack-bot bot commented Dec 22, 2025 •

edited

Loading