Skip to content

[AI-Component]reimplement BpkInput #4166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
IrinaWei wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[AI-Component]reimplement BpkInput #4166

IrinaWei wants to merge 1 commit into from

Conversation

@IrinaWei
Copy link
Contributor

@IrinaWei IrinaWei commented Jan 28, 2026

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 January 28, 2026 09:16
Copilot AI reviewed Jan 28, 2026
View reviewed changes
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

This PR implements BpkInputV2 with native HTML input elements instead of Chakra UI, removing all ChakraProvider dependencies. The implementation discovered that Chakra UI provided no benefits for simple input components, so the final solution uses native HTML with Backpack styling for better performance and simpler maintenance.

Changes:

  • Replaced original Chakra UI approach with native HTML <input> elements
  • Removed all ChakraProvider wrappers and Chakra UI dependencies from the component
  • Enhanced BpkInputGroup with stricter TypeScript constraints (ReactElement instead of ReactNode for children)

Reviewed changes

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

Show a summary per file
File Description
specs/001-bpkinput-chakra-ui/spec.md Documents the final implementation decision to use native HTML instead of Chakra UI, with comprehensive rationale
specs/001-bpkinput-chakra-ui/tasks.md Task breakdown showing completed migration and removal of ChakraProvider
specs/001-bpkinput-chakra-ui/styling-guide.md SCSS styling patterns for BpkInputV2 and BpkInputGroup using Backpack tokens
specs/001-bpkinput-chakra-ui/research.md Research findings documenting ChakraProvider availability and integration strategy
specs/001-bpkinput-chakra-ui/plan.md Implementation plan template for component development
specs/001-bpkinput-chakra-ui/checklists/requirements.md Specification quality validation checklist
specs/001-bpkinput-chakra-ui/api-design.md API design for BpkInputV2 and BpkInputGroup components
packages/bpk-component-input/src/BpkInputV2/test-utils.tsx Test utilities with ChakraProvider wrapper (now unused but retained)
packages/bpk-component-input/src/BpkInputV2/index.tsx Export file without ChakraProvider wrapper
packages/bpk-component-input/src/BpkInputV2/common-types.ts TypeScript type definitions for BpkInputV2 props
packages/bpk-component-input/src/BpkInputV2/accessibility-test.tsx Accessibility tests using native render (no ChakraProvider)
packages/bpk-component-input/src/BpkInputV2/BpkInputV2.tsx Main component implementation using native HTML input
packages/bpk-component-input/src/BpkInputV2/BpkInputV2.module.scss Component styles using Backpack design tokens
packages/bpk-component-input/src/BpkInputV2/BpkInputV2-test.tsx Unit tests for BpkInputV2 component
packages/bpk-component-input/src/BpkInputV2/BpkInputGroup/* BpkInputGroup implementation and tests
examples/bpk-component-input-v2/* Storybook examples for BpkInputV2 and BpkInputGroup

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

specs/001-bpkinput-chakra-ui/spec.md
@@ -0,0 +1,655 @@
# Component Specification: BpkInputV2 Migration (Chakra UI → Native HTML)
Copy link

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

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

The title describes a migration from Chakra UI to Native HTML, but the PR title states '[AI-Component]reimplement BpkInput' suggesting this is a new implementation. Consider clarifying whether this is a reimplementation or a migration, and ensure the title matches the actual work.

Suggested change
# Component Specification: BpkInputV2 Migration (Chakra UI → Native HTML)
# Component Specification: BpkInputV2 Reimplementation via Migration (Chakra UI → Native HTML)

Copilot uses AI. Check for mistakes.
packages/bpk-component-input/src/BpkInputV2/test-utils.tsx

import type { ReactElement } from 'react';

import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
Copy link

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

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

The test-utils.tsx file imports and uses ChakraProvider, but according to the spec and index.tsx, ChakraProvider has been removed from the implementation. This test utility appears to be unused based on the final decision to use native HTML. Consider removing this file or updating documentation to clarify its purpose.

Copilot uses AI. Check for mistakes.
packages/bpk-component-input/src/BpkInputV2/BpkInputV2.tsx
large,
name,
onClear,
size, // Extract from rest to avoid conflict with Chakra's size prop
Copy link

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

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

The comment references avoiding conflict with Chakra's size prop, but the component no longer uses Chakra UI. This comment should be removed or updated to reflect the current implementation.

Suggested change
size, // Extract from rest to avoid conflict with Chakra's size prop
size,

Copilot uses AI. Check for mistakes.
examples/bpk-component-input-v2/examples.tsx
);

export const InvalidExample = () => (
// <WithChakraProvider>
Copy link

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

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

Commented-out ChakraProvider wrapper references remain in the code. Since ChakraProvider is no longer used, these comments should be removed.

Copilot uses AI. Check for mistakes.
examples/bpk-component-input-v2/examples.tsx
valid={false}
/>
</form>
// </WithChakraProvider>
Copy link

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

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

Commented-out ChakraProvider wrapper references remain in the code. Since ChakraProvider is no longer used, these comments should be removed.

Copilot uses AI. Check for mistakes.
specs/001-bpkinput-chakra-ui/styling-guide.md
@include forms.bpk-input; // Inherit all Backpack input styles

// Override Chakra Input defaults
&[data-chakra-input] {
Copy link

Copilot AI Jan 28, 2026

Choose a reason for hiding this comment

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

The styling guide contains extensive references to Chakra UI data attributes and override strategies, but the final implementation uses native HTML without Chakra. This documentation is misleading and should be updated to reflect the actual implementation approach.

Copilot uses AI. Check for mistakes.
@skyscanner-backpack-bot
Copy link

skyscanner-backpack-bot bot commented Jan 28, 2026

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

Reviewers

Copilot code review Copilot Copilot left review comments

At least 1 approving review is required to merge this pull request.

Assignees

@IrinaWei IrinaWei

Labels

ai: claude ai-week

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@IrinaWei @gert-janvercauteren