Page MenuHomePhabricator

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


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)

Event Timeline

@Volker_E thoughts about which types we should include?

@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.

AnneT changed the task status from Open to In Progress.Mar 13 2023, 3:48 PM
AnneT reassigned this task from AnneT to lwatson.
Restricted Application raised the priority of this task from Lowest to High. · View Herald TranscriptMar 13 2023, 3:48 PM

Change 897918 had a related patch set uploaded (by LWatson; author: LWatson):

[design/codex@main] TextInput: Add additional input types

Change 897918 merged by jenkins-bot:

[design/codex@main] TextInput: Add additional input types

Change 903778 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.7.0 to v0.8.0

Change 903778 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.7.0 to v0.8.0