Skip to content

feat: Add rowHeight prop to Board for customizable row height - #447

Draft
ernst-dev wants to merge 1 commit into
mainfrom
feat/board-row-height
Draft

feat: Add rowHeight prop to Board for customizable row height#447
ernst-dev wants to merge 1 commit into
mainfrom
feat/board-row-height

Conversation

@ernst-dev

Copy link
Copy Markdown
Member

Description

Adds an opt-in, backward-compatible rowHeight prop to Board that lets consumers override the default grid row height. This addresses the feature request in AWSUI-61568 ("Customizable board row size" / ROWSPAN_HEIGHT customization).

Motivation: the board row height is currently fixed per density (96px comfortable / 76px compact), and the minimum item height is 2 rows (≈192px). Data-light widgets are therefore forced to reserve a lot of vertical white space, and customers have resorted to patching internal CSS (which breaks the Cloudscape contract). This prop gives first-class, finer-grained vertical sizing — e.g. rowHeight={32} yields 3× the sizing precision and lets a 2-row widget be 64px instead of 192px.

What changed:

  • New BoardProps.rowHeight?: number (px). When unset, the existing density-based defaults are used, so current boards render identically.
  • The value flows BoardInternalBoard → internal Grid, where it drives both the pixel math (getHeight) used for layout/resize and the rendered grid-auto-rows via a --awsui-board-row-height CSS custom property — keeping layout math and rendering in sync.
  • Invalid values (non-positive or non-finite) are ignored and fall back to the density default.

This reuses the existing Board/Grid layout pipeline; no changes to minRowSpan/layout semantics.

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

Note: the ticket is a raw feature request without a finalized API spec (it only references ROWSPAN_HEIGHT customization and a Quip doc). This PR implements a rowHeight prop as the opt-in, contract-friendly surface for that request. Happy to rename/rescope (e.g. per-density object, or a BoardItem-level minimum) during review.

How has this been tested?

  • npm run build, eslint, stylelint, and tsc (unit + e2e project typecheck) all pass.
  • Unit tests (npm run test:unit) pass — 330 tests, 34 files. New coverage added:
    • src/internal/grid/__tests__/grid.test.tsx — default row height, custom override, and invalid-value fallback (0/negative/NaN/Infinity).
    • src/board/__tests__/board-row-height.test.tsx — prop is forwarded to the grid, default is preserved when unset, non-positive values fall back, and the prop does not leak onto the root DOM element.
  • API-docs snapshot regenerated to include the new prop.
  • New dev page pages/board/row-height.page.tsx renders a board with buttons to switch between default / 32 / 48 / 64 / 96px row heights for manual/visual verification.
Review checklist

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

Correctness

  • Changes include appropriate documentation updates. ✅ Prop documented in BoardProps; API-docs snapshot updated.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md. ✅ Opt-in; defaults unchanged.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md. ✅ Uses a standard CSS custom property with a static fallback.
  • Changes were manually tested for accessibility, see accessibility guidelines. ⚠️ No a11y-affecting changes (layout sizing only); dev page provided for manual verification.

Security

Testing

  • Changes are covered with new/existing unit tests? ✅ New grid + board unit tests.
  • Changes are covered with new/existing integration tests? ➖ Dev page added; visual/integration coverage can be added in review if desired.

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

Adds an opt-in `rowHeight` prop to Board that overrides the default per-density
grid row height (96px comfortable / 76px compact). This enables finer-grained
vertical sizing of board items (e.g. 32px increments) as requested in AWSUI-61568.

The value flows Board -> InternalBoard -> Grid, where it drives both the pixel
math (getHeight) and the rendered grid-auto-rows via a CSS custom property, keeping
layout and rendering in sync. Invalid values (non-positive/non-finite) fall back to
the density default, so existing boards are unaffected.

Includes grid + board unit tests and a dev page.
@codecov

codecov Bot commented Jul 23, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.46%. Comparing base (f388073) to head (8368df1).

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #447      +/-   ##
==========================================
+ Coverage   91.44%   91.46%   +0.01%     
==========================================
  Files          59       59              
  Lines        1730     1734       +4     
  Branches      467      469       +2     
==========================================
+ Hits         1582     1586       +4     
  Misses        148      148              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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