feat: Add rowHeight prop to Board for customizable row height - #447
Draft
ernst-dev wants to merge 1 commit into
Draft
feat: Add rowHeight prop to Board for customizable row height#447ernst-dev wants to merge 1 commit into
ernst-dev wants to merge 1 commit into
Conversation
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 Report✅ All modified and coverable lines are covered by tests. 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. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds an opt-in, backward-compatible
rowHeightprop toBoardthat lets consumers override the default grid row height. This addresses the feature request in AWSUI-61568 ("Customizable board row size" /ROWSPAN_HEIGHTcustomization).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:
BoardProps.rowHeight?: number(px). When unset, the existing density-based defaults are used, so current boards render identically.Board→InternalBoard→ internalGrid, where it drives both the pixel math (getHeight) used for layout/resize and the renderedgrid-auto-rowsvia a--awsui-board-row-heightCSS custom property — keeping layout math and rendering in sync.This reuses the existing Board/Grid layout pipeline; no changes to
minRowSpan/layout semantics.Related links, issue #, if available: AWSUI-61568
How has this been tested?
npm run build,eslint,stylelint, andtsc(unit + e2e project typecheck) all pass.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.pages/board/row-height.page.tsxrenders 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
BoardProps; API-docs snapshot updated.CONTRIBUTING.md. ✅ Opt-in; defaults unchanged.CONTRIBUTING.md. ✅ Uses a standard CSS custom property with a static fallback.Security
checkSafeUrlfunction. N/A — no URL handling.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.