Add a search/input group component

How did this go unnoticed all this time? I think this looks great and not out of place with Bartik's design.

Tagging to try and get further opinions and more testing of this.

This patch needs a reroll, leaving the +Needs usability review tag to get some design eyes on at least the screenshot from @LewisNyman.

Re-roll of #2.

I am not sure about the roundness do we do that on any other forms? Combing sounds fine to me

I am actually not so sure, because that often is in alignment with a very special position on the page. In our case, its simply in a block and can often be placed close to other forms.

I tried to show the search block next to the login block to see if the different form styling was an issue but turns out the patch re-roll did not go to plan. See screenshot...

Pushing this to 8.1.x as we are all far too busy fixing things to do the fun design tasks right now :)

Yay we can open this again

Hi I just played around with the search button. Here is my suggestion. It will be better if we go with a full width searchbox. I t will also be very handy when considering responsiveness.
In Large displays

Kindly advice

Hi @syamnath_zyxware. Thanks for the mockup! I am going to ping @yoroy, who is one of the Usability maintainers for Drupal 8 core to get some feedback for you :-)

@yoroy Please can you give any advice or feedback for this issue and the idea in #17?

Thanks!

Sorry for the delay. Thanks for working on this @syamnath_zyxware. I think his looks great! I agree full width would be useful to do as well. Go for it :)

Yay! :-)

Hi I have created a patch making the search the same design as above. It has been did in the rtl also. needs review

It looks great in all sizes, but I've found a really small thing: on small devices the text inside the input is partially hidden in the bottom (the descenders only). Since the text size is increased to 16px for small devices (form.css, line 83), the padding padding: 4px 0 4px 0; plus the height: 16px; are not enough. It's just a matter of 1px.

@ckrina, i've found this small thing too via FF and fixed it. Screens below

Before #26:

After #26:

Thanks all, this looks good to go!

I will take a look at this today. I've also noticed there are no screenshots of the search form on the search page either so will check it out.

The search component is definitely used in the main content region on a search result page and the block can also be placed in *any* region. Therefore we cannot assume that it should span full width of the container. See below.
 

 
Also placing the block in other regions produces a broken search component, see below.
 

We put a lot of work into the search component to make it reusable wherever it is placed plus only using one set of component CSS. I don't want that progress to go too far backwards.

I will check

@emma.maria, with the patch #26 we can't keep the same styles (and correct) everywhere. That's why i've restyled a lot of things in my patch. Please check screens and test it. For now we have static sizes for loupe-icon for all resolutions. Looks ok i guess. Waiting for your feedback

Hi @kostyashupenko, I'm afraid I've found some issues with that last patch. On some places the class .form-item adds margins to the input group element so the absolute position in the submit button causes it to be above the text input.

will check

@ckrina, issue fixed in this patch

I have changed the version to 8.2.x-dev from 8.3.x -dev , as patches are being submitted on 8.2.x-dev.

I've just seen one issue on smaller devices (smaller than 600px):

It's the line 310 in form.css that adds this 10px as top margin:

@media all and (max-width: 600px) {
  .form-actions .button {
    float: none;
    margin: 10px 0 0;
  }
}

Just checked it and it was the bottom margin from the general inputs in form.css who was creating this misalignment. I overrided it just for this component in small devices, but maybe it's not the best approach.

@media all and (max-width: 600px) {
  .search-form .form-search {
    margin-bottom: 0;
  }
}

Tested. Everything work fine for patch #40, but the alignment of the search-form-submit-button in mobile devices is not proper.
Screenshots has been attached for all and have pointed out the issue on the screenshot using an arrow. Rest is fine.

Issue on : after-mobile-form.png

I think we should close this issue since this has already been implemented into Bartik both in 8.2.x dev and 8.3.x.