fix: Column layout text wrapping (#2524)

pages/key-value-pairs/text-wrap.page.tsx

@@ -0,0 +1,79 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import CopyToClipboard from '~components/copy-to-clipboard';
+import KeyValuePairs from '~components/key-value-pairs';
+import Link from '~components/link';
+import ProgressBar from '~components/progress-bar';
+import StatusIndicator from '~components/status-indicator';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+export default function () {
+  return (
+    <article>
+      <h1>Text wrapping example</h1>
+      <ScreenshotArea>
+        <h2>Key-value-pairs with a long description</h2>
+        <div style={{ maxWidth: '600px' }}>
+          <KeyValuePairs
+            columns={3}
+            items={[
+              {
+                label: 'Distribution ID',
+                value:
+                  'E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4E1WG1ZNPRXT0D4',
+                info: (
+                  <Link variant="info" href="#">
+                    Info
+                  </Link>
+                ),
+              },
+              {
+                label: 'ARN',
+                value: (
+                  <CopyToClipboard
+                    copyButtonAriaLabel="Copy ARN"
+                    copyErrorText="ARN failed to copy"
+                    copySuccessText="ARN copied"
+                    textToCopy="arn:service23G24::111122223333:distribution/23E1WG1ZNPRXT0D4"
+                    variant="inline"
+                  />
+                ),
+              },
+              {
+                label: 'Status',
+                value: <StatusIndicator>Available</StatusIndicator>,
+              },
+              {
+                label: 'SSL Certificate',
+                id: 'ssl-certificate-id',
+                value: (
+                  <ProgressBar
+                    value={30}
+                    additionalInfo="Additional information"
+                    description="Progress bar description"
+                    ariaLabelledby="ssl-certificate-id"
+                  />
+                ),
+              },
+              {
+                label: 'Price class',
+                value: 'Use only US, Canada, Europe',
+              },
+              {
+                label: 'CNAMEs',
+                value: (
+                  <Link external={true} href="#">
+                    abc.service23G24.xyz
+                  </Link>
+                ),
+              },
+            ]}
+          />
+        </div>
+      </ScreenshotArea>
+    </article>
+  );
+}

src/column-layout/__tests__/with-css.test.tsx

@@ -38,7 +38,7 @@ describe('ColumnLayout (with CSS grid) component', () => {
     });
 
     expect(wrapper.getElement().childElementCount).toBe(4);
-    expect(getGridColumns()).toBe('repeat(2, 1fr)');
+    expect(getGridColumns()).toBe('repeat(2, minmax(0, 1fr))');
   });
 
   it('wraps columns if necessary', () => {
@@ -57,6 +57,6 @@ describe('ColumnLayout (with CSS grid) component', () => {
       ),
     });
 
-    expect(getGridColumns()).toBe('repeat(4, 1fr)');
+    expect(getGridColumns()).toBe('repeat(4, minmax(0, 1fr))');
   });
 });

src/column-layout/flexible-column-layout/index.tsx

@@ -64,7 +64,7 @@ export default function FlexibleColumnLayout({
         styles[`grid-variant-${variant}`],
         shouldDisableGutters && [styles['grid-no-gutters']]
       )}
-      style={{ gridTemplateColumns: `repeat(${columnCount}, 1fr)` }}
+      style={{ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }}
     >
       {flattenedChildren.map((child, i) => {
         // If this react child is a primitive value, the key will be undefined