feat: minColumnWidth prop for KVP (#3106)

pages/key-value-pairs/permutations.page.tsx

@@ -246,6 +246,7 @@ const permutations = createPermutations<KeyValuePairsProps>([
   },
   {
     columns: [4],
+    minColumnWidth: [undefined, 500],
     items: [
       [
         {

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",

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}
     />

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 {

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 (