feat(SearchBox): allow custom reset and submit components

[Haroenv]

What project are you opening a pull request for?

• react-instantsearch (use v2 base)

Summary

Because the searchbox is icon-based, but we still want to allow people to give custom icons, the solution here is to have custom components. They start lowercase and then end with Component.

A similar solution might be used for example in pagination if this seems useful

see #1954
fixes #1952

Result

Here a text-based (span with emoji content) submit button and an svg as reset button have been chosen as demo.

[mthuret]

I would have maybe compute this before the <form>. What do you think?

[mthuret]

That's nice! Thanks @Haroenv

As for the stories, I'm wondering if we should considerer an example illustrating the text first way. Either as a new one or replacement?

[Haroenv]

Because of the changes in #1795 it's pretty much impossible to make the buttons have text instead of a square icon. Even with a lot of changes it's still impossible to put :active styles around the __wrapper instead of the __input. Square content works perfectly without any css change.

Here is the changes I made to use flexbox instead, which ultimately looks like this:

prototype text-based SearchBox

diff --git packages/react-instantsearch-theme-algolia/mixins/_searchbox.shipow.scss packages/react-instantsearch-theme-algolia/mixins/_searchbox.shipow.scss
index 30b844b1..ac840932 100644
--- packages/react-instantsearch-theme-algolia/mixins/_searchbox.shipow.scss
+++ packages/react-instantsearch-theme-algolia/mixins/_searchbox.shipow.scss
@@ -52,29 +52,27 @@
   &__wrapper {
     width: 100%;
     height: 100%;
+    display: flex;
+    border: 1px solid $input-border-color;
+    border-radius: even-px($border-radius);
   }
 
   &__input {
     @include input();
     display: inline-block;
     transition: box-shadow .4s ease, background .4s ease;
-    border: 1px solid $input-border-color;
-    border-radius: even-px($border-radius);
     background: $input-background;
     box-shadow: 0 1px 1px 0 rgba(85, 95, 110, 0.2);
     padding: 0;
-    padding-right: if($icon-position == 'right', even-px($input-height) + even-px($icon-clear-size) + 8px, even-px($input-height * .8))
-              + if($icon-background-opacity == 0, 0, even-px($font-size));
-    padding-left: if($icon-position == 'right',
-              even-px($font-size / 2) + even-px($border-radius / 2),
-              even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size * 1.2)));
     width: 100%;
     height: 100%;
     vertical-align: middle;
     white-space: normal;
     font-size: inherit;
     appearance: none;
-
+    order: 2;
+    flex-grow: 1;
+    
     &::-webkit-search-decoration,
     &::-webkit-search-cancel-button,
     &::-webkit-search-results-button,
@@ -96,26 +94,22 @@
   }
 
   &__submit {
-    position: absolute;
-    top: 0;
     @if $icon-position == 'right' {
-      right: 0;
-      left: inherit;
+      order: 3;
     } @else {
-      right: inherit;
-      left: 0;
+      order: 1;
     }
     margin: 0;
     border: 0;
     border-radius: if($icon-position == 'right', 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius);
     background-color: rgba($icon-background, $icon-background-opacity);
     padding: 0;
-    width: even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size / 2));
     height: 100%;
     vertical-align: middle;
     text-align: center;
     font-size: inherit;
     user-select: none;
+    flex-grow: 0;
 
     // Helper for vertical alignement of the icon
     &::before {
@@ -123,7 +117,7 @@
       margin-right: -4px;
       height: 100%;
       vertical-align: middle;
-      content: ''2
+      content: '';
     }
 
     &:hover,
@@ -145,11 +139,6 @@
 
   &__reset {
     display: none;
-    position: absolute;
-    top: (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px;
-    right: if($icon-position == 'right',
-      even-px($input-height) + if($icon-background-opacity == 0, 0 , even-px($font-size)),
-      (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px);
     margin: 0;
     border: 0;
     background: none;
@@ -158,6 +147,12 @@
     font-size: inherit;
     user-select: none;
     fill: $icon-color;
+    @if $icon-position == 'right' {
+      order: 1;
+    } @else {
+      order: 3;
+    }
+    flex-grow: 0;
 
     &:focus {
       outline: 0;
diff --git stories/SearchBox.stories.js stories/SearchBox.stories.js
index 2e764ea8..ed3289b0 100644
--- stories/SearchBox.stories.js
+++ stories/SearchBox.stories.js
@@ -8,6 +8,18 @@ const stories = storiesOf('SearchBox', module);
 
 stories.addDecorator(withKnobs);
 
+const i18n = {
+  en: {
+    search: 'search',
+    clear: 'clear',
+  }
+}
+const Intl = ({ val, lang = "en" }) => (
+  <span style={{ padding: ".2em", textTransform: "uppercase" }}>
+    {i18n[lang][val]}
+  </span>
+);
+
 stories.add('default', () =>
   <WrapWithHits searchBox={false} hasPlayground={true} linkedStoryGroup="SearchBox">
     <SearchBox/>
@@ -16,6 +28,13 @@ stories.add('default', () =>
   <WrapWithHits searchBox={false} hasPlayground={true} linkedStoryGroup="SearchBox">
     <SearchBox defaultRefinement="battery" />
   </WrapWithHits>
+).add('text based buttons', () =>
+  <WrapWithHits searchBox={false} hasPlayground={true} linkedStoryGroup="SearchBox" >
+    <SearchBox
+      submitComponent={<Intl val="search" />}
+      resetComponent={<Intl val="clear" />}
+    />
+  </WrapWithHits>
 ).add('with submit and reset components', () =>
   <WrapWithHits searchBox={false} hasPlayground={true} linkedStoryGroup="SearchBox" >
     <SearchBox

The reason this doesn't work properly is because what's the case now is that the buttons are being put "inside" the input and the input has a padding that fits the width of the buttons. This doesn't work when they can have different sizes.

This PR still works for custom icons, so I think that's valuable, because it stays within the philosophy o f #1795 of giving a good default, but if you want to have a custom searchBox, then you should write one.

[vvo]

If I summarize this PR, we now provide a way to provide icons if they fit in the current CSS we are providing.

But if you want simple text buttons for submit you should basically have a custom searchbox? If so it means we are not fixing #1952 no?

[Haroenv]

Yes, unfortunately the way the css works makes it impossible to both have the buttons inside but text outside. This will work no problem when you have a custom css

[vvo]

LGTM, @mthuret?