Search Field

Owned by Bronwyn Hawkins (Deactivated), created
Last updated: Jun 04, 2021 by Adam Butterworth (Deactivated)
1 min read

Design COMPLETE IMPLEMENTATION PENDING

The three statuses above and their possible values:

PROPOSAL STATUS

DESIGN STATUS

IMPLEMENTATION STATUS

PROPOSAL STATUS

DESIGN STATUS

IMPLEMENTATION STATUS

DRAFT

DESIGN PENDING

IMPLEMENTATION PENDING

READY FOR REVIEW

DESIGN PLANNED

IMPLEMENTATION PLANNED

APPROVED TO ADD

DESIGN IN PROGRESS

IMPLEMENTATION IN PROGRESS

DEFERRED

DESIGN COMPLETE

IMPLEMENTATION COMPLETE

NEEDS CHANGES

 

 

For more information see the https://openedx.atlassian.net/wiki/spaces/BPL/pages/1773502564/Component+Contribution+Process#Step-1-%E2%80%93-Start-a-component-proposal.

Search allows users to quickly find content.

Contributors

@Bronwyn Hawkins (Deactivated)

Paragon Jira ticket

https://openedx.atlassian.net/browse/PAR-112

Design resources

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=5957%3A6009

Technical docs

1 Variants | 2 Best Practices | 3 Related Components | 4 Specification | 4.1 Behaviors | 4.2 Accessibility | 5 Notes

Design

 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=5977%3A4925

Variants

 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=5957%3A6009

 

 

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=5957%3A6030

Best Practices

Do

  • Use the light variant on light backgrounds

  • Use the dark variant on dark backgrounds

  • Use the buttonless variant to conserve space

  • Use the button variant to make the search field more prominent

  • Use the clear trailing icon in activated search fields

Don't

  • Use the button variant to make the search field recede

Related Components

 

Specification

What does an engineer need to know in order to build this component?

Redlined Design Spec

Behaviors

Accessibility

 

Notes

Notes from collaborator conversations or meetings regarding this component.

XX.XX.20XX