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.
States
state | image | notes |
---|---|---|
inactive | bounding border #a2a9b1 | |
hover search box | search button becomes visible (OOUI/"Normal"), search box border darkens (#72777d) | |
hover search button | search button background lightens (#fff) / text lightens (#404244), search box border initial | |
active & focus | 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 | search box text color #000 / bottom-left corner border radius (0) | |