UX: Styling adjustments for filters page (#20768)

Change styling of filter input & remove button.

This follows the same pattern of design we use for search. In the search dropdown we do not have a button to search. We rely on pressing enter. I've also provided an example of Github's PR filter UI at the bottom of this comment.

We also do not have buttons like this on any other topic-list header. On tag and category dropdowns, we also rely on pressing enter to filter the topic list by chosen categories & tags.

Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
This commit is contained in:
Alan Guo Xiang Tan
2023-03-23 06:28:47 +08:00
committed by GitHub
parent 41ed4cac91
commit 4cb79ce8be
3 changed files with 44 additions and 19 deletions

View File

@ -4,12 +4,7 @@ module PageObjects
module Components
class TopicQueryFilter < PageObjects::Components::Base
def fill_in(text)
page.fill_in(class: "topic-query-filter__input", with: text)
page.click_button(
I18n.t("js.filters.filter.button.label"),
class: "topic-query-filter__button",
)
page.fill_in(class: "topic-query-filter__filter-term", with: "#{text}\n")
end
end
end