Allow all necessary input types in the TextInput component
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	AnneT
	Nov 5 2021, 3:31 PM

Description

Right now, the TextInput component allows 2 values for the input's type attribute: "text" (the default) and "search." However, there are probably more text-ish types we should cover with this component, including:

number
email
month
password
tel
url
week
date
datetime-local
time

See MDN for a full list of type values for inputs.

For some of these, we may build a wrapper component in the future to better handle/style certain elements (e.g. the calendar that pops up with type="date"), but for now we can allow the browser behavior to take over in circumstances we haven't covered yet.

Acceptance criteria

Determine which types to include
Add those types to the allowed values for the TextInput type prop
Make sure none of the browser-specific UIs clash with the current implementation of TextInput
Add examples to the docs? Maybe note that things like "date" will be handled by the browser for now.

~~[] Update the number input on the Menu demo page to be type="number"~~ (already done)

Details

	Subject	Repo	Branch	Lines +/-
	TextInput: Add additional input types	design/codex	main	+222 -13
	Update Codex from v0.7.0 to v0.8.0	mediawiki/core	master	+911 -813

Customize query in gerrit

Related Objects

Mentioned In: T328173: [SPIKE] Plan project(s) for DST intern

Event Timeline

AnneT created this task.Nov 5 2021, 3:31 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 5 2021, 3:31 PM

@Volker_E thoughts about which types we should include?

AnneT moved this task from Incoming/Requests to Ready for development on the Design-Systems-team-20200324-20220422 (Design Systems Team FY2021-22 Kanban Board) board.Nov 5 2021, 3:55 PM

AnneT moved this task from Inbox to Contributor Experience on the Codex board.

@AnneT Very sorry, I didn't see this ping.
From my perspective, all that are currently outlined in Design Style Guide at minimum: search, password, number. All three should probably also be wrapper components to TextInput with the specific props. Additionally tel has made a lot of sense in the past from mobile UX improvements (numeral input on mobile devices, but that's information of about three years ago, so maybe worth revisiting).

For neither email nor url I see the need for a specific wrapper component. I'm convinced though that we should enable all of them as possible type constants for third-party users and follow HTML standard, even if we end up in a non-styled representation.

ldelench_wmf moved this task from Contributor Experience to Inbox on the Codex board.Apr 22 2022, 8:53 PM

AnneT edited projects, added Design-System-Team; removed Design-Systems-team-20200324-20220422 (Design Systems Team FY2021-22 Kanban Board).May 2 2022, 4:27 PM

• STH moved this task from Inbox to Needs Refinement on the Design-System-Team board.May 6 2022, 8:19 PM

• STH added a parent task: T309258: Resolve open design questions around TextInput component.May 26 2022, 12:54 AM

ldelench_wmf moved this task from Needs Refinement to Inbox on the Design-System-Team board.Jul 5 2022, 11:49 AM

ldelench_wmf triaged this task as Lowest priority.Jan 20 2023, 7:06 PM

ldelench_wmf moved this task from Inbox to Backlog on the Design-System-Team board.Jan 20 2023, 7:09 PM

AnneT mentioned this in T328173: [SPIKE] Plan project(s) for DST intern.Jan 30 2023, 3:03 PM

ldelench_wmf removed a parent task: T309258: Resolve open design questions around TextInput component.Feb 18 2023, 12:19 AM

egardner moved this task from Inbox to Proposed Component Updates on the Codex board.Feb 22 2023, 12:30 AM

AnneT updated the task description. (Show Details)Mar 13 2023, 1:23 PM

AnneT changed the task status from Open to In Progress.Mar 13 2023, 3:48 PM