feat: add header and footer slots to vaadin-grid #10202
Draft
Conversation
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
vursen
reviewed
Sep 22, 2025
There was a problem hiding this comment.
Pull Request Overview
This PR adds customizable header and footer slots to the vaadin-grid component that appear above and below the grid table. The slots use flexbox layout by default, allowing multiple elements to be arranged without extra wrapper divs, and automatically hide when empty.
Key changes:
- Added new header and footer slot elements with flexbox styling
- Implemented comprehensive test coverage for slot functionality and accessibility
- Updated visual tests to demonstrate various header/footer usage patterns
Reviewed Changes
Copilot reviewed 7 out of 16 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/grid/src/vaadin-grid.js | Added header and footer slot elements to the grid template and documented the new slots |
| packages/grid/src/styles/vaadin-grid-base-styles.js | Added CSS styles for header/footer parts with flexbox layout and updated scroller styling |
| packages/grid/test/grid-slots.test.js | Added comprehensive unit tests for header and footer slot functionality |
| packages/grid/test/accessibility-slots.test.js | Added accessibility tests ensuring proper DOM structure and keyboard navigation |
| packages/grid/test/visual/grid.common.js | Added visual regression tests for various header/footer slot configurations |
| packages/grid/test/dom/snapshots/grid.test.snap.js | Updated DOM snapshots to include the new header and footer elements |
| dev/grid.html | Added examples demonstrating header and footer slot usage with realistic use cases |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| border-radius: calc(var(--_border-radius) - var(--_border-width)); | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; |
There was a problem hiding this comment.
Adding flex-direction: column to the existing #scroller selector modifies the layout behavior of the entire scroller container. This change should be accompanied by verification that existing grid layouts still work correctly, as this could affect how child elements are arranged within the scroller.
Suggested change
| flex-direction: column; | |
| /* flex-direction: column; Removed to preserve original grid layout */ |
Copilot uses AI. Check for mistakes.
| const headerRect = headerPart.getBoundingClientRect(); | ||
| const tableRect = table.getBoundingClientRect(); | ||
|
|
||
| expect(headerRect.bottom).to.be.at.most(tableRect.top + 1); |
There was a problem hiding this comment.
The magic number + 1 tolerance for positioning tests is unexplained. Consider adding a comment explaining why this tolerance is needed (e.g., for browser rendering differences) or define it as a named constant.
Copilot uses AI. Check for mistakes.
| const footerRect = footerPart.getBoundingClientRect(); | ||
| const tableRect = table.getBoundingClientRect(); | ||
|
|
||
| expect(footerRect.top).to.be.at.least(tableRect.bottom - 1); |
There was a problem hiding this comment.
The magic number - 1 tolerance for positioning tests is unexplained. Consider adding a comment explaining why this tolerance is needed (e.g., for browser rendering differences) or define it as a named constant.
Copilot uses AI. Check for mistakes.
Add customizable header and footer slots to the grid component that appear above and below the grid table. These slots use flexbox layout by default, allowing multiple elements to be arranged without extra wrapper divs. Key features: - Header slot above the grid table for toolbars and controls - Footer slot below the grid table for status information - Both slots use display:flex with align-items:center by default - Automatic hiding of empty slots - Full integration with existing grid functionality Resolves #986 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Empty flex containers with no padding or min-height naturally collapse to zero height, making the visibility management logic unnecessary.
Added four visual test scenarios to verify the grid header and footer slots rendering: - Header and footer slots together with content - Header slot only with toolbar styling - Footer slot only with pagination controls - Empty slots to verify they take no space Part of #986 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Updated the DOM snapshot tests to reflect the new header and footer slot elements that were added to the grid component structure. Part of #986 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Added comprehensive accessibility tests to ensure the header and footer slots maintain proper keyboard navigation, ARIA relationships, and screen reader support without interfering with the grid's existing accessibility features. Part of #986 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
- Move focusexit element before footer slot to ensure correct Tab order - Fix Tab navigation from grid cells to footer slot content - Update accessibility tests to properly handle grid Tab behavior - Update keyboard navigation test expectations for new DOM structure The focusexit element now properly manages Tab navigation flow: Header slot → Grid cells → Footer slot → Elements after grid 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
…b navigation - Move header and footer divs outside the #scroller element - Add flex-direction: column to host and flex: 1 to scroller for proper layout - Fix Tab navigation to naturally flow to footer slot content - Update keyboard navigation to skip focusexit when tabbing forward - Set navigating attribute even when Tab exits naturally - Update tests to reflect new DOM structure and Tab behavior This change improves accessibility by ensuring Tab navigation flows naturally from header content → grid cells → footer content → next element 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
The header and footer slots are now outside the scroller element 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Update screenshots to reflect new DOM structure with header and footer slots positioned outside the scroller element 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
When grid is inside an overlay with focus-trap, Tab from grid cells now correctly moves focus to the next element in the overlay by temporarily removing focusexit from the Tab order. This allows natural Tab flow to work in both regular grid scenarios (with footer content) and overlay scenarios. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
The min-height calculation now accounts for header and footer slot content in addition to the existing table headers/footers and default row height. This ensures the grid maintains proper sizing when using the new header and footer slot functionality. - Observe header and footer slot containers with ResizeObserver - Include slot container heights in min-height calculation - Add comprehensive tests for slot-based min-height scenarios 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Artur-
force-pushed
the
grid-toolbar-footer
branch
from
b22479b to
022c7bf
Compare
|
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.
Add customizable header and footer slots to the grid component that appear above and below the grid table. These slots use flexbox layout by default, allowing multiple elements to be arranged without extra wrapper divs.
Key features:
Resolves #986