[Layout foundations] Add alpha Box component
#7000
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@shopify/polaris': minor | ||
| --- | ||
|
|
||
| Added `Box` component |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| .Box { | ||
| display: block; | ||
| background-color: var(--pc-box-background, initial); | ||
| /* stylelint-disable declaration-block-no-redundant-longhand-properties */ | ||
| border-bottom-left-radius: var(--pc-box-border-radius-bottom-left, initial); | ||
| border-bottom-right-radius: var(--pc-box-border-radius-bottom-right, initial); | ||
| border-top-left-radius: var(--pc-box-border-radius-top-left, initial); | ||
| border-top-right-radius: var(--pc-box-border-radius-top-right, initial); | ||
| border-bottom: var(--pc-box-border-bottom, initial); | ||
| border-left: var(--pc-box-border-left, initial); | ||
| border-right: var(--pc-box-border-right, initial); | ||
| border-top: var(--pc-box-border-top, initial); | ||
| margin-bottom: var(--pc-box-margin-bottom, initial); | ||
| margin-left: var(--pc-box-margin-left, initial); | ||
| margin-right: var(--pc-box-margin-right, initial); | ||
| margin-top: var(--pc-box-margin-top, initial); | ||
| padding-bottom: var(--pc-box-padding-bottom, initial); | ||
| padding-left: var(--pc-box-padding-left, initial); | ||
| padding-right: var(--pc-box-padding-right, initial); | ||
| padding-top: var(--pc-box-padding-top, initial); | ||
| /* stylelint-enable declaration-block-no-redundant-longhand-properties */ | ||
| box-shadow: var(--pc-box-shadow, initial); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,253 @@ | ||
| import React, {ReactNode, forwardRef} from 'react'; | ||
| import type * as Polymorphic from '@radix-ui/react-polymorphic'; | ||
| import type {colors, depth, shape, spacing} from '@shopify/polaris-tokens'; | ||
|
|
||
| import {classNames} from '../../utilities/css'; | ||
|
|
||
| import styles from './Box.scss'; | ||
|
|
||
| type ColorsTokenGroup = typeof colors; | ||
| type ColorsTokenName = keyof ColorsTokenGroup; | ||
| type BackgroundColorTokenScale = Extract< | ||
| ColorsTokenName, | ||
| | 'background' | ||
| | `background-${string}` | ||
| | 'surface' | ||
| | `surface-${string}` | ||
| | 'backdrop' | ||
| | 'overlay' | ||
| >; | ||
|
|
||
| type DepthTokenGroup = typeof depth; | ||
| type DepthTokenName = keyof DepthTokenGroup; | ||
| type ShadowsTokenName = Exclude<DepthTokenName, `shadows-${string}`>; | ||
|
|
||
| type DepthTokenScale = ShadowsTokenName extends `shadow-${infer Scale}` | ||
| ? Scale | ||
| : never; | ||
|
|
||
| type ShapeTokenGroup = typeof shape; | ||
| type ShapeTokenName = keyof ShapeTokenGroup; | ||
|
|
||
| type BorderShapeTokenScale = ShapeTokenName extends `border-${infer Scale}` | ||
| ? Scale | ||
| : never; | ||
|
|
||
| type BorderTokenScale = Exclude< | ||
| BorderShapeTokenScale, | ||
| `radius-${string}` | `width-${string}` | ||
| >; | ||
|
|
||
| interface Border { | ||
| bottom: BorderTokenScale; | ||
| left: BorderTokenScale; | ||
| right: BorderTokenScale; | ||
| top: BorderTokenScale; | ||
| } | ||
|
|
||
| type BorderRadiusTokenScale = Extract< | ||
| BorderShapeTokenScale, | ||
| `radius-${string}` | ||
| > extends `radius-${infer Scale}` | ||
| ? Scale | ||
| : never; | ||
|
|
||
| interface BorderRadius { | ||
| bottomLeft: BorderRadiusTokenScale | ''; | ||
| bottomRight: BorderRadiusTokenScale | ''; | ||
| topLeft: BorderRadiusTokenScale | ''; | ||
| topRight: BorderRadiusTokenScale | ''; | ||
| } | ||
|
|
||
| type SpacingTokenGroup = typeof spacing; | ||
| type SpacingTokenName = keyof SpacingTokenGroup; | ||
|
|
||
| // TODO: Bring this logic into tokens | ||
| type SpacingTokenScale = SpacingTokenName extends `space-${infer Scale}` | ||
| ? Scale | ||
| : never; | ||
|
|
||
| interface Spacing { | ||
| bottom: SpacingTokenScale | ''; | ||
| left: SpacingTokenScale | ''; | ||
| right: SpacingTokenScale | ''; | ||
| top: SpacingTokenScale | ''; | ||
| } | ||
|
|
||
| interface BoxBaseProps { | ||
| /** Background color of the Box */ | ||
| background?: BackgroundColorTokenScale; | ||
| /** Border styling of the Box */ | ||
| border?: BorderTokenScale; | ||
| /** Bottom border styling of the Box */ | ||
| borderBottom?: BorderTokenScale; | ||
| /** Left border styling of the Box */ | ||
| borderLeft?: BorderTokenScale; | ||
| /** Right border styling of the Box */ | ||
| borderRight?: BorderTokenScale; | ||
| /** Top border styling of the Box */ | ||
| borderTop?: BorderTokenScale; | ||
| /** Border radius of the Box */ | ||
| borderRadius?: BorderRadiusTokenScale; | ||
| /** Bottom left border radius of the Box */ | ||
| borderRadiusBottomLeft?: BorderRadiusTokenScale; | ||
| /** Bottom right border radius of the Box */ | ||
| borderRadiusBottomRight?: BorderRadiusTokenScale; | ||
| /** Top left border radius of the Box */ | ||
| borderRadiusTopLeft?: BorderRadiusTokenScale; | ||
| /** Top right border radius of the Box */ | ||
| borderRadiusTopRight?: BorderRadiusTokenScale; | ||
| /** Inner content of the Box */ | ||
| children: ReactNode; | ||
| /** Spacing outside of the Box */ | ||
| margin?: SpacingTokenScale; | ||
| /** Bottom spacing outside of the Box */ | ||
| marginBottom?: SpacingTokenScale; | ||
| /** Left side spacing outside of the Box */ | ||
| marginLeft?: SpacingTokenScale; | ||
| /** Right side spacing outside of the Box */ | ||
| marginRight?: SpacingTokenScale; | ||
| /** Top spacing outside of the Box */ | ||
| marginTop?: SpacingTokenScale; | ||
| /** Spacing inside of the Box */ | ||
| padding?: SpacingTokenScale; | ||
| /** Bottom spacing inside of the Box */ | ||
| paddingBottom?: SpacingTokenScale; | ||
| /** Left side spacing inside of the Box */ | ||
| paddingLeft?: SpacingTokenScale; | ||
| /** Right side spacing inside of the Box */ | ||
| paddingRight?: SpacingTokenScale; | ||
| /** Top spacing inside of the Box */ | ||
| paddingTop?: SpacingTokenScale; | ||
| /** Shadow on the Box */ | ||
| shadow?: DepthTokenScale; | ||
| } | ||
|
|
||
| type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', BoxBaseProps>; | ||
|
Member
There was a problem hiding this comment. Would we want to start with a more opinionated list? Then add flexibility later?
Contributor
Author
There was a problem hiding this comment. I originally tried building
Member
There was a problem hiding this comment. I think initially if we can get this working without allowing all the HTML elements that would be ace. |
||
|
|
||
| export type BoxProps = Polymorphic.OwnProps<PolymorphicBox>; | ||
|
|
||
| export const Box = forwardRef( | ||
| ( | ||
| { | ||
| as: Component = 'div', | ||
| background, | ||
| border = '', | ||
| borderBottom = '', | ||
| borderLeft = '', | ||
| borderRight = '', | ||
| borderTop = '', | ||
| borderRadius = '', | ||
| borderRadiusBottomLeft = '', | ||
| borderRadiusBottomRight = '', | ||
| borderRadiusTopLeft = '', | ||
| borderRadiusTopRight = '', | ||
| children, | ||
| margin = '', | ||
| marginBottom = '', | ||
| marginLeft = '', | ||
| marginRight = '', | ||
| marginTop = '', | ||
| padding = '', | ||
| paddingBottom = '', | ||
| paddingLeft = '', | ||
| paddingRight = '', | ||
| paddingTop = '', | ||
| shadow, | ||
| }, | ||
| ref, | ||
| ) => { | ||
| const borders = { | ||
| bottom: borderBottom ? borderBottom : border, | ||
| left: borderLeft ? borderLeft : border, | ||
| right: borderRight ? borderRight : border, | ||
| top: borderTop ? borderTop : border, | ||
| } as Border; | ||
|
|
||
| const borderRadiuses = { | ||
| bottomLeft: borderRadiusBottomLeft | ||
| ? borderRadiusBottomLeft | ||
| : borderRadius, | ||
| bottomRight: borderRadiusBottomRight | ||
| ? borderRadiusBottomRight | ||
| : borderRadius, | ||
| topLeft: borderRadiusTopLeft ? borderRadiusTopLeft : borderRadius, | ||
| topRight: borderRadiusTopRight ? borderRadiusTopRight : borderRadius, | ||
| } as BorderRadius; | ||
|
|
||
| const margins = { | ||
| bottom: marginBottom ? marginBottom : margin, | ||
| left: marginLeft ? marginLeft : margin, | ||
| right: marginRight ? marginRight : margin, | ||
| top: marginTop ? marginTop : margin, | ||
| } as Spacing; | ||
|
|
||
| const paddings = { | ||
| bottom: paddingBottom ? paddingBottom : padding, | ||
| left: paddingLeft ? paddingLeft : padding, | ||
| right: paddingRight ? paddingRight : padding, | ||
| top: paddingTop ? paddingTop : padding, | ||
| } as Spacing; | ||
|
|
||
| const style = { | ||
| '--pc-box-background': background ? `var(--p-${background})` : '', | ||
| '--pc-box-margin-bottom': margins.bottom | ||
| ? `var(--p-space-${margins.bottom})` | ||
| : '', | ||
| '--pc-box-margin-left': margins.left | ||
| ? `var(--p-space-${margins.left})` | ||
| : '', | ||
| '--pc-box-margin-right': margins.right | ||
| ? `var(--p-space-${margins.right})` | ||
| : '', | ||
| '--pc-box-margin-top': margins.top ? `var(--p-space-${margins.top})` : '', | ||
| '--pc-box-padding-bottom': paddings.bottom | ||
| ? `var(--p-space-${paddings.bottom})` | ||
| : '', | ||
| '--pc-box-padding-left': paddings.left | ||
| ? `var(--p-space-${paddings.left})` | ||
| : '', | ||
| '--pc-box-padding-right': paddings.right | ||
| ? `var(--p-space-${paddings.right})` | ||
| : '', | ||
| '--pc-box-padding-top': paddings.top | ||
| ? `var(--p-space-${paddings.top})` | ||
| : '', | ||
| '--pc-box-border-bottom': borders.bottom | ||
| ? `var(--p-border-${borders.bottom})` | ||
| : '', | ||
| '--pc-box-border-left': borders.left | ||
| ? `var(--p-border-${borders.left})` | ||
| : '', | ||
| '--pc-box-border-right': borders.right | ||
| ? `var(--p-border-${borders.right})` | ||
| : '', | ||
| '--pc-box-border-top': borders.top | ||
| ? `var(--p-border-${borders.top})` | ||
| : '', | ||
| '--pc-box-border-radius-bottom-left': borderRadiuses.bottomLeft | ||
| ? `var(--p-border-radius-${borderRadiuses.bottomLeft})` | ||
| : '', | ||
| '--pc-box-border-radius-bottom-right': borderRadiuses.bottomRight | ||
| ? `var(--p-border-radius-${borderRadiuses.bottomRight})` | ||
| : '', | ||
| '--pc-box-border-radius-top-left': borderRadiuses.topLeft | ||
| ? `var(--p-border-radius-${borderRadiuses.topLeft})` | ||
| : '', | ||
| '--pc-box-border-radius-top-right': borderRadiuses.topRight | ||
| ? `var(--p-border-radius-${borderRadiuses.topRight})` | ||
| : '', | ||
| '--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : '', | ||
| } as React.CSSProperties; | ||
|
|
||
| const className = classNames(styles.root); | ||
|
|
||
| return ( | ||
| <Component ref={ref} className={className} style={style}> | ||
| {children} | ||
| </Component> | ||
| ); | ||
| }, | ||
| ) as PolymorphicBox; | ||
|
|
||
| Box.displayName = 'Box'; | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './Box'; |
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
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
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.
Uh oh!
There was an error while loading. Please reload this page.