From a72d1499d6b11b1d7562a212faa3ff3919ce2ae6 Mon Sep 17 00:00:00 2001
From: Kyrylo Hudym-Levkovych <kyr.hudym@kyrs-MacBook-Pro.local>
Date: Fri, 13 Oct 2023 14:42:29 +0300
Subject: [PATCH 1/2] feat: change custom submit and reset btns with IconButton

---
 src/SearchField/SearchField.test.jsx          |  2 +-
 src/SearchField/SearchFieldClearButton.jsx    | 16 ++++---
 src/SearchField/SearchFieldSubmitButton.jsx   | 16 +++----
 .../__snapshots__/SearchField.test.jsx.snap   | 42 +++++++++----------
 4 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/src/SearchField/SearchField.test.jsx b/src/SearchField/SearchField.test.jsx
index ac05fb5780..1f6cebba55 100644
--- a/src/SearchField/SearchField.test.jsx
+++ b/src/SearchField/SearchField.test.jsx
@@ -176,7 +176,7 @@ describe('<SearchField /> with basic usage', () => {
       const inputElement = screen.getByRole('searchbox');
       await userEvent.type(inputElement, 'foobar');
       const buttonClear = screen.getByRole('button', { type: 'reset', variant: buttonProps.variant });
-      expect(buttonClear).toHaveAttribute('variant', 'inline');
+      expect(buttonClear).toHaveClass(`btn-icon-${buttonProps.variant}`);
     });
 
     it('should pass props to the label', () => {
diff --git a/src/SearchField/SearchFieldClearButton.jsx b/src/SearchField/SearchFieldClearButton.jsx
index bf667fa0de..e061b2205d 100644
--- a/src/SearchField/SearchFieldClearButton.jsx
+++ b/src/SearchField/SearchFieldClearButton.jsx
@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
 
 import { SearchFieldContext } from './SearchFieldAdvanced';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
 
 function SearchFieldClearButton(props) {
   const {
@@ -18,11 +20,15 @@ function SearchFieldClearButton(props) {
   };
 
   return (
-    // eslint-disable-next-line react/button-has-type
-    <button type="reset" className="btn" disabled={disabled} onClick={handleClick} {...props}>
-      {icons.clear}
-      <span className="sr-only">{screenReaderText.clearButton}</span>
-    </button>
+    <IconButton
+      type="reset"
+      src={icons.clear.props.src}
+      iconAs={Icon}
+      alt={screenReaderText.clearButton}
+      disabled={disabled}
+      onClick={handleClick}
+      {...props}
+    />
   );
 }
 
diff --git a/src/SearchField/SearchFieldSubmitButton.jsx b/src/SearchField/SearchFieldSubmitButton.jsx
index eff97e9004..2eec8d6635 100644
--- a/src/SearchField/SearchFieldSubmitButton.jsx
+++ b/src/SearchField/SearchFieldSubmitButton.jsx
@@ -1,9 +1,10 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 
 import { SearchFieldContext } from './SearchFieldAdvanced';
 import Button from '../Button';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
 
 const STYLE_VARIANTS = [
   'light',
@@ -40,16 +41,15 @@ function SearchFieldSubmitButton(props) {
       <span className="sr-only">{screenReaderText.submitButton}</span>
     </Button>
   ) : (
-    <button
+    <IconButton
       type="submit"
-      className={classNames('btn')}
-      ref={refs.submitButton}
+      src={icons.submit.props.src}
+      iconAs={Icon}
+      alt={screenReaderText.submitButton}
       disabled={disabled}
+      ref={refs.submitButton}
       {...others}
-    >
-      {icons.submit}
-      <span className="sr-only">{screenReaderText.submitButton}</span>
-    </button>
+    />
   );
 }
 
diff --git a/src/SearchField/__snapshots__/SearchField.test.jsx.snap b/src/SearchField/__snapshots__/SearchField.test.jsx.snap
index 9cd5cf7612..3e8b3a69ac 100644
--- a/src/SearchField/__snapshots__/SearchField.test.jsx.snap
+++ b/src/SearchField/__snapshots__/SearchField.test.jsx.snap
@@ -28,32 +28,32 @@ exports[`<SearchField /> with basic usage should match the snapshot 1`] = `
         value=""
       />
       <button
-        class="btn"
+        aria-label="submit search"
+        class="btn-icon btn-icon-primary btn-icon-md"
         type="submit"
       >
         <span
-          class="pgn__icon"
+          class="btn-icon__icon-container"
         >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="pgn__icon btn-icon__icon"
           >
-            <path
-              d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          class="sr-only"
-        >
-          submit search
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
         </span>
       </button>
     </form>

From 56ba0187339bf650bc2f278394b470df1e33f1d6 Mon Sep 17 00:00:00 2001
From: Kyrylo Hudym-Levkovych <kyr.hudym@kyrs-MacBook-Pro.local>
Date: Tue, 21 Nov 2023 09:32:28 +0200
Subject: [PATCH 2/2] refactor: add changes after review

---
 src/SearchField/SearchFieldAdvanced.jsx     | 6 ++----
 src/SearchField/SearchFieldClearButton.jsx  | 2 +-
 src/SearchField/SearchFieldSubmitButton.jsx | 2 +-
 src/SearchField/index.jsx                   | 6 ++----
 4 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/SearchField/SearchFieldAdvanced.jsx b/src/SearchField/SearchFieldAdvanced.jsx
index a15de6bc53..ac0fafe190 100644
--- a/src/SearchField/SearchFieldAdvanced.jsx
+++ b/src/SearchField/SearchFieldAdvanced.jsx
@@ -7,8 +7,6 @@ import classNames from 'classnames';
 import { Search, Close } from '../../icons';
 import newId from '../utils/newId';
 
-import Icon from '../Icon';
-
 export const SearchFieldContext = createContext();
 
 const BUTTON_LOCATION_VARIANTS = [
@@ -189,8 +187,8 @@ SearchFieldAdvanced.defaultProps = {
     clearButton: 'clear search',
   },
   icons: {
-    clear: <Icon src={Close} />,
-    submit: <Icon src={Search} />,
+    clear: Close,
+    submit: Search,
   },
   onBlur: () => {},
   onChange: () => {},
diff --git a/src/SearchField/SearchFieldClearButton.jsx b/src/SearchField/SearchFieldClearButton.jsx
index e061b2205d..0dfd02d8f3 100644
--- a/src/SearchField/SearchFieldClearButton.jsx
+++ b/src/SearchField/SearchFieldClearButton.jsx
@@ -22,7 +22,7 @@ function SearchFieldClearButton(props) {
   return (
     <IconButton
       type="reset"
-      src={icons.clear.props.src}
+      src={icons.clear}
       iconAs={Icon}
       alt={screenReaderText.clearButton}
       disabled={disabled}
diff --git a/src/SearchField/SearchFieldSubmitButton.jsx b/src/SearchField/SearchFieldSubmitButton.jsx
index 2eec8d6635..86607dcf28 100644
--- a/src/SearchField/SearchFieldSubmitButton.jsx
+++ b/src/SearchField/SearchFieldSubmitButton.jsx
@@ -43,7 +43,7 @@ function SearchFieldSubmitButton(props) {
   ) : (
     <IconButton
       type="submit"
-      src={icons.submit.props.src}
+      src={icons.submit}
       iconAs={Icon}
       alt={screenReaderText.submitButton}
       disabled={disabled}
diff --git a/src/SearchField/index.jsx b/src/SearchField/index.jsx
index af0fd63458..49a0fb5503 100644
--- a/src/SearchField/index.jsx
+++ b/src/SearchField/index.jsx
@@ -9,8 +9,6 @@ import SearchFieldInput from './SearchFieldInput';
 import SearchFieldClearButton from './SearchFieldClearButton';
 import SearchFieldSubmitButton from './SearchFieldSubmitButton';
 
-import Icon from '../Icon';
-
 export const SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';
 export const SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';
 export const SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';
@@ -170,8 +168,8 @@ SearchField.defaultProps = {
     clearButton: SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON,
   },
   icons: {
-    clear: <Icon src={Close} />,
-    submit: <Icon src={Search} />,
+    clear: Close,
+    submit: Search,
   },
   onBlur: () => {},
   onChange: () => {},