adds maxWidth prop to SkeletonDisplayText

.changeset/plenty-papayas-repair.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `maxWidth` prop to SkeletonDisplayText component

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);

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%" />;
+}

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;
+  /**
+   * Maxium width of the text
+   * @default '120px'
+   */
+  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 ?? undefined,
+  } as React.CSSProperties;
+
+  return <div className={className} style={sanitizeCustomProperties(style)} />;
 }

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,
+    });
+  });
 });