diff --git a/src/components/OnboardingMenu/OnboardingMenu.scss b/src/components/OnboardingMenu/OnboardingMenu.scss index 2d4eda43..36c2ebd1 100644 --- 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 index f5034f89..6e248c33 100644 --- 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} + + {title} + -
{children}
+
+ {children} +