Page MenuHomePhabricator

Combine inputs and buttons that are intrinsically tied together (ex: ActionFieldLayout)
Closed, ResolvedPublic1 Story Points

Description

As of v0.27.1 of OOUI, we feature ActionFieldLayouts as follows:

Over time a number of interfaces, OOUI based and beyond the library have seen similar treatments:
Wikipedia Portals:

AdvancedSearch:

Proposal:

All input/button combinations, where the button is intrinsically tied to the input shouldn't feature a margin in between but become one combined visual element.

Proposed treatment of elements:

Wikipedia.org

AdvancedSearch:

Details

Event Timeline

Volker_E created this task.May 30 2018, 1:57 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Volker_E added a comment.EditedMay 30 2018, 2:02 PM

We already have other widgets featuring the same combination when intrinsically tied together: NumberInputWidget, ComboboxInputWidget and SelectFileWidget.

I like this concept. Would this be a change to ActionFieldLayout or a new kind of layout?

Volker_E added a comment.EditedMay 30 2018, 5:01 PM

@Jdforrester-WMF From a short search it seems more promising to amend ActionLayout for it. It already provided us with CSS classes for input and button combinations.
If one would want to stay with a separation, there's still HorizontalLayout.
The main purpose in production for ActionLayout seems to be the input (sort of TextInput) and directly connected button.

Volker_E triaged this task as High priority.Jun 1 2018, 2:05 PM
Volker_E renamed this task from Combine inputs and buttons that are intrinsically tied together to Combine inputs and buttons that are intrinsically tied together (ex: ActionFieldLayout).Jun 3 2018, 9:26 PM
Volker_E moved this task from Backlog to Next-up on the OOUI board.Jun 4 2018, 2:38 PM
RHo added a comment.EditedJun 4 2018, 4:58 PM

+1 really like this proposal as well!

Only comment/question is whether we could use the same search-icon-in-connected-button for advanced search too:

@RHo Yes, this is already possible, it's not part of the specific patch, which will only care about the distance and things like removing border-radius on connected combinations. Deciding on the search appearance is still flexible to product owners, OOUI's own SearchInput, to make possible variety complete, is no input+button combination per default, but just an input:

We might want to think about changing it's out-of-the-box appearance in guidelines on “Components” in future.

I am very much in favor of this change, and I am +1ing @RHo's comment on using the search icon in the connected button. This is extremely relevant to work I'm doing on Commons searching of Depicts statements.

Volker_E updated the task description. (Show Details)Jun 4 2018, 8:10 PM
Volker_E added a subscriber: Lea_WMDE.

Change 437534 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[oojs/ui@master] ActionFieldLayout, themes: Combine inputs and buttons

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

Volker_E moved this task from Next-up to Reviewing on the OOUI board.Jun 5 2018, 7:22 PM

Change 437534 merged by jenkins-bot:
[oojs/ui@master] ActionFieldLayout: Visually combine inputs and their buttons

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

Jdforrester-WMF closed this task as Resolved.Jun 5 2018, 11:25 PM
Jdforrester-WMF assigned this task to Volker_E.
Jdforrester-WMF moved this task from Reviewing to OOUI-0.27.2 on the OOUI board.
Jdforrester-WMF edited projects, added OOUI (OOUI-0.27.2); removed OOUI.
Jdforrester-WMF removed a project: Patch-For-Review.
Jdforrester-WMF set the point value for this task to 1.

This was released in OOUI v0.27.2, which will roll out with MediaWiki 1.32.0-wmf.8.

Volker_E moved this task from Backlog to OOUI-0.27.2 on the OOUI board.Jun 11 2018, 11:49 AM
Volker_E edited projects, added OOUI (OOUI-0.27.2); removed OOUI.
Vvjjkkii renamed this task from Combine inputs and buttons that are intrinsically tied together (ex: ActionFieldLayout) to mzbaaaaaaa.Jul 1 2018, 1:07 AM
Vvjjkkii reopened this task as Open.
Vvjjkkii removed Volker_E as the assignee of this task.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed the point value for this task.
Vvjjkkii removed subscribers: gerritbot, Aklapper.
CommunityTechBot renamed this task from mzbaaaaaaa to Combine inputs and buttons that are intrinsically tied together (ex: ActionFieldLayout).Jul 2 2018, 12:52 PM
CommunityTechBot closed this task as Resolved.
CommunityTechBot assigned this task to Volker_E.
CommunityTechBot set the point value for this task to 1.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added subscribers: gerritbot, Aklapper.
Volker_E raised the priority of this task from High to Needs Triage.Nov 27 2018, 4:34 AM
Volker_E moved this task from Backlog to Done on the UI-Standardization-Kanban board.