[BpkLabel] Migrate component to TypeScript

[Copilot]

Migrated BpkLabel from Flow to TypeScript with improved type safety and test coverage.

Changes

• Component (BpkLabel.js → BpkLabel.tsx)

  • Converted Flow types to TypeScript
  • Removed PropTypes in favor of TypeScript type checking
  • Used ComponentPropsWithoutRef<'label'> for proper HTML attribute typing
  • Updated valid prop type to boolean | null | undefined to match original Flow type (?boolean)
  • Maintained default value of null for the valid parameter to preserve original behavior

• Tests (BpkLabel-test.js → BpkLabel-test.tsx)

  • Replaced 7 snapshot tests with explicit Jest assertions using @testing-library/jest-dom
  • Tests now validate specific DOM properties and class names

• Supporting files

  • Migrated accessibility tests to TypeScript
  • Updated index file and Storybook examples/stories to .tsx
  • Updated README code example to use TypeScript syntax
  • Added @ts-expect-error directive for untyped bpk-storybook-utils import

• Dependent component updates

  • Removed unused @ts-expect-error directives from bpk-component-textarea, bpk-component-fieldset, bpk-component-nudger, and bpk-component-theme-toggle that were importing BpkLabel (now typed)

Type Safety Improvements

export type Props = {
  children: ReactNode;
  className?: string;
  disabled?: boolean;
  valid?: boolean | null;
  required?: boolean;
  white?: boolean;
} & ComponentPropsWithoutRef<'label'>;

The intersection with ComponentPropsWithoutRef<'label'> provides proper typing for all standard HTML label attributes (e.g., htmlFor, onClick) while maintaining custom props. The valid prop accepts boolean | null | undefined to maintain compatibility with the original Flow type, with a default value of null matching the original implementation.

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

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[BpkLabel] Migrate component to TypeScript</issue_title>
<issue_description>I want to migrate the BpkLabel component, including all its tests and Storybook examples, to TypeScript. If any unit tests use snapshot matching, please replace them with Jest's expect assertions. Additionally, review the JavaScript code in the README markdown file; if it exists, update that as well.</issue_description>

Comments on the Issue (you are Copilot in this section)

• Fixes [BpkLabel] Migrate component to TypeScript #4109

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[skyscanner-backpack-bot]

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

[Faye (Faye-Xiao)]

Hi Copilot, It has some issues in the build as follows:

Error: examples/bpk-component-label/examples.tsx(20,39): error TS7016: Could not find a declaration file for module '../bpk-storybook-utils'. '/home/runner/work/backpack/backpack/examples/bpk-storybook-utils/index.js' implicitly has an 'any' type.
Error: examples/bpk-component-textarea/examples.tsx(19,1): error TS2578: Unused 'ts-expect-error' directive.
Error: packages/bpk-component-fieldset/src/BpkFieldset.tsx(24,1): error TS2578: Unused 'ts-expect-error' directive.
Error: packages/bpk-component-fieldset/src/BpkFieldset.tsx(136,13): error TS2322: Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
Type 'null' is not assignable to type 'boolean | undefined'.
Error: packages/bpk-component-nudger/src/BpkNudger.tsx(25,1): error TS2578: Unused 'ts-expect-error' directive.

Fix these issues for me

[Copilot]

Hi Copilot, It has some issues in the build as follows:

Error: examples/bpk-component-label/examples.tsx(20,39): error TS7016: Could not find a declaration file for module '../bpk-storybook-utils'...

Fixed all the TypeScript build errors in commit 5d84a61:

1. Added @ts-expect-error for the untyped bpk-storybook-utils import in examples.tsx
2. Removed unused @ts-expect-error directives from bpk-component-textarea, bpk-component-fieldset, and bpk-component-nudger (they were importing BpkLabel which is now typed)
3. Updated BpkLabel's valid prop type from boolean | undefined to boolean | null | undefined to match the original Flow type and fix the type error in BpkFieldset

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

	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 60d75a9

[Copilot]

Pull request overview

This PR migrates the BpkLabel component from Flow to TypeScript, enhancing type safety and modernizing the test suite. The migration replaces PropTypes with native TypeScript types and converts snapshot tests to explicit assertions.

Key changes:

• Converted BpkLabel component and all related files to TypeScript with proper type definitions
• Replaced 7 snapshot tests with explicit Jest assertions using @testing-library/jest-dom
• Removed @ts-expect-error directives from dependent components now that BpkLabel is typed

Reviewed changes

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

Show a summary per file

File	Description
packages/bpk-component-label/src/BpkLabel.tsx	Migrated component from Flow to TypeScript, removed PropTypes, added ComponentPropsWithoutRef<'label'> for HTML attribute typing
packages/bpk-component-label/src/BpkLabel-test.tsx	Replaced snapshot tests with explicit Jest assertions
packages/bpk-component-label/src/accessibility-test.tsx	Removed Flow type annotation
packages/bpk-component-label/index.ts	Updated exports to TypeScript syntax
packages/bpk-component-label/README.md	Changed code example from js to tsx
packages/bpk-component-nudger/src/BpkNudger.tsx	Removed @ts-expect-error for now-typed BpkLabel import
packages/bpk-component-fieldset/src/BpkFieldset.tsx	Removed @ts-expect-error for now-typed BpkLabel import
examples/bpk-component-textarea/examples.tsx	Removed @ts-expect-error for now-typed BpkLabel import
examples/bpk-component-label/examples.tsx	Removed Flow annotation, added @ts-expect-error for untyped utils
examples/bpk-component-label/stories.tsx	Updated Storybook story syntax for VisualTestWithZoom

---

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

[Faye (Faye-Xiao)]

The valid is supposed to be a boolean and only has 2 values, but it requires changing the code below. To keep the TS migration pure and safe, keep it as it was for now.

[Ezreal Yang (Supremeyh)]

it seems valid removed default null value?

[Faye (Faye-Xiao)]

Hi Copilot add the null as a default value to valid.

[Copilot]

Added the default value null to the valid parameter in commit 6a2a540. This matches the original JavaScript implementation.

[Ezreal Yang (Supremeyh)]

There is nowhere use null value for valid, and in L45 only handle false value without null and undefined, should it clearly distinguish between null and undefined?

[Faye (Faye-Xiao)]

Hi Ezreal (@Ezreal-Yang), thanks for asking! I have considered this question. Currently, the valid property has three values: true, false, and null, which seems unnecessary. In my opinion, it only needs two values to control its style effectively. It should display the invalid style only when valid is set to false.

I'm unsure how this will be used downstream, especially in cases where valid might be set to null. If I modify it directly, it could lead to a type error in its usage. As I mentioned in my comment, I prefer to keep it as it is in this PR.

[skyscanner-backpack-bot]

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

[skyscanner-backpack-bot]

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

[Faye (Faye-Xiao)]

Hi Copilot fix the type error: packages/bpk-component-theme-toggle/src/BpkThemeToggle.tsx(22,1): error TS2578: Unused 'ts-expect-error' directive.

[Copilot]

Hi Copilot fix the type error: packages/bpk-component-theme-toggle/src/BpkThemeToggle.tsx(22,1): error TS2578: Unused 'ts-expect-error' directive.

Fixed in commit 60d75a9. Removed the unused @ts-expect-error directive from BpkThemeToggle since BpkLabel is now a typed TypeScript module.

[skyscanner-backpack-bot]

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

[Faye (Faye-Xiao)]

Approved the precy failure https://percy.io/09e69e44/web/backpack/builds/45962076/changed/2429138062?browser=chrome&browser_ids=69&group_snapshots_by=similar_diff&subcategories=unreviewed%2Cchanges_requested&utm_source=github_status_public&viewLayout=side-by-side&viewMode=new&width=1280&widths=375%2C1280 as some test cases are flaky tests due to a generation problem, not real test error.