Text fileds: guides should include more information

[piatra]

Trying to implement an input component I found that the guide is missing some information.

https://design.firefox.com/photon/components/input-fields.html

• The input is never shown with overflow text (how should that be handled? example: location bar does a fade/shadow effect)
• Related to the previous point, it would be useful to see how text overflow interacts with the input clear button
• The page does not include font sizes
  • it mentions Body 10 in a tooltip next to text but that definition is on a different page
  • And I was not aware Body 10 is a variable that references font size
• The page does not include all the styles for focus/error states (has information about the border but not the box-shadow).
• Where can I get the assets (search icon, clear icon)?
• A very useful feature would be examples in Firefox where I could see that component in action (example: the search in the preference page fits my usecase)

Thanks.

[tinahsieh]

Thanks Piatra for the very useful feedback! Here are some quick replies before we update the page:

• The overflow information will be added while it's defined.
• Before we point out the information of the body 10 in the page, you can find the information here.
• You can find search icon here by typing "search".

We'll keep working on adding more information on this page, thanks again for the feedback!