[Box] Add support for paddingInline and paddingBlock

[laurkim]

WHY are these changes introduced?

Resolves #10617.

WHAT is this pull request doing?

Adds:

• support for paddingInline and paddingBlock to reduce the need to set the value redundantly with multiple props
• updates to Box padding documentation on style guide and storybook
• fixes the text color on layout component style guide examples for accessibility
  Box padding documentation — before

  
  Box padding documentation — after

  

How to 🎩

Example that tests different use cases for Box padding props in the Playground included below.

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';

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

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
      <BlockStack gap="800">
        <BlockStack gap="200">
          <Text as="h1" variant="headingLg">
            Box padding — default
          </Text>
          <Box background="bg-surface" borderWidth="025" borderColor="border">
            <Text as="p" variant="bodyMd" truncate>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              aliquet libero et metus tempus, sit amet malesuada justo posuere.
              Nulla egestas, diam et dapibus maximus, nisl neque tempus sapien,
              semper tincidunt nulla elit vitae dui. Nulla scelerisque porta ex
              at mattis. Phasellus tempor augue nec eros egestas laoreet.
            </Text>
          </Box>
        </BlockStack>

        <BlockStack gap="200">
          <Text as="h1" variant="headingLg">
            Box padding — paddingBlock only
          </Text>
          <Box
            background="bg-fill-magic-secondary"
            paddingBlock="2400"
            borderWidth="025"
            borderColor="border"
          >
            <Text as="p" variant="bodyMd" truncate>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              aliquet libero et metus tempus, sit amet malesuada justo posuere.
              Nulla egestas, diam et dapibus maximus, nisl neque tempus sapien,
              semper tincidunt nulla elit vitae dui. Nulla scelerisque porta ex
              at mattis. Phasellus tempor augue nec eros egestas laoreet.
            </Text>
          </Box>
        </BlockStack>

        <BlockStack gap="200">
          <Text as="h1" variant="headingLg">
            Box padding — paddingBlock responsive (xs and lg breakpoint)
          </Text>
          <Box
            background="bg-fill-magic-secondary"
            paddingBlock={{xs: '0', lg: '2400'}}
            borderWidth="025"
            borderColor="border"
          >
            <Text as="p" variant="bodyMd" truncate>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              aliquet libero et metus tempus, sit amet malesuada justo posuere.
              Nulla egestas, diam et dapibus maximus, nisl neque tempus sapien,
              semper tincidunt nulla elit vitae dui. Nulla scelerisque porta ex
              at mattis. Phasellus tempor augue nec eros egestas laoreet.
            </Text>
          </Box>
        </BlockStack>

        <BlockStack gap="200">
          <Text as="h1" variant="headingLg">
            Box padding — paddingBlock and paddingBlockStart (different values)
          </Text>
          <Box
            background="bg-fill-magic-secondary"
            paddingBlock="2400"
            paddingBlockEnd="800"
            borderWidth="025"
            borderColor="border"
          >
            <Text as="p" variant="bodyMd" truncate>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              aliquet libero et metus tempus, sit amet malesuada justo posuere.
              Nulla egestas, diam et dapibus maximus, nisl neque tempus sapien,
              semper tincidunt nulla elit vitae dui. Nulla scelerisque porta ex
              at mattis. Phasellus tempor augue nec eros egestas laoreet.
            </Text>
          </Box>
        </BlockStack>

        <BlockStack gap="200">
          <Text as="h1" variant="headingLg">
            Box padding — paddingInline only
          </Text>
          <Box
            background="bg-fill-warning-secondary"
            paddingInline="3200"
            borderWidth="025"
            borderColor="border"
          >
            <Text as="p" variant="bodyMd" truncate>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              aliquet libero et metus tempus, sit amet malesuada justo posuere.
              Nulla egestas, diam et dapibus maximus, nisl neque tempus sapien,
              semper tincidunt nulla elit vitae dui. Nulla scelerisque porta ex
              at mattis. Phasellus tempor augue nec eros egestas laoreet.
            </Text>
          </Box>
        </BlockStack>

        <BlockStack gap="200">
          <Text as="h1" variant="headingLg">
            Box padding — paddingInline responsive (xs and lg breakpoint)
          </Text>
          <Box
            background="bg-fill-warning-secondary"
            paddingInline={{xs: '0', lg: '3200'}}
            borderWidth="025"
            borderColor="border"
          >
            <Text as="p" variant="bodyMd" truncate>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              aliquet libero et metus tempus, sit amet malesuada justo posuere.
              Nulla egestas, diam et dapibus maximus, nisl neque tempus sapien,
              semper tincidunt nulla elit vitae dui. Nulla scelerisque porta ex
              at mattis. Phasellus tempor augue nec eros egestas laoreet.
            </Text>
          </Box>
        </BlockStack>

        <BlockStack gap="200">
          <Text as="h1" variant="headingLg">
            Box padding — paddingInline and paddingInlineEnd (different values)
          </Text>
          <Box
            background="bg-fill-warning-secondary"
            paddingInline="3200"
            paddingInlineEnd="800"
            borderWidth="025"
            borderColor="border"
          >
            <Text as="p" variant="bodyMd" truncate>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              aliquet libero et metus tempus, sit amet malesuada justo posuere.
              Nulla egestas, diam et dapibus maximus, nisl neque tempus sapien,
              semper tincidunt nulla elit vitae dui. Nulla scelerisque porta ex
              at mattis. Phasellus tempor augue nec eros egestas laoreet.
            </Text>
          </Box>
        </BlockStack>

        <BlockStack gap="200">
          <Text as="h1" variant="headingLg">
            Box padding — padding only
          </Text>
          <Box
            background="bg-surface-success"
            padding="500"
            borderWidth="025"
            borderColor="border"
          >
            <Text as="p" variant="bodyMd" truncate>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              aliquet libero et metus tempus, sit amet malesuada justo posuere.
              Nulla egestas, diam et dapibus maximus, nisl neque tempus sapien,
              semper tincidunt nulla elit vitae dui. Nulla scelerisque porta ex
              at mattis. Phasellus tempor augue nec eros egestas laoreet.
            </Text>
          </Box>
        </BlockStack>

        <BlockStack gap="200">
          <Text as="h1" variant="headingLg">
            Box padding — padding responsive (xs and lg breakpoint)
          </Text>
          <Box
            background="bg-surface-success"
            padding={{xs: '0', lg: '500'}}
            borderWidth="025"
            borderColor="border"
          >
            <Text as="p" variant="bodyMd" truncate>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              aliquet libero et metus tempus, sit amet malesuada justo posuere.
              Nulla egestas, diam et dapibus maximus, nisl neque tempus sapien,
              semper tincidunt nulla elit vitae dui. Nulla scelerisque porta ex
              at mattis. Phasellus tempor augue nec eros egestas laoreet.
            </Text>
          </Box>
        </BlockStack>

        <BlockStack gap="200">
          <Text as="h1" variant="headingLg">
            Box padding — paddingInlineStart, paddingInlineEnd,
            paddingBlockStart, paddingBlockEnd (different values)
          </Text>
          <Box
            background="bg-fill-critical-secondary"
            paddingInlineStart="200"
            paddingInlineEnd="400"
            paddingBlockStart="600"
            paddingBlockEnd="800"
            borderWidth="025"
            borderColor="border"
          >
            <Text as="p" variant="bodyMd" truncate>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              aliquet libero et metus tempus, sit amet malesuada justo posuere.
              Nulla egestas, diam et dapibus maximus, nisl neque tempus sapien,
              semper tincidunt nulla elit vitae dui. Nulla scelerisque porta ex
              at mattis. Phasellus tempor augue nec eros egestas laoreet.
            </Text>
          </Box>
        </BlockStack>

        <BlockStack gap="200">
          <Text as="h1" variant="headingLg">
            Box padding — paddingInlineStart, paddingInlineEnd,
            paddingBlockStart, paddingBlockEnd responsive (xs and lg breakpoint)
          </Text>
          <Box
            background="bg-fill-critical-secondary"
            paddingInlineStart={{xs: '0', lg: '200'}}
            paddingInlineEnd={{xs: '0', lg: '400'}}
            paddingBlockStart={{xs: '0', lg: '600'}}
            paddingBlockEnd={{xs: '0', lg: '800'}}
            borderWidth="025"
            borderColor="border"
          >
            <Text as="p" variant="bodyMd" truncate>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
              aliquet libero et metus tempus, sit amet malesuada justo posuere.
              Nulla egestas, diam et dapibus maximus, nisl neque tempus sapien,
              semper tincidunt nulla elit vitae dui. Nulla scelerisque porta ex
              at mattis. Phasellus tempor augue nec eros egestas laoreet.
            </Text>
          </Box>
        </BlockStack>
      </BlockStack>
    </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

[kyledurand]

Nice 👍