From 092e4555e01fe5b0faa69237e883a6aac4d2907b Mon Sep 17 00:00:00 2001
From: Ryan Schingeck <97745931+ryanschingeck@users.noreply.github.com>
Date: Thu, 30 Nov 2023 09:36:38 -0500
Subject: [PATCH 1/2] adds maxWidth prop to SkeletonDisplayText

---
 .changeset/plenty-papayas-repair.md            |  5 +++++
 .../SkeletonDisplayText.scss                   | 11 ++++++-----
 .../SkeletonDisplayText.stories.tsx            |  4 ++++
 .../SkeletonDisplayText.tsx                    | 18 ++++++++++++++++--
 .../tests/SkeletonDisplayText.test.tsx         | 11 +++++++++++
 5 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/plenty-papayas-repair.md

diff --git a/.changeset/plenty-papayas-repair.md b/.changeset/plenty-papayas-repair.md
new file mode 100644
index 00000000000..63f74503069
--- /dev/null
+++ b/.changeset/plenty-papayas-repair.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `maxWidth` prop to SkeletonDisplayText component
diff --git a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
index fac0aff63f6..231ddce8348 100644
--- a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
+++ b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.scss
@@ -1,7 +1,5 @@
 @import '../../styles/common';
 
-$skeleton-display-text-max-width: 120px;
-
 @mixin skeleton-display-text-height {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   height: var(--pc-skeleton-display-text-height);
@@ -13,13 +11,16 @@ $skeleton-display-text-max-width: 120px;
 }
 
 .DisplayText {
-  // stylelint-disable -- Polaris component custom properties
+  // stylelint-disable-next-line -- Polaris component custom properties
   --pc-skeleton-display-text-height: var(--p-font-line-height-500);
+
+  // stylelint-disable-next-line -- Polaris component custom properties
   --pc-skeleton-display-text-height-not-condensed: var(
     --p-font-line-height-500
   );
-  // stylelint-enable
-  max-width: $skeleton-display-text-max-width;
+
+  // stylelint-disable-next-line -- Polaris component custom properties
+  max-width: var(--pc-skeleton-display-text-max-width, 120px);
 
   display: flex;
   background-color: var(--p-color-bg-fill-tertiary);
diff --git a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.stories.tsx b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.stories.tsx
index ee612ba32c6..bbbad977479 100644
--- a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.stories.tsx
+++ b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.stories.tsx
@@ -17,3 +17,7 @@ export function ExtraLarge() {
 export function Small() {
   return <SkeletonDisplayText size="small" />;
 }
+
+export function MaxWidth() {
+  return <SkeletonDisplayText maxWidth="80%" />;
+}
diff --git a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx
index d8247b5215c..02c31a33b30 100644
--- a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx
+++ b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
-import {classNames, variationName} from '../../utilities/css';
+import {
+  classNames,
+  sanitizeCustomProperties,
+  variationName,
+} from '../../utilities/css';
 
 import styles from './SkeletonDisplayText.scss';
 
@@ -12,15 +16,25 @@ export interface SkeletonDisplayTextProps {
    * @default 'medium'
    */
   size?: Size;
+  /**
+   * Adjusts max-width
+   * @default undefined
+   */
+  maxWidth?: `${number}ch` | `${number}%`;
 }
 
 export function SkeletonDisplayText({
   size = 'medium',
+  maxWidth,
 }: SkeletonDisplayTextProps) {
   const className = classNames(
     styles.DisplayText,
     size && styles[variationName('size', size)],
   );
 
-  return <div className={className} />;
+  const style = {
+    '--pc-skeleton-display-text-max-width': maxWidth ? maxWidth : undefined,
+  } as React.CSSProperties;
+
+  return <div className={className} style={sanitizeCustomProperties(style)} />;
 }
diff --git a/polaris-react/src/components/SkeletonDisplayText/tests/SkeletonDisplayText.test.tsx b/polaris-react/src/components/SkeletonDisplayText/tests/SkeletonDisplayText.test.tsx
index b5511bb9714..92efe6d31ee 100644
--- a/polaris-react/src/components/SkeletonDisplayText/tests/SkeletonDisplayText.test.tsx
+++ b/polaris-react/src/components/SkeletonDisplayText/tests/SkeletonDisplayText.test.tsx
@@ -8,4 +8,15 @@ describe('<SkeletonDisplayText />', () => {
     const skeletonBodyText = mountWithApp(<SkeletonDisplayText />);
     expect(skeletonBodyText).toContainReactComponent('div');
   });
+
+  it('renders with maxWidth prop', () => {
+    const skeletonBodyText = mountWithApp(
+      <SkeletonDisplayText maxWidth="75ch" />,
+    );
+    expect(skeletonBodyText).toContainReactComponent('div', {
+      style: {
+        '--pc-skeleton-display-text-max-width': '75ch',
+      } as React.CSSProperties,
+    });
+  });
 });

From 602b44ef16101567d86b33595a0537b89b7ac75f Mon Sep 17 00:00:00 2001
From: Ryan Schingeck <97745931+ryanschingeck@users.noreply.github.com>
Date: Fri, 1 Dec 2023 15:32:53 -0500
Subject: [PATCH 2/2] fixes based on PR feedback

---
 .../components/SkeletonDisplayText/SkeletonDisplayText.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx
index 02c31a33b30..daea1d25b5c 100644
--- a/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx
+++ b/polaris-react/src/components/SkeletonDisplayText/SkeletonDisplayText.tsx
@@ -17,8 +17,8 @@ export interface SkeletonDisplayTextProps {
    */
   size?: Size;
   /**
-   * Adjusts max-width
-   * @default undefined
+   * Maxium width of the text
+   * @default '120px'
    */
   maxWidth?: `${number}ch` | `${number}%`;
 }
@@ -33,7 +33,7 @@ export function SkeletonDisplayText({
   );
 
   const style = {
-    '--pc-skeleton-display-text-max-width': maxWidth ? maxWidth : undefined,
+    '--pc-skeleton-display-text-max-width': maxWidth ?? undefined,
   } as React.CSSProperties;
 
   return <div className={className} style={sanitizeCustomProperties(style)} />;