carbon-design-system/carbon

Search component missing mouse action

Open

#6,301 opened on Jun 17, 2020

View on GitHubContributor guide
 (12 comments) (0 reactions) (0 assignees)JavaScript (1,733 forks)batch import
afrohackscomponent: searchhacktoberfestneeds: community contributionneeds: design contributionproposal: acceptedrole: design :pencil2:type: enhancement 💡

Repository metrics

Stars
 (7,442 stars)
PR merge metrics
 (Avg merge 9d 14h) (106 merged PRs in 30d)

Description

image The search component is missing an optional button for search submit. I suggest a validation function as optional, returning true if the text is valid for search. If valid, an icon shows up/enters enabled state that is clickable and fires the search callback. Bonus - Search callback should be also fired by hitting enter in the search field, if text is valid. I think this is a common functionality and should not be implemented in carbon, as it is used on IBM sites and the look and feel should be common for all sites. The clickable icon could be the spyglass which is now on the left, moved to the right.

Contributor guide

Research direction
Implement an optional validation prop for the search component, add a visual indicator for valid input (e.g., enable a clickable icon), and ensure the search callback fires on Enter key press when text is valid.
Tech stack
javascriptreact
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
React
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70