Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 12 commits into from
Jan 23, 2024
12 changes: 0 additions & 12 deletions src/lib/kit/components/AccordeonCard/AccordeonCard.scss
Original file line number Diff line number Diff line change
@@ -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);
22 changes: 12 additions & 10 deletions src/lib/kit/components/AccordeonCard/AccordeonCard.tsx
Original file line number Diff line number Diff line change
@@ -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,16 @@ 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 +89,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')}
6 changes: 0 additions & 6 deletions src/lib/kit/components/Card/Card.scss
Original file line number Diff line number Diff line change
@@ -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;
}

11 changes: 8 additions & 3 deletions src/lib/kit/components/Card/Card.tsx
Original file line number Diff line number Diff line change
@@ -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')}>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 0 additions & 4 deletions src/lib/kit/components/Inputs/FileInput/FileInput.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}
6 changes: 4 additions & 2 deletions src/lib/kit/components/Inputs/FileInput/FileInput.tsx
Original file line number Diff line number Diff line change
@@ -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"
6 changes: 0 additions & 6 deletions src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
4 changes: 2 additions & 2 deletions src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.tsx
Original file line number Diff line number Diff line change
@@ -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>
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -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}
1 change: 1 addition & 0 deletions src/lib/kit/components/Layouts/Row/Row.scss
Original file line number Diff line number Diff line change
@@ -44,6 +44,7 @@
}

&__note {
display: inline;
padding-right: 16px;
position: relative;

14 changes: 7 additions & 7 deletions src/lib/kit/components/Layouts/Row/Row.tsx
Original file line number Diff line number Diff line change
@@ -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,18 +41,18 @@ 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')}>
<div className={b('note')}>
LehaRybkoha marked this conversation as resolved.
Show resolved Hide resolved
<Text className={b('note-inner')}>
<HelpPopover
htmlContent={spec.viewSpec.layoutDescription}
placement={['bottom', 'top']}
/>
</span>
</span>
</Text>
</div>
) : null}
</div>
</div>
6 changes: 3 additions & 3 deletions src/lib/kit/components/Layouts/Section/Section.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
}
9 changes: 1 addition & 8 deletions src/lib/kit/components/LongValue/LongValue.scss
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
@import '../../styles/variables.scss';

.#{$ns}long-value {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;

&_open {
white-space: pre-wrap;
word-wrap: break-word;
}

&_long {
cursor: pointer;

17 changes: 11 additions & 6 deletions src/lib/kit/components/LongValue/LongValue.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from 'react';

import {Text} from '@gravity-ui/uikit';

import {block} from '../../utils';

import './LongValue.scss';
@@ -44,12 +46,15 @@ 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}
wordBreak={open ? 'break-all' : undefined}
whiteSpace={open ? 'break-spaces' : undefined}
>
{value}
</Text>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -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;

Original file line number Diff line number Diff line change
@@ -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,25 @@ 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;
}
}
7 changes: 0 additions & 7 deletions src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss
Original file line number Diff line number Diff line change
@@ -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;
Loading