Implement Latest Export Button UI
Closed this issue · 11 comments
Overview
We need to implement UI elements that allow users to export selected data on to their devices since we do not officially have a way of utilizing our data export feature.
Note
Handoff documents will contain a version of the Search and Filters modal that DO NOT MATCH what we have implemented. We are to implement only the UI elements relevant to this feature
- I understand
Action Items
- Add export button at bottom of Search and Filters Modal
- Error modal is displayed on Export Button click when criteria is not met
- More than 1 request type is selected
- No request types selected
- No NC is selected
- NC selected + 1 request type selected begins data export on Export Button click
- data downloading modal appears
- data download success modal appears if data download succeeds
- data download failed modal appears if download failed
Resources/Instructions
- Link To Figma
- Page Name: ⭐ ⭐ ⭐ Handoff
- Section Name:
Export Link Button And Hand Off Process - Related previous ticket: #1695
- review: Before Screenshot
- review: After Screenshot (Finalized)
- review: Video Upload of "Export Button" demo
Screenshot of Figma Overview
Screenshot after implemented changes
Ticket is ready to picked up.
ETA: 8/23
Availability: Mon-Fri 1pm-6pm
Are the needed icons available somewhere as assets or names in a font/icon library? I found some that look similar in Material UI's library (https://mui.com/material-ui/material-icons/?query=error&selected=Warning, https://mui.com/material-ui/material-icons/?query=check&selected=CheckCircle), but I haven't found exact matches for some of the others (export icon, info tooltip in notice message, document download icon in confirmation dialog).
I've added ready for dev lead tag to designate that this still needs attention. (thank you for moving it to the Questions column). I will try and get this addressed by tonight's meeting. Or work with a designer to get an answer at that time.
Are the needed icons available somewhere as assets or names in a font/icon library? I found some that look similar in Material UI's library (https://mui.com/material-ui/material-icons/?query=error&selected=Warning, https://mui.com/material-ui/material-icons/?query=check&selected=CheckCircle), but I haven't found exact matches for some of the others (export icon, info tooltip in notice message, document download icon in confirmation dialog).
Actually I think you can download all the relevant assets directly off the team Figma. I believe you can go to the Export Link and Download Process section, find the "Assets" section, and download those assets directly via Figma.
@Joy-Truex @kiranofans please let me know if there is a better way to approach this. Downloading directly off Figma seems to be our process at the moment.
Screenshot of assets
Are the needed icons available somewhere as assets or names in a font/icon library? I found some that look similar in Material UI's library (https://mui.com/material-ui/material-icons/?query=error&selected=Warning, https://mui.com/material-ui/material-icons/?query=check&selected=CheckCircle), but I haven't found exact matches for some of the others (export icon, info tooltip in notice message, document download icon in confirmation dialog).
Yes you can directly download frame/image from Figma in various format and size:
-> Open Figma -> find the icons or widgets -> single click on the icons or double click the icons that are on Widgets -> on your right hand you will see a panel -> at the bottom of the panel, there's a Export section -> click on Preview to expand the icon/image/widget download preview -> Click the "+" button beside Export to add one Export setting including image format and resolution/size as shown in the screenshot below:
Download Preview:
Click on the image format drop down to select an appropriate one, then click on Export Frame/default to download it.
You can also click on a widget frame (double-click an image/icon on a widget frame), then right-click and select Copy/Paste as. From there, choose Copy as SVG, Copy as PNG, or Copy as Code (CSS, iOS, Android). You can then paste the SVG/PNG directly, or paste the code wherever it applies.
And I will add the icons to design system
@kiranofans this is a very good guide, thank you. I'm going to make a note in our agenda about adding this to our wiki
@kdow if your question has been answered, please move back to in progress. I will review this in breakout rooms to confirm.
I'm sorry I was trying to delete the comment (which I haven't sent yet) but I didn't notice why I closed this ticket. I have already changed it back to In Progress.
@kiranofans @kdow I'll move this back to In Progress, since that seems to be the latest desired state
Adding my review today ETA 3~4pm