feat!: replace custom submit and reset btns with IconButton (#2842)

openedx · Dec 8, 2023 · d132fcf · d132fcf
1 parent 962d007
commit d132fcf
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 43 deletions.
diff --git 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/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
@@ -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}
+      iconAs={Icon}
+      alt={screenReaderText.clearButton}
+      disabled={disabled}
+      onClick={handleClick}
+      {...props}
+    />
   );
 }
 

diff --git 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}
+      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
@@ -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>

diff --git 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: () => {},