fix: code-review

gravity-ui · Aug 1, 2024 · a698067 · a698067
1 parent 9619194
commit a698067
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 90 deletions.
diff --git a/src/components/DefinitionList/DefinitionList.scss b/src/components/DefinitionList/DefinitionList.scss
@@ -4,9 +4,11 @@
 $block: '.#{variables.$ns}definition-list';
 
 #{$block} {
-    margin: 0;
+    &__list {
+        margin: 0;
+    }
 
-    &__title {
+    &__group-title {
         margin-block-end: var(--g-spacing-3);
 
         &:not(:first-of-type) {
@@ -30,15 +32,16 @@ $block: '.#{variables.$ns}definition-list';
         }
     }
 
-    &__group_margin {
+    &_margin {
         &:not(:first-of-type) {
             margin-block-start: var(--g-spacing-5);
         }
     }
 
     &__term-container {
         flex: 0 0 auto;
-        min-width: 300px;
+        width: 300px;
+        max-width: 300px;
         display: flex;
         align-items: baseline;
 
@@ -136,10 +139,10 @@ $block: '.#{variables.$ns}definition-list';
     #{$block}__item + #{$block}__item {
         margin-block-start: var(--g-spacing-3);
     }
-    #{$block}__title:not(:first-of-type) {
+    #{$block}__group-title:not(:first-of-type) {
         margin-block-start: var(--g-spacing-8);
     }
-    #{$block}__group_margin:not(:first-of-type) {
+    #{$block}_margin:not(:first-of-type) {
         margin-block-start: var(--g-spacing-8);
     }
 }
diff --git a/src/components/DefinitionList/DefinitionList.tsx b/src/components/DefinitionList/DefinitionList.tsx
@@ -8,15 +8,7 @@ import {
     DefinitionListGroupedProps,
     DefinitionListProps,
 } from './types';
-import {
-    b,
-    getAllItemsAsGroups,
-    getKeyStyles,
-    getTitle,
-    getValueStyles,
-    isUnbreakableOver,
-    onlySingleItems,
-} from './utils';
+import {b, getAllItemsAsGroups, getTitle, isUnbreakableOver, onlySingleItems} from './utils';
 
 import './DefinitionList.scss';
 
@@ -31,55 +23,72 @@ function DefinitionListGranular({
     copyPosition = 'outside',
     qa,
 }: DefinitionListGranularProps) {
-    const keyStyle = getKeyStyles({nameMaxWidth, direction});
+    const keyStyle = nameMaxWidth ? {maxWidth: nameMaxWidth, width: nameMaxWidth} : {};
 
-    const valueStyle = getValueStyles({contentMaxWidth, direction});
+    const valueStyle =
+        typeof contentMaxWidth === 'number'
+            ? {width: contentMaxWidth, maxWidth: contentMaxWidth}
+            : {};
 
     const normalizedItems = React.useMemo(() => {
         return items.map((value, index) => ({...value, key: index}));
     }, [items]);
 
     return (
-        <dl className={b({responsive, vertical: direction === 'vertical'}, className)} data-qa={qa}>
-            {normalizedItems.map((item) => {
-                const {name, key, content, contentTitle, nameTitle, copyText, note, multilineName} =
-                    item;
+        <div
+            className={b({responsive, vertical: direction === 'vertical'}, className)}
+            data-qa={qa}
+        >
+            <dl className={b('list')}>
+                {normalizedItems.map((item) => {
+                    const {
+                        name,
+                        key,
+                        content,
+                        contentTitle,
+                        nameTitle,
+                        copyText,
+                        note,
+                        multilineName,
+                    } = item;
 
-                return (
-                    <div key={key} className={b('item', itemClassName)}>
-                        <dt
-                            className={b('term-container', {multiline: multilineName})}
-                            style={keyStyle}
-                        >
-                            <Term
-                                direction={direction}
-                                name={name}
-                                nameTitle={nameTitle}
-                                note={note}
-                                multilineName={multilineName}
-                            />
-                        </dt>
-                        <dd
-                            className={b('definition')}
-                            title={getTitle(contentTitle, content)}
-                            style={{
-                                ...valueStyle,
-                                lineBreak:
-                                    typeof content === 'string' && isUnbreakableOver(20)(content)
-                                        ? 'anywhere'
-                                        : undefined,
-                            }}
-                        >
-                            <Definition
-                                copyPosition={copyPosition}
-                                copyText={copyText}
-                                content={content}
-                            />
-                        </dd>
-                    </div>
-                );
-            })}
-        </dl>
+                    return (
+                        <div key={key} className={b('item', itemClassName)}>
+                            <dt
+                                className={b('term-container', {multiline: multilineName})}
+                                style={keyStyle}
+                            >
+                                <Term
+                                    direction={direction}
+                                    name={name}
+                                    nameTitle={nameTitle}
+                                    note={note}
+                                    multilineName={multilineName}
+                                />
+                            </dt>
+                            <dd
+                                className={b('definition')}
+                                title={getTitle(contentTitle, content)}
+                                style={{
+                                    ...valueStyle,
+                                    lineBreak:
+                                        typeof content === 'string' &&
+                                        isUnbreakableOver(20)(content)
+                                            ? 'anywhere'
+                                            : undefined,
+                                }}
+                            >
+                                <Definition
+                                    copyPosition={copyPosition}
+                                    copyText={copyText}
+                                    content={content}
+                                />
+                            </dd>
+                        </div>
+                    );
+                })}
+            </dl>
+        </div>
     );
 }
 
@@ -104,7 +113,7 @@ function DefinitionListGrouped({
                         {item.items && (
                             <DefinitionListGranular
                                 {...rest}
-                                className={b('group', {margin: !label})}
+                                className={b({margin: !label})}
                                 items={item.items}
                                 itemClassName={b('item', {grouped: Boolean(label)}, itemClassName)}
                             />

diff --git a/src/components/DefinitionList/components/GroupLabel.tsx b/src/components/DefinitionList/components/GroupLabel.tsx
@@ -10,7 +10,7 @@ interface GroupLabelProps {
 
 export function GroupLabel({label}: GroupLabelProps) {
     return (
-        <div className={b('title')}>
+        <div className={b('group-title')}>
             <Text variant="subheader-1" color="complementary">
                 {label}
             </Text>

diff --git a/src/components/DefinitionList/utils.ts b/src/components/DefinitionList/utils.ts
@@ -2,12 +2,7 @@ import React from 'react';
 
 import {block} from '../utils/cn';
 
-import type {
-    DefinitionListGroup,
-    DefinitionListItem,
-    DefinitionListProps,
-    DefinitionListSingleItem,
-} from './types';
+import type {DefinitionListGroup, DefinitionListItem, DefinitionListSingleItem} from './types';
 
 export const b = block('definition-list');
 
@@ -60,29 +55,3 @@ export function getTitle(title?: string, content?: React.ReactNode) {
 
     return undefined;
 }
-
-export function getKeyStyles({
-    nameMaxWidth,
-    direction,
-}: Pick<DefinitionListProps, 'nameMaxWidth' | 'direction'>) {
-    if (!nameMaxWidth) {
-        return {};
-    }
-    if (direction === 'vertical') {
-        return {maxWidth: nameMaxWidth};
-    }
-    return {flexBasis: nameMaxWidth};
-}
-
-export function getValueStyles({
-    contentMaxWidth,
-    direction,
-}: Pick<DefinitionListProps, 'contentMaxWidth' | 'direction'>) {
-    if (!(typeof contentMaxWidth === 'number')) {
-        return {};
-    }
-    if (direction === 'vertical') {
-        return {maxWidth: contentMaxWidth};
-    }
-    return {flexBasis: contentMaxWidth, maxWidth: contentMaxWidth};
-}