fix: long headers values (#76)

Author: saxumcordis

src/lib/kit/components/Card/Card.scss

@@ -67,6 +67,10 @@
         font-size: var(--yc-text-subheader-2-font-size);
         font-weight: var(--yc-text-subheader-font-weight);
         line-height: var(--yc-text-subheader-2-line-height);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 533px;
     }
 
     &__note {

src/lib/kit/components/Card/Card.tsx

@@ -2,9 +2,10 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Card as CardBase, Icon} from '@gravity-ui/uikit';
+import {Button, Card as CardBase, Icon, Popover} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
+import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH} from '../../constants/common';
 import {block} from '../../utils';
 
 import './Card.scss';
@@ -37,6 +38,7 @@ export const Card: React.FC<CardProps> = ({
     children,
 }) => {
     const containerRef = React.useRef<HTMLDivElement>(null);
+    const titleRef = React.useRef<HTMLDivElement>(null);
     const bodyRef = React.useRef<HTMLDivElement>(null);
     const [open, setOpen] = React.useState(alwaysOpen || propsOpen || false);
 
@@ -66,22 +68,35 @@ export const Card: React.FC<CardProps> = ({
         [],
     );
 
+    const titlePopoverDisabled = (titleRef.current?.offsetWidth || 0) <= COMMON_TITLE_MAX_WIDTH;
+
     const title = React.useMemo(() => {
         if (_.isString(propsTitle)) {
             return (
                 <React.Fragment>
-                    <div className={b('title')}>{propsTitle}</div>
+                    <Popover
+                        content={propsTitle}
+                        disabled={titlePopoverDisabled}
+                        placement={COMMON_POPOVER_PLACEMENT}
+                    >
+                        <div ref={titleRef} className={b('title')}>
+                            {propsTitle}
+                        </div>
+                    </Popover>
                     {description ? (
                         <div className={b('note')}>
-                            <HelpPopover htmlContent={description} placement={['bottom', 'top']} />
+                            <HelpPopover
+                                htmlContent={description}
+                                placement={COMMON_POPOVER_PLACEMENT}
+                            />
                         </div>
                     ) : null}
                 </React.Fragment>
             );
         }
 
         return propsTitle;
-    }, [propsTitle, description]);
+    }, [propsTitle, titlePopoverDisabled, description]);
 
     React.useEffect(() => {
         if (!alwaysOpen && propsOpen !== undefined && propsOpen !== open) {

src/lib/kit/components/Layouts/Section/Section.scss

@@ -21,8 +21,12 @@ $block: '.#{$ns}section';
     }
 
     &__title {
+        max-width: 533px;
         font-weight: 500;
         margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         &_size_s {
             font-size: 13px;

src/lib/kit/components/Layouts/Section/Section.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
+import {Popover} from '@gravity-ui/uikit';
 
 import {GroupIndent} from '../../';
-import {ErrorWrapper} from '../../../';
+import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH, ErrorWrapper} from '../../../';
 import {
     FieldRenderProps,
     FieldValue,
@@ -39,6 +40,7 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
 }: (LayoutProps<D, S> | ViewLayoutProps<T, S>) & SectionProps) => {
     const meta = (restProps as FieldRenderProps<D>).meta as FieldRenderProps<D>['meta'] | undefined;
     const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec);
+    const titleRef = React.useRef<HTMLHeadingElement>(null);
     let content = children;
 
     if (meta) {
@@ -76,15 +78,27 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
         }
     }
 
+    const layoutTitle = spec.viewSpec.layoutTitle;
+    const layoutTitlePopoverDisabled =
+        (titleRef.current?.offsetWidth || 0) <= COMMON_TITLE_MAX_WIDTH;
+
     return (
         <section className={b()}>
-            {spec.viewSpec.layoutTitle ? (
+            {layoutTitle ? (
                 <div
                     className={b('header', {
                         'with-popover': !descriptionAsSubtitle,
                     })}
                 >
-                    <h2 className={b('title', {size: titleSize})}>{spec.viewSpec.layoutTitle}</h2>
+                    <Popover
+                        content={layoutTitle}
+                        placement={COMMON_POPOVER_PLACEMENT}
+                        disabled={layoutTitlePopoverDisabled}
+                    >
+                        <h2 className={b('title', {size: titleSize})} ref={titleRef}>
+                            {layoutTitle}
+                        </h2>
+                    </Popover>
                     {description}
                 </div>
             ) : null}

src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss

@@ -21,6 +21,7 @@ $animationDuration: 0.3s;
 
         &-inner {
             margin-left: -13px;
+            max-width: 533px;
         }
     }
 

src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Button, Icon, Popover} from '@gravity-ui/uikit';
 
+import {COMMON_POPOVER_PLACEMENT} from '../../constants/common';
 import {block} from '../../utils';
 
 import './SimpleVerticalAccordeon.scss';
@@ -34,6 +35,8 @@ interface SimpleVerticalAccordeonState {
     isFirstRender: boolean;
 }
 
+const TITLE_TEXT_MAX_WIDTH = 485; /** 533px (COMMON_TITLE_MAX_WIDTH) - 48px of padding */
+
 export class SimpleVerticalAccordeon extends React.Component<
     SimpleVerticalAccordeonProps,
     SimpleVerticalAccordeonState
@@ -45,6 +48,7 @@ export class SimpleVerticalAccordeon extends React.Component<
     };
 
     componentRef = React.createRef<HTMLDivElement>();
+    titleRef = React.createRef<HTMLElement>();
 
     constructor(props: SimpleVerticalAccordeonProps) {
         super(props);
@@ -97,19 +101,37 @@ export class SimpleVerticalAccordeon extends React.Component<
             return null;
         }
 
+        const title = this.getTitle();
+        const titlePopoverDisabled =
+            (this.titleRef.current?.offsetWidth || 0) <= TITLE_TEXT_MAX_WIDTH;
+
         return (
             Boolean(React.Children.count(children)) && (
                 <div className={b({branch: withBranchView, view: viewLayout}, className)}>
                     <div className={b('header')}>
-                        <Button
-                            view="flat"
-                            className={b('header-inner', buttonClassName)}
-                            onClick={this.handleClick}
-                            qa={`${name}-accordeon-toggler`}
+                        <Popover
+                            content={title}
+                            disabled={titlePopoverDisabled}
+                            placement={COMMON_POPOVER_PLACEMENT}
                         >
-                            <b className={b('title', {size: titleSize})}>{this.getTitle()}</b>
-                            <Icon data={ChevronDown} className={b('chevron', {open})} size={16} />
-                        </Button>
+                            <Button
+                                view="flat"
+                                className={b('header-inner', buttonClassName)}
+                                onClick={this.handleClick}
+                                qa={`${name}-accordeon-toggler`}
+                                width="auto"
+                            >
+                                <b ref={this.titleRef} className={b('title', {size: titleSize})}>
+                                    {title}
+                                </b>
+                                <Icon
+                                    data={ChevronDown}
+                                    className={b('chevron', {open})}
+                                    size={16}
+                                />
+                            </Button>
+                        </Popover>
+
                         {this.getTooltip()}
                         {headerActionsTemplate ? headerActionsTemplate : null}
                     </div>

src/lib/kit/constants/common.ts

@@ -0,0 +1,5 @@
+import type {PopoverProps} from '@gravity-ui/uikit';
+
+export const COMMON_POPOVER_PLACEMENT: PopoverProps['placement'] = ['bottom', 'top'];
+
+export const COMMON_TITLE_MAX_WIDTH = 533;

src/lib/kit/constants/index.ts

@@ -1 +1,2 @@
 export * from './config';
+export * from './common';