fix(Logo): remove aside header variables from logo (#210)

Co-authored-by: kseniyakuzina <[email protected]>
gravity-ui · Mar 20, 2024 · 8228ce3 · 8228ce3
1 parent b12ae34
commit 8228ce3
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 16 deletions.
diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
@@ -170,6 +170,20 @@ $block: '.#{variables.$ns}aside-header';
         }
     }
 
+    &__logo-button-wrapper {
+        width: var(--gn-aside-header-min-width);
+    }
+
+    &__logo-button[class] {
+        &,
+        .g-button__icon {
+            height: var(
+                --gn-aside-header-item-icon-background-size,
+                var(--_--item-icon-background-size)
+            );
+        }
+    }
+
     &__menu-items {
         flex-grow: 1;
     }

diff --git a/src/components/AsideHeader/components/Header.tsx b/src/components/AsideHeader/components/Header.tsx
@@ -28,7 +28,13 @@ export const Header = () => {
 
     return (
         <div className={b('header', {['with-decoration']: headerDecoration})}>
-            <Logo {...logo} onClick={onLogoClick} compact={compact} />
+            <Logo
+                {...logo}
+                onClick={onLogoClick}
+                compact={compact}
+                buttonWrapperClassName={b('logo-button-wrapper')}
+                buttonClassName={b('logo-button')}
+            />
 
             <CompositeBar
                 type="subheader"

diff --git a/src/components/Logo/Logo.scss b/src/components/Logo/Logo.scss
@@ -12,7 +12,6 @@ $block: '.#{variables.$ns}logo';
 
     &__logo-btn-place {
         flex-shrink: 0;
-        width: var(--gn-aside-header-min-width);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -23,13 +22,6 @@ $block: '.#{variables.$ns}logo';
         }
     }
 
-    &__btn-logo.g-button_view_flat.g-button_size_l {
-        --g-button-height: var(
-            --gn-aside-header-item-icon-background-size,
-            var(--_--item-icon-background-size)
-        );
-    }
-
     &__logo {
         @include text-body-2;
         vertical-align: middle;

diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -9,7 +9,9 @@ import './Logo.scss';
 
 const b = block('logo');
 
-export const Logo: React.FC<LogoProps & {compact?: boolean}> = ({
+export const Logo: React.FC<
+    LogoProps & {compact?: boolean; buttonClassName?: string; buttonWrapperClassName?: string}
+> = ({
     text,
     icon,
     iconSrc,
@@ -21,6 +23,9 @@ export const Logo: React.FC<LogoProps & {compact?: boolean}> = ({
     wrapper,
     onClick,
     compact,
+    className,
+    buttonWrapperClassName,
+    buttonClassName,
 }) => {
     const hasWrapper = typeof wrapper === 'function';
 
@@ -40,7 +45,7 @@ export const Logo: React.FC<LogoProps & {compact?: boolean}> = ({
         <Button
             view="flat"
             size="l"
-            className={b('btn-logo')}
+            className={b('btn-logo', buttonClassName)}
             component={hasWrapper ? 'span' : undefined}
             onClick={onClick}
             target={target}
@@ -64,8 +69,8 @@ export const Logo: React.FC<LogoProps & {compact?: boolean}> = ({
     }
 
     return (
-        <div className={b()}>
-            <div className={b('logo-btn-place')}>
+        <div className={b(null, className)}>
+            <div className={b('logo-btn-place', buttonWrapperClassName)}>
                 {hasWrapper ? wrapper(button, Boolean(compact)) : button}
             </div>
             {!compact &&

diff --git a/src/components/MobileLogo/MobileLogo.scss b/src/components/MobileLogo/MobileLogo.scss
@@ -9,7 +9,7 @@ $block: '.#{variables.$ns}mobile-logo';
     align-items: center;
     overflow: hidden;
 
-    gap: 8px;
+    gap: var(--g-spacing-2);
 
     &:is(a) {
         &,

diff --git a/src/components/MobileLogo/MobileLogo.tsx b/src/components/MobileLogo/MobileLogo.tsx
@@ -25,6 +25,7 @@ export const MobileLogo: React.FC<MobileLogoProps> = ({
     target = '_self',
     wrapper,
     onClick,
+    className,
 }) => {
     const hasClickHandler = typeof onClick === 'function';
     const hasWrapper = typeof wrapper === 'function';
@@ -73,11 +74,11 @@ export const MobileLogo: React.FC<MobileLogoProps> = ({
     );
 
     return hasWrapper ? (
-        <div className={b()} onClick={onClick}>
+        <div className={b(null, className)} onClick={onClick}>
             {wrapper(logo, compact)}
         </div>
     ) : (
-        <a {...linkProps} className={b()} onClick={onClick}>
+        <a {...linkProps} className={b(null, className)} onClick={onClick}>
             {logo}
         </a>
     );

diff --git a/src/components/types.ts b/src/components/types.ts
@@ -59,6 +59,7 @@ export type SubheaderMenuItem = Omit<ItemProps, 'onItemClick' | 'onItemClickCapt
 
 export interface LogoProps {
     text: (() => React.ReactNode) | string;
+    className?: string;
     icon?: IconProps['data'];
     iconSrc?: string;
     iconClassName?: string;