[Layout] AlphaStack add paddingBlockStart and paddingBlockEnd

[aveline]

WHY are these changes introduced?

Support adding spacing at the top and bottom of a stack.

WHAT is this pull request doing?

Add paddingBlockStart and paddingBlockEnd props to allow adding spacing at the top or bottom of a stack.

• Values can be responsive by breakpoint

Examples

How to 🎩

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

import React from 'react';

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

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
      <Box background="surface-subdued" border="dark">
        <AlphaStack
          gap="4"
          paddingBlockStart={{sm: '2', md: '6'}}
          paddingBlockEnd={{sm: '2', md: '6'}}
        >
          <Box background="surface-attention" padding="10" />
          <Box background="surface-highlight" padding="10" />
          <Box background="surface-attention" padding="10" />
        </AlphaStack>
      </Box>
    </Page>
  );
}

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	221.19 KB (+0.02% 🔺)
polaris-react-esm	140.7 KB (+0.02% 🔺)
polaris-react-esnext	197.4 KB (+0.1% 🔺)
polaris-react-css	43.02 KB (+0.39% 🔺)

[aveline]

Closing as we don't have alignment on this change as it expands the responsibility of Stack.