[Layout foundations] Update AlphaStack component docs and guidance

[chazdean]

WHY are these changes introduced?

Fixes #6904

WHAT is this pull request doing?

Updates the AlphaStack component docs and guidance

Examples:

Default

function AlphaStackExample() {
  return (
    <AlphaStack>
      <Placeholder width="320" label="Stack child" />
      <Placeholder width="320" />
      <Placeholder width="320" />
    </AlphaStack>
  );
}

Spacing

function AlphaStackWithSpacingExample() {
  return (
    <SpacingBackground width="320">
      <AlphaStack spacing="5">
        <Placeholder width="320" label="Stack child" />
        <Placeholder width="320" />
        <Placeholder width="320" />
      </AlphaStack>
    </SpacingBackground>
  );
}

Full width

function AlphaStackWithFullWidthChildrenExample() {
  return (
    <AlphaStack fullWidth>
      <Placeholder label="Stack child" childWidth="100%" />
      <Placeholder />
      <Placeholder />
    </AlphaStack>
  );
}

Alignment

function AlphaStackWithAlignExample() {
  return (
    <Page>
      <Box paddingBottom="20">
        <AlphaStack align="start">
          <Placeholder width="320" label="Start" childAlign="start" />
          <Placeholder width="320" />
          <Placeholder width="320" />
        </AlphaStack>
      </Box>
      <Box paddingBottom="20">
        <AlphaStack align="center">
          <AlphaStack>
            <Placeholder width="320" label="Center" childAlign="center" />
            <Placeholder width="320" />
            <Placeholder width="320" />
          </AlphaStack>
        </AlphaStack>
      </Box>
      <Box>
        <AlphaStack align="end">
          <Placeholder width="320" label="End" childAlign="end" />
          <Placeholder width="320" />
          <Placeholder width="320" />
        </AlphaStack>
      </Box>
    </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

[chazdean]

/snapit

[github-actions]

🫰✨ Thanks @chazdean! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221020112639

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20221020112639

yarn add @shopify/polaris@0.0.0-snapshot-release-20221020112639

[aveline]

Nice work @chazdean 🎉
The examples look much cleaner with the placeholders as components. My only thought is that since the purple #7B47F1 gets reused, perhaps make it a shared custom property?

[sarahill]

This is looking good! I am wondering if we can tighten the stripes a bit? I don't think it needs to block merging this in but just something to tighten up if we can but we can circle back. Not critical.

[laurkim]

Awesome job @chazdean! 💯
Looks good locally, I just added small suggestion re: changeset since we got rid of ExampleStyleGuideComponents.