SONAR-11746 Replace 'x' icon for delete actions

server/sonar-web/src/main/js/apps/tutorials/components/__tests__/NewProjectForm-test.tsx

@@ -27,7 +27,7 @@ jest.mock('../../../../api/components', () => ({
   deleteProject: () => Promise.resolve()
 }));
 
-jest.mock('../../../../components/icons-components/ClearIcon');
+jest.mock('../../../../components/icons-components/DeleteIcon');
 
 it('creates new project', async () => {
   const onDone = jest.fn();

server/sonar-web/src/main/js/apps/tutorials/components/__tests__/__snapshots__/NewProjectForm-test.tsx.snap

@@ -157,7 +157,7 @@ exports[`creates new project 3`] = `
               }
               type="button"
             >
-              <ClearIcon />
+              <DeleteIcon />
             </button>
           </Button>
         </ButtonIcon>
@@ -215,7 +215,7 @@ exports[`deletes project 1`] = `
               }
               type="button"
             >
-              <ClearIcon />
+              <DeleteIcon />
             </button>
           </Button>
         </ButtonIcon>

server/sonar-web/src/main/js/components/icons-components/DeleteIcon.tsx

@@ -18,14 +18,15 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import ClearIcon from './ClearIcon';
-import * as theme from '../../app/theme';
+import Icon, { IconProps } from './Icon';
 
-interface Props {
-  className?: string;
-  size?: number;
-}
-
-export default function DeleteIcon(props: Props) {
-  return <ClearIcon fill={theme.red} {...props} />;
+export default function DeleteIcon({ className, fill = 'currentColor', size }: IconProps) {
+  return (
+    <Icon className={className} size={size}>
+      <path
+        d="M13.571429 1.8750019h-3.214285l-.251787-.5113283a.64285716.65624976 0 0 0-.5758927-.3636718H6.4678572a.63535718.64859353 0 0 0-.5732142.3636718l-.2517858.5113283H2.4285714A.42857144.43749984 0 0 0 2 2.3125018v.8749996a.42857144.43749984 0 0 0 .4285714.4374999H13.571429A.42857144.43749984 0 0 0 14 3.1875014v-.8749996a.42857144.43749984 0 0 0-.428571-.4374999zM3.4250001 13.769529a1.2857144 1.3124996 0 0 0 1.2830357 1.230468h6.5839282A1.2857144 1.3124996 0 0 0 12.575 13.769529l.567857-9.269528H2.8571428z"
+        style={{ fill }}
+      />
+    </Icon>
+  );
 }

server/sonar-web/src/main/js/components/icons-components/__mocks__/DeleteIcon.tsx

@@ -0,0 +1,22 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+export default function DeleteIcon() {
+  return null;
+}

server/sonar-web/src/main/js/components/ui/buttons.tsx

@@ -21,7 +21,7 @@ import * as React from 'react';
 import * as classNames from 'classnames';
 import * as theme from '../../app/theme';
 import ChevronRightIcon from '../icons-components/ChevronRightcon';
-import ClearIcon from '../icons-components/ClearIcon';
+import DeleteIcon from '../icons-components/DeleteIcon';
 import EditIcon from '../icons-components/EditIcon';
 import Tooltip from '../controls/Tooltip';
 import './buttons.css';
@@ -127,7 +127,7 @@ interface ActionButtonProps {
 export function DeleteButton(props: ActionButtonProps) {
   return (
     <ButtonIcon color={theme.red} {...props}>
-      <ClearIcon />
+      <DeleteIcon />
     </ButtonIcon>
   );
 }