diff --git a/.changeset/shiny-mangos-tease.md b/.changeset/shiny-mangos-tease.md new file mode 100644 index 00000000000..d49e5a1c207 --- /dev/null +++ b/.changeset/shiny-mangos-tease.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': patch +--- + +Updated `Box` component guidance and examples diff --git a/polaris.shopify.com/content/components/box.md b/polaris.shopify.com/content/components/box.md index 1e3e4ae6c12..3e096261737 100644 --- a/polaris.shopify.com/content/components/box.md +++ b/polaris.shopify.com/content/components/box.md @@ -1,6 +1,6 @@ --- title: Box -description: Box is the most primitive layout component. Box has a set of padding options. Use it to render an individual item. +description: Box is the most primitive layout component. It’s a way to access Polaris design tokens. category: Structure keywords: - layout @@ -8,20 +8,32 @@ status: value: Alpha message: This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution. examples: - - fileName: box-with-padding.tsx - title: Padding + - fileName: box-default.tsx + title: Default + description: >- + By default, box has no padding, borders, border radius, background, or shadows. + - fileName: box-with-color.tsx + title: Color + description: >- + Background color of box and text color inside a box can be adjusted using the [Color tokens](https://polaris.shopify.com/tokens/colors). + - fileName: box-with-border.tsx + title: Border description: >- - Spacing inside Box can be set with the padding properties. Padding options are provided using our spacing tokens. There are 5 different padding properties: padding, paddingLeft, paddingRight, paddingTop, and paddingBottom. + Border width can be adjusted using the [Shape tokens](https://polaris.shopify.com/tokens/shape), and a subset of tokens allows different types of border. - fileName: box-with-border-radius.tsx title: Border radius description: >- - Border radius can be set with the border radius properties. Border radius options are provided using our shape tokens. There are 5 different padding properties: borderRadius, borderRadiusLeft, borderRadiusRight, borderRadiusTop, and borderRadiusBottom. - - fileName: box-with-background.tsx - title: Background + Border radius can be adjusted using the [Shape tokens](https://polaris.shopify.com/tokens/shape). + - fileName: box-with-padding.tsx + title: Padding description: >- - Background color for Box can be set with the background prop. Background color options are provided using our color tokens that relate to background, surface, backdrop, and overlay. - - fileName: box-with-border.tsx - title: Border + Padding can be added to either all sides, left, right, top, and bottom, using the [Spacing tokens](https://polaris.shopify.com/tokens/spacing). + - fileName: box-with-shadow.tsx + title: Shadow description: >- - Border color for Box can be set with the border prop. Border color options are provided using our shape tokens. + Shadow can be applied using the Shadow token. The base is [--p-shadow-base](https://polaris.shopify.com/tokens/depth). --- + +## Related components + +- For more specific use cases, [use the Card](https://polaris.shopify.com/components/card) component. diff --git a/polaris.shopify.com/pages/examples/box-default.tsx b/polaris.shopify.com/pages/examples/box-default.tsx new file mode 100644 index 00000000000..2f2254e5065 --- /dev/null +++ b/polaris.shopify.com/pages/examples/box-default.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import {Box, Text} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function BoxDefaultExample() { + return ( + + + + ); +} + +const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { + return ( +
+
+ + {label} + +
+
+ ); +}; + +export default withPolarisExample(BoxDefaultExample); diff --git a/polaris.shopify.com/pages/examples/box-with-background.tsx b/polaris.shopify.com/pages/examples/box-with-background.tsx deleted file mode 100644 index 0469223e3a7..00000000000 --- a/polaris.shopify.com/pages/examples/box-with-background.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import {Box, Stack, Text} from '@shopify/polaris'; - -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function BoxWithBackgroundExample() { - return ( - - - - Box with background - - - - - Box with background surface - - - - - Box with background overlay - - - - - Box with background backdrop - - - - ); -} - -export default withPolarisExample(BoxWithBackgroundExample); diff --git a/polaris.shopify.com/pages/examples/box-with-border-radius.tsx b/polaris.shopify.com/pages/examples/box-with-border-radius.tsx index a6edc00a748..208560e8193 100644 --- a/polaris.shopify.com/pages/examples/box-with-border-radius.tsx +++ b/polaris.shopify.com/pages/examples/box-with-border-radius.tsx @@ -1,47 +1,37 @@ import React from 'react'; -import {Box, Stack, Text} from '@shopify/polaris'; +import {Box, Text} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function BoxWithBorderRadiusExample() { return ( - - - - Box with uniform border radius - - - - - Box with bottom border radius - - - + + + ); +} + +const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { + return ( +
+
- - Box with border radius base + + {label} - - +
+
); -} +}; export default withPolarisExample(BoxWithBorderRadiusExample); diff --git a/polaris.shopify.com/pages/examples/box-with-border.tsx b/polaris.shopify.com/pages/examples/box-with-border.tsx index 5dd7f80326c..70463ac0f04 100644 --- a/polaris.shopify.com/pages/examples/box-with-border.tsx +++ b/polaris.shopify.com/pages/examples/box-with-border.tsx @@ -1,68 +1,36 @@ import React from 'react'; -import {Box, Stack, Text} from '@shopify/polaris'; +import {Box, Text} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function BoxWithBorderExample() { return ( - - - - Box with border base - - - - - Box with border divider - - - - - Box with border dark - - - - - Box with border transparent - - - + + + ); +} + +const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { + return ( +
+
- - Box with border divider on dark + + {label} - - +
+
); -} +}; export default withPolarisExample(BoxWithBorderExample); diff --git a/polaris.shopify.com/pages/examples/box-with-color.tsx b/polaris.shopify.com/pages/examples/box-with-color.tsx new file mode 100644 index 00000000000..8789b92cb0f --- /dev/null +++ b/polaris.shopify.com/pages/examples/box-with-color.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import {Box, Text} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function BoxWithColorExample() { + return ( + + + Content inside a box + + + ); +} + +export default withPolarisExample(BoxWithColorExample); diff --git a/polaris.shopify.com/pages/examples/box-with-padding.tsx b/polaris.shopify.com/pages/examples/box-with-padding.tsx index aa2176240ad..53b0d32b3d2 100644 --- a/polaris.shopify.com/pages/examples/box-with-padding.tsx +++ b/polaris.shopify.com/pages/examples/box-with-padding.tsx @@ -1,39 +1,71 @@ import React from 'react'; -import {Box, Stack, Text} from '@shopify/polaris'; +import {AlphaStack, Box, Stack, Text, Inline} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function BoxWithPaddingExample() { return ( - - - - Box with uniform padding - - - - - Box with left padding overwritten - - - - - Box with top padding only - - - + +
+ + + +
+ +
+ + + +
+
+ + + +
+ + +
+ + + +
+
+ + + +
+ + ); } +const Placeholder = ({ + label = '', + height = 'auto', + width = 'auto', + childAlign, +}) => { + return ( +
+ +
+ + {label} + +
+ +
+ ); +}; + export default withPolarisExample(BoxWithPaddingExample); diff --git a/polaris.shopify.com/pages/examples/box-with-shadow.tsx b/polaris.shopify.com/pages/examples/box-with-shadow.tsx new file mode 100644 index 00000000000..7405c9fc7e2 --- /dev/null +++ b/polaris.shopify.com/pages/examples/box-with-shadow.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import {Box, Text} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function BoxWithShadowExample() { + return ( + + + + ); +} + +const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { + return ( +
+
+ + {label} + +
+
+ ); +}; + +export default withPolarisExample(BoxWithShadowExample);