[NO-JIRA] Add textAlign prop to layout components#4720
Open
GC Zhu (gc-skyscanner) wants to merge 5 commits into
Open
[NO-JIRA] Add textAlign prop to layout components#4720GC Zhu (gc-skyscanner) wants to merge 5 commits into
GC Zhu (gc-skyscanner) wants to merge 5 commits into
Conversation
…omponents Adds `textAlign` to `BpkCommonLayoutProps`, making it available on BpkBox, BpkFlex, BpkGrid, BpkGridItem and BpkStack. The type is `BpkResponsiveValue<TextAlign>`, reusing the same `TextAlign` type already exported from `bpk-component-text` — consistent with how `textStyle` and `color` are typed. The prop is wired into the responsive-processing allowlist for each component in `tokenUtils.ts`, so it is breakpoint-normalised and passed through to Chakra as a plain `text-align` inline style (no new SCSS classes needed). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4720 to see this build running in a browser. |
Adds TextAlign (and ResponsiveTextAlign for BpkBox) stories to BpkBox, BpkFlex, BpkGrid and BpkStack, demonstrating all four values (start/center/end/justify) using TEXT_ALIGN constants from bpk-component-text — consistent with the existing TextStyle story pattern. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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 a responsive textAlign prop to Backpack layout components, wiring it through the shared props/types and the existing responsive-prop processing pipeline.
Changes:
- Adds
textAlign?: BpkResponsiveValue<TextAlign>toBpkCommonLayoutProps. - Allows
textAlignto be breakpoint-normalised by adding it to the responsive prop groups forBpkBox,BpkFlex,BpkGrid,BpkGridItem, andBpkStack. - Adds Storybook examples and basic render tests covering the new prop.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/backpack-web/src/bpk-component-layout/src/tokenUtils.ts | Adds textAlign to the responsive prop allowlist for all layout components. |
| packages/backpack-web/src/bpk-component-layout/src/commonProps.ts | Extends common layout props/types to include responsive textAlign. |
| packages/backpack-web/src/bpk-component-layout/src/BpkStack.stories.tsx | Adds a textAlign usage example for BpkStack. |
| packages/backpack-web/src/bpk-component-layout/src/BpkStack-test.tsx | Adds a render test case for textAlign on BpkStack. |
| packages/backpack-web/src/bpk-component-layout/src/BpkGridItem-test.tsx | Adds a render test case for textAlign on BpkGridItem. |
| packages/backpack-web/src/bpk-component-layout/src/BpkGrid.stories.tsx | Adds a textAlign usage example for BpkGrid. |
| packages/backpack-web/src/bpk-component-layout/src/BpkGrid-test.tsx | Adds a render test case for textAlign on BpkGrid. |
| packages/backpack-web/src/bpk-component-layout/src/BpkFlex.stories.tsx | Adds a textAlign usage example for BpkFlex. |
| packages/backpack-web/src/bpk-component-layout/src/BpkFlex-test.tsx | Adds a render test case for textAlign on BpkFlex. |
| packages/backpack-web/src/bpk-component-layout/src/BpkBox.stories.tsx | Adds static + responsive textAlign examples for BpkBox. |
| packages/backpack-web/src/bpk-component-layout/src/BpkBox-test.tsx | Adds a render test case for textAlign on BpkBox. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Replace smoke-test assertions with className-diff assertions that verify textAlign actually changes the rendered output — consistent with the opacity test pattern used elsewhere in the same files. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4720 to see this build running in a browser. |
Assert that textAlign prop applies the correct text-align inline style to the rendered DOM element, consistent with existing flex-direction, gap, and other Chakra prop tests in the same files. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4720 to see this build running in a browser. |
Add missing @returns JSDoc tag to all new textAlign story functions, matching the pattern used by existing story functions in the same files. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
|
Visit https://backpack.github.io/storybook-prs/4720 to see this build running in a browser. |
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.
What
Adds a
textAlignprop to all Backpack layout components (BpkBox,BpkFlex,BpkGrid,BpkGridItem,BpkStack).How
textAlign?: BpkResponsiveValue<TextAlign>added toBpkCommonLayoutPropsincommonProps.tsTextAligntype ('start' | 'end' | 'center' | 'justify') already exported frombpk-component-text— consistent withtextStyle(usesTextStyle) andcolor(usesTextColor)'textAlign'to the responsive-processing allowlist for all 5 components intokenUtils.ts, so it goes through the same breakpoint-normalisation pipeline asposition,overflow, andtextStyletext-aligninline styleUsage
Test plan
renders when textAlign is providedtest to each of the 5 component test files, mirroring the existingtextStyletest pattern'start' | 'end' | 'center' | 'justify'are valid)