fix: icons changed to uikit (#170)

src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 
 import {cn} from '@bem-react/classname';
-import {ChartColumn, Copy, Heading, Sliders, TextAlignLeft} from '@gravity-ui/icons';
+import {
+    ChartColumn,
+    Copy,
+    Gear,
+    Heading,
+    Sliders,
+    TextAlignLeft,
+    TrashBin,
+} from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
 
 import {
@@ -15,9 +23,6 @@ import {
 } from '../../..';
 import {DEFAULT_GROUP, MenuItems} from '../../../helpers';
 import {i18n} from '../../../i18n';
-import {CogIcon} from '../../../icons/CogIcon';
-import {CopyIcon} from '../../../icons/CopyIcon';
-import {DeleteIcon} from '../../../icons/DeleteIcon';
 
 import {Demo, DemoRow} from './Demo';
 import {fixedGroup, getConfig} from './utils';
@@ -32,17 +37,17 @@ export const DashKitGroupsShowcase: React.FC = () => {
             {
                 id: 'settings',
                 title: 'Menu setting text',
-                icon: <Icon data={CogIcon} size={16} />,
+                icon: <Icon data={Gear} size={16} />,
             },
             {
                 id: MenuItems.Copy,
                 title: 'Menu setting copy',
-                icon: <Icon data={CopyIcon} size={16} />,
+                icon: <Icon data={Copy} size={16} />,
             },
             {
                 id: MenuItems.Delete,
                 title: i18n('label_delete'), // for language change check
-                icon: <Icon data={DeleteIcon} size={16} />,
+                icon: <Icon data={TrashBin} size={16} />,
                 className: 'dashkit-overlay-controls__item_danger',
             },
         ];

src/components/DashKit/__stories__/DashKitShowcase.tsx

@@ -2,22 +2,22 @@ import React from 'react';
 
 import {
     ChartColumn,
+    Check,
+    CircleExclamationFill,
+    Copy,
+    Gear,
     Heading,
     Layers3Diagonal,
     PlugConnection,
     Sliders,
     TextAlignLeft,
+    TrashBin,
 } from '@gravity-ui/icons';
 import {Button, Icon} from '@gravity-ui/uikit';
 
 import {ActionPanel, DashKit, DashKitProps} from '../../..';
 import {MenuItems} from '../../../helpers';
 import {i18n} from '../../../i18n';
-import {CogIcon} from '../../../icons/CogIcon';
-import {CopyIcon} from '../../../icons/CopyIcon';
-import {DeleteIcon} from '../../../icons/DeleteIcon';
-import {TickIcon} from '../../../icons/TickIcon';
-import {WarningIcon} from '../../../icons/WarningIcon';
 import type {ConfigItem, OverlayControlItem} from '../../../index';
 import {cn} from '../../../utils/cn';
 
@@ -75,7 +75,7 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
             custom: [
                 {
                     title: 'Edit custom widget',
-                    icon: TickIcon,
+                    icon: Check,
                     handler: this.onCustomWidgetControlClick,
                     iconSize: 16,
                 },
@@ -84,7 +84,7 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
                 {
                     allWidgetsControls: true,
                     title: 'Icon tooltip 1',
-                    icon: TickIcon,
+                    icon: Check,
                     handler: () => console.log('overlayControls::custom click'),
                     iconSize: 16,
                     visible: (item) => item.type !== 'text',
@@ -94,8 +94,7 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
                     excludeWidgetsTypes: ['title'],
                     id: MenuItems.Settings,
                     title: 'Settings default',
-                    icon: WarningIcon,
-                    visible: (item) => item.type !== 'text',
+                    icon: CircleExclamationFill,
                 },
                 {
                     allWidgetsControls: true,
@@ -379,7 +378,7 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
                     {
                         id: 'settings',
                         title: 'Menu setting text',
-                        icon: <Icon data={CogIcon} size={16} />,
+                        icon: <Icon data={Gear} size={16} />,
                         handler: () => {
                             console.log('menu::settings::click');
                         },
@@ -388,13 +387,13 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
                     {
                         id: MenuItems.Copy,
                         title: 'Menu setting copy',
-                        icon: <Icon data={CopyIcon} size={16} />,
+                        icon: <Icon data={Copy} size={16} />,
                         visible: (item) => item.type !== 'custom',
                     },
                     {
                         id: MenuItems.Delete,
                         title: i18n('label_delete'), // for language change check
-                        icon: <Icon data={DeleteIcon} size={16} />,
+                        icon: <Icon data={TrashBin} size={16} />,
                         className: 'dashkit-overlay-controls__item_danger',
                         visible: (item) => item.type !== 'custom',
                     },

src/components/OverlayControls/OverlayControls.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {Ellipsis, Gear, Xmark} from '@gravity-ui/icons';
 import {
     Button,
     ButtonSize,
@@ -12,12 +13,14 @@ import {
 } from '@gravity-ui/uikit';
 import noop from 'lodash/noop';
 
-import {COPIED_WIDGET_STORE_KEY, MenuItems, OVERLAY_CONTROLS_CLASS_NAME} from '../../constants';
+import {
+    COPIED_WIDGET_STORE_KEY,
+    MenuItems,
+    OVERLAY_CONTROLS_CLASS_NAME,
+    OVERLAY_ICON_SIZE,
+} from '../../constants';
 import {DashkitOvelayControlsContext} from '../../context/DashKitContext';
 import {i18n} from '../../i18n';
-import {CloseIcon} from '../../icons/CloseIcon';
-import {CogIcon} from '../../icons/CogIcon';
-import {DotsIcon} from '../../icons/DotsIcon';
 import type {ConfigItem, ConfigLayout, ItemState, PluginBase, StringParams} from '../../shared';
 import {MenuItem, Settings} from '../../typings';
 import {cn} from '../../utils/cn';
@@ -133,7 +136,7 @@ class OverlayControls extends React.Component<OverlayControlsProps> {
                 onClick={() => onItemClickHandler(this.props.configItem)}
                 qa={qa}
             >
-                <Icon data={icon || CogIcon} size={icon ? iconSize : 24} />
+                <Icon data={icon || Gear} size={icon ? iconSize : OVERLAY_ICON_SIZE} />
             </Button>
         );
     };
@@ -182,7 +185,7 @@ class OverlayControls extends React.Component<OverlayControlsProps> {
                 onClick={this.onEditItem}
                 qa="dashkit-overlay-control-settings"
             >
-                <Icon data={CogIcon} size="24" />
+                <Icon data={Gear} size={OVERLAY_ICON_SIZE} />
             </Button>
         );
     };
@@ -231,7 +234,7 @@ class OverlayControls extends React.Component<OverlayControlsProps> {
                 onClick={this.onRemoveItem}
                 qa="dashkit-overlay-control-menu"
             >
-                <Icon data={CloseIcon} size="12" />
+                <Icon data={Xmark} size={OVERLAY_ICON_SIZE} />
             </Button>
         );
     }
@@ -305,7 +308,7 @@ class OverlayControls extends React.Component<OverlayControlsProps> {
                         pin={isOnlyOneItem ? 'round-round' : 'brick-round'}
                         qa="dashkit-overlay-control-menu"
                     >
-                        <Icon data={DotsIcon} size="16" />
+                        <Icon data={Ellipsis} size={OVERLAY_ICON_SIZE} />
                     </Button>
                 )}
             />

src/constants/common.ts

@@ -6,6 +6,8 @@ export const OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
 
 export const OVERLAY_CLASS_NAME = 'dashkit-grid-item__overlay';
 
+export const OVERLAY_ICON_SIZE = 16;
+
 export const TEMPORARY_ITEM_ID = '__dropping-elem__';
 
 export const MenuItems = {