fix(AsideHeader): prevent collapse button styles overriding (#250)

src/components/AsideHeader/AsideHeader.scss

@@ -252,39 +252,4 @@ $block: '.#{variables.$ns}aside-header';
         z-index: 95;
         margin-top: var(--gn-aside-top-panel-height);
     }
-
-    &__collapse-button {
-        --g-button-background-color-hover: transparent;
-
-        // TODO: remove temporary fix for expand button
-        & > .g-button__text {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 20px;
-        }
-
-        overflow: hidden;
-        box-sizing: border-box;
-        flex: none;
-        width: 100%;
-        height: 20px;
-        border-top: 1px solid
-            var(--gn-aside-header-divider-horizontal-color, var(--_--horizontal-divider-line-color));
-        margin-top: auto;
-
-        &:not(&_compact) {
-            #{$class}__collapse-icon {
-                transform: rotate(180deg);
-            }
-        }
-
-        #{$class}__collapse-icon {
-            color: var(--g-color-text-secondary);
-        }
-
-        &:hover #{$class}__collapse-icon {
-            color: var(--g-color-text-primary);
-        }
-    }
 }

src/components/AsideHeader/components/CollapseButton/CollapseButton.scss

@@ -0,0 +1,34 @@
+@use '../../../variables';
+
+$block: '.#{variables.$ns}collapse-button';
+
+$buttonHeight: 20px;
+
+#{$block} {
+    --g-button-background-color-hover: transparent;
+    --g-button-height: #{$buttonHeight};
+
+    box-sizing: border-box;
+    overflow: hidden;
+    height: $buttonHeight;
+    border-top: 1px solid
+        var(--gn-aside-header-divider-horizontal-color, var(--_--horizontal-divider-line-color));
+
+    &__button {
+        width: 100%;
+
+        &:not(&_compact) {
+            #{$block}__icon {
+                transform: rotate(180deg);
+            }
+        }
+
+        &:hover #{$block}__icon {
+            color: var(--g-color-text-primary);
+        }
+    }
+
+    &__icon {
+        color: var(--g-color-text-secondary);
+    }
+}

src/components/AsideHeader/components/CollapseButton/CollapseButton.tsx

@@ -0,0 +1,43 @@
+import React, {useCallback} from 'react';
+
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import {block} from '../../../utils/cn';
+import {useAsideHeaderInnerContext} from '../../AsideHeaderContext';
+import i18n from '../../i18n';
+
+import controlMenuButtonIcon from '../../../../../assets/icons/control-menu-button.svg';
+
+import './CollapseButton.scss';
+
+const b = block('collapse-button');
+
+export interface CollapseButtonProps {
+    className?: string;
+}
+
+export const CollapseButton = ({className}: CollapseButtonProps) => {
+    const {onChangeCompact, compact, expandTitle, collapseTitle} = useAsideHeaderInnerContext();
+
+    const onCollapseButtonClick = useCallback(() => {
+        onChangeCompact?.(!compact);
+    }, [compact, onChangeCompact]);
+
+    const buttonTitle = compact
+        ? 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>
+    );
+};

src/components/AsideHeader/components/FirstPanel.tsx

@@ -8,7 +8,7 @@ import {useAsideHeaderInnerContext} from '../AsideHeaderContext';
 import i18n from '../i18n';
 import {b} from '../utils';
 
-import {CollapseButton} from './CollapseButton';
+import {CollapseButton} from './CollapseButton/CollapseButton';
 import {Header} from './Header';
 import {Panels} from './Panels';