Skip to content

[Content List] Column layout props, sticky actions, and title click handlers#264203

Merged
clintandrewhall merged 5 commits into
elastic:mainfrom
clintandrewhall:content-list/column-polish
Apr 22, 2026
Merged

[Content List] Column layout props, sticky actions, and title click handlers#264203
clintandrewhall merged 5 commits into
elastic:mainfrom
clintandrewhall:content-list/column-polish

Conversation

@clintandrewhall
Copy link
Copy Markdown
Contributor

@clintandrewhall clintandrewhall commented Apr 17, 2026

Summary

Standardizes column sizing across all Content List table presets and adds click handling to Column.Name.

  • Introduces ColumnLayoutProps (width, minWidth, maxWidth, truncateText) shared by all column presets and the generic Column component, replacing the per-preset width?: string prop.
  • Actions column auto-computes a default width from action count and is sticky by default for horizontal-scrolling tables.
  • Adds scrollableInline and responsiveBreakpoint as props on ContentListTable with opinionated defaults (true and false respectively) to support sticky columns. Consumers can override if needed.
  • Adds onClick and useHref props to Column.Name, threaded through NameCellNameCellTitle. When both href and onClick are present, modifier clicks follow the href while plain clicks call onClick.
  • Deduplicates NameCellTitle render branches from four to two.
  • Adds Storybook controls for scrollableInline and responsiveBreakpoint to the Core Features story.

Changes

All changes are scoped to @kbn/content-list-table and @kbn/content-list-docs.

Area What changed
layout.ts (new) ColumnLayoutProps type and getColumnLayoutProps helper — standardizes width/minWidth/maxWidth/truncateText across columns.
part.ts Generic Column component extends ColumnLayoutProps.
Name NameColumnProps extends ColumnLayoutProps, adds onClick/useHref. NameCell and NameCellTitle thread these through. NameCellTitle collapsed from 4 render branches to 2.
Actions Extends layout props, auto-computes default width from action count, sticky by default.
UpdatedAt, Starred, CreatedBy Extend ColumnLayoutProps (or the relevant subset for non-text columns).
Table New scrollableInline (default true) and responsiveBreakpoint (default false) props on ContentListTable, passed through to EuiBasicTable. Defaults enable horizontal scrolling and disable mobile card layout, which is required for sticky columns and does not support Content List features like selection, tags, and stars.
Storybook Core Features story adds scrollableInline and responsiveBreakpoint as Storybook controls.
Tests All builders, cell_title, and use_columns tests updated.
README Updated code examples and documentation for layout props and onClick/useHref.

Test plan

  • @kbn/content-list-table unit tests pass (155/155).
  • Verify sticky actions column with horizontal overflow in Storybook.
  • Verify Column.Name onClick fires on plain click, modifier clicks follow href.
  • Toggle scrollableInline off in Storybook controls — table should no longer scroll horizontally.
  • Toggle responsiveBreakpoint on in Storybook controls — table should collapse to cards on narrow viewports.

@clintandrewhall clintandrewhall force-pushed the content-list/column-polish branch 4 times, most recently from ddd8d30 to 059213b Compare April 21, 2026 01:35
@clintandrewhall clintandrewhall added review release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// v9.5.0 labels Apr 21, 2026
@clintandrewhall clintandrewhall marked this pull request as ready for review April 21, 2026 01:35
@clintandrewhall clintandrewhall requested a review from a team as a code owner April 21, 2026 01:35
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

Copy link
Copy Markdown
Member

@kowalczyk-krzysztof kowalczyk-krzysztof left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some nitpick comments, otherwise LGTM

…eMap comment.

- Rename `useHref` prop to `shouldUseHref` across `NameCellTitle`, `NameCell`, and `NameColumnProps` to avoid misleading React hook naming convention.
- Update comment on `defaultWidth` calculation in `buildActionsColumn` to reference `euiButtonSizeMap`'s `xs.height` (`euiTheme.size.l`) as the source of the 24px constant.
@clintandrewhall clintandrewhall force-pushed the content-list/column-polish branch from 57c212c to 7acde4d Compare April 21, 2026 14:33
kibanamachine and others added 2 commits April 21, 2026 15:00
… undefined.

When `shouldUseHref={true}` but `getHref` is absent or returns `undefined`,
the early-return guard was checking the `useHref` flag instead of whether
`href` actually resolved to a value. A Cmd/Ctrl-click would exit early with
no URL to follow and `onClick` never called. Change the guard to `if (href &&
!isPlainPrimaryClick(event))` so the pass-through only fires when there is a
real href. Adds a regression test for the no-href path.
@clintandrewhall clintandrewhall force-pushed the content-list/column-polish branch from 9a0deb8 to 3ce035c Compare April 21, 2026 15:48
@elasticmachine
Copy link
Copy Markdown
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] Jest Tests #5 / SelectedFilters should render properly

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
@kbn/content-list-table 37 39 +2

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id before after diff
@kbn/content-list-table 0 1 +1
Unknown metric groups

API count

id before after diff
@kbn/content-list-table 144 148 +4

ESLint disabled line counts

id before after diff
@kbn/content-list-table 1 2 +1

Total ESLint disabled count

id before after diff
@kbn/content-list-table 1 2 +1

@clintandrewhall clintandrewhall merged commit 887bf0b into elastic:main Apr 22, 2026
19 checks passed
@clintandrewhall clintandrewhall deleted the content-list/column-polish branch April 22, 2026 00:49
mbondyra added a commit to mbondyra/kibana that referenced this pull request Apr 22, 2026
…sationChanges23

* commit '9a7b717c662d1c904052bc59f0e5a81daab87c7f': (145 commits)
  Upgrade EUI to v114.2.0 (elastic#264550)
  [Entity Analytics] Add missing OpenAPI descriptions and examples to p… (elastic#264778)
  [Entity Resolution] Clarify CSV upload result for already-linked entities (elastic#264689)
  [AI Infra] Fix failing GenAI Settings Scout tests (elastic#260496)
  [Agent Builder] [Bug Bash] OAuth connector settings mention fields that are not there (elastic#264756)
  [performance] process-wide cache for advanced settings lookup (elastic#262618)
  [CI] Update limits.yml for securitySolution (elastic#264946)
  [SLO] Fix APM embeddable ids (elastic#264750)
  [EDR Workflows] Unify artifacts empty state buttons (elastic#264389)
  [Alert Triage workflow] Adds security.buildAlertEntityGraph and security.renderAlertNarrative… (elastic#259159)
  [SigEvents] Add KI feature identification endpoints and refactor task to use shared service (elastic#263528)
  [Scout] Migrate Data Views API tests from FTR - Part5 (elastic#264088)
  [Cases] Apply shared extended_fields path util server side (elastic#264706)
  [Lens as code] Fix metric trendline (elastic#264777)
  [api-docs] 2026-04-22 Daily api_docs build (elastic#264882)
  [Scout] Update test config manifests (elastic#264575)
  [workflows_management] Lazy-load Zod connector schemas to cut idle memory (elastic#264283)
  [ES|QL] Fix ES|QL columns reset race during active fetch (elastic#263947)
  [Content List] Column layout props, sticky actions, and title click handlers (elastic#264203)
  [Lens as code] Validate `id` in route for new vis types (elastic#264480)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes review Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// v9.5.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants