Design System - Component(s): Text Fields

[lrchang2]

Overview

We need to develop library for the text fields components so it can be passed off and used by the developers.

Additional Information

• This component is an atomic component that will be used in the contact us form and waitlist form.
• based on usability testing, need to add text as a placeholder

Action Items

• do industry research on how websites are using text fields
• audit text field being used in the current mobile and desktop high-fi wireframes
• collect all versions of text field inputs and determine if designs need updating and standardizing (based on sizing, style, etc)
  • bring to design team to finalize decisions
• make sure versions of the text fields work in states for
  • mobile
  • desktop
• detail out component's within the figma
  • class
  • css
  • use
  • context

Resources/Instructions

figma

[lrchang2]

@deepamohan22 Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

1. ask for help at your next meeting
2. put a "Status: Help Wanted" label on your issue and pull request
3. put up a request for assistance on the #access-the-data channel.

[deepamohan22]

@lrchang2
Progress : In progress. Completed first 3 tasks. Redesigned the text fields (desktop version).
Blockers : No
Availability : 12 hrs
ETA : Two weeks from now.
Image

[deepamohan22]

@lrchang2

Progress : In progress. Completed the first 7 Tasks. Redesigned the text fields ( Mobile Version)
Blockers : Yes, In remaining tasks - I did not understand the meaning of : ' detail out component's within the figma section
Availability : 6 hrs.
ETA : One week from now

[lrchang2]

@deepamohan22 what I mean by that is to put your component in the design system page within the figma. If you look at the example "forms--input field" that is the template you can use to detail out the component for a developer.

[deepamohan22]

@lrchang2

Progress : Completed all 12 Tasks. Redesigned the text fields ( Desktop & Mobile Versions)
Blockers : No
Availability : 2 more days

ETA : 2 more days

[lrchang2]

great work @deepamohan22! please bring to the design team to get feedback this week and if there are no improvements suggested to be made, please close out this issue and move onto a new one.

[deepamohan22]

@lrchang2
Thanks Lucy. Sure I will discuss with team.

[lrchang2]

reopening issue to add drop down for subject field based on previous usability testing results:

"Dropdown would have General Inquiry, more workshop-specific questions like how do I cancel, - A dedicated person who handles Workshops or a particular topic - An FAQ would help while awaiting a reply"

[deepamohan22]

@lrchang2 ,
Progress : Finished. Added the dropdown menu to the text field in both Desktop and Mobile versions.
Blockers : No
ETA : One week

[lrchang2]

@deepamohan22 thank you for the update. can you link where you put the current version of the dropdown and put screenshots here in an issue comment so i can find and review it?

[deepamohan22]

Sure, Lucy
I will do that
Thanks

[deepamohan22]

Mobile version :

[deepamohan22]

https://www.figma.com/file/CW0T9tfhQ3WK92nQd7VFMn/My-Projects-Linkedin%2CFrirndly%2CPick-%24-Dine?node-id=1317%3A48756

[lrchang2]

@deepamohan22 thanks, this looks great! i think it's good to move forward. once you add these edits to the design system and most updated version of the mockups, please close out this issue

[deepamohan22]

Sure
Thanks @lrchang2