feat: add layout props variant header for section and accordeon and a…

docs/spec.md

@@ -184,6 +184,7 @@ You can provide all props of [original component](https://preview.gravity-ui.com
 | iconColor  | `'primary'` `'complementary'` `'secondary'` `'hint'` `'info'` `'info-heavy'` `'positive'` `'positive-heavy'` `'warning'` `'warning-heavy'` `'danger'` `'danger-heavy'` `'utility'` `'utility-heavy'` `'misc'` `'misc-heavy'` `'brand'` `'dark-primary'` `'dark-complementary'` `'dark-secondary'` |          | The color of the icon, if it does not have the themeLabel parameter |
 | themeIcon  | `'normal'` `'info'` `'success'` `'warning'` `'danger'` `'utility'`                                                                                                                                                                                                                                |          | Alert color                                                         |
 | titleAlert | `string`                                                                                                                                                                                                                                                                                          |          | Alert title                                                         |
+| viewAlert  | `'filled'` `'outlined'`                                                                                                                                                                                                                                                                           |          | Alert view                                                          |
 
 #### SelectParams
 

src/lib/core/components/View/types/layout.ts

@@ -4,7 +4,10 @@ import {FormValue, Spec} from '../../../';
 
 import {ViewProps} from './';
 
-export type ViewLayoutProps<Value extends FormValue, SpecType extends Spec> = {
+export type ViewLayoutProps<
+    Value extends FormValue,
+    SpecType extends Spec<undefined, undefined, Record<string, any> | undefined> = Spec,
+> = {
     children: React.ReactElement;
 } & ViewProps<Value, SpecType>;
 

src/lib/core/components/View/types/views.ts

@@ -4,7 +4,10 @@ import {FormValue, Spec} from '../../../';
 
 import {ViewLayoutType} from './';
 
-export type ViewProps<Value extends FormValue, SpecType extends Spec> = {
+export type ViewProps<
+    Value extends FormValue,
+    SpecType extends Spec<undefined, undefined, Record<string, any> | undefined> = Spec,
+> = {
     spec: SpecType;
     name: string;
     value?: Value;

src/lib/core/types/specs.ts

@@ -1,4 +1,4 @@
-import {AlertProps, LabelProps} from '@gravity-ui/uikit';
+import type {AlertProps, LabelProps} from '@gravity-ui/uikit';
 import {ColorTextBaseProps} from '@gravity-ui/uikit/build/esm/components/Text/colorText/colorText';
 
 import {ReadAsMethod, SpecTypes} from '../constants';
@@ -175,6 +175,7 @@ export interface StringSpec<
             iconColor?: ColorTextBaseProps['color'];
             titleAlert?: string;
             themeAlert?: AlertProps['theme'];
+            viewAlert?: AlertProps['view'];
         };
         fileInput?: {
             accept?: string;

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

@@ -56,6 +56,7 @@ export const TextContentComponent: React.FC<TextContentComponentProps> = ({
                 // If the title is an empty line, then you need to explicitly write undefined, otherwise there will be an additional indent
                 title={titleAlert}
                 theme={textContentParams?.themeAlert}
+                view={textContentParams?.viewAlert}
             />
         );
     } else if (textContentParams?.themeLabel) {

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

@@ -1,18 +1,30 @@
 import React from 'react';
 
+import {TextProps} from '@gravity-ui/uikit';
+
 import {ArrayLayoutProps, ObjectLayoutProps, isArrayItem} from '../../../../core';
 import {ErrorWrapper} from '../../../components';
 import {useErrorChecker} from '../../../hooks';
 import {RemoveButton} from '../../RemoveButton';
 import {SimpleVerticalAccordeon} from '../../SimpleVerticalAccordeon';
 
-export const Accordeon = <T extends ArrayLayoutProps | ObjectLayoutProps>({
+interface AccordeonLayoutProps {
+    variantTitle?: TextProps['variant'];
+}
+
+export const Accordeon = <
+    T extends
+        | ArrayLayoutProps<Record<string, any> | undefined, AccordeonLayoutProps | undefined>
+        | ObjectLayoutProps<Record<string, any> | undefined, AccordeonLayoutProps | undefined>,
+>({
     name,
     spec,
     input,
     meta,
     children,
 }: T): JSX.Element => {
+    const {variantTitle} = spec.viewSpec.layoutProps || {};
+
     const [open, setOpen] = React.useState(Boolean(spec.viewSpec?.layoutOpen));
 
     const onDrop = React.useCallback(() => {
@@ -40,6 +52,7 @@ export const Accordeon = <T extends ArrayLayoutProps | ObjectLayoutProps>({
             headerActionsTemplate={removeButton}
             hideInsteadOfDestroy
             withBranchView
+            variantTitle={variantTitle}
         >
             <ErrorWrapper name={name} meta={meta} withoutChildErrorStyles>
                 {children}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {HelpPopover} from '@gravity-ui/components';
-import {Popover, Text} from '@gravity-ui/uikit';
+import {Popover, Text, TextProps} from '@gravity-ui/uikit';
 
 import {GroupIndent} from '../../';
 import {RemoveButton} from '../../RemoveButton';
@@ -23,14 +23,22 @@ import './Section.scss';
 
 const b = block('section');
 
+interface SectionLayoutProps {
+    variantTitle?: TextProps['variant'];
+}
+
 interface SectionProps {
     titleSize: 's' | 'm';
     withIndent?: boolean;
     ignoreDescription?: boolean;
     descriptionAsSubtitle?: boolean;
 }
 
-const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>({
+const SectionBase = <
+    D extends FieldValue,
+    T extends FormValue,
+    S extends Spec<any, any, SectionLayoutProps>,
+>({
     name,
     spec,
     titleSize,
@@ -39,7 +47,7 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
     descriptionAsSubtitle,
     children,
     ...restProps
-}: (LayoutProps<D, undefined, undefined, S> | ViewLayoutProps<T, S>) & SectionProps) => {
+}: (LayoutProps<D, undefined, SectionLayoutProps, S> | ViewLayoutProps<T, S>) & SectionProps) => {
     const input = (restProps as FieldRenderProps<D>).input as
         | FieldRenderProps<D>['input']
         | undefined;
@@ -48,6 +56,29 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
     const titleRef = React.useRef<HTMLHeadingElement>(null);
     let content = children;
 
+    const {variantTitle: variantTitleProp} = spec.viewSpec.layoutProps || {};
+
+    const {sizeTitle, variantTitle} = React.useMemo(() => {
+        if (variantTitleProp) {
+            return {
+                sizeTitle: undefined,
+                variantTitle: variantTitleProp,
+            };
+        }
+
+        if (titleSize === 'm') {
+            return {
+                sizeTitle: titleSize,
+                variantTitle: 'body-2',
+            };
+        }
+
+        return {
+            sizeTitle: titleSize,
+            variantTitle: 'body-1',
+        };
+    }, [variantTitleProp, titleSize]);
+
     const removeButton = React.useMemo(() => {
         if (input?.value && input?.onDrop && isArrayItem(name)) {
             return (
@@ -107,7 +138,7 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
                 <div
                     className={b('header', {
                         'with-popover': !descriptionAsSubtitle,
-                        size: titleSize,
+                        size: sizeTitle,
                     })}
                 >
                     <Popover
@@ -118,7 +149,7 @@ const SectionBase = <D extends FieldValue, T extends FormValue, S extends Spec>(
                     >
                         <Text
                             className={b('title')}
-                            variant={titleSize === 'm' ? 'body-2' : 'body-1'}
+                            variant={variantTitle as TextProps['variant']}
                             ref={titleRef}
                             ellipsis
                         >

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, Text} from '@gravity-ui/uikit';
+import {Button, Icon, Popover, Text, TextProps} from '@gravity-ui/uikit';
 
 import {COMMON_POPOVER_PLACEMENT} from '../../constants/common';
 import {block} from '../../utils';
@@ -27,6 +27,7 @@ interface SimpleVerticalAccordeonProps {
     hideInsteadOfDestroy?: boolean;
     withBranchView?: boolean;
     viewLayout?: boolean;
+    variantTitle?: TextProps['variant'];
 }
 
 interface SimpleVerticalAccordeonState {
@@ -81,6 +82,7 @@ export class SimpleVerticalAccordeon extends React.Component<
             withBranchView,
             viewLayout,
             name,
+            variantTitle,
         } = this.props;
         const {open, hidden, isFirstRender} = this.state;
 
@@ -104,7 +106,7 @@ export class SimpleVerticalAccordeon extends React.Component<
         const titlePopoverDisabled =
             (this.titleRef.current?.offsetWidth || 0) <= TITLE_TEXT_MAX_WIDTH;
 
-        const currentTitleVariant = this.getCurrentTitleVariant();
+        const currentTitleVariant = variantTitle || this.getCurrentTitleVariant();
 
         return (
             Boolean(React.Children.count(children)) && (

src/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
 
 import isBoolean from 'lodash/isBoolean';
+import {TextProps} from '@gravity-ui/uikit';
 
-import {ArrayViewLayoutProps, ObjectViewLayoutProps, useDynamicFormsCtx} from '../../../../core';
+import {ArrayValue, ObjectValue, Spec, ViewLayoutProps, useDynamicFormsCtx} from '../../../../core';
 import {isNotEmptyValue} from '../../../utils';
 import {SimpleVerticalAccordeon} from '../../SimpleVerticalAccordeon';
 
-export const ViewAccordeon = <T extends ArrayViewLayoutProps | ObjectViewLayoutProps>({
+interface ViewAccordeonLayoutProps {
+    variantTitle?: TextProps['variant'];
+}
+
+export const ViewAccordeon = <
+    T extends ViewLayoutProps<ArrayValue | ObjectValue, Spec<any, any, ViewAccordeonLayoutProps>>,
+>({
     name,
     value,
     spec,
@@ -17,7 +24,9 @@ export const ViewAccordeon = <T extends ArrayViewLayoutProps | ObjectViewLayoutP
         isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true,
     );
 
-    if (!isNotEmptyValue(value, spec)) {
+    const {variantTitle} = spec.viewSpec.layoutProps || {};
+
+    if (!isNotEmptyValue(value, spec as Spec)) {
         return null;
     }
 
@@ -35,6 +44,7 @@ export const ViewAccordeon = <T extends ArrayViewLayoutProps | ObjectViewLayoutP
             hideInsteadOfDestroy
             withBranchView
             viewLayout
+            variantTitle={variantTitle}
         >
             {children}
         </SimpleVerticalAccordeon>

src/lib/kit/utils/common.ts

@@ -120,6 +120,11 @@ export const prepareSpec = <Type extends Spec>(
                 result.viewSpec.textContentParams.themeAlert.toLowerCase();
         }
 
+        if (isString(result.viewSpec?.textContentParams?.viewAlert)) {
+            result.viewSpec.textContentParams.viewAlert =
+                result.viewSpec.textContentParams.viewAlert.toLowerCase();
+        }
+
         if (isString(result.validator)) {
             result.validator = result.validator.toLowerCase();
         }

src/stories/ArrayCheckboxGroup.stories.tsx

@@ -46,6 +46,7 @@ const excludeOptions = [
     'viewSpec.inputProps',
     'viewSpec.placeholder',
     'viewSpec.layoutOpen',
+    'viewSpec.layoutProps',
 ];
 
 const template = () => {

src/stories/ArraySelect.stories.tsx

@@ -57,6 +57,7 @@ const excludeOptions = [
     'viewSpec.itemPrefix',
     'viewSpec.addButtonPosition',
     'viewSpec.checkboxGroupParams',
+    'viewSpec.layoutProps',
 ];
 
 const template = () => {

src/stories/ArrayTable.stories.tsx

@@ -64,6 +64,7 @@ const excludeOptions = [
     'viewSpec.selectParams',
     'viewSpec.checkboxGroupParams',
     'viewSpec.inputProps',
+    'viewSpec.layoutProps',
 ];
 
 const value = [

src/stories/ObjectCardOneOf.stories.tsx

@@ -64,6 +64,7 @@ const excludeOptions = [
     'viewSpec.placeholder',
     'viewSpec.delimiter',
     'viewSpec.inputProps',
+    'viewSpec.layoutProps',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {

src/stories/ObjectInline.stories.tsx

@@ -60,6 +60,7 @@ const excludeOptions = [
     'viewSpec.oneOfParams',
     'viewSpec.placeholder',
     'viewSpec.inputProps',
+    'viewSpec.layoutProps',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {

src/stories/ObjectMultiOneOf.stories.tsx

@@ -63,6 +63,7 @@ const excludeOptions = [
     'viewSpec.oneOfParams',
     'viewSpec.delimiter',
     'viewSpec.inputProps',
+    'viewSpec.layoutProps',
 ];
 
 const value = {

src/stories/ObjectMultiOneOfFlat.stories.tsx

@@ -63,6 +63,7 @@ const excludeOptions = [
     'viewSpec.oneOfParams',
     'viewSpec.delimiter',
     'viewSpec.inputProps',
+    'viewSpec.layoutProps',
 ];
 
 const value = {

src/stories/ObjectOneOf.stories.tsx

@@ -65,6 +65,7 @@ const excludeOptions = [
     'viewSpec.placeholder',
     'viewSpec.delimiter',
     'viewSpec.inputProps',
+    'viewSpec.layoutProps',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {

src/stories/ObjectOneOfFlat.stories.tsx

@@ -65,6 +65,7 @@ const excludeOptions = [
     'viewSpec.placeholder',
     'viewSpec.delimiter',
     'viewSpec.inputProps',
+    'viewSpec.layoutProps',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {

src/stories/ObjectSecret.stories.tsx

@@ -37,6 +37,7 @@ const excludeOptions = [
     'viewSpec.placeholder',
     'viewSpec.delimiter',
     'viewSpec.inputProps',
+    'viewSpec.layoutProps',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {

src/stories/ObjectTextLink.stories.tsx

@@ -42,6 +42,7 @@ const excludeOptions = [
     'viewSpec.placeholder',
     'viewSpec.delimiter',
     'viewSpec.inputProps',
+    'viewSpec.layoutProps',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {

src/stories/ObjectTimeRangeSelector.stories.tsx

@@ -106,6 +106,7 @@ const excludeOptions = [
     'viewSpec.placeholder',
     'viewSpec.delimiter',
     'viewSpec.inputProps',
+    'viewSpec.layoutProps',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {

src/stories/ObjectValue.stories.tsx

@@ -39,6 +39,7 @@ const excludeOptions = [
     'viewSpec.placeholder',
     'viewSpec.delimiter',
     'viewSpec.inputProps',
+    'viewSpec.layoutProps',
 ];
 
 const template = (spec: ObjectSpec = baseSpec) => {