[Layout foundations] Add alpha Box component

[laurkim]

WHY are these changes introduced?

Resolves #6892.

WHAT is this pull request doing?

Adds a new alpha Box component.

Using Box to recreate the Card component

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {Page, Card, Text, Box} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
      <Box
        background="surface"
        borderRadius="radius-2"
        padding="5"
        shadow="card"
      >
        <Text as="h2" variant="headingMd">
          Online store dashboard
        </Text>
        <Text as="p" variant="bodyMd">
          This was made using the 📦 Box 📦 component.
        </Text>
      </Box>
      <div
        style={{
          borderTop: 'var(--p-border-divider)',
          marginTop: 'var(--p-space-8)',
          marginBottom: 'var(--p-space-8)',
        }}
      ></div>
      <Card title="Online store dashboard" sectioned>
        <Text as="p" variant="bodyMd">
          This was made using the 🃏 Card 🃏 component.
        </Text>
      </Card>
    </Page>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	201.34 KB (+0.29% 🔺)
polaris-react-esm	129.42 KB (+0.38% 🔺)
polaris-react-esnext	183.81 KB (+0.42% 🔺)
polaris-react-css	40.8 KB (+0.46% 🔺)

[laurkim]

Example usage of margin and padding with specific overrides.

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {Page, Box} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
      <Box
        background="background"
        border="radius-1"
        shadow="deep"
        padding="2"
        // uncomment the below line to test an override for padding left
        // paddingLeft="5"
        margin="2"
        // uncomment the below line to test an override for margin top
        // marginTop="5"
      >
        <h1>hello</h1>
      </Box>
    </Page>
  );
}

Example usage of border and borderRadius with specific overrides.

Copy-paste this code in playground/Playground.tsx:

import React from 'react';

import {Page, Box} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
      <Box
        padding="3"
        margin="2"
        borderRadius="radius-2"
        borderRadiusBottomRight="radius-4"
        borderRadiusTopRight="radius-4"
        border="dark"
        borderTop="base"
      >
        <h1>hello</h1>
      </Box>
    </Page>
  );
}

[alex-page]

Would we want to start with a more opinionated list? Then add flexibility later?

[laurkim]

I originally tried building Box out that way but was running into a lot of TS errors. I can revisit and see if I can get it working without @radix-ui/react-polymorphic package if we prefer that approach?

[alex-page]

I think initially if we can get this working without allowing all the HTML elements that would be ace.

[kyledurand]

This looking good so far! One other thing I noticed is that I can make a box with a dark background but can't change the text color. So the text gets lost. Can that be addressed within the Text component? (I haven't looked at it recently)

[laurkim]

This looking good so far! One other thing I noticed is that I can make a box with a dark background but can't change the text color. So the text gets lost. Can that be addressed within the Text component? (I haven't looked at it recently)

@kyledurand The Text component should support color but we've limited to four (success | critical | warning | subdued). Did the color prop on the component not work as expected?

[kyledurand]

Did the color prop on the component not work as expected?

I didn't try the text component but I think we should allow the same colors we do for background in a color prop for Box. Especially if we're limiting text to just those four variants.

[alex-page]

Happy to ship and iterate in the layout-foundations-prototype branch @laurkim

[laurkim]

Here are the two issues I've created to track the work discussed on this PR.
Box without polymorphic dependency
color prop

I'll create subsequent PRs to address them.