From 519a9421fa4b4b0374e148135acbe089554d3843 Mon Sep 17 00:00:00 2001
From: Andy Schneider <andy.schneider@shopify.com>
Date: Wed, 19 Jul 2023 12:11:41 -0600
Subject: [PATCH] Add wrapper to SkeletonBodyText

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.
---
 .changeset/sixty-ties-lick.md                             | 5 +++++
 .../src/components/SkeletonBodyText/SkeletonBodyText.scss | 4 ++++
 .../src/components/SkeletonBodyText/SkeletonBodyText.tsx  | 4 +++-
 .../SkeletonBodyText/tests/SkeletonBodyText.test.tsx      | 8 ++++++--
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/sixty-ties-lick.md

diff --git a/.changeset/sixty-ties-lick.md b/.changeset/sixty-ties-lick.md
new file mode 100644
index 00000000000..3334008f3c7
--- /dev/null
+++ b/.changeset/sixty-ties-lick.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Wrap SkeletonBodyText lines in a div (width 100%)
diff --git a/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss b/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
index b9f61da5a20..560ca0ebf55 100644
--- a/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
+++ b/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.scss
@@ -2,6 +2,10 @@
 
 $body-text-last-line-width: 80%;
 
+.SkeletonBodyTextContainer {
+  width: 100%;
+}
+
 .SkeletonBodyText {
   height: var(--p-space-2);
   display: flex;
diff --git a/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.tsx b/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.tsx
index 920c80cd014..cedf34e514a 100644
--- a/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.tsx
+++ b/polaris-react/src/components/SkeletonBodyText/SkeletonBodyText.tsx
@@ -17,5 +17,7 @@ export function SkeletonBodyText({lines = 3}: SkeletonBodyTextProps) {
     bodyTextLines.push(<div className={styles.SkeletonBodyText} key={i} />);
   }
 
-  return <>{bodyTextLines}</>;
+  return (
+    <div className={styles.SkeletonBodyTextContainer}>{bodyTextLines}</div>
+  );
 }
diff --git a/polaris-react/src/components/SkeletonBodyText/tests/SkeletonBodyText.test.tsx b/polaris-react/src/components/SkeletonBodyText/tests/SkeletonBodyText.test.tsx
index 920b556613b..72576122230 100644
--- a/polaris-react/src/components/SkeletonBodyText/tests/SkeletonBodyText.test.tsx
+++ b/polaris-react/src/components/SkeletonBodyText/tests/SkeletonBodyText.test.tsx
@@ -6,11 +6,15 @@ import {SkeletonBodyText} from '../SkeletonBodyText';
 describe('<SkeletonBodyText />', () => {
   it('renders the amount of lines provided', () => {
     const skeletonBodyText = mountWithApp(<SkeletonBodyText lines={2} />);
-    expect(skeletonBodyText.findAll('div')).toHaveLength(2);
+    expect(
+      skeletonBodyText.findAll('div', {className: 'SkeletonBodyText'}),
+    ).toHaveLength(2);
   });
 
   it('renders 3 lines if none are provided', () => {
     const skeletonBodyText = mountWithApp(<SkeletonBodyText />);
-    expect(skeletonBodyText.findAll('div')).toHaveLength(3);
+    expect(
+      skeletonBodyText.findAll('div', {className: 'SkeletonBodyText'}),
+    ).toHaveLength(3);
   });
 });