fix: use consistent empty state styling between list and folder views#15555
Merged
PatrikKozak merged 6 commits intoFeb 17, 2026
Merged
Conversation
…iews Replaces the inline no-results div in the list view with the shared NoListResults component already used by folder and browse-by-folder views. This ensures both views render the same centered, bordered empty state container when a collection has no documents. Removes the now-unused .collection-list__no-results SCSS block and updates e2e test selectors to match the new .no-results class name. Fixes payloadcms#15524
AhmadYasser1
requested review from
AlessioGr,
JarrodMFlesch and
jacobsfletch
as code owners
…y-list-folder-view-styling
Contributor
|
Hey @AhmadYasser1! Thanks for opening this PR, I pulled it down and everything was looking good but I decided to take the updated empty state styling a bit further - I think it looks a bit cleaner now. You can see the updated styles in the before & after images I added in the PR description. Once CI passes, we'll get this merged. Thanks again! |
jhb-dev
reviewed
Feb 13, 2026
PatrikKozak
changed the title
Contributor
Author
|
Thanks @PatrikKozak and @jhb-dev! Since CI passed, are we good to merge? |
…y-list-folder-view-styling
PatrikKozak
approved these changes
Feb 17, 2026
Contributor
|
🚀 This is included in version v3.77.0 |
PatrikKozak
added a commit
that referenced
this pull request
Mar 11, 2026
…5914) # Overview Applies the same empty state styling fix from #15555 to the `RelationshipTable` component. ## Key Changes - Replaced inline empty state div with shared `NoListResults` component - `RelationshipTable` was using its own inline implementation with different styling - Now uses the same centered, dashed-border design as List, Folder, and Browse-by-Folder views - Restructured empty state to use `Message` and `Actions` props - Message includes heading ("No Results.") and description - Actions conditionally includes the AddNewButton when user has create permission ## Design Decisions Follows the exact pattern from #15555 where all list views were standardized to use the `NoListResults` component. `RelationshipTable` was missed in that PR and had the same inconsistent left-aligned, no-border styling. The shared component ensures visual consistency across all empty states in the admin UI. ### Before <img width="1329" height="142" alt="Screenshot 2026-03-11 at 1 53 19 PM" src="https://github.com/user-attachments/assets/f85284a0-8abf-49f7-b6bf-6058e514ad1a" /> ### After <img width="1313" height="188" alt="Screenshot 2026-03-11 at 2 23 02 PM" src="https://github.com/user-attachments/assets/aa84c3b7-ae01-44ae-a767-b2c14a87fe71" />
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
3 participants
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.
What?
Uses the shared
NoListResultscomponent in the list view empty state, matching the styling already used by the folder and browse-by-folder views.Why?
The empty state for the list view (left-aligned, no border) looks completely different from the folder view empty state (centered, dashed border). This inconsistency was reported in #15524.
How?
collection-list__no-resultsdiv inDefaultListViewwith the existingNoListResultscomponent fromelements/NoListResults&__no-resultsSCSS block fromList/index.scss.collection-list__no-resultsto.no-resultsBefore
After
Fixes #15524