feat(docs): add min-width, event propagation info to Datagrid docs - #1846
feat(docs): add min-width, event propagation info to Datagrid docs#1846franzheidl wants to merge 2 commits into
Conversation
Signed-off-by: Franz Heidl <franz.heidl@sap.com>
|
There was a problem hiding this comment.
Pull request overview
Updates the DataGrid UX documentation to capture two practical implementation details that improve usability when rows are clickable and when the last column contains small interactive controls.
Changes:
- Adds guidance to set a
min-widthon the last “actions” column to prevent collapse and improve interactability of small controls (e.g., overflow menus). - Clarifies that nested interactive elements inside clickable rows should stop click event propagation to avoid triggering the row-level action.
Signed-off-by: Franz Heidl <franz.heidl@sap.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (2)
docs/ux/datagrid.md:84
- Use consistent term capitalization for the UI component name "Overflow Menu". This doc (and the UX glossary) uses title case for this component, but this new sentence uses lowercase "overflow menus"/"overflow menu".
- Action columns (edit, delete, overflow menus) belong at the far right. In order to avoid noise, use overflow menus even for single item menus rather than showing a button on each item straightaway. When the last column holds an overflow menu or other small interactive element, set a `min-width` on that column's cells to prevent the column from collapsing and making the element difficult to interact with.
docs/ux/datagrid.md:92
- Use consistent term capitalization for the UI component name "Overflow Menu" (matches docs/ux/glossary.md and other sections of this doc).
When rows contain nested interactive elements (buttons, links, overflow menus), each of those elements must explicitly stop click event propagation — call `event.stopPropagation()` on the element's click handler. Without this, the row-level click handler fires unintentionally whenever the user interacts with any nested element.
Summary
Add info re necessity of stopping event propagation on Datagrid item elements, and setting min-width of DataGrid item cells.
Closes #1357