diff --git a/src/lib/kit/components/Card/Card.scss b/src/lib/kit/components/Card/Card.scss index 57161988..334ea9ed 100644 --- a/src/lib/kit/components/Card/Card.scss +++ b/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 { diff --git a/src/lib/kit/components/Card/Card.tsx b/src/lib/kit/components/Card/Card.tsx index 410b16ba..1421f22d 100644 --- a/src/lib/kit/components/Card/Card.tsx +++ b/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 = ({ children, }) => { const containerRef = React.useRef(null); + const titleRef = React.useRef(null); const bodyRef = React.useRef(null); const [open, setOpen] = React.useState(alwaysOpen || propsOpen || false); @@ -66,14 +68,27 @@ export const Card: React.FC = ({ [], ); + const titlePopoverDisabled = (titleRef.current?.offsetWidth || 0) <= COMMON_TITLE_MAX_WIDTH; + const title = React.useMemo(() => { if (_.isString(propsTitle)) { return ( -
{propsTitle}
+ +
+ {propsTitle} +
+
{description ? (
- +
) : null}
@@ -81,7 +96,7 @@ export const Card: React.FC = ({ } return propsTitle; - }, [propsTitle, description]); + }, [propsTitle, titlePopoverDisabled, description]); React.useEffect(() => { if (!alwaysOpen && propsOpen !== undefined && propsOpen !== open) { diff --git a/src/lib/kit/components/Layouts/Section/Section.scss b/src/lib/kit/components/Layouts/Section/Section.scss index 2f2151f6..8653c4bd 100644 --- a/src/lib/kit/components/Layouts/Section/Section.scss +++ b/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; diff --git a/src/lib/kit/components/Layouts/Section/Section.tsx b/src/lib/kit/components/Layouts/Section/Section.tsx index 0d3fbfdb..090ffe13 100644 --- a/src/lib/kit/components/Layouts/Section/Section.tsx +++ b/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 = ( }: (LayoutProps | ViewLayoutProps) & SectionProps) => { const meta = (restProps as FieldRenderProps).meta as FieldRenderProps['meta'] | undefined; const arrOrObjFlag = isArraySpec(spec) || isObjectSpec(spec); + const titleRef = React.useRef(null); let content = children; if (meta) { @@ -76,15 +78,27 @@ const SectionBase = ( } } + const layoutTitle = spec.viewSpec.layoutTitle; + const layoutTitlePopoverDisabled = + (titleRef.current?.offsetWidth || 0) <= COMMON_TITLE_MAX_WIDTH; + return (
- {spec.viewSpec.layoutTitle ? ( + {layoutTitle ? (
-

{spec.viewSpec.layoutTitle}

+ +

+ {layoutTitle} +

+
{description}
) : null} diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss index f0541afd..e0d83dce 100644 --- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss +++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss @@ -21,6 +21,7 @@ $animationDuration: 0.3s; &-inner { margin-left: -13px; + max-width: 533px; } } diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx index 393e9571..46c85cc2 100644 --- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx +++ b/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(); + titleRef = React.createRef(); 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)) && (
- + + + {this.getTooltip()} {headerActionsTemplate ? headerActionsTemplate : null}
diff --git a/src/lib/kit/constants/common.ts b/src/lib/kit/constants/common.ts new file mode 100644 index 00000000..be8db571 --- /dev/null +++ b/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; diff --git a/src/lib/kit/constants/index.ts b/src/lib/kit/constants/index.ts index f03c2281..d69e2e4b 100644 --- a/src/lib/kit/constants/index.ts +++ b/src/lib/kit/constants/index.ts @@ -1 +1,2 @@ export * from './config'; +export * from './common';