Open
Conversation
|
Visit https://backpack.github.io/storybook-prs/4287 to see this build running in a browser. |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds additional visual and interaction capabilities to BpkBox in bpk-component-layout, primarily by introducing token-backed background/text color props (via SCSS modules) and expanding the common layout prop surface (ARIA/HTML attributes and a few structural layout controls).
Changes:
- Introduces
BACKGROUND_COLORS+BpkBoxBackgroundColorand wiresBpkBoxbackgroundColorto SCSS module classes. - Adds
colorsupport onBpkBoxusingTEXT_COLORS-compatible class names (compound selectors to beat Chakra specificity). - Expands shared layout props (
BpkCommonLayoutProps) to includeid,role,aria-*,position,zIndex, and overflow props; updates examples/stories accordingly.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/bpk-component-layout/src/backgroundColors.ts | Adds BACKGROUND_COLORS constant and BpkBoxBackgroundColor type to define allowed background tokens. |
| packages/bpk-component-layout/src/BpkBox.module.scss | Implements the SCSS-module classes for background and text color modifiers used by BpkBox. |
| packages/bpk-component-layout/src/BpkBox.tsx | Adds backgroundColor/color class handling and forwards refs to the underlying Chakra Box. |
| packages/bpk-component-layout/src/commonProps.ts | Expands shared layout props with ARIA/HTML attributes and structural layout props. |
| packages/bpk-component-layout/src/types.ts | Extends BpkBoxProps with background/text color types and additional interaction/visual props. |
| packages/bpk-component-layout/src/BpkBox-test.tsx | Adds initial tests for backgroundColor rendering (currently not asserting class behavior). |
| packages/bpk-component-layout/index.ts | Exposes BACKGROUND_COLORS + BpkBoxBackgroundColor from the package entrypoint. |
| examples/bpk-component-layout/examples.module.scss | Tweaks example styling (tokenised background-size, ordering, outline block styling). |
| examples/bpk-component-layout/box-examples.tsx | Adds new swatch examples for surface/status/canvas background tokens and text colors. |
| examples/bpk-component-layout/box.stories.tsx | Adds new Storybook stories to surface the new examples. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+69
to
+71
| describe('backgroundColor', () => { | ||
| it('renders with a surface color token', () => { | ||
| const { container } = render( |
| expect(container.querySelector('div')).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
Comment on lines
199
to
201
| type BoxEventProps = Pick<BoxProps, | ||
| 'onClick' | 'onFocus' | 'onBlur' | ||
| 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | ||
| >; |
Comment on lines
82
to
83
| * - BpkBox reintroduces a minimal set of events (onClick, onFocus, onBlur) | ||
| * on its own props type. |
Comment on lines
+19
to
+20
| // backgroundColor keys must stay in sync with backgroundColors.ts | ||
| // color keys must stay in sync with TEXT_COLORS in bpk-component-text |
|
Visit https://backpack.github.io/storybook-prs/4287 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.
New files
packages/bpk-component-layout/src/BpkBox.module.scssSCSS module for
BpkBoxcolor props. Background colors use thebpk-surface-bg-colorsmixin (shared with BpkPanel) plus explicit status fill and canvas classes. Text colors use compound selectors (.bpk-box.bpk-box--text-*) to beat Chakra emotion specificity, matching BpkText's pattern.packages/bpk-component-layout/src/backgroundColors.tsDefines
BACKGROUND_COLORS(all-caps, matchingTEXT_COLORSconvention). ExtendsSURFACE_COLORSfrombpk-react-utilsand addsstatusSuccessFill,statusDangerFill,statusWarningFill,canvas, andcanvasContrast. ExportsBpkBoxBackgroundColortype.Modified files
packages/bpk-component-layout/src/BpkBox.tsxbackgroundColorandcolorprops handled via SCSS class approach witheslint-disable-next-line(same pattern as BpkText)React.forwardRef<HTMLElement>to expose the underlying DOM nodepackages/bpk-component-layout/src/commonProps.tsAdded to
BpkCommonLayoutProps(shared across all layout components):id,rolearia-*viaextends AriaAttributesposition,zIndexoverflow,overflowX,overflowYpackages/bpk-component-layout/src/types.tsAdded to
BpkBoxPropsonly (interaction / visual, not shared):backgroundColorBpkBoxBackgroundColorcolorTextColor(fromTEXT_COLORS)cursor'auto' | 'default' | 'pointer' | 'not-allowed'opacitynumbertabIndexnumberonKeyDown/onKeyUpBoxPropsevent typespackages/bpk-component-layout/index.tsExported
BACKGROUND_COLORSandBpkBoxBackgroundColor.examples/bpk-component-layout/box-examples.tsxAdded
SurfaceBackgroundColorExample,StatusFillBackgroundColorExample,CanvasBackgroundColorExample, andColorExample.examples/bpk-component-layout/box.stories.tsxAdded
SurfaceBackgroundColor,StatusFillBackgroundColor,CanvasBackgroundColor, andColorstories.Design decisions
backgroundColorandcoloruse SCSS classes, not Chakra semantic tokens, to keep token usage within the Backpack boundarydisplay: nonewas already supported viaBoxProps['display']— no change neededclassName,style,transform,boxShadow,transition, border shorthands, and raw CSS custom properties