Page MenuHomePhabricator
Create Task
Maniphest T342126

Select: unify styles with the rest of form items
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To
bmartinezcalvo
Authored By
bmartinezcalvo
Jul 18 2023, 2:28 PM
Tags
Referenced Files
F57782276: Captura de pantalla 2024-12-05 a las 18.13.32.png
Dec 5 2024, 5:14 PM
F57779494: image.png
Dec 4 2024, 9:22 PM
F57582538: Captura de pantalla 2024-10-02 a las 13.36.30.png
Oct 2 2024, 11:37 AM
F57582536: Captura de pantalla 2024-10-02 a las 13.36.22.png
Oct 2 2024, 11:37 AM
F37124642: image.png
Jul 18 2023, 2:28 PM
Subscribers
AAlhazwani-WMF
Aklapper
bmartinezcalvo
CCiufo-WMF
DTorsani-WMF
RHo
Volker_E

Description

Background

There are some visual inconsistencies between Select and the rest of form items (Combobox, TextInput, Lookup):

  • Padding is not the same as flagged in T340858: Select: unify padding with TextInput
  • Background color: It will finally remain @background-color-interactive-subtle while TextInput, Combobox, and Lookup will use @background-color-base
  • Placeholder text: Select uses color-base while TextInput, Combobox, and Lookup use color-placeholder

We need to evaluate updating the Select component to unify its styles with the ones in the rest of form items.

Captura de pantalla 2024-10-02 a las 13.36.22.png (500×1 px, 49 KB)
Captura de pantalla 2024-10-02 a las 13.36.30.png (496×1 px, 52 KB)

Known use cases

image.png (1×896 px, 114 KB)
On Wikifunctions they use a combination of TextInput, Select, and Lookup component to let contributors edit a Wikifunctions object (a typed JSON) via a GUI.

Design spec

  • Left padding 8px
  • Default state: @color-subtle, @background-color-interactive-subtle, @border-color-interactive
    • Hover on default state: @color-subtle, @background-color-interactive-subtle--hover, @border-color-interactive--hover
  • Filled state: @color-base, @background-color-interactive-subtle, @border-color-interactive
    • Hover on filled state: @color-base, @background-color-interactive-subtle--hover, @border-color-interactive--hover
Component spec sheet

Open questions

  • Do we want to use @background-color-base for the Select's background? No, we will finally use @background-color-interactive-subtle in Select

Acceptance criteria (or Done)

Design

  • Design the Figma spec sheet and add it in this task
  • Update the component in the Figma library. This step will be done by a DST member.

Code

  • Implement the component updates in Codex
Future tasks

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
Update Codex from v1.17.0 to v1.18.0mediawiki/coremaster+286 -148
Select: unify form element stylesdesign/codexmain+42 -24
Update Codex from v1.16.0 to v1.17.0mediawiki/coremaster+690 -449
Select: unify form element stylesdesign/codexmain+37 -9
Customize query in gerrit

Related Objects

Event Timeline

bmartinezcalvo created this task.Jul 18 2023, 2:28 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 18 2023, 2:28 PM
bmartinezcalvo mentioned this in T340858: Select: unify padding with TextInput.Jul 18 2023, 2:32 PM
RHo added a project: Design.Jul 24 2023, 5:22 PM
CCiufo-WMF moved this task from Backlog to Proposed Component Updates on the Codex board.Aug 3 2023, 8:08 PM
CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.
bmartinezcalvo mentioned this in T370663: [EPIC] Unify states in interactive components.Jul 24 2024, 2:21 PM
bmartinezcalvo attached a referenced file: F37124642: image.png. (Show Details)Jul 24 2024, 4:19 PM
bmartinezcalvo added a parent task: T370663: [EPIC] Unify states in interactive components.
bmartinezcalvo renamed this task from Select: evaluate the background color to Select: unify styles with the rest of form items.Oct 2 2024, 11:37 AM
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo added a subscriber: DTorsani-WMF.
CCiufo-WMF removed a parent task: T370663: [EPIC] Unify states in interactive components.Oct 2 2024, 2:55 PM
CCiufo-WMF assigned this task to bmartinezcalvo.Oct 29 2024, 6:30 PM
CCiufo-WMF triaged this task as Low priority.
CCiufo-WMF set the point value for this task to 0.
CCiufo-WMF edited projects, added Design-System-Team (DST-Sprint-35 (2024-10-28 to 2024-11-08)); removed Design-System-Team.

Temporary estimate to reflect design work this sprint.

bmartinezcalvo moved this task from Committed to In Progress on the Design-System-Team (DST-Sprint-35 (2024-10-28 to 2024-11-08)) board.Oct 29 2024, 6:32 PM
DTorsani-WMF changed the point value for this task from 0 to 1.Oct 29 2024, 6:55 PM
bmartinezcalvo updated the task description. (Show Details)Nov 7 2024, 5:02 PM
gerritbot added a comment.Nov 7 2024, 7:21 PM

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

[design/codex@main] Select: unify form element styles

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

gerritbot added a project: Patch-For-Review.Nov 7 2024, 7:21 PM
lwatson moved this task from In Progress to Code Review on the Design-System-Team (DST-Sprint-35 (2024-10-28 to 2024-11-08)) board.Nov 7 2024, 7:46 PM
lwatson moved this task from Code Review to Design Review on the Design-System-Team (DST-Sprint-35 (2024-10-28 to 2024-11-08)) board.Nov 8 2024, 12:01 AM
bmartinezcalvo merged a task: T340858: Select: unify padding with TextInput.Nov 8 2024, 2:34 PM
bmartinezcalvo updated the task description. (Show Details)Nov 11 2024, 11:10 AM
CCiufo-WMF raised the priority of this task from Low to Needs Triage.Nov 12 2024, 5:47 PM
CCiufo-WMF edited projects, added Design-System-Team; removed Design-System-Team (DST-Sprint-35 (2024-10-28 to 2024-11-08)).
CCiufo-WMF moved this task from Backlog to Needs Refinement on the Design-System-Team board.
CCiufo-WMF triaged this task as Low priority.Nov 22 2024, 4:41 PM
CCiufo-WMF edited projects, added Design-System-Team (DST-Sprint-36 (2024-11-11 to 2024-11-22)); removed Design-System-Team.
CCiufo-WMF moved this task from Committed to Code Review on the Design-System-Team (DST-Sprint-36 (2024-11-11 to 2024-11-22)) board.
gerritbot added a comment.Nov 25 2024, 10:36 AM

Change #1088361 merged by jenkins-bot:

[design/codex@main] Select: unify form element styles

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

Maintenance_bot removed a project: Patch-For-Review.Nov 25 2024, 11:30 AM
bmartinezcalvo moved this task from Code Review to Pending Release on the Design-System-Team (DST-Sprint-36 (2024-11-11 to 2024-11-22)) board.Nov 25 2024, 12:22 PM
bmartinezcalvo updated the task description. (Show Details)Nov 25 2024, 12:25 PM
bmartinezcalvo updated the task description. (Show Details)Nov 25 2024, 12:27 PM
lwatson edited projects, added Design-System-Team (DST-Sprint-37 (2024-11-25 to 2024-12-06)); removed Design-System-Team (DST-Sprint-36 (2024-11-11 to 2024-11-22)).Nov 25 2024, 6:27 PM
CCiufo-WMF moved this task from Committed to Code Review on the Design-System-Team (DST-Sprint-37 (2024-11-25 to 2024-12-06)) board.Nov 25 2024, 6:28 PM
gerritbot added a comment.Nov 25 2024, 7:51 PM

Change #1097486 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] Select: unify form element styles

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

gerritbot added a project: Patch-For-Review.Nov 25 2024, 7:51 PM
gerritbot added a comment.Nov 26 2024, 10:41 PM

Change #1098171 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/core@master] Update Codex from v1.16.0 to v1.17.0

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

PatchDemoBot added a comment.Nov 26 2024, 10:44 PM

Test wiki created on Patch demo by Eric C Gardner using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/421c033f07/w/

gerritbot added a comment.Nov 27 2024, 10:31 PM

Change #1098171 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.16.0 to v1.17.0

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

Volker_E subscribed.Dec 4 2024, 9:22 PM

The padding change results in this, which is design-wise problematic:

image.png (766×308 px, 57 KB)

DTorsani-WMF added a comment.Dec 5 2024, 1:22 AM

@Volker_E do you mean because the horizontal padding of menu items within a menu is 12px and not 8px, same as the new select styles? I think that's okay. We could update it to be 8px, but I think we could make that update later. I also think it might be okay that the menu items feel a bit indented from the select.

Volker_E added a comment.Dec 5 2024, 6:06 AM

@DTorsani-WMF Indeed. This looks unclean and faulty to me. But in all honesty I might be too old-school here when I compare it with a number of macOS menus end of 2024. 🙂

DTorsani-WMF mentioned this in T381566: Menu: Investigate adjustment of horizontal padding from 12px to 8px.Dec 5 2024, 12:04 PM

I definitely think it's worth exploring in the future. We can do that in T381566: Menu: Investigate adjustment of horizontal padding from 12px to 8px.

bmartinezcalvo added a comment.EditedDec 5 2024, 5:13 PM
El T342126#10381522, @Volker_E escribió:

The padding change results in this, which is design-wise problematic:

image.png (766×308 px, 57 KB)

Since the rest of inputs use 8px padding, the padding between the menu items and the input is currently inconsistent in all the form items displaying a menu (Combobox, Lookup, MultiselectLookup).

Captura de pantalla 2024-12-05 a las 18.13.32.png (434×789 px, 20 KB)

In case we want to align input and menu items, there are 2 possible solutions:

  • Update the MenuItem paddings from 12px to 8px
  • Update all the form items paddings from 8px to 12px

For now, I would solve this task since this was to align the Select styles with the rest of the form items. We will explore how to align the menu with Select (and the rest of items displaying a Menu) in T381566.

Volker_E moved this task from Code Review to Pending Release on the Design-System-Team (DST-Sprint-37 (2024-11-25 to 2024-12-06)) board.Dec 9 2024, 10:08 PM
Volker_E removed a project: Patch-For-Review.
gerritbot added a comment.Dec 9 2024, 11:38 PM

Change #1097486 merged by jenkins-bot:

[design/codex@main] Select: unify form element styles

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

bmartinezcalvo updated the task description. (Show Details)Dec 10 2024, 10:04 AM
gerritbot added a comment.Dec 10 2024, 10:09 PM

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

[mediawiki/core@master] Update Codex from v1.17.0 to v1.18.0

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

gerritbot added a project: Patch-For-Review.Dec 10 2024, 10:09 PM
gerritbot added a comment.Dec 11 2024, 12:11 AM

Change #1101943 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v1.17.0 to v1.18.0

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

Maintenance_bot removed a project: Patch-For-Review.Dec 11 2024, 12:31 AM
lwatson closed this task as Resolved.Dec 12 2024, 1:39 PM
PatchDemoBot added a comment.Mar 14 2025, 9:11 PM

Test wiki on Patch demo by Eric C Gardner using patch(es) linked to this task was deleted:

http://patchdemo.wmcloud.org/wikis/421c033f07/w/

Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits