From 6050c4090b52f21b4ad0b52d9f97754e7d034d25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aappo=20=C3=85lander?= <aappo.alander@gofore.com>
Date: Tue, 19 Jan 2021 14:06:40 +0200
Subject: [PATCH] Add style wrapper for SearchInput.

---
 .../SearchInput/SearchInput.baseStyles.tsx    |   7 +-
 src/core/Form/SearchInput/SearchInput.tsx     | 122 +++++++-------
 .../__snapshots__/SearchInput.test.tsx.snap   | 155 +++++++++---------
 3 files changed, 152 insertions(+), 132 deletions(-)

diff --git a/src/core/Form/SearchInput/SearchInput.baseStyles.tsx b/src/core/Form/SearchInput/SearchInput.baseStyles.tsx
index 84fa1dbf51..d0302e45b1 100644
--- a/src/core/Form/SearchInput/SearchInput.baseStyles.tsx
+++ b/src/core/Form/SearchInput/SearchInput.baseStyles.tsx
@@ -7,11 +7,16 @@ export const baseStyles = withSuomifiTheme(
   ({ theme }: TokensAndTheme) => css`
     &.fi-search-input {
       ${font({ theme })('bodyText')}
-      display: inline-block;
       width: 290px;
     }
 
     & .fi-search-input {
+      &_wrapper {
+        width: 100%;
+        min-width: 105px;
+        display: inline-block;
+      }
+
       &_functionality-container {
         position: relative;
       }
diff --git a/src/core/Form/SearchInput/SearchInput.tsx b/src/core/Form/SearchInput/SearchInput.tsx
index 2c26b8bed7..6e1fe24adb 100644
--- a/src/core/Form/SearchInput/SearchInput.tsx
+++ b/src/core/Form/SearchInput/SearchInput.tsx
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import {
   HtmlInputWithRef,
   HtmlInputProps,
+  HtmlSpan,
   HtmlDiv,
   HtmlDivProps,
   HtmlButton,
@@ -85,6 +86,7 @@ const searchInputClassNames = {
   fullWidth: `${baseClassName}--full-width`,
   error: `${baseClassName}--error`,
   notEmpty: `${baseClassName}--not-empty`,
+  styleWrapper: `${baseClassName}_wrapper`,
   inputElement: `${baseClassName}_input`,
   inputElementContainer: `${baseClassName}_input-element-container`,
   functionalityContainer: `${baseClassName}_functionality-container`,
@@ -208,66 +210,70 @@ class BaseSearchInput extends Component<SearchInputProps> {
           [searchInputClassNames.fullWidth]: fullWidth,
         })}
       >
-        <LabelText htmlFor={id} labelMode={labelMode} as="label">
-          {labelText}
-        </LabelText>
-        <Debounce waitFor={this.props.debounce}>
-          {(debouncer: Function, cancelDebounce: Function) => (
-            <HtmlDiv className={searchInputClassNames.functionalityContainer}>
-              <HtmlDiv className={searchInputClassNames.inputElementContainer}>
-                <HtmlInputWithRef
-                  {...passProps}
-                  {...getConditionalAriaProp('aria-describedby', [
-                    !!statusText ? statusTextId : undefined,
-                    ariaDescribedBy,
-                  ])}
-                  forwardRef={this.inputRef}
-                  aria-invalid={status === 'error'}
-                  id={id}
-                  className={searchInputClassNames.inputElement}
-                  type="search"
-                  role="searchbox"
-                  value={this.state.value}
-                  placeholder={visualPlaceholder}
-                  onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                    const eventValue = event.currentTarget.value;
-                    conditionalSetState(eventValue);
-                    if (propOnChange) {
-                      debouncer(propOnChange, eventValue);
-                    }
+        <HtmlSpan className={searchInputClassNames.styleWrapper}>
+          <LabelText htmlFor={id} labelMode={labelMode} as="label">
+            {labelText}
+          </LabelText>
+          <Debounce waitFor={this.props.debounce}>
+            {(debouncer: Function, cancelDebounce: Function) => (
+              <HtmlDiv className={searchInputClassNames.functionalityContainer}>
+                <HtmlDiv
+                  className={searchInputClassNames.inputElementContainer}
+                >
+                  <HtmlInputWithRef
+                    {...passProps}
+                    {...getConditionalAriaProp('aria-describedby', [
+                      !!statusText ? statusTextId : undefined,
+                      ariaDescribedBy,
+                    ])}
+                    forwardRef={this.inputRef}
+                    aria-invalid={status === 'error'}
+                    id={id}
+                    className={searchInputClassNames.inputElement}
+                    type="search"
+                    role="searchbox"
+                    value={this.state.value}
+                    placeholder={visualPlaceholder}
+                    onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                      const eventValue = event.currentTarget.value;
+                      conditionalSetState(eventValue);
+                      if (propOnChange) {
+                        debouncer(propOnChange, eventValue);
+                      }
+                    }}
+                    onKeyPress={onKeyPress}
+                    onKeyDown={onKeyDown}
+                  />
+                </HtmlDiv>
+                <HtmlButton
+                  {...clearButtonProps}
+                  onClick={() => {
+                    onClear();
+                    cancelDebounce();
                   }}
-                  onKeyPress={onKeyPress}
-                  onKeyDown={onKeyDown}
-                />
+                >
+                  <VisuallyHidden>{clearButtonLabel}</VisuallyHidden>
+                  <Icon
+                    aria-hidden={true}
+                    icon="close"
+                    className={searchInputClassNames.clearIcon}
+                  />
+                </HtmlButton>
+                <HtmlButton {...searchButtonDerivedProps}>
+                  <VisuallyHidden>{searchButtonLabel}</VisuallyHidden>
+                  <Icon
+                    aria-hidden={true}
+                    icon="search"
+                    className={searchInputClassNames.searchIcon}
+                  />
+                </HtmlButton>
               </HtmlDiv>
-              <HtmlButton
-                {...clearButtonProps}
-                onClick={() => {
-                  onClear();
-                  cancelDebounce();
-                }}
-              >
-                <VisuallyHidden>{clearButtonLabel}</VisuallyHidden>
-                <Icon
-                  aria-hidden={true}
-                  icon="close"
-                  className={searchInputClassNames.clearIcon}
-                />
-              </HtmlButton>
-              <HtmlButton {...searchButtonDerivedProps}>
-                <VisuallyHidden>{searchButtonLabel}</VisuallyHidden>
-                <Icon
-                  aria-hidden={true}
-                  icon="search"
-                  className={searchInputClassNames.searchIcon}
-                />
-              </HtmlButton>
-            </HtmlDiv>
-          )}
-        </Debounce>
-        <StatusText id={statusTextId} status={status}>
-          {statusText}
-        </StatusText>
+            )}
+          </Debounce>
+          <StatusText id={statusTextId} status={status}>
+            {statusText}
+          </StatusText>
+        </HtmlSpan>
       </HtmlDiv>
     );
   }
diff --git a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
index f87d5a741d..4f28359844 100644
--- a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
+++ b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
@@ -116,7 +116,7 @@ exports[`snapshot should have matching default structure 1`] = `
   box-sizing: border-box;
 }
 
-.c3 {
+.c2 {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -140,8 +140,8 @@ exports[`snapshot should have matching default structure 1`] = `
   white-space: normal;
 }
 
-.c3::before,
-.c3::after {
+.c2::before,
+.c2::after {
   box-sizing: border-box;
 }
 
@@ -157,7 +157,7 @@ exports[`snapshot should have matching default structure 1`] = `
   overflow: hidden;
 }
 
-.c2.fi-label-text .fi-label-text_label-span {
+.c3.fi-label-text .fi-label-text_label-span {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
   -ms-letter-spacing: 0;
@@ -176,7 +176,7 @@ exports[`snapshot should have matching default structure 1`] = `
   color: hsl(0,0%,16%);
 }
 
-.c2.fi-label-text .fi-label-text_label-span .fi-label-text_optionalText {
+.c3.fi-label-text .fi-label-text_label-span .fi-label-text_optionalText {
   font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -202,10 +202,15 @@ exports[`snapshot should have matching default structure 1`] = `
   font-size: 18px;
   line-height: 1.5;
   font-weight: 400;
-  display: inline-block;
   width: 290px;
 }
 
+.c1 .fi-search-input_wrapper {
+  width: 100%;
+  min-width: 105px;
+  display: inline-block;
+}
+
 .c1 .fi-search-input_functionality-container {
   position: relative;
 }
@@ -460,82 +465,86 @@ exports[`snapshot should have matching default structure 1`] = `
 <div
   class="c0 c1 fi-search-input"
 >
-  <label
-    class="c0 c2 fi-label-text"
-    for="1"
+  <span
+    class="c2 fi-search-input_wrapper"
   >
-    <span
-      class="c3 fi-label-text_label-span"
-    >
-      Test search input
-    </span>
-  </label>
-  <div
-    class="c0 fi-search-input_functionality-container"
-  >
-    <div
-      class="c0 fi-search-input_input-element-container"
-    >
-      <input
-        aria-invalid="false"
-        class="c4 fi-search-input_input"
-        data-testid="searchinput"
-        id="1"
-        role="searchbox"
-        type="search"
-        value=""
-      />
-    </div>
-    <button
-      aria-hidden="true"
-      class="c5 fi-search-input_button fi-search-input_button-clear"
-      tabindex="-1"
-      type="button"
+    <label
+      class="c0 c3 fi-label-text"
+      for="1"
     >
       <span
-        class="c3 c6 fi-visually-hidden"
+        class="c2 fi-label-text_label-span"
       >
-        Clear
+        Test search input
       </span>
-      <svg
-        aria-hidden="true"
-        class="fi-icon c7 fi-search-input_button-clear-icon"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
+    </label>
+    <div
+      class="c0 fi-search-input_functionality-container"
+    >
+      <div
+        class="c0 fi-search-input_input-element-container"
       >
-        <path
-          d="M12 13.45L4.75 20.7a1.026 1.026 0 01-1.45-1.45L10.55 12 3.3 4.75A1.026 1.026 0 014.75 3.3L12 10.55l7.25-7.25a1.026 1.026 0 011.45 1.45L13.45 12l7.25 7.25a1.026 1.026 0 01-1.45 1.45L12 13.45z"
+        <input
+          aria-invalid="false"
+          class="c4 fi-search-input_input"
+          data-testid="searchinput"
+          id="1"
+          role="searchbox"
+          type="search"
+          value=""
         />
-      </svg>
-    </button>
-    <button
-      aria-hidden="true"
-      class="c5 fi-search-input_button fi-search-input_button-search"
-      tabindex="-1"
-      type="button"
-    >
-      <span
-        class="c3 c6 fi-visually-hidden"
+      </div>
+      <button
+        aria-hidden="true"
+        class="c5 fi-search-input_button fi-search-input_button-clear"
+        tabindex="-1"
+        type="button"
       >
-        Search
-      </span>
-      <svg
+        <span
+          class="c2 c6 fi-visually-hidden"
+        >
+          Clear
+        </span>
+        <svg
+          aria-hidden="true"
+          class="fi-icon c7 fi-search-input_button-clear-icon"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M12 13.45L4.75 20.7a1.026 1.026 0 01-1.45-1.45L10.55 12 3.3 4.75A1.026 1.026 0 014.75 3.3L12 10.55l7.25-7.25a1.026 1.026 0 011.45 1.45L13.45 12l7.25 7.25a1.026 1.026 0 01-1.45 1.45L12 13.45z"
+          />
+        </svg>
+      </button>
+      <button
         aria-hidden="true"
-        class="fi-icon c7 fi-search-input_button-search-icon"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
+        class="c5 fi-search-input_button fi-search-input_button-search"
+        tabindex="-1"
+        type="button"
       >
-        <path
-          d="M9 2C5.14 2 2 5.141 2 9.001 2 12.86 5.14 16 9 16s7-3.14 7-6.999C16 5.141 12.86 2 9 2m7.029 12.615l7.678 7.678a.999.999 0 11-1.414 1.414l-7.678-7.678A8.957 8.957 0 019 18c-4.962 0-9-4.037-9-8.999C0 4.038 4.038 0 9 0s9 4.038 9 9.001a8.955 8.955 0 01-1.971 5.614z"
-        />
-      </svg>
-    </button>
-  </div>
+        <span
+          class="c2 c6 fi-visually-hidden"
+        >
+          Search
+        </span>
+        <svg
+          aria-hidden="true"
+          class="fi-icon c7 fi-search-input_button-search-icon"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <path
+            d="M9 2C5.14 2 2 5.141 2 9.001 2 12.86 5.14 16 9 16s7-3.14 7-6.999C16 5.141 12.86 2 9 2m7.029 12.615l7.678 7.678a.999.999 0 11-1.414 1.414l-7.678-7.678A8.957 8.957 0 019 18c-4.962 0-9-4.037-9-8.999C0 4.038 4.038 0 9 0s9 4.038 9 9.001a8.955 8.955 0 01-1.971 5.614z"
+          />
+        </svg>
+      </button>
+    </div>
+  </span>
 </div>
 `;