From 92b38965314c7005803a104d2b35566ea96fb1eb Mon Sep 17 00:00:00 2001
From: Roman Barlos <rbarlos@yandex-team.ru>
Date: Tue, 25 Jun 2024 12:24:58 +0300
Subject: [PATCH] fix(CollapseButton): get rid of the impact of the border on
 the height of the button (#260)

---
 .gitignore                                    |  2 +
 .../CollapseButton/CollapseButton.scss        | 41 +++++++++++++------
 .../CollapseButton/CollapseButton.tsx         | 21 ++++------
 3 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/.gitignore b/.gitignore
index eedd718..085e78c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,5 +9,7 @@ node_modules
 # Generated content
 build
 
+# other files
+pnpm-lock.yaml
 
 
diff --git a/src/components/AsideHeader/components/CollapseButton/CollapseButton.scss b/src/components/AsideHeader/components/CollapseButton/CollapseButton.scss
index d288ca2..1333f26 100644
--- a/src/components/AsideHeader/components/CollapseButton/CollapseButton.scss
+++ b/src/components/AsideHeader/components/CollapseButton/CollapseButton.scss
@@ -1,31 +1,46 @@
 @use '../../../variables';
+@use '@gravity-ui/uikit/styles/mixins';
 
 $block: '.#{variables.$ns}collapse-button';
 
 $buttonHeight: 20px;
 
 #{$block} {
-    --g-button-background-color-hover: transparent;
-    --g-button-height: #{$buttonHeight};
+    --_--focus-outline-color: var(--g-color-line-focus);
+    --_--focus-outline-offset: 0;
+
+    @include mixins.button-reset();
 
-    box-sizing: border-box;
-    overflow: hidden;
     min-height: $buttonHeight;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border-top: 1px solid
         var(--gn-aside-header-divider-horizontal-color, var(--_--horizontal-divider-line-color));
+    position: relative;
+    box-sizing: content-box;
+
+    &::before {
+        content: '';
+        position: absolute;
+        z-index: -1;
+        inset: 0 2px 2px;
+    }
 
-    &__button {
-        width: 100%;
+    &:focus-visible::before {
+        outline: var(--_--focus-outline-color) solid 2px;
+        outline-offset: var(--_--focus-outline-offset);
+    }
 
-        &:not(&_compact) {
-            #{$block}__icon {
-                transform: rotate(180deg);
-            }
+    &:not(&_compact) {
+        #{$block}__icon {
+            transform: rotate(180deg);
         }
+    }
 
-        &:hover #{$block}__icon {
-            color: var(--g-color-text-primary);
-        }
+    &:hover #{$block}__icon {
+        color: var(--g-color-text-primary);
     }
 
     &__icon {
diff --git a/src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx b/src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx
index 7e1cfbb..ceb7db1 100644
--- a/src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx
+++ b/src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react';
 
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Icon} from '@gravity-ui/uikit';
 
 import {block} from '../../../utils/cn';
 import {useAsideHeaderInnerContext} from '../../AsideHeaderContext';
@@ -27,17 +27,12 @@ export const CollapseButton = ({className}: CollapseButtonProps) => {
         ? expandTitle || i18n('button_expand')
         : collapseTitle || i18n('button_collapse');
     return (
-        <div className={b(null, className)}>
-            <Button
-                className={b('button', {compact})}
-                view="flat"
-                pin="brick-brick"
-                onClick={onCollapseButtonClick}
-                title={buttonTitle}
-                width="max"
-            >
-                <Icon data={controlMenuButtonIcon} className={b('icon')} width="16" height="10" />
-            </Button>
-        </div>
+        <button
+            className={b({compact}, className)}
+            onClick={onCollapseButtonClick}
+            title={buttonTitle}
+        >
+            <Icon data={controlMenuButtonIcon} className={b('icon')} width="16" height="10" />
+        </button>
     );
 };