feat(ClearIcon): add component

Author: tenphi

.changeset/light-chairs-kick.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Rename ClearIcon -> TrashIcon. Add a new ClearIcon.

src/components/actions/CommandMenu/CommandMenu.stories.tsx

@@ -13,7 +13,7 @@ import {
 import React, { useState } from 'react';
 import { expect, findByRole, userEvent, waitFor, within } from 'storybook/test';
 
-import { ClearIcon, EditIcon } from '../../../icons';
+import { EditIcon, TrashIcon } from '../../../icons';
 import { tasty } from '../../../tasty';
 import { Card } from '../../content/Card/Card';
 import { HotKeys } from '../../content/HotKeys';
@@ -412,7 +412,7 @@ export const ItemsWithActions = (props) => {
               onPress={() => handleItemAction('file1', 'edit')}
             />
             <ItemAction
-              icon={<ClearIcon />}
+              icon={<TrashIcon />}
               aria-label="Delete"
               onPress={() => handleItemAction('file1', 'delete')}
             />
@@ -433,7 +433,7 @@ export const ItemsWithActions = (props) => {
               onPress={() => handleItemAction('file2', 'edit')}
             />
             <ItemAction
-              icon={<ClearIcon />}
+              icon={<TrashIcon />}
               aria-label="Delete"
               onPress={() => handleItemAction('file2', 'delete')}
             />
@@ -454,7 +454,7 @@ export const ItemsWithActions = (props) => {
               onPress={() => handleItemAction('file3', 'edit')}
             />
             <ItemAction
-              icon={<ClearIcon />}
+              icon={<TrashIcon />}
               aria-label="Delete"
               onPress={() => handleItemAction('file3', 'delete')}
             />

src/components/actions/Menu/Menu.stories.tsx

@@ -14,7 +14,6 @@ import { expect, findByRole, userEvent, waitFor, within } from 'storybook/test';
 
 import {
   CheckIcon,
-  ClearIcon,
   CloseCircleIcon,
   CloseIcon,
   CopyIcon,
@@ -23,6 +22,7 @@ import {
   Icon,
   MoreIcon,
   PlusIcon,
+  TrashIcon,
 } from '../../../icons';
 import {
   Alert,
@@ -1995,7 +1995,7 @@ export const ItemsWithActions = (props) => {
                 onPress={() => handleItemAction('file1', 'edit')}
               />
               <ItemAction
-                icon={<ClearIcon />}
+                icon={<TrashIcon />}
                 tooltip="Delete"
                 onPress={() => handleItemAction('file1', 'delete')}
               />
@@ -2016,7 +2016,7 @@ export const ItemsWithActions = (props) => {
                 onPress={() => handleItemAction('file2', 'edit')}
               />
               <Menu.Item.Action
-                icon={<ClearIcon />}
+                icon={<TrashIcon />}
                 tooltip="Delete"
                 theme="danger"
                 onPress={() => handleItemAction('file2', 'delete')}
@@ -2038,7 +2038,7 @@ export const ItemsWithActions = (props) => {
                 onPress={() => handleItemAction('file3', 'edit')}
               />
               <ItemAction
-                icon={<ClearIcon />}
+                icon={<TrashIcon />}
                 tooltip="Delete"
                 theme="success"
                 onPress={() => handleItemAction('file3', 'delete')}

src/icons/ClearIcon.tsx

@@ -1,5 +1,20 @@
-import { IconTrash } from '@tabler/icons-react';
-
 import { wrapIcon } from './wrap-icon';
 
-export const ClearIcon = wrapIcon('ClearIcon', <IconTrash />);
+export const ClearIcon = wrapIcon(
+  'ClearIcon',
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="M18.615 13 21 22H3l2.385-9M9 17v4.5m6-4.5v4.5m6-8.5H3V8h7V2h4v6h7z"
+    />
+  </svg>,
+);

src/icons/TrashIcon.tsx

@@ -0,0 +1,5 @@
+import { IconTrash } from '@tabler/icons-react';
+
+import { wrapIcon } from './wrap-icon';
+
+export const TrashIcon = wrapIcon('TrashIcon', <IconTrash />);

src/icons/index.ts

@@ -111,6 +111,7 @@ export { ThunderboltCrossedIcon } from './ThunderboltCrossedIcon';
 export { ThunderboltFilledIcon } from './ThunderboltFilledIcon';
 export { ThunderboltIcon } from './ThunderboltIcon';
 export { TimeIcon } from './TimeIcon';
+export { TrashIcon } from './TrashIcon';
 export { UnlockIcon } from './UnlockIcon';
 export { UpIcon } from './UpIcon';
 export { UserGroupIcon } from './UserGroupIcon';