Page MenuHomePhabricator

Update TextInput to meet the Figma designs
Closed, ResolvedPublic

Description

The Codex TextInput component was built before we had updated design specs. Let's do the following to ensure Codex components are in line with final spec sheets:

  • Update TextInput to meet the Figma design specifications
  • Check components that use TextInput to make sure there are no unintended changes

Demo for the patch: https://777857--wikimedia-codex.netlify.app/components/text-input.html

Event Timeline

Hey, @AnneT 👋🏻 After further discussion between design folks, we decided against adjusting the TextInput styles based on the SearchInput specs.

While working on the TahS, I wanted to take the opportunity to push some changes to our Inputs. I don't think this was correct: the right thing to do would be to, for now, base the SearchInput on the existing TextInput styles (reuse it as is – I'll update the SearchInput specs). If needed (depends on upcomming design discussions) we'll adjust the TextInput component in a dedicated task later. This way, we'd be propagating changes from the "parent" to the consumer component, which is a more organized workflow.

I think we can either decline or repurpose this task, since the first to do ("Update TextInput to meet the figma designs") might still be relevant in case we update the design of the TextInput.

Sorry about the inconveniences that this change of direction might cause, and thanks for your patience!

AnneT renamed this task from Ensure TextInput and SearchInput styles match their respective component specs to Update TextInput to meet the figma designs.Apr 6 2022, 1:28 PM
AnneT updated the task description. (Show Details)

Thanks for the explanation, @Sarai-WMDE! I do think there are a few adjustments needed for the TextInput to meet the design spec, so I've renamed the task as you suggested.

Change 777857 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] TextInput, tokens: Update TextInput styles to match design spec

https://gerrit.wikimedia.org/r/777857

The open patch is ready for designer sign-off. You can check it out here: https://777857--wikimedia-codex.netlify.app/components/text-input.html

Only one remark to make after comparing the component in the patch with the existing Figma designs. I'm ignoring work in progress design changes (e.g. see T305593 or T302064) and some visual misalignment that should actually be resolved in Figma:

  • The default text/icon color of active inputs should be Base10 (#202122, @color-base) instead of Base0

This point is probably related to T305411. I wonder if we should add a list of the visual issues that we expect will be solved as an outcome of that task? Just as a way to validate our assumptions.

thanks @Sarai-WMDE; I went ahead and changed the text color in my patch (the icon colors were already @color-base). Let me know if you see any other discrepancies!

Change 777857 merged by jenkins-bot:

[design/codex@main] TextInput: Update TextInput styles to match design spec

https://gerrit.wikimedia.org/r/777857

Perfect! I think no further changes need to be requested at this time 👍🏻

STH renamed this task from Update TextInput to meet the figma designs to Update TextInput to meet the Figma designs.Apr 15 2022, 9:04 PM
STH changed the task status from Open to In Progress.
STH triaged this task as High priority.