Fix #2713 - search unmounts unexpectedly (#2726)

Author: katarzynatobis

src/components/search/Search.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import cx from 'classnames';
 import Input, {COLOR, SIZE} from '../form-elements/Input';
 import type {InputPropsType} from '../form-elements/Input';
-import Icon, {ICON_COLOR} from '../icons/Icon';
+import Icon from '../icons/Icon';
 import Button from '../buttons/Button';
 
 export type SearchPropsType = {
@@ -73,34 +73,21 @@ const Search = ({
         className={cx(`${baseClassName}__input`, inputClassName)}
         fullWidth
       />
-
-      {withRoundButton ? (
-        <div className={`${baseClassName}__icon`}>
-          <Button
-            variant="solid"
-            className={cx({
-              'sg-search-button--s': size === 's',
-            })}
-            icon={
-              <Icon
-                type="search"
-                size={size === 'l' ? 24 : 16}
-                color="adaptive"
-              />
-            }
-            iconOnly
-            size={size === 'l' ? 'm' : 's'}
-          />
-        </div>
-      ) : (
-        <button className={`${baseClassName}__icon`}>
-          <Icon
-            type="search"
-            color={ICON_COLOR['icon-gray-50']}
-            size={size === 'l' ? 24 : 16}
-          />
-        </button>
-      )}
+      <Button
+        variant={withRoundButton ? 'solid' : 'transparent-light'}
+        className={cx([
+          `${baseClassName}__icon`,
+          `${baseClassName}__icon--${size}`,
+          {
+            [`${baseClassName}__icon--transparent`]: !withRoundButton,
+          },
+        ])}
+        icon={
+          <Icon type="search" size={size === 'l' ? 24 : 16} color="adaptive" />
+        }
+        iconOnly
+        size={size === 'l' ? 'm' : 's'}
+      />
     </div>
   );
 };

src/components/search/_search.scss

@@ -8,16 +8,26 @@ $includeHtml: false !default;
     &__icon {
       transition: color 0.3s ease-out;
       position: absolute;
-      top: 0;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $white;
-      background: none;
-      border: none;
+      top: 50%;
+      transform: translateY(-50%);
       right: 5px;
-      border-radius: 0 20px 20px 0;
+
+      &--s.sg-button--icon-only {
+        height: componentSize(xs);
+        width: componentSize(xs);
+      }
+
+      &--transparent.sg-button--icon-only {
+        width: 28px;
+
+        &.sg-search__icon--l {
+          width: 36px;
+        }
+
+        & .sg-button__hover-overlay {
+          display: none;
+        }
+      }
     }
 
     &__input {
@@ -43,8 +53,3 @@ $includeHtml: false !default;
     -webkit-appearance: none;
   }
 }
-
-.sg-button.sg-button--s.sg-search-button--s {
-  height: componentSize(xs);
-  width: componentSize(xs);
-}