diff --git a/pages/column-layout/min-width.permutations.page.tsx b/pages/column-layout/min-width.permutations.page.tsx index ed9e90dde8..e078cdd469 100644 --- a/pages/column-layout/min-width.permutations.page.tsx +++ b/pages/column-layout/min-width.permutations.page.tsx @@ -21,6 +21,11 @@ const permutations = createPermutations([ columns: [1, 2, 3, 4], minColumnWidth: [200], }, + { + variant: ['default'], + columns: [5], + minColumnWidth: [undefined], + }, ]); export default function ColumnLayoutPermutationsPage() { diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index 01fbd65f7e..fed7c0e3fc 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -9361,8 +9361,7 @@ Note: This is not supported when used with \`minColumnWidth\`.", }, { "defaultValue": "1", - "description": "Specifies the number of columns in each grid row. -When \`minColumnWidth\` is not set, only up to 4 columns are supported.", + "description": "Specifies the number of columns in each grid row.", "name": "columns", "optional": true, "type": "number", @@ -9387,7 +9386,8 @@ use the \`id\` attribute, consider setting it on a parent element instead.", "description": "Use together with \`columns\` 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.", +and the maximum number of columns as defined by the \`columns\` property. +When not specified and \`columns\` is 5 or more, defaults to 1 pixel to enable responsive column sizing.", "name": "minColumnWidth", "optional": true, "type": "number", diff --git a/src/column-layout/__tests__/column-layout.test.tsx b/src/column-layout/__tests__/column-layout.test.tsx index 2556f5d52d..09dc9c0a38 100644 --- a/src/column-layout/__tests__/column-layout.test.tsx +++ b/src/column-layout/__tests__/column-layout.test.tsx @@ -27,6 +27,14 @@ describe('ColumnLayout component', () => { expect(wrapper.getElement()).toHaveClass(styles[`grid-columns-${columnCount}`]); }); }); + + it('uses flexible layout for more than 4 columns without minColumnWidth', () => { + const renderResult = render(); + const wrapper = createWrapper(renderResult.container); + expect(wrapper.getElement()).not.toHaveClass(styles['grid-columns-5']); + const flexibleGrid = wrapper.find('[class*="css-grid"]'); + expect(flexibleGrid).toBeTruthy(); + }); }); describe('borders property', () => { diff --git a/src/column-layout/__tests__/with-css.test.tsx b/src/column-layout/__tests__/with-css.test.tsx index fafa13f938..114a590534 100644 --- a/src/column-layout/__tests__/with-css.test.tsx +++ b/src/column-layout/__tests__/with-css.test.tsx @@ -59,4 +59,22 @@ describe('ColumnLayout (with CSS grid) component', () => { expect(getGridColumns()).toBe('repeat(4, minmax(0, 1fr))'); }); + + it('uses flexible layout for more than 4 columns without explicit minColumnWidth', () => { + const { wrapper, getGridColumns } = renderColumnLayout({ + columns: 5, + children: ( + <> +
+
+
+
+
+ + ), + }); + + expect(wrapper.getElement().childElementCount).toBe(5); + expect(getGridColumns()).toBe('repeat(5, minmax(0, 1fr))'); + }); }); diff --git a/src/column-layout/interfaces.ts b/src/column-layout/interfaces.ts index de3d69cee9..511fb3aee3 100644 --- a/src/column-layout/interfaces.ts +++ b/src/column-layout/interfaces.ts @@ -9,7 +9,6 @@ import { ColumnLayoutBreakpoint } from './internal'; export interface ColumnLayoutProps extends BaseComponentProps { /** * Specifies the number of columns in each grid row. - * When `minColumnWidth` is not set, only up to 4 columns are supported. */ columns?: number; @@ -35,6 +34,7 @@ export interface ColumnLayoutProps extends BaseComponentProps { * * 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. + * When not specified and `columns` is 5 or more, defaults to 1 pixel to enable responsive column sizing. */ minColumnWidth?: number; diff --git a/src/column-layout/internal.tsx b/src/column-layout/internal.tsx index cbc7c8cb85..365af66f44 100644 --- a/src/column-layout/internal.tsx +++ b/src/column-layout/internal.tsx @@ -32,12 +32,12 @@ export default function ColumnLayout({ return (
- {minColumnWidth ? ( + {minColumnWidth || columns > 4 ? (