From 82b85ab4f489c1b19aa6a57f7321380291e03606 Mon Sep 17 00:00:00 2001
From: Ruslan Bagautdinov <bagautdinovrl@yandex-team.ru>
Date: Fri, 16 Aug 2024 19:52:15 +0300
Subject: [PATCH 1/3] refactor: component Control using Button from uikit

---
 src/components/Control/Control.scss | 22 ----------------------
 src/components/Control/Control.tsx  | 18 +++++++++++-------
 2 files changed, 11 insertions(+), 29 deletions(-)

diff --git a/src/components/Control/Control.scss b/src/components/Control/Control.scss
index d8c7b7cf2..1f24517ba 100644
--- a/src/components/Control/Control.scss
+++ b/src/components/Control/Control.scss
@@ -24,28 +24,6 @@ $block: '.#{$ns}control';
     @include islands-focus();
     @include focusable();
 
-    &_size {
-        &_xs {
-            width: 24px;
-            height: 24px;
-        }
-
-        &_s {
-            width: 28px;
-            height: 28px;
-        }
-
-        &_m {
-            width: 32px;
-            height: 32px;
-        }
-
-        &_l {
-            width: 36px;
-            height: 36px;
-        }
-    }
-
     &_theme {
         &_primary {
             color: var(--g-color-text-complementary);
diff --git a/src/components/Control/Control.tsx b/src/components/Control/Control.tsx
index 526b59c04..a257f0199 100644
--- a/src/components/Control/Control.tsx
+++ b/src/components/Control/Control.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Icon} from '@gravity-ui/uikit';
+import {Button, Icon} from '@gravity-ui/uikit';
 import {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';
 
 import {block} from '../../utils';
@@ -16,7 +16,7 @@ export const defaultIconId = 'icon-test-id';
 export interface ControlProps {
     icon: SVGIconData;
     theme?: 'primary' | 'secondary' | 'link' | 'accent';
-    size?: 'xs' | 's' | 'm' | 'l';
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
     iconSize?: number;
     disabled?: boolean;
     className?: string;
@@ -37,16 +37,20 @@ const Control = (props: ControlProps) => {
     } = props;
 
     return (
-        <button
-            type="button"
+        <Button
+            type={'button'}
             aria-label={i18n('aria-label')}
-            className={b({size, theme, disabled}, className)}
+            className={b({theme, disabled}, className)}
             onClick={disabled ? undefined : onClick}
             disabled={disabled}
             data-qa={qa}
+            size={size}
+            view={'flat'}
         >
-            <Icon data={icon} size={iconSize} qa={defaultIconId} />
-        </button>
+            <Button.Icon>
+                <Icon data={icon} size={iconSize} qa={defaultIconId} />
+            </Button.Icon>
+        </Button>
     );
 };
 

From 3eb3f73ca9d3cb425fc5190ff8612c44082131f0 Mon Sep 17 00:00:00 2001
From: Ruslan Bagautdinov <bagautdinovrl@yandex-team.ru>
Date: Mon, 19 Aug 2024 15:10:19 +0300
Subject: [PATCH 2/3] refactor: set ButtonSize type for size in Control.tsx

---
 src/components/Control/Control.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Control/Control.tsx b/src/components/Control/Control.tsx
index a257f0199..c2fca7342 100644
--- a/src/components/Control/Control.tsx
+++ b/src/components/Control/Control.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Button, ButtonSize, Icon} from '@gravity-ui/uikit';
 import {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';
 
 import {block} from '../../utils';
@@ -16,7 +16,7 @@ export const defaultIconId = 'icon-test-id';
 export interface ControlProps {
     icon: SVGIconData;
     theme?: 'primary' | 'secondary' | 'link' | 'accent';
-    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    size?: ButtonSize;
     iconSize?: number;
     disabled?: boolean;
     className?: string;

From 27784d2604674bb030e95843501734aba9e3fdc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A0=D1=83=D1=81=D0=BB=D0=B0=D0=BD=20=D0=91=D0=B0=D0=B3?=
 =?UTF-8?q?=D0=B0=D1=83=D1=82=D0=B4=D0=B8=D0=BD=D0=BE=D0=B2?=
 <ruslanbagautdinov@MacBook-Pro-Ruslan.local>
Date: Mon, 30 Sep 2024 21:30:57 +0300
Subject: [PATCH 3/3] fix: tests in Control

---
 src/components/Control/Control.tsx                | 2 +-
 src/components/Control/__tests__/Control.test.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Control/Control.tsx b/src/components/Control/Control.tsx
index c2fca7342..ec0744613 100644
--- a/src/components/Control/Control.tsx
+++ b/src/components/Control/Control.tsx
@@ -43,7 +43,7 @@ const Control = (props: ControlProps) => {
             className={b({theme, disabled}, className)}
             onClick={disabled ? undefined : onClick}
             disabled={disabled}
-            data-qa={qa}
+            qa={qa}
             size={size}
             view={'flat'}
         >
diff --git a/src/components/Control/__tests__/Control.test.tsx b/src/components/Control/__tests__/Control.test.tsx
index c646d98b7..b0791cbdc 100644
--- a/src/components/Control/__tests__/Control.test.tsx
+++ b/src/components/Control/__tests__/Control.test.tsx
@@ -57,7 +57,7 @@ describe('Control', () => {
         render(<Control icon={icon} qa={qaId} size={size} />);
         const control = screen.getByTestId(qaId);
 
-        expect(control).toHaveClass(`pc-control_size_${size}`);
+        expect(control).toHaveClass(`g-button_size_${size}`);
     });
 
     test('add iconSize', () => {