feat(BpkCheckboxV2): add fullWidth prop to Root#4772
Open
IrinaWei wants to merge 1 commit into
Open
Conversation
Adds an opt-in `fullWidth` boolean prop to `BpkCheckboxV2.Root` that sets `width: 100%` via a new `bpk-checkbox-v2--full-width` modifier, allowing the component to stretch as a flex child inside a container. The default `inline-flex` display is preserved to avoid breaking existing usages (Overlay, carhire-homepage) where the checkbox sits inline or in a non-constrained context. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4772 to see this build running in a browser. |
Contributor
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot couldn't run its full agentic review because no GitHub Actions runner was available. Make sure your repository has a runner available to run Copilot's review, or add a copilot-setup-steps.yml file specifying one with the runs-on attribute. See the docs for more details.
Adds an opt-in fullWidth prop to BpkCheckboxV2.Root to allow the checkbox root to expand to its container width via a new CSS modifier, and demonstrates the behavior in Storybook.
Changes:
- Added
fullWidth?: booleanprop toBpkCheckboxV2.Rootthat conditionally applies a--full-widthmodifier class. - Added SCSS styling for the new
bpk-checkbox-v2--full-widthmodifier (width: 100%). - Added a new
FullWidthStorybook story and included the example in the existingVisualTestcomposite story.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| packages/backpack-web/src/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.tsx | Introduces fullWidth prop and toggles a modifier class on the root. |
| packages/backpack-web/src/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.stories.tsx | Adds a FullWidth example/story and includes it in the mixed visual test story. |
| packages/backpack-web/src/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.module.scss | Adds --full-width modifier styling (width: 100%). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+67
to
+69
| className={getClassName('bpk-checkbox-v2', { | ||
| 'bpk-checkbox-v2--full-width': fullWidth, | ||
| })} |
Comment on lines
285
to
289
| <IndeterminateExample /> | ||
| <InvalidExample /> | ||
| <ThemedExample /> | ||
| <FullWidthExample /> | ||
| </BpkFlex> |
Comment on lines
+241
to
+243
| const FullWidthExample = () => ( | ||
| <BpkProvider> | ||
| <div style={{ width: '300px', border: '1px dashed #ccc', padding: '16px' }}> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
fullWidth?: booleanprop toBpkCheckboxV2.Roottrue, appliesbpk-checkbox-v2--full-widthmodifier →width: 100%inline-flexdisplay unchanged — zero breaking changes for existing consumers (Overlay, carhire-homepage)FullWidthStorybook story with unchecked / checked+description / disabled variants inside a constrained containerWhy not change
inline-flex→flexglobally?Searched Skyscanner org — found two external consumers using
BpkCheckboxV2.Rootin contexts that would break if the root became block-level. An opt-in prop avoids all regressions.Test plan
BpkCheckboxV2-test— 17 tests pass, snapshots unchangedFullWidthstory renders at 300px container, all three variants fill width