From e5cde3ad58cfb1d8436c2a4ad75e074dfb94a741 Mon Sep 17 00:00:00 2001
From: Hellen <el-makarova@yandex-team.ru>
Date: Tue, 22 Oct 2024 16:01:13 +0300
Subject: [PATCH] fix(DefinitionList): layout fixes (#1910)

---
 src/components/DefinitionList/DefinitionList.scss     |  2 +-
 .../{Definition.tsx => DefinitionContent.tsx}         |  4 ++--
 .../DefinitionList/components/DefinitionListItem.tsx  | 11 +++++------
 .../components/{Term.tsx => TermContent.tsx}          |  5 ++---
 src/components/DefinitionList/utils.ts                | 10 ----------
 5 files changed, 10 insertions(+), 22 deletions(-)
 rename src/components/DefinitionList/components/{Definition.tsx => DefinitionContent.tsx} (84%)
 rename src/components/DefinitionList/components/{Term.tsx => TermContent.tsx} (92%)

diff --git a/src/components/DefinitionList/DefinitionList.scss b/src/components/DefinitionList/DefinitionList.scss
index 95736e0e26..39f247a069 100644
--- a/src/components/DefinitionList/DefinitionList.scss
+++ b/src/components/DefinitionList/DefinitionList.scss
@@ -49,7 +49,7 @@ $block: '.#{variables.$ns}definition-list';
     &_responsive {
         #{$block}__term-container {
             --_--term-width: auto;
-            flex: 1 0 50%;
+            flex: 1 0 min-content;
         }
     }
     &_vertical {
diff --git a/src/components/DefinitionList/components/Definition.tsx b/src/components/DefinitionList/components/DefinitionContent.tsx
similarity index 84%
rename from src/components/DefinitionList/components/Definition.tsx
rename to src/components/DefinitionList/components/DefinitionContent.tsx
index ad86fd216a..149464d0fb 100644
--- a/src/components/DefinitionList/components/Definition.tsx
+++ b/src/components/DefinitionList/components/DefinitionContent.tsx
@@ -6,12 +6,12 @@ import type {DefinitionListItemProps} from '../types';
 
 interface DefinitionProps extends Pick<DefinitionListItemProps, 'copyText' | 'children'> {}
 
-export function Definition({copyText, children}: DefinitionProps) {
+export function DefinitionContent({copyText, children}: DefinitionProps) {
     const definitionContent = children ?? '—';
 
     return copyText ? (
         <div className={b('copy-container')}>
-            <span>{definitionContent}</span>
+            {definitionContent}
             <ClipboardButton
                 size="s"
                 text={copyText}
diff --git a/src/components/DefinitionList/components/DefinitionListItem.tsx b/src/components/DefinitionList/components/DefinitionListItem.tsx
index 238ceb33db..d45e0e8595 100644
--- a/src/components/DefinitionList/components/DefinitionListItem.tsx
+++ b/src/components/DefinitionList/components/DefinitionListItem.tsx
@@ -2,22 +2,21 @@ import React from 'react';
 
 import {b} from '../constants';
 import type {DefinitionListItemProps} from '../types';
-import {getTitle, isUnbreakableOver} from '../utils';
+import {isUnbreakableOver} from '../utils';
 
-import {Definition} from './Definition';
+import {DefinitionContent} from './DefinitionContent';
 import {useDefinitionListAttributes} from './DefinitionListContext';
-import {Term} from './Term';
+import {TermContent} from './TermContent';
 
 export function DefinitionListItem({name, children, copyText, note}: DefinitionListItemProps) {
     const {direction, keyStyle, valueStyle} = useDefinitionListAttributes();
     return (
         <div className={b('item')}>
             <dt className={b('term-container')} style={keyStyle}>
-                <Term direction={direction} name={name} note={note} />
+                <TermContent direction={direction} name={name} note={note} />
             </dt>
             <dd
                 className={b('definition')}
-                title={getTitle(children)}
                 style={{
                     ...valueStyle,
                     lineBreak:
@@ -26,7 +25,7 @@ export function DefinitionListItem({name, children, copyText, note}: DefinitionL
                             : undefined,
                 }}
             >
-                <Definition copyText={copyText}>{children}</Definition>
+                <DefinitionContent copyText={copyText}>{children}</DefinitionContent>
             </dd>
         </div>
     );
diff --git a/src/components/DefinitionList/components/Term.tsx b/src/components/DefinitionList/components/TermContent.tsx
similarity index 92%
rename from src/components/DefinitionList/components/Term.tsx
rename to src/components/DefinitionList/components/TermContent.tsx
index 7a68fa1847..84faf3e5b8 100644
--- a/src/components/DefinitionList/components/Term.tsx
+++ b/src/components/DefinitionList/components/TermContent.tsx
@@ -8,7 +8,6 @@ import type {
     DefinitionListItemNote,
     DefinitionListItemProps,
 } from '../types';
-import {getTitle} from '../utils';
 
 interface NoteElementsProps {
     note?: DefinitionListItemNote;
@@ -55,7 +54,7 @@ interface TermProps extends Pick<DefinitionListItemProps, 'note' | 'name'> {
     direction?: DefinitionListDirection;
 }
 
-export function Term({note, name, direction}: TermProps) {
+export function TermContent({note, name, direction}: TermProps) {
     const noteElement = note ? (
         <React.Fragment>
             &nbsp;
@@ -65,7 +64,7 @@ export function Term({note, name, direction}: TermProps) {
     return (
         <React.Fragment>
             <div className={b('term-wrapper')}>
-                <span title={getTitle(name)}>{name}</span>
+                {name}
                 {noteElement}
             </div>
             {direction === 'horizontal' && <div className={b('dots')} />}
diff --git a/src/components/DefinitionList/utils.ts b/src/components/DefinitionList/utils.ts
index e5999334db..b7d4b48521 100644
--- a/src/components/DefinitionList/utils.ts
+++ b/src/components/DefinitionList/utils.ts
@@ -1,5 +1,3 @@
-import type React from 'react';
-
 export function isUnbreakableOver(limit: number) {
     return function (value: string): boolean {
         const posibleLines = value.split(/\s+/);
@@ -7,11 +5,3 @@ export function isUnbreakableOver(limit: number) {
         return posibleLines.some((line) => line.length > limit);
     };
 }
-
-export function getTitle(content?: React.ReactNode) {
-    if (typeof content === 'string' || typeof content === 'number') {
-        return String(content);
-    }
-
-    return undefined;
-}