fix(OnboardingMenu): long header, expand items

gravity-ui · Apr 3, 2024 · 09a3e05 · 09a3e05
1 parent 90b0799
commit 09a3e05
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 20 deletions.
diff --git a/src/components/OnboardingMenu/OnboardingMenu.scss b/src/components/OnboardingMenu/OnboardingMenu.scss
@@ -16,7 +16,7 @@ $block: '.#{variables.$ns}onboarding-menu';
         overflow: hidden;
 
         box-sizing: border-box;
-        width: 210px;
+        width: 230px;
 
         background-color: var(--g-color-base-brand);
         border-radius: 16px;
@@ -25,13 +25,13 @@ $block: '.#{variables.$ns}onboarding-menu';
             width: 280px;
             border-radius: 20px;
             height: fit-content;
-            min-height: 300px;
+            min-height: 600px;
         }
     }
 
     &__title {
         display: flex;
-        align-items: center;
+        align-items: start;
         justify-content: center;
 
         margin-block-end: var(--g-spacing-1);
@@ -42,22 +42,15 @@ $block: '.#{variables.$ns}onboarding-menu';
         width: 100%;
 
         padding: 0;
-
-        color: var(--g-color-text-brand-contrast);
-        @include mixins.text-subheader-2();
-        overflow: hidden;
-        text-overflow: ellipsis;
-        text-wrap: nowrap;
-
-        &_expand {
-            margin-block-end: var(--g-spacing-2);
-            @include mixins.text-subheader-3();
-        }
     }
 
     &__title-icon {
         flex-shrink: 0;
-        margin-inline: var(--g-spacing-2) var(--g-spacing-2);
+        margin-inline: 0 var(--g-spacing-2);
+    }
+
+    &__title-text {
+        text-align: start;
     }
 
     &__header {
@@ -70,7 +63,7 @@ $block: '.#{variables.$ns}onboarding-menu';
 
     &__lining {
         overflow-y: auto;
-        max-height: 530px;
+        height: 500px;
 
         box-sizing: border-box;
 

diff --git a/src/components/OnboardingMenu/OnboardingMenu.tsx b/src/components/OnboardingMenu/OnboardingMenu.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Button, Icon, IconData, Progress} from '@gravity-ui/uikit';
+import {Button, Icon, IconData, Progress, Text} from '@gravity-ui/uikit';
 
 import {block} from '../utils/cn';
 
@@ -24,6 +24,7 @@ export type OnboardingMenuProps = {
     collapseButtonText?: string;
     completeButtonText?: string;
     className?: string;
+    liningClassName?: string;
 
     onExpand?: (expanded: boolean) => void;
     onCompleteClick: (event: React.MouseEvent) => void;
@@ -41,6 +42,7 @@ const OnboardingMenuParent = ({
     collapseButtonText,
     completeButtonText,
     className,
+    liningClassName,
     children,
 }: OnboardingMenuProps) => {
     const onExpandCallback = () => {
@@ -79,7 +81,13 @@ const OnboardingMenuParent = ({
                                 className={cnOnboardingMenu('title-icon')}
                             />
                         ) : null}
-                        {title}
+                        <Text
+                            variant={expanded ? 'subheader-3' : 'subheader-2'}
+                            ellipsisLines={3}
+                            className={cnOnboardingMenu('title-text')}
+                        >
+                            {title}
+                        </Text>
                     </button>
                     <Progress
                         size={expanded ? 's' : 'xs'}
@@ -98,7 +106,9 @@ const OnboardingMenuParent = ({
 
                 {expanded && (
                     <React.Fragment>
-                        <div className={cnOnboardingMenu('lining')}>{children}</div>
+                        <div className={cnOnboardingMenu('lining', liningClassName)}>
+                            {children}
+                        </div>
                         <div className={cnOnboardingMenu('buttons')}>
                             <Button
                                 view="normal-contrast"

diff --git a/src/components/OnboardingMenu/components/OnboardingMenuItem.scss b/src/components/OnboardingMenu/components/OnboardingMenuItem.scss
@@ -5,7 +5,7 @@ $block: '.#{variables.$ns}onboarding-menu-item';
 
 #{$block} {
     &__collapse {
-        padding: var(--g-spacing-3) var(--g-spacing-6);
+        padding: var(--g-spacing-3) var(--g-spacing-4) var(--g-spacing-3) var(--g-spacing-5);
     }
 
     &__collapse-header {