fix(DefinitionList): layout fixes (#1910)

gravity-ui · Oct 22, 2024 · e5cde3a · e5cde3a
1 parent bdfed60
commit e5cde3a
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 22 deletions.
diff --git 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/.../DefinitionList/components/Definition.tsx → ...tionList/components/DefinitionContent.tsx b/.../DefinitionList/components/Definition.tsx → ...tionList/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
@@ -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/...onents/DefinitionList/components/Term.tsx → ...DefinitionList/components/TermContent.tsx b/...onents/DefinitionList/components/Term.tsx → ...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
@@ -1,17 +1,7 @@
-import type React from 'react';
-
 export function isUnbreakableOver(limit: number) {
     return function (value: string): boolean {
         const posibleLines = value.split(/\s+/);
 
         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;
-}