fix(CollapseButton): get rid of the impact of the border on the heigh…

…t of the button (#260)
gravity-ui · Jun 25, 2024 · 92b3896 · 92b3896
1 parent 0a81446
commit 92b3896
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 26 deletions.
diff --git 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
@@ -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
@@ -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>
     );
 };