[SSF-206] Add empty state components for dashboard#181
Conversation
jxuistrying
changed the title
jxuistrying
changed the title
| </Box> | ||
| {isPageEmpty ? ( | ||
| <PageEmptyState | ||
| subtitle="You have no orders or applications to review at this time." |
There was a problem hiding this comment.
Not sure if this is strictly necessary, but it might be good to pass in the entity to PageEmptyState and SectionEmptyState instead of hard coding the entire subtitle.
e.g. You have no {entity} at this time.
There was a problem hiding this comment.
im liking the sound of dis
There was a problem hiding this comment.
gotchu I added {entity} so that the content can be passed in
There was a problem hiding this comment.
awesome job implementing this! tested pages & overall a great first pr ><
commented on matching the figma, edge cases, and frontend styling!
take a look at apps/frontend/src/theme.ts for our repo design system
- specifically we use
<Text textStyle="p2 (...etc)"> and <Heading textStyle="h1 (...etc)">instead of hardcoding fontSize, fontWeight, fontFamily - we also have color tokens there to use instead of hardcoding hex numbers
- we have our font tokens there wired so we also don't have to hardcode those
can you update the styling to follow our conventions? ik seems tomato tomato but routing all styling through one source makes the app easier to maintain, extend, and look at :)
|
@jxuistrying btw - justin's FM dashboard pr has been merged! if you could add the empty state for FM dashboards, that would be so so great! |
3 participants
ℹ️ Issue
Closes #206
📝 Description
I implemented SectionEmptyState and PageEmptyState components to update the ui when there isn't any data to display to users.
✔️ Verification
Tested empty state by setting conditionals that check if a section is empty to true
Dashboard empty state
Section empty state
🏕️ (Optional) Future Work / Notes
I had trouble testing Pantry dashboard specifically if(!pantry) { return null } in apps/frontend/src/containers/pantryDashboard.tsx made it so that the empty state message doesnt show so I added an error message for when there isn't data to display which seems to fix the empty state message not showing but I don't think that error message is needed.