[SkeletonBodyText] Add wrapper to SkeletonBodyText

[andy-schneidr]

Wrap individual lines of SkeletonBodyText in a div with width 100% This allows the lines to fill available space in cases when width isn't specified, as an item in a HorizontalStack for example.

WHY are these changes introduced?

Fixes #9703

WHAT is this pull request doing?

Adds a <div width=100%> wrapper around <SkeletonBodyText> lines, so that they'll fill available horizontal space.

Before:

After:

As a note, in the example <SkeletonThumbnail> has a tendency to get squished in <HorizontalStack>s. Is this something we want to address? The most straightforward workaround I've found is to just wrap it in a <div>, no other styling required.

How to 🎩

With the changes pulled down, run yarn dev and take a look at the examples under SkeletonBodyText and SkeletonPage - There shouldn't be any changes, with the exception of SkeletonBodyText - Default - The last line shows with a width of 80% now. I think this is closer to the intended behaviour, looking at the difference between the example in the doc and how it looks in the code sandbox 😮

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

import React from 'react';

import {
  Card,
  Text,
  HorizontalStack,
  Layout,
  LegacyStack,
  Page,
  SkeletonBodyText,
  SkeletonThumbnail,
} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <Card>
        <Text variant="headingMd" as="h2">
          3 Lines, LegacyStack with LegacyStack.Item fill :D
        </Text>
        <Layout.Section />
        <LegacyStack wrap={false}>
          <SkeletonThumbnail size="small" />
          <LegacyStack.Item fill>
            <SkeletonBodyText lines={3} />
          </LegacyStack.Item>
        </LegacyStack>
      </Card>
      <Layout.Section />
      <Card>
        <Text variant="headingMd" as="h2">
          3 lines, in a HorizontalStack
        </Text>
        <Layout.Section />
        <HorizontalStack wrap={false} blockAlign="start" gap="4">
          <SkeletonThumbnail size="small" />
          <SkeletonBodyText lines={3} />
        </HorizontalStack>
      </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

[andy-schneidr]

@jesstelford Feel free to add/remove reviewers to this at your leisure, I'm a bit unfamiliar as to who else would be a good candidate! Also, let me know if you'd like to see a changelog entry for this.

[jesstelford]

This looks good to me, but it needs a changset (patch) for the @shopify/polaris package:

# in the root
yarn changeset

[andy-schneidr]

This looks good to me, but it needs a changeset (patch) for the @shopify/polaris package

Thanks @jesstelford! I've added a changeset 😄 Let me know if it needs any changes.