Skip to content

DataViews: Support hiding the title in Grid layout, with actions available on hover #71369

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrewserong merged 14 commits into from
Sep 3, 2025
Merged

DataViews: Support hiding the title in Grid layout, with actions available on hover #71369

Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
0ef6433
DataViews Grid: Try a titleless grid with actions available on hover
andrewserong Aug 27, 2025
baca492
Add an explicity is-hovered state to preserve the visibility of the b…
andrewserong Aug 27, 2025
8bb229b
Add transition so that it doesn't feel quite as heavy
andrewserong Aug 28, 2025
87ea4a2
Update stories so that the padding of the body doesn't jump when open…
andrewserong Aug 28, 2025
81c717f
Don't force show actions when grid card is selected
andrewserong Aug 28, 2025
17f65b3
Add changelog entry
andrewserong Aug 28, 2025
837f60b
Update comment to refer to actions instead of checkboxes, ensure opac…
andrewserong Aug 29, 2025
ef23e9f
Try removing state and using aria-expanded instead
andrewserong Aug 29, 2025
cb192d2
Add extra renderedMediaField check
andrewserong Aug 29, 2025
f2922db
Add tests
andrewserong Aug 29, 2025
262aa0c
Remove custom story
andrewserong Sep 2, 2025
0a5ca80
Update classname to be a little more specific
andrewserong Sep 3, 2025
46ad2a2
Tidy up some boolean checks
andrewserong Sep 3, 2025
3ae7918
Add fields package changelog entry
andrewserong Sep 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Tidy up some boolean checks
  • Loading branch information
@andrewserong
andrewserong committed Sep 3, 2025
commit 46ad2a2bcb486ccd81cfef672e895125b553414f
22 changes: 8 additions & 14 deletions packages/dataviews/src/dataviews-layouts/grid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,7 @@ function GridItem< Item >( {
showTitle && titleField?.render ? (
<titleField.render item={ item } field={ titleField } />
) : null;
const shouldRenderMedia = showMedia && renderedMediaField;

let mediaA11yProps;
let titleA11yProps;
Expand Down Expand Up @@ -154,7 +155,7 @@ function GridItem< Item >( {
}
aria-posinset={ posinset }
>
{ showMedia && renderedMediaField && (
{ shouldRenderMedia && (
<ItemClickWrapper
item={ item }
isItemClickable={ isItemClickable }
Expand All @@ -166,7 +167,7 @@ function GridItem< Item >( {
{ renderedMediaField }
</ItemClickWrapper>
) }
{ hasBulkActions && showMedia && renderedMediaField && (
{ hasBulkActions && shouldRenderMedia && (
<DataViewsSelectionCheckbox
item={ item }
selection={ selection }
Expand All @@ -176,18 +177,11 @@ function GridItem< Item >( {
disabled={ ! hasBulkAction }
/>
) }
{ ! showTitle &&
showMedia &&
renderedMediaField &&
!! actions?.length && (
<div className="dataviews-view-grid__media-actions">
<ItemActions
item={ item }
actions={ actions }
isCompact
/>
</div>
) }
{ ! showTitle && shouldRenderMedia && !! actions?.length && (
<div className="dataviews-view-grid__media-actions">
<ItemActions item={ item } actions={ actions } isCompact />
</div>
) }
{ showTitle && (
<HStack
justify="space-between"
Expand Down
Loading