Create search/filter component

Interesting to have a common approach for all those forms.

Can you please remove the last example? This is just wrong, given that this is no search functionality.

Add a newy patch, because overflow: hidden, and overflow: auto cut box-shadow, on the left side.
Used position relative/absolute, instead of floating.

Patch re-rolled :)

I have tested the patch #13 on windows 7.
There are several bugs:

• left corner isn't rounded
• submit button is on the next line

IE 11:

Google Chrome:

About pacth #13
There is semicolon required at the end after position:absolute.

+++ b/core/themes/seven/css/components/input-group.css
@@ -0,0 +1,25 @@
+.input-group .form-submit {
+  position: absolute

Also there is an issue with submit button width on mobile device.
Google Chrome:

Picking up this issue. I ended up with some css that looked like this:

.input-group {
  position: relative;
}
.input-group .form-item {
  width: 100%;
}
.input-group input.form-search {
     width: 75%;
     padding: .3em .4em .355em .5em;
     border-right: 0; /* LTR */
     border-top-right-radius: 0; /* LTR */
     border-bottom-right-radius: 0; /* LTR */
 }
.form-wrapper.input-group .form-submit {
    width: 25%;
    position: absolute;
    margin: 0;
    top: 0;
    right: 0;
    border-top-left-radius: 0; /* LTR */
    border-bottom-left-radius: 0; /* LTR */
}

@media screen and (max-width: 600px) {
  .input-group input.form-search {
    padding: .3em .4em .3em .5em;
  }
}

Looked good in chrome ... but then I opened Firefox, and there were some layout issues again. Seems like this still needs some work. Maybe we can look into Bootstrap and see how the form group is styled there?

Chrome:
http://cl.ly/image/12083J023x3k
http://cl.ly/image/431k410n0h0S
http://cl.ly/image/183b082e0216

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

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.

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

Patches should be in MR

Also issue summary should use complete template.

Created MR with the new approach and updated IS with complete template but as I mentioned in my previous comment, need input from core team about whether we are still planning to implement this feature or not. Please review.

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-

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.

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.