From 4650e49a8eb825221874db8124ed48cb9a75e4ee Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Mon, 5 Aug 2024 16:04:23 +0300 Subject: [PATCH] fix: icons changed to uikit (#170) --- .../__stories__/DashKitGroupsShowcase.tsx | 19 +++++++++------ .../DashKit/__stories__/DashKitShowcase.tsx | 23 +++++++++---------- .../OverlayControls/OverlayControls.tsx | 19 ++++++++------- src/constants/common.ts | 2 ++ src/icons/CloseIcon.tsx | 16 ------------- src/icons/CogIcon.tsx | 16 ------------- src/icons/CopyIcon.tsx | 16 ------------- src/icons/DeleteIcon.tsx | 19 --------------- src/icons/DotsIcon.tsx | 16 ------------- src/icons/TickIcon.tsx | 19 --------------- src/icons/WarningIcon.tsx | 19 --------------- 11 files changed, 36 insertions(+), 148 deletions(-) delete mode 100644 src/icons/CloseIcon.tsx delete mode 100644 src/icons/CogIcon.tsx delete mode 100644 src/icons/CopyIcon.tsx delete mode 100644 src/icons/DeleteIcon.tsx delete mode 100644 src/icons/DotsIcon.tsx delete mode 100644 src/icons/TickIcon.tsx delete mode 100644 src/icons/WarningIcon.tsx diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx index a39bc4e..475321e 100644 --- a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx +++ b/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: , }, { id: MenuItems.Copy, title: 'Menu setting copy', - icon: , + icon: , }, { id: MenuItems.Delete, title: i18n('label_delete'), // for language change check - icon: , + icon: , className: 'dashkit-overlay-controls__item_danger', }, ]; diff --git a/src/components/DashKit/__stories__/DashKitShowcase.tsx b/src/components/DashKit/__stories__/DashKitShowcase.tsx index 372f5df..11fb47c 100644 --- a/src/components/DashKit/__stories__/DashKitShowcase.tsx +++ b/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: , 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: , visible: (item) => item.type !== 'custom', }, { id: MenuItems.Delete, title: i18n('label_delete'), // for language change check - icon: , + icon: , className: 'dashkit-overlay-controls__item_danger', visible: (item) => item.type !== 'custom', }, diff --git a/src/components/OverlayControls/OverlayControls.tsx b/src/components/OverlayControls/OverlayControls.tsx index 00b966b..b756a87 100644 --- a/src/components/OverlayControls/OverlayControls.tsx +++ b/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 { onClick={() => onItemClickHandler(this.props.configItem)} qa={qa} > - + ); }; @@ -182,7 +185,7 @@ class OverlayControls extends React.Component { onClick={this.onEditItem} qa="dashkit-overlay-control-settings" > - + ); }; @@ -231,7 +234,7 @@ class OverlayControls extends React.Component { onClick={this.onRemoveItem} qa="dashkit-overlay-control-menu" > - + ); } @@ -305,7 +308,7 @@ class OverlayControls extends React.Component { pin={isOnlyOneItem ? 'round-round' : 'brick-round'} qa="dashkit-overlay-control-menu" > - + )} /> diff --git a/src/constants/common.ts b/src/constants/common.ts index 8b62667..2322862 100644 --- a/src/constants/common.ts +++ b/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 = { diff --git a/src/icons/CloseIcon.tsx b/src/icons/CloseIcon.tsx deleted file mode 100644 index 8e4e5c3..0000000 --- a/src/icons/CloseIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -export function CloseIcon(props: React.SVGProps) { - return ( - - - - ); -} diff --git a/src/icons/CogIcon.tsx b/src/icons/CogIcon.tsx deleted file mode 100644 index bad8bc3..0000000 --- a/src/icons/CogIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -export function CogIcon(props: React.SVGProps) { - return ( - - - - ); -} diff --git a/src/icons/CopyIcon.tsx b/src/icons/CopyIcon.tsx deleted file mode 100644 index 7c9411c..0000000 --- a/src/icons/CopyIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -export function CopyIcon(props: React.SVGProps) { - return ( - - - - ); -} diff --git a/src/icons/DeleteIcon.tsx b/src/icons/DeleteIcon.tsx deleted file mode 100644 index 6a3d8fb..0000000 --- a/src/icons/DeleteIcon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -export function DeleteIcon(props: React.SVGProps) { - return ( - - - - - - - ); -} diff --git a/src/icons/DotsIcon.tsx b/src/icons/DotsIcon.tsx deleted file mode 100644 index f129c3f..0000000 --- a/src/icons/DotsIcon.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -export function DotsIcon(props: React.SVGProps) { - return ( - - - - ); -} diff --git a/src/icons/TickIcon.tsx b/src/icons/TickIcon.tsx deleted file mode 100644 index dbabb67..0000000 --- a/src/icons/TickIcon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -export function TickIcon(props: React.SVGProps) { - return ( - - - - ); -} diff --git a/src/icons/WarningIcon.tsx b/src/icons/WarningIcon.tsx deleted file mode 100644 index ba222be..0000000 --- a/src/icons/WarningIcon.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; - -export function WarningIcon(props: React.SVGProps) { - return ( - - - - ); -}