Skip to content
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

Jump to bottom

Data views: Add ability to display fields as a badge in grid layout #60284

Merged
merged 14 commits into from
Apr 5, 2024
Merged

Data views: Add ability to display fields as a badge in grid layout #60284

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f2a20f5
first draft
jameskoster Mar 27, 2024
6415a4b
separate badge fields from others
jameskoster Mar 27, 2024
50a3721
Additional logic and styling
jameskoster Mar 28, 2024
1a4c96a
Add field id class to badge, and style sync status
jameskoster Mar 28, 2024
9d14dd5
small refactoring
ntsekouras Apr 1, 2024
0e2fc17
feedback
ntsekouras Apr 2, 2024
89f8a80
update css classnames
ntsekouras Apr 2, 2024
4998c22
Remove separator
jameskoster Apr 2, 2024
8097196
Page field display
jameskoster Apr 2, 2024
8b79460
Merge branch 'trunk' into add/dataviews-grid-display-field-as-badge
jameskoster Apr 4, 2024
4926501
Remove 'is-badge' class
jameskoster Apr 4, 2024
1c038c5
lint
jameskoster Apr 4, 2024
4fc6e50
Revert date field label change
jameskoster Apr 4, 2024
ef9a806
Merge branch 'trunk' into add/dataviews-grid-display-field-as-badge
jameskoster Apr 5, 2024
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
21 changes: 20 additions & 1 deletion packages/dataviews/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,8 +328,9 @@
line-height: 16px;

&:not(:empty) {
padding: $grid-unit-15;
padding: $grid-unit-15 0;
padding-top: 0;
margin: 0 $grid-unit-15;
}

.dataviews-view-grid__field {
Expand All @@ -355,6 +356,24 @@
}
}
}

.dataviews-view-grid__badge-fields {
&:not(:empty) {
padding: $grid-unit-15;
padding-top: 0;
}

.dataviews-view-grid__field-value {
width: fit-content;
background: $gray-100;
padding: 0 $grid-unit-10;
min-height: $grid-unit-30;
border-radius: $radius-block-ui;
display: flex;
align-items: center;
font-size: 12px;
}
}
}

.dataviews-view-list {
Expand Down
132 changes: 90 additions & 42 deletions packages/dataviews/src/view-grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function GridItem( {
mediaField,
primaryField,
visibleFields,
badgeFields,
displayAsColumnFields,
} ) {
const hasBulkAction = useHasAPossibleBulkAction( actions, item );
Expand Down Expand Up @@ -100,46 +101,79 @@ function GridItem( {
</HStack>
<ItemActions item={ item } actions={ actions } isCompact />
</HStack>
<VStack className="dataviews-view-grid__fields" spacing={ 3 }>
{ visibleFields.map( ( field ) => {
const renderedValue = field.render( {
item,
} );
if ( ! renderedValue ) {
return null;
}
return (
<Flex
className={ classnames(
'dataviews-view-grid__field',
displayAsColumnFields?.includes( field.id )
? 'is-column'
: 'is-row'
) }
key={ field.id }
gap={ 1 }
justify="flex-start"
expanded
style={ { height: 'auto' } }
direction={
displayAsColumnFields?.includes( field.id )
? 'column'
: 'row'
}
>
<FlexItem className="dataviews-view-grid__field-name">
{ field.header }
</FlexItem>
{ !! badgeFields?.length && (
<HStack
className="dataviews-view-grid__badge-fields"
spacing={ 2 }
wrap
align="top"
justify="flex-start"
>
{ badgeFields.map( ( field ) => {
const renderedValue = field.render( {
item,
} );
if ( ! renderedValue ) {
return null;
}
return (
<FlexItem
className="dataviews-view-grid__field-value"
style={ { maxHeight: 'none' } }
key={ field.id }
className={ classnames(
'dataviews-view-grid__field-value',
'is-badge'
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It sounds like we may remove the is-badge class? It's only used in packages/edit-site/src/components/page-patterns/style.scss but it seems to be unnecessary?

) }
>
{ renderedValue }
</FlexItem>
</Flex>
);
} ) }
</VStack>
);
} ) }
</HStack>
) }
{ !! visibleFields?.length && (
<VStack className="dataviews-view-grid__fields" spacing={ 3 }>
{ visibleFields.map( ( field ) => {
const renderedValue = field.render( {
item,
} );
if ( ! renderedValue ) {
return null;
}
return (
<Flex
className={ classnames(
'dataviews-view-grid__field',
displayAsColumnFields?.includes( field.id )
? 'is-column'
: 'is-row'
) }
key={ field.id }
gap={ 1 }
justify="flex-start"
expanded
style={ { height: 'auto' } }
direction={
displayAsColumnFields?.includes( field.id )
? 'column'
: 'row'
}
>
<>
<FlexItem className="dataviews-view-grid__field-name">
{ field.header }
</FlexItem>
<FlexItem
className="dataviews-view-grid__field-value"
style={ { maxHeight: 'none' } }
>
{ renderedValue }
</FlexItem>
</>
</Flex>
);
} ) }
</VStack>
) }
</VStack>
);
}
Expand All @@ -161,12 +195,25 @@ export default function ViewGrid( {
const primaryField = fields.find(
( field ) => field.id === view.layout.primaryField
);
const visibleFields = fields.filter(
( field ) =>
! view.hiddenFields.includes( field.id ) &&
! [ view.layout.mediaField, view.layout.primaryField ].includes(
field.id
)
const { visibleFields, badgeFields } = fields.reduce(
( accumulator, field ) => {
if (
view.hiddenFields.includes( field.id ) ||
[ view.layout.mediaField, view.layout.primaryField ].includes(
field.id
)
) {
return accumulator;
}
// If the field is a badge field, add it to the badgeFields array
// otherwise add it to the rest visibleFields array.
const key = view.layout.badgeFields?.includes( field.id )
? 'badgeFields'
: 'visibleFields';
accumulator[ key ].push( field );
return accumulator;
},
{ visibleFields: [], badgeFields: [] }
);
const shownData = useAsyncList( data, { step: 3 } );
const usedData = deferredRendering ? shownData : data;
Expand Down Expand Up @@ -194,6 +241,7 @@ export default function ViewGrid( {
mediaField={ mediaField }
primaryField={ primaryField }
visibleFields={ visibleFields }
badgeFields={ badgeFields }
displayAsColumnFields={
view.layout.displayAsColumnFields
}
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/page-pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ export default function PagePages() {
},
},
{
header: __( 'Date' ),
header: __( 'Publish date' ),
id: 'date',
render: ( { item } ) => {
const formattedDate = dateI18n(
Expand Down
21 changes: 13 additions & 8 deletions packages/edit-site/src/components/page-patterns/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ const defaultConfigPerViewType = {
[ LAYOUT_GRID ]: {
mediaField: 'preview',
primaryField: 'title',
badgeFields: [ 'sync-status' ],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're starting to have several kind of displays for fields: primary, media, badge (maybe others in other layouts). It would be good to check if we can consolidate somehow. Maybe visibleFields could support arrays as fields: [ [ { field: 'preview', display: 'media' }], { field: 'title', display: 'primary' }], { field: 'sync-status', display: 'badge' }, 'anyrandomfield' ]

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also wonder if want to show the "badge" in the same way in other views. Meaning maybe the field itself (sync status) display as a badge in its render function rather than this begin a config.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I think so too. I'll create an issue to track this.

},
};
const DEFAULT_VIEW = {
Expand Down Expand Up @@ -300,19 +301,23 @@ export default function DataviewsPatterns() {
];
if ( type === PATTERN_TYPES.theme ) {
_fields.push( {
header: __( 'Sync Status' ),
header: __( 'Sync status' ),
id: 'sync-status',
render: ( { item } ) => {
// User patterns can have their sync statuses checked directly.
// Non-user patterns are all unsynced for the time being.
return (
SYNC_FILTERS.find(
( { value } ) => value === item.syncStatus
)?.label ||
SYNC_FILTERS.find(
( { value } ) =>
value === PATTERN_SYNC_TYPES.unsynced
).label
<span
className={ `edit-site-patterns__field-sync-status-${ item.syncStatus }` }
>
{ SYNC_FILTERS.find(
( { value } ) => value === item.syncStatus
)?.label ||
SYNC_FILTERS.find(
( { value } ) =>
value === PATTERN_SYNC_TYPES.unsynced
).label }
</span>
);
},
type: ENUMERATION_TYPE,
Expand Down
5 changes: 5 additions & 0 deletions packages/edit-site/src/components/page-patterns/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@
.dataviews-pagination {
z-index: z-index(".edit-site-patterns__dataviews-list-pagination");
}

.is-badge:has(.edit-site-patterns__field-sync-status-fully) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't this work?

Suggested change
.is-badge:has(.edit-site-patterns__field-sync-status-fully) {
.edit-site-patterns__field-sync-status-fully {

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That suggestion would produce this:

Screenshot 2024-04-04 at 13 55 05

The styles need to be applied to the element that contains .edit-site-patterns__field-sync-status-fully.

We can probably do that without the is-badge class though. I'll try something.

background: rgba(var(--wp-block-synced-color--rgb), 0.04);
color: var(--wp-block-synced-color);
}
}

.dataviews-action-modal__duplicate-pattern {
Expand Down
Loading