[SSF-206] Add empty state components for dashboard#181
Conversation
jxuistrying
changed the title
jxuistrying
changed the title
There was a problem hiding this comment.
Make sure you implement the empty-state dashboard for FMs too
Edit: Sorry, just realized the FM dashboard isn't merged yet. Not sure if we want to wait to merge this PR until we can also add an empty state for the FM dashboard.
There was a problem hiding this comment.
yes fm dashboard should be in soon~ let's wait to merge until we can add empty state there!
| </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.
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 :)
| <CircleCheck size={24} color="#262626" /> | ||
| </Box> | ||
| <Box fontWeight="600" fontSize="lg" color="neutral.800"> | ||
| Nothing to see here. |
There was a problem hiding this comment.
nit - designs end with exclamation mark instead of period
| gap={2} | ||
| > | ||
| <Box mb={2}> | ||
| <CircleCheck size={24} color="#262626" /> |
There was a problem hiding this comment.
nit: designs don't have the circle check for section empty states!
| </Box> | ||
| <Box display="flex" gap={3} mt={4}> | ||
| <Button | ||
| bg="neutral.700" |
There was a problem hiding this comment.
can we make this size=sm to match the thinner designed buttons?
nice job using our repo frontend values here~
| {primaryButtonText} | ||
| </Button> | ||
| <Button | ||
| bg="neutral.300" |
There was a problem hiding this comment.
add size="sm" here too
remove bg color -> white/clear in design
define the button by setting it to outline & defining border color.
good example is the outline button in adminOrderManagement.tsx:387-394 - take their outline and border (variant="outline", borderColor="") use neutral.200 as border color.
| {isPageEmpty ? ( | ||
| <PageEmptyState | ||
| subtitle="You have no food requests or orders at this time." | ||
| primaryButtonText="View Assigned Pantries" |
There was a problem hiding this comment.
design says: "View Pantries" - can we reflect that here?
| justifyContent="center" | ||
| textAlign="center" | ||
| fontFamily="'Inter', sans-serif" | ||
| fontSize="sm" |
There was a problem hiding this comment.
we also have project pixel defined scale values of textStyle = "p/ p2/ p3/ h4" ~ consider which one would fit the best for this size!
| <Box mb={2}> | ||
| <CircleCheck size={24} color="#262626" /> | ||
| </Box> | ||
| <Box fontWeight="600" fontSize="lg" color="neutral.800"> |
There was a problem hiding this comment.
use for text content - it's also what makes the testStyle work!
| gap={2} | ||
| > | ||
| <Box mb={2}> | ||
| <CircleCheck size={24} color="#262626" /> |
| <Heading textStyle="h1" color="gray.600" mb={6}> | ||
| Pantry Dashboard | ||
| </Heading> | ||
| <PageEmptyState |
There was a problem hiding this comment.
when a pantry fetch fails (!pantry), this is an early return over line 88 which renders an error message toast. can we remove this block so the default for this case is the alert?
| </Box> | ||
| {isPageEmpty ? ( | ||
| <PageEmptyState | ||
| subtitle="You have no orders or applications to review at this time." |
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.