From 31c37984ca91996019b770926c7f112cca05b53a Mon Sep 17 00:00:00 2001
From: Georgii Lobko <47106899+georgylobko@users.noreply.github.com>
Date: Thu, 12 Dec 2024 12:49:17 +0100
Subject: [PATCH] feat: minColumnWidth prop for KVP (#3106)

---
 pages/key-value-pairs/permutations.page.tsx           |  1 +
 .../__snapshots__/documenter.test.ts.snap             | 11 +++++++++++
 src/key-value-pairs/index.tsx                         | 10 +++++++++-
 src/key-value-pairs/interfaces.ts                     |  9 +++++++++
 src/key-value-pairs/internal.tsx                      |  8 +++++++-
 5 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/pages/key-value-pairs/permutations.page.tsx b/pages/key-value-pairs/permutations.page.tsx
index defa1d9d8e..122886af24 100644
--- a/pages/key-value-pairs/permutations.page.tsx
+++ b/pages/key-value-pairs/permutations.page.tsx
@@ -246,6 +246,7 @@ const permutations = createPermutations<KeyValuePairsProps>([
   },
   {
     columns: [4],
+    minColumnWidth: [undefined, 500],
     items: [
       [
         {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 39770740d4..266e6a9fa6 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -9474,6 +9474,17 @@ Each group definition has the following properties:
       "optional": false,
       "type": "ReadonlyArray<KeyValuePairsProps.Item>",
     },
+    {
+      "defaultValue": "150",
+      "description": "Use to specify the desired minimum width for each column in pixels.
+The number of columns is determined by the value of this property, the available space,
+and the maximum number of columns as defined by the \`columns\` property.
+If not set, defaults to 150.
+",
+      "name": "minColumnWidth",
+      "optional": true,
+      "type": "number",
+    },
   ],
   "regions": [],
   "releaseStatus": "stable",
diff --git a/src/key-value-pairs/index.tsx b/src/key-value-pairs/index.tsx
index 6531b2fc8b..c71e982e92 100644
--- a/src/key-value-pairs/index.tsx
+++ b/src/key-value-pairs/index.tsx
@@ -10,7 +10,14 @@ import InternalKeyValuePairs from './internal';
 
 export { KeyValuePairsProps };
 
-export default function KeyValuePairs({ columns = 1, items, ariaLabel, ariaLabelledby, ...rest }: KeyValuePairsProps) {
+export default function KeyValuePairs({
+  columns = 1,
+  items,
+  ariaLabel,
+  ariaLabelledby,
+  minColumnWidth = 150,
+  ...rest
+}: KeyValuePairsProps) {
   const { __internalRootRef } = useBaseComponent('KeyValuePairs', {
     props: { columns },
   });
@@ -22,6 +29,7 @@ export default function KeyValuePairs({ columns = 1, items, ariaLabel, ariaLabel
       items={items}
       ariaLabel={ariaLabel}
       ariaLabelledby={ariaLabelledby}
+      minColumnWidth={minColumnWidth}
       {...baseProps}
       ref={__internalRootRef}
     />
diff --git a/src/key-value-pairs/interfaces.ts b/src/key-value-pairs/interfaces.ts
index 952de5d23f..db6b21ddb3 100644
--- a/src/key-value-pairs/interfaces.ts
+++ b/src/key-value-pairs/interfaces.ts
@@ -39,6 +39,15 @@ export interface KeyValuePairsProps extends BaseComponentProps {
    * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
    */
   ariaLabelledby?: string;
+
+  /**
+   * Use to specify the desired minimum width for each column in pixels.
+   *
+   * The number of columns is determined by the value of this property, the available space,
+   * and the maximum number of columns as defined by the `columns` property.
+   * If not set, defaults to 150.
+   */
+  minColumnWidth?: number;
 }
 
 export namespace KeyValuePairsProps {
diff --git a/src/key-value-pairs/internal.tsx b/src/key-value-pairs/internal.tsx
index a1adac3d2e..432a9c14fa 100644
--- a/src/key-value-pairs/internal.tsx
+++ b/src/key-value-pairs/internal.tsx
@@ -45,6 +45,7 @@ const InternalKeyValuePairs = React.forwardRef(
       className,
       ariaLabel,
       ariaLabelledby,
+      minColumnWidth,
       ...rest
     }: KeyValuePairsProps & Required<Pick<KeyValuePairsProps, 'columns'>>,
     ref: React.Ref<HTMLDivElement>
@@ -62,7 +63,12 @@ const InternalKeyValuePairs = React.forwardRef(
           minColumnWidth={150} is set to use FlexibleColumnLayout which has only 1 nested div wrapper for column items,
           otherwise GridColumnLayout will be used, which has 2 nested div, therefore it is not a11y compatible for dl -> dt/dd relationship
         */}
-          <ColumnLayout __tagOverride="dl" columns={Math.min(columns, 4)} variant="text-grid" minColumnWidth={150}>
+          <ColumnLayout
+            __tagOverride="dl"
+            columns={Math.min(columns, 4)}
+            variant="text-grid"
+            minColumnWidth={minColumnWidth}
+          >
             {items.map((pair, index) => {
               if (pair.type === 'group') {
                 return (