Page MenuHomePhabricator

Style button component & field animation for new search widget
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

We built our button component in T256038: Build the wvui-button component for Vue.js search. Now, with the search spec completed in T255603: Design spec for new Vue.js search experience, we should make some changes to the button to fit the requirements

Acceptance criteria

  • Change the styling of the button, as well as the animation of the text input itself to fit the following design criteria:

Search box + search button

The search box follows OOUI guidelines in terms of styling and interactivity. Please refer to either OOUI or the demo for additional details.

Specs

Note: when the search box is inactive there's a border that wraps around the search box + the search button. It's a bit difficult to show in static mocks so please refer to the interactive demo.

image.png (182×663 px, 18 KB)

States
stateimagenotes
inactive
image.png (32×500 px, 2 KB)
bounding border #a2a9b1
hover search box
image.png (32×500 px, 3 KB)
search button becomes visible (OOUI/"Normal"), search box border darkens (#72777d)
hover search button
image.png (37×508 px, 4 KB)
search button background lightens (#fff) / text lightens (#404244), search box border initial
active & focus
image.png (54×524 px, 5 KB)
search box border (border: 1px / #36c & box-shadow: inset 0 0 0 1px #36c), search icon opacity (1), search box grows 20px wider from the left
has value
image.png (77×525 px, 16 KB)
search box text color #000 / bottom-left corner border radius (0)

Event Timeline

Jdlrobson subscribed.

Seems like this would benefit from analysis from Stephen or someone more closely tied to the Vue work. Assigning Stephen for now who can delegate if necessary.

ovasileva renamed this task from Style button component for new search widget to Style button component & field animation for new search widget.Sep 2 2020, 1:50 PM

Change 627535 had a related patch set uploaded (by Nick Raskin; owner: Nick Raskin):
[wvui@master] Add styles to typeahead-search

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

Change 627535 abandoned by Anribolon:
[wvui@master] Add styles to typeahead-search

Reason:

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

At this point, this task has quite a bit of overlap with @Anribolon's T256041. It may make sense to merge into that task.

All necessary style changes in this task have already been incorporated elsewhere.

nray subscribed.

Storybook currently shows all these states so resolving