[Box] Use logical properties and use single custom property where possible

[kyledurand]

This change reduces markup for the following properties:

<Box padding="1" borderRadius="1" border="dark">Hello</Box>

Markup before:

Markup after:

Make sure to 🎩 with nested elements

Box playground

import React from 'react';

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

const props = {background: 'surface-attention' as BoxProps['background']};

export function Playground() {
  return (
    <Page title="Playground">
      <Box padding="2">
        <AlphaStack>
          <Box padding="3" {...props}>
            padding
          </Box>
          <Box paddingInlineStart="3" {...props}>
            paddingInlineStart
          </Box>
          <Box paddingInlineEnd="3" {...props}>
            paddingInlineEnd
          </Box>
          <Box paddingBlockStart="3" {...props}>
            paddingBlockStart
          </Box>
          <Box paddingBlockEnd="3" {...props}>
            paddingBlockEnd
          </Box>

          <hr style={{width: '100%'}} />

          <Box border="dark" {...props}>
            border
          </Box>
          <Box borderInlineStart="dark" {...props}>
            borderInlineStart
          </Box>
          <Box borderInlineEnd="dark" {...props}>
            borderInlineEnd
          </Box>
          <Box borderBlockStart="dark" {...props}>
            borderBlockStart
          </Box>
          <Box borderBlockEnd="dark" {...props}>
            borderBlockEnd
          </Box>

          <hr style={{width: '100%'}} />

          <Box borderRadius="4" {...props}>
            borderRadius
          </Box>
          <Box borderRadiusStartStart="4" {...props}>
            borderRadiusStartStart
          </Box>
          <Box borderRadiusStartEnd="4" {...props}>
            borderRadiusStartEnd
          </Box>
          <Box borderRadiusEndStart="4" {...props}>
            borderRadiusEndStart
          </Box>
          <Box borderRadiusEndEnd="4" {...props}>
            borderRadiusEndEnd
          </Box>
        </AlphaStack>
      </Box>
    </Page>
  );
}

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	209.44 KB (-0.03% 🔽)
polaris-react-esm	135.84 KB (-0.04% 🔽)
polaris-react-esnext	191.42 KB (-0.04% 🔽)
polaris-react-css	41.71 KB (-0.03% 🔽)

[laurkim]

I think this would be a major change, not patch.
Because we're changing the prop names, all the places that use Box in this repo (and subsequently Shopify/web when this is released) will have to be updated to use the new prop names.

[kyledurand]

I think it's ok to break alpha component props in non major releases, that's why we created the alpha status for Grid. We'll just have to make sure we address these issues where they crop up. No changes needed within our repo

Still an Alpha component so okay to change props in non-major release

[laurkim]

💯
Changes lgtm, just needs a small update to the AlphaCard.test.tsx file for the failing node check 👍

[laurkim]

Tophatted and lgtm 💯
I think we'd just need to merge the version packages PR after this so that the style guide has the updated styling.

[aveline]

Nice! I noticed it's missing a Box.stories.tsx file. Maybe we should add one?