Design SearchInput component to be mobile and responsive
Open, Stalled, MediumPublic
Actions

Assigned To

None

Authored By

	• Sarai-WMDE
	Mar 2 2022, 2:51 PM

Description

Background/Goal

The size, spacing, and text styles of the SearchInput component should adjust when the component is displayed in a mobile web context in order to provide optimal usability.

This Figma frame contains the responsive design specifications for this component.

SearchInput is based on TextInput, with which it shares its responsive appearance.

User stories

As a user, I need to be able to interact with a fully usable, responsive version of the search on mobile.

Considerations

The current design specs (particularly font-size, line-height, paddings) might need to be adjusted as an outcome of T302889: Define the design system's approach to responsiveness

Development considerations

Acceptance criteria (or Done)

The visual properties of the responsive version of the SearchInput component are fully specified

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open		None	T404968 [EPIC] Component responsiveness
		Stalled		None	T302881 Design SearchInput component to be mobile and responsive

Event Timeline

• Sarai-WMDE created this task.Mar 2 2022, 2:51 PM

Restricted Application removed a project: Patch-For-Review. · View Herald TranscriptMar 2 2022, 2:51 PM

• Sarai-WMDE mentioned this in T300656: Add SearchInput component to Codex and TypeaheadSearch component.Mar 2 2022, 2:55 PM

egardner triaged this task as Medium priority.Mar 2 2022, 5:37 PM

egardner added a parent task: T302889: Define the design system's approach to responsiveness.

egardner updated the task description. (Show Details)

egardner moved this task from Research to In Design on the Design-Systems-team-20200324-20220422 (Design-Systems-Active-Sprint) board.

• Sarai-WMDE renamed this task from [SimpleSearch] Design responsive (mobile) version of SimpleSearch component to [SearchInput] Design responsive (mobile) version of SearchInput component.Mar 10 2022, 4:58 PM

• Sarai-WMDE updated the task description. (Show Details)

• STH edited projects, added Design-System-Team; removed Design-Systems-team-20200324-20220422 (Design-Systems-Active-Sprint).Apr 15 2022, 6:34 PM

• STH renamed this task from [SearchInput] Design responsive (mobile) version of SearchInput component to Design SearchInput component to be mobile and responsive.Apr 15 2022, 6:49 PM

• STH changed the task status from Open to Stalled.

• STH updated the task description. (Show Details)

• STH moved this task from Inbox to Blocked on the Design-System-Team board.

ldelench_wmf moved this task from Blocked to Backlog on the Design-System-Team board.Apr 15 2022, 9:28 PM

• AnneT edited projects, added Design-System-Team (Design-System-Sprint); removed Design-System-Team.Apr 18 2022, 4:20 PM

• AnneT moved this task from Committed to Ready for Development on the Design-System-Team (Design-System-Sprint) board.Apr 18 2022, 4:24 PM

• Sarai-WMDE updated the task description. (Show Details)Apr 19 2022, 1:42 PM

• AnneT moved this task from Ready for Development to In Development on the Design-System-Team (Design-System-Sprint) board.Apr 19 2022, 6:48 PM

I've moved this to the backlog since this component's responsive behavior really just depends on variation of font size between mobile and desktop, which is still being finalized as part of T302889

• AnneT removed • AnneT as the assignee of this task.May 13 2022, 9:01 PM

• STH moved this task from Backlog to Codex Component Backlog on the Design-System-Team board.May 23 2022, 7:11 PM

Catrope removed a parent task: T300656: Add SearchInput component to Codex and TypeaheadSearch component.Jun 2 2022, 10:19 PM

ldelench_wmf moved this task from Codex Component Backlog to Backlog on the Design-System-Team board.Sep 16 2022, 6:16 PM

ldelench_wmf removed a parent task: T302889: Define the design system's approach to responsiveness.Feb 17 2023, 4:34 PM

egardner moved this task from Backlog to Proposed Component Updates on the Codex board.Feb 21 2023, 11:54 PM

LikeLifer subscribed.May 18 2023, 9:48 PM

CCiufo-WMF moved this task from Proposed Component Updates to Backlog on the Codex board.May 30 2025, 6:51 PM

DTorsani-WMF added a parent task: T404968: [EPIC] Component responsiveness.Sep 18 2025, 1:02 PM