fix: styles

gravity-ui · Feb 21, 2024 · c53531b · c53531b
1 parent add51a5
commit c53531b
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 23 deletions.
diff --git a/src/components/DefinitionList/DefinitionList.scss b/src/components/DefinitionList/DefinitionList.scss
@@ -11,44 +11,56 @@ $block: '.#{variables.$ns}definition-list';
     &__item {
         display: flex;
         align-items: baseline;
-        gap: 4px;
+        gap: var(--g-spacing-1);
 
         & + & {
             margin-block-start: var(--g-spacing-4);
         }
     }
 
-    &__item-note-tooltip {
-        margin-inline-end: 4px;
-    }
-
     &__term-container {
         flex: 0 0 300px;
         display: flex;
         align-items: baseline;
 
         overflow: hidden;
+        position: relative;
     }
 
-    &__term {
+    &__term-wrapper {
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
 
         flex: 0 1 auto;
         color: var(--g-color-text-secondary);
 
-        &_multiline {
-            white-space: unset;
-        }
+        position: relative;
+    }
+
+    &__term-container_multiline &__term-wrapper {
+        white-space: unset;
+    }
+
+    &__term {
+        display: inline;
+    }
+
+    &__term-container_multiline &__item-note-tooltip {
+        position: absolute;
     }
 
     &__dots {
         box-sizing: border-box;
         flex: 1 0 auto;
         min-width: 40px;
         margin: 0 2px;
-        border-block-end: 1px dashed var(--g-color-text-secondary);
+        border-block-end: 1px dotted var(--g-color-line-generic-active);
+    }
+
+    &__dots_with-note {
+        margin-inline-start: 15px;
+        min-width: 25px;
     }
 
     &__definition {

diff --git a/src/components/DefinitionList/DefinitionList.tsx b/src/components/DefinitionList/DefinitionList.tsx
@@ -49,21 +49,21 @@ function getTitle(title?: string, content?: React.ReactNode) {
 
 function getNoteElement(note?: DefinitionListItemNote) {
     let noteElement = null;
+    const popoverClassName = b('item-note-tooltip');
     if (note) {
         if (typeof note === 'string') {
             noteElement = (
                 <HelpPopover
-                    className={b('item-note-tooltip')}
+                    className={popoverClassName}
                     tooltipContentClassName="yfm"
                     htmlContent={note}
                     placement={['bottom', 'top']}
-                    offset={{left: 4}}
                 />
             );
         }
 
         if (typeof note === 'object') {
-            noteElement = <HelpPopover offset={{left: 4}} {...note} />;
+            noteElement = <HelpPopover className={popoverClassName} {...note} />;
         }
     }
     return noteElement;
@@ -118,18 +118,26 @@ export function DefinitionList({
                     ) : (
                         definitionContent
                     );
+                    const noteElement = (
+                        <React.Fragment>
+                            &nbsp;
+                            {getNoteElement(note)}
+                        </React.Fragment>
+                    );
                     return (
                         <div key={key ?? name} className={b('item', itemClassName)} role="listitem">
-                            <div className={b('term-container')} style={keyStyle}>
-                                <dt
-                                    className={b('term', {multiline: multilineName})}
-                                    title={name}
-                                    role="term"
-                                >
-                                    {term}
-                                </dt>
-                                {getNoteElement(note)}
-                                <div className={b('dots')} />
+                            <div
+                                className={b('term-container', {multiline: multilineName})}
+                                style={keyStyle}
+                            >
+                                <div className={b('term-wrapper')}>
+                                    <dt className={b('term')} title={name} role="term">
+                                        {term}
+                                    </dt>
+                                    {multilineName && noteElement}
+                                </div>
+                                {!multilineName && noteElement}
+                                <div className={b('dots', {'with-note': Boolean(note)})} />
                             </div>
                             <dd
                                 role="definition"

diff --git a/src/components/DefinitionList/__stories__/DefinitionList.stories.tsx b/src/components/DefinitionList/__stories__/DefinitionList.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import {Label, User} from '@gravity-ui/uikit';
 import {Meta, StoryFn} from '@storybook/react';
 
 import {DefinitionList, DefinitionListItem, DefinitionListProps} from '../DefinitionList';
@@ -95,6 +96,22 @@ const items: DefinitionListItem[] = [
         content: 'value',
         note: 'This is simple string value',
     },
+    {
+        name: 'Avatar with tooltip',
+        content: (
+            <User
+                name="Charles Darwin"
+                size="xl"
+                description="Adventurer"
+                avatar={{text: 'Charles Darwin', theme: 'brand'}}
+            />
+        ),
+        note: 'This is avatar',
+    },
+    {
+        name: 'Label',
+        content: <Label>label</Label>,
+    },
 ];
 
 export default {