feat: added text components instead of spans/divs in dynamic forms (#158

)

Authored-by: Aleksei <[email protected]>

src/lib/kit/components/AccordeonCard/AccordeonCard.scss

@@ -63,18 +63,6 @@
             order: -1;
         }
 
-        &-content-title {
-            font-weight: 700;
-
-            &_size_s {
-                font-size: 13px;
-            }
-
-            &_size_m {
-                font-size: 16px;
-            }
-        }
-
         &-content-description {
             margin-top: 12px;
             color: var(--g-color-text-complementary);

src/lib/kit/components/AccordeonCard/AccordeonCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Button, Icon, Text} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
 import {block} from '../../utils';
@@ -69,6 +69,18 @@ export const AccordeonCard: React.FC<AccordeonCardProps> = ({
         }
     });
 
+    const currentHeaderVariant = React.useMemo(() => {
+        if (!_.isString(header)) {
+            return 'body-1';
+        }
+
+        if (titleSize === 'm') {
+            return 'subheader-2';
+        }
+
+        return 'subheader-1';
+    }, [titleSize]);
+
     return (
         <div ref={accordeonRef} className={b({empty: Boolean(emptyBody)}, className)}>
             <div
@@ -79,15 +91,7 @@ export const AccordeonCard: React.FC<AccordeonCardProps> = ({
                 onClick={!ignoreHeaderToggle && !alwaysOpen ? handleToggle : undefined}
             >
                 <div className={b('header-content')}>
-                    <span
-                        className={
-                            _.isString(header)
-                                ? b('header-content-title', {size: titleSize})
-                                : undefined
-                        }
-                    >
-                        {header}
-                    </span>
+                    <Text variant={currentHeaderVariant}>{header}</Text>
                     {description ? (
                         <span
                             className={b('header-content-description')}

src/lib/kit/components/Card/Card.scss

@@ -64,12 +64,6 @@
     }
 
     &__title {
-        font-size: var(--g-text-subheader-2-font-size);
-        font-weight: var(--g-text-subheader-font-weight);
-        line-height: var(--g-text-subheader-2-line-height);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
         max-width: 533px;
     }
 

src/lib/kit/components/Card/Card.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Card as CardBase, Icon, Popover} from '@gravity-ui/uikit';
+import {Button, Card as CardBase, Icon, Popover, Text} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
 import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH} from '../../constants/common';
@@ -79,9 +79,14 @@ export const Card: React.FC<CardProps> = ({
                         disabled={titlePopoverDisabled}
                         placement={COMMON_POPOVER_PLACEMENT}
                     >
-                        <div ref={titleRef} className={b('title')}>
+                        <Text
+                            className={b('title')}
+                            ellipsis={true}
+                            ref={titleRef}
+                            variant="subheader-2"
+                        >
                             {propsTitle}
-                        </div>
+                        </Text>
                     </Popover>
                     {description ? (
                         <div className={b('note')}>

src/lib/kit/components/Inputs/FileInput/FileInput.scss

@@ -11,9 +11,5 @@
         display: block;
         margin: auto 10px;
         max-width: 160px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        color: var(--g-color-text-secondary);
     }
 }

src/lib/kit/components/Inputs/FileInput/FileInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Xmark} from '@gravity-ui/icons';
-import {Button, Icon, Label} from '@gravity-ui/uikit';
+import {Button, Icon, Label, Text} from '@gravity-ui/uikit';
 
 import {StringInputProps} from '../../../../core';
 import i18n from '../../../../kit/i18n';
@@ -82,7 +82,9 @@ export const FileInput: React.FC<StringInputProps> = ({name, input, spec}) => {
                 tabIndex={-1}
                 accept={spec.viewSpec.fileInput?.accept}
             />
-            <span className={b('file-name')}>{fileNameContent}</span>
+            <Text className={b('file-name')} ellipsis={true} color="secondary">
+                {fileNameContent}
+            </Text>
             {value ? (
                 <Button
                     view="flat"

src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss

@@ -7,10 +7,4 @@
     padding: 15px;
     align-items: center;
     background-color: var(--g-color-base-float-hover);
-
-    &__language {
-        margin-top: 2px;
-        margin-left: 10px;
-        font-size: 16px;
-    }
 }

src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {File} from '@gravity-ui/icons';
-import {Icon} from '@gravity-ui/uikit';
+import {Icon, Text} from '@gravity-ui/uikit';
 
 import {block} from '../../../utils';
 
@@ -18,7 +18,7 @@ export const MonacoHeader: React.FC<MonacoHeaderProps> = ({language, editButton}
     <div className={b()}>
         <div>
             <Icon data={File} size={18} />
-            <span className={b('language')}>{language}</span>
+            <Text variant="body-3">{language}</Text>
         </div>
         {editButton ?? null}
     </div>

src/lib/kit/components/Inputs/TextContent/TextContent.tsx

@@ -59,7 +59,7 @@ export const TextContent: React.FC<StringIndependentInputProps> = ({
                 {content}
                 {input.value ? (
                     <React.Fragment>
-                        <span className={b('separator')}>:</span>
+                        <Text className={b('separator')}>:</Text>
                         <Text color="secondary">{input.value}</Text>
                     </React.Fragment>
                 ) : null}

src/lib/kit/components/Layouts/Row/Row.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {TrashBin} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
+import {Button, Icon, Text} from '@gravity-ui/uikit';
 import _ from 'lodash';
 
 import {
@@ -41,17 +41,17 @@ const RowBase = <T extends FieldValue, S extends Spec>({
         <div className={b()}>
             <div className={b('left')}>
                 <div className={b('left-inner')}>
-                    <span className={b('title', {required: spec.required})}>
+                    <Text className={b('title', {required: spec.required})}>
                         {spec.viewSpec.layoutTitle}
-                    </span>
+                    </Text>
                     {!verboseDescription && spec.viewSpec.layoutDescription ? (
                         <span className={b('note')}>
-                            <span className={b('note-inner')}>
+                            <Text className={b('note-inner')}>
                                 <HelpPopover
                                     htmlContent={spec.viewSpec.layoutDescription}
                                     placement={['bottom', 'top']}
                                 />
-                            </span>
+                            </Text>
                         </span>
                     ) : null}
                 </div>

src/lib/kit/components/Layouts/Section/Section.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
-import {Popover} from '@gravity-ui/uikit';
+import {Popover, Text} from '@gravity-ui/uikit';
 
 import {GroupIndent} from '../../';
 import {COMMON_POPOVER_PLACEMENT, COMMON_TITLE_MAX_WIDTH, ErrorWrapper} from '../../../';
@@ -68,12 +68,12 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
             );
         } else {
             description = (
-                <div className={b('note')}>
+                <Text className={b('note')}>
                     <HelpPopover
                         htmlContent={spec.viewSpec.layoutDescription}
                         placement={['bottom', 'top']}
                     />
-                </div>
+                </Text>
             );
         }
     }

src/lib/kit/components/LongValue/LongValue.scss

@@ -2,14 +2,6 @@
 
 .#{$ns}long-value {
     max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &_open {
-        white-space: pre-wrap;
-        word-wrap: break-word;
-    }
-
     &_long {
         cursor: pointer;
 

src/lib/kit/components/LongValue/LongValue.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import {Text} from '@gravity-ui/uikit';
+
 import {block} from '../../utils';
 
 import './LongValue.scss';
@@ -19,6 +21,18 @@ export const LongValue: React.FC<LongValueProps> = ({value, className}) => {
 
     const handleClick = React.useCallback(() => setOpen((f) => !f), [setOpen]);
 
+    const currentTextProperies = React.useMemo(() => {
+        let wordBreak: 'break-all' | undefined;
+        let whiteSpace: 'break-spaces' | undefined;
+
+        if (open) {
+            wordBreak = 'break-all';
+            whiteSpace = 'break-spaces';
+        }
+
+        return {wordBreak, whiteSpace};
+    }, [open]);
+
     React.useEffect(() => {
         if (ref.current) {
             if (value !== prevValue.current) {
@@ -44,12 +58,10 @@ export const LongValue: React.FC<LongValueProps> = ({value, className}) => {
     });
 
     return (
-        <div
-            ref={ref}
-            className={b({open, long}, className)}
-            onClick={long ? handleClick : undefined}
-        >
-            {value}
+        <div ref={ref} onClick={long ? handleClick : undefined}>
+            <Text className={b({long}, className)} ellipsis={true} {...currentTextProperies}>
+                {value}
+            </Text>
         </div>
     );
 };

src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss

@@ -25,28 +25,6 @@ $animationDuration: 0.3s;
         }
     }
 
-    &__title {
-        font-weight: 500;
-
-        &_size_s {
-            margin-bottom: 0;
-
-            font-size: var(--g-text-body-1-font-size);
-        }
-
-        &_size_m {
-            margin-bottom: 1px;
-
-            font-size: var(--g-text-body2-font-size);
-        }
-
-        &_size_l {
-            margin-bottom: 2px;
-
-            font-size: var(--g-text-body3-font-size);
-        }
-    }
-
     &__tooltip {
         margin: 0px 5px;
 

src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
 import {ChevronDown} from '@gravity-ui/icons';
-import {Button, Icon, Popover} from '@gravity-ui/uikit';
+import {Button, Icon, Popover, Text} from '@gravity-ui/uikit';
 
 import {COMMON_POPOVER_PLACEMENT} from '../../constants/common';
 import {block} from '../../utils';
@@ -72,7 +72,6 @@ export class SimpleVerticalAccordeon extends React.Component<
 
     render() {
         const {
-            titleSize,
             children,
             headerActionsTemplate,
             className,
@@ -105,6 +104,8 @@ export class SimpleVerticalAccordeon extends React.Component<
         const titlePopoverDisabled =
             (this.titleRef.current?.offsetWidth || 0) <= TITLE_TEXT_MAX_WIDTH;
 
+        const currentTitleVariant = this.getCurrentTitleVariant();
+
         return (
             Boolean(React.Children.count(children)) && (
                 <div className={b({branch: withBranchView, view: viewLayout}, className)}>
@@ -121,9 +122,7 @@ export class SimpleVerticalAccordeon extends React.Component<
                                 qa={`${name}-accordeon-toggler`}
                                 width="auto"
                             >
-                                <b ref={this.titleRef} className={b('title', {size: titleSize})}>
-                                    {title}
-                                </b>
+                                <Text variant={currentTitleVariant}>{title}</Text>
                                 <Icon
                                     data={ChevronDown}
                                     className={b('chevron', {open})}
@@ -179,13 +178,27 @@ export class SimpleVerticalAccordeon extends React.Component<
         return this.state.open ? openTitle : title;
     }
 
+    private getCurrentTitleVariant() {
+        const {titleSize} = this.props;
+
+        if (titleSize === 'm') {
+            return 'body-2';
+        }
+
+        if (titleSize === 'l') {
+            return 'body-3';
+        }
+
+        return 'body-1';
+    }
+
     private getTooltip() {
         const {note} = this.props;
 
         return note ? (
-            <span className={b('tooltip')}>
+            <Text className={b('tooltip')}>
                 <HelpPopover htmlContent={note} placement={['bottom', 'top']} />
-            </span>
+            </Text>
         ) : null;
     }
 }

src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss

@@ -19,13 +19,6 @@
         overflow: hidden;
     }
 
-    &__title {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: var(--g-color-text-secondary);
-    }
-
     &__dots {
         min-width: 40px;
         flex-grow: 1;