Create search/filter component

Created on 20 December 2013, about 11 years ago
Updated 10 October 2024, 3 months ago

Problem/Motivation


The search field is rounded both as another opportunity to introduce friendliness into the UI, but also follows a tendency for search fields to be rounded in some browsers and operating systems.

Grouping the single text field and the submit button together simplifies the component and implies a one-to-one relationship between the two. There is also an opportunity to create a bootstap-style input group component.

The dropdown menu is intentionally designed as a distinct component (see the section Dropdowns and Popovers) for modularity of the design and code reusability. Visually and in terms of implementation, merging or joining the search field with the drop down is both awkward and not strictly necessary for usability.

API changes

Some mark up changes

📌 Task
Status

Needs work

Version

11.0 🔥

Component
Theme 

Last updated about 20 hours ago

Created by

🇬🇧United Kingdom lewisnyman Nomadic

Live updates comments and jobs are added and updated live.
  • CSS

    It involves the content or handling of Cascading Style Sheets.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇪Ireland markconroy

    Let's move this to the theme system queue. Looks like it's relevant to Drupal rather than just Seven theme.

  • First commit to issue fork.
  • 🇮🇳India nayana_mvr

    I have re-rolled the MR to D11 but there are UI issues as shown in below screenshot.

    The class names .input-group and .input-group__text are not getting added in the expected elements when compared to the HTML structure shown in http://getbootstrap.com/components/#input-groups. Also, as per my understanding, input-group can only be used if the theme uses Bootstrap style (Please correct me if I'm wrong). In D11 Claro theme doesn't use Bootstrap but there are many contrib themes such as Radix, Bootstrap, etc which can be used to achieve this.

    I tried a different approach for the UI part where I could make the input field and search button inline to each other. Screenshot attached below.

    Attaching both re-rolled patch and patch with new approach here.

    This issue seems to be an old one. Currently in D11, there exists one filter functionality in module extend page so do we still need to work this issue? If not please close this ticket. Moving to Needs Review for feedback.

  • 🇮🇳India nayana_mvr

    Attaching few issue links which I referred while looking into this ticket. Please feel free to remove if it's not relevant.

  • 🇺🇸United States smustgrave

    Patches should be in MR

    Also issue summary should use complete template.

  • Pipeline finished with Failed
    3 months ago
    Total: 445s
    #306930
  • 🇮🇳India nayana_mvr

    Created MR with the new approach and updated IS with complete template. Please review.

  • 🇮🇳India sagarmohite0031

    Hello,
    I have try to reproduced the issue on Drupal 11 but its looks fine for me.
    The MR is applied successfully.

    Please check attachment-

  • 🇺🇸United States smustgrave

    I don't think the MR is accomplishing what is described. All it seems to be doing is changing the label and adding a submit button where not needed. Why do we need a submit button for something that is autosubmitting? Also issue summary contains suggestions as typing which does not appear to be working.

  • 🇮🇪Ireland markconroy

    The free text filter on the "Extend" page is not a search component.

    Please do not work on that as part of this issue.

    This issue is to standardise how search will look where search is actually used when it's a single input+button in Drupal 7.

    I'm not even sure there are examples of this in Drupal 10/11 core at this stage.

    The only thing I can find is this:

    With all that being the case, I am going to close this issue. If someone disagrees, please open a new issue with very clear instructions on what you want to achieve.

Production build 0.71.5 2024