Skip to content

feat: Use flexible layout for columns > 4 without minColumnWidth#4260

Open
ekatza wants to merge 4 commits intocloudscape-design:mainfrom
ekatza:column-layout-5plus-support
Open

feat: Use flexible layout for columns > 4 without minColumnWidth#4260
ekatza wants to merge 4 commits intocloudscape-design:mainfrom
ekatza:column-layout-5plus-support

Conversation

@ekatza
Copy link

@ekatza ekatza commented Feb 16, 2026

Description

This change enables ColumnLayout to automatically use flexible layout when more than 4 columns are specified without an explicit minColumnWidth prop. Previously, flexible layout was only used when minColumnWidth was set, limiting the component to 4 columns maximum in grid mode.

The change modifies the condition in src/column-layout/internal.tsx to use FlexibleColumnLayout when either minColumnWidth is provided OR columns > 4.

Related links, issue #, if available: AWSUI-61702

How has this been tested?

  • Added unit test in src/column-layout/__tests__/column-layout.test.tsx verifying that 5 columns render correctly without minColumnWidth
  • Added integration test in src/column-layout/__tests__/with-css.test.tsx verifying flexible layout is used with 5 columns
  • Added test case to pages/column-layout/min-width.permutations.page.tsx for visual validation

To validate manually:

  1. View the deployed dev pages from the CI pipeline (click "View deployment" link)
  2. Navigate to /light/column-layout/min-width-permutations
  3. Verify the 5-column layout renders correctly using flexible layout
Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates. - Updated JSDoc comments in interfaces.ts to remove 4-column limitation and document behavior for 5+ columns
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md. - Fully backward-compatible; only affects new use case (columns > 4 without minColumnWidth). Previous 5+ columns without minColumnWidth set was not supported.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md. - Uses existing FlexibleColumnLayout implementation
  • Changes were manually tested for accessibility, see accessibility guidelines. - Uses existing accessible FlexibleColumnLayout component

Security

Testing

  • Changes are covered with new/existing unit tests? - New unit test added
  • Changes are covered with new/existing integration tests? - n/a - component has no integration tests; unit tests should be sufficient for this change

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@ekatza ekatza requested a review from a team as a code owner February 16, 2026 23:19
@ekatza ekatza requested review from NathanZlion and removed request for a team February 16, 2026 23:19
@SpyZzey SpyZzey changed the title Use flexible layout for columns > 4 without minColumnWidth feat: Use flexible layout for columns > 4 without minColumnWidth Feb 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant