create and use Button component (#3087)

2 files changed, 7 insertions, 14 deletions

diff --git a/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
index cfe3f068bc4..f1394dba898 100644
--- a/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
+++ b/server/sonar-web/src/main/js/components/facet/FacetHeader.tsx
@@ -21,6 +21,7 @@ import * as React from 'react';
 import OpenCloseIcon from '../icons-components/OpenCloseIcon';
 import HelpIcon from '../icons-components/HelpIcon';
 import Tooltip from '../controls/Tooltip';
+import { Button } from '../ui/buttons';
 import { translate, translateWithParameters } from '../../helpers/l10n';
 
 interface Props {
@@ -33,14 +34,6 @@ interface Props {
 }
 
 export default class FacetHeader extends React.PureComponent<Props> {
-  handleClearClick = (event: React.SyntheticEvent<HTMLButtonElement>) => {
-    event.preventDefault();
-    event.currentTarget.blur();
-    if (this.props.onClear) {
-      this.props.onClear();
-    }
-  };
-
   handleClick = (event: React.SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
     event.currentTarget.blur();
@@ -102,11 +95,11 @@ export default class FacetHeader extends React.PureComponent<Props> {
         </span>
 
         {showClearButton && (
-          <button
+          <Button
             className="search-navigator-facet-header-button button-small button-red"
-            onClick={this.handleClearClick}>
+            onClick={this.props.onClear}>
             {translate('clear')}
-          </button>
+          </Button>
         )}
       </div>
     );
diff --git a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap
index dad6166c959..e68fe594ca1 100644
--- a/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/facet/__tests__/__snapshots__/FacetHeader-test.tsx.snap
@@ -28,12 +28,12 @@ exports[`should clear 1`] = `
       x_selected.3
     </span>
   </span>
-  <button
+  <Button
     className="search-navigator-facet-header-button button-small button-red"
-    onClick={[Function]}
+    onClick={[MockFunction]}
   >
     clear
-  </button>
+  </Button>
 </div>
 `;