feat(FormItem): add required prop (#6820)

* feat(FormItem): add required prop

* CHORE: Update screenshots

* fix: a11y issue with required indicator

---------

Co-authored-by: GitHub Action <[email protected]>

packages/vkui/src/components/FormItem/FormItem.e2e-playground.tsx

@@ -63,6 +63,11 @@ export const FormItemPlayground = (props: ComponentPlaygroundProps) => {
             <Input key={0} aria-labelledby="bottom-id" placeholder="Введите ваше значение" />,
           ],
         },
+        {
+          top: ['Сверху'],
+          children: [<Input key={0} placeholder="Введите ваше значение" />],
+          required: [true],
+        },
       ]}
     >
       {(props: FormItemProps) => <FormItem {...props} style={{ maxWidth: '300px' }} />}

packages/vkui/src/components/FormItem/FormItem.module.css

@@ -52,6 +52,11 @@
   white-space: normal;
 }
 
+.FormItemTop__label--required {
+  color: var(--vkui--color_text_negative);
+  margin-inline-start: 3px;
+}
+
 .FormItem__bottom {
   color: var(--vkui--color_text_secondary);
   padding-block-start: 8px;

packages/vkui/src/components/FormItem/FormItem.tsx

@@ -2,13 +2,15 @@ import * as React from 'react';
 import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { HasComponent, HasRootRef } from '../../types';
 import { Removable, RemovableProps } from '../Removable/Removable';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { FormItemTop } from './FormItemTop/FormItemTop';
 import { FormItemTopAside } from './FormItemTop/FormItemTopAside';
 import { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';
+import { FormItemContext } from './context';
 import styles from './FormItem.module.css';
 
 const sizeYClassNames = {
@@ -64,6 +66,10 @@ export interface FormItemProps
    * @since 5.8.0
    */
   noPadding?: boolean;
+  /**
+   * Помечает поле обязательным
+   */
+  required?: boolean;
 }
 
 /**
@@ -84,6 +90,7 @@ export const FormItem = ({
   bottomId,
   noPadding,
   topNode,
+  required = false,
   ...restProps
 }: FormItemProps) => {
   const rootEl = useExternRef(getRootRef);
@@ -113,6 +120,8 @@ export const FormItem = ({
     </React.Fragment>
   );
 
+  const context = useObjectMemo({ required, topMultiline });
+
   return (
     <RootComponent
       {...restProps}
@@ -128,26 +137,31 @@ export const FormItem = ({
         removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),
       )}
     >
-      {removable ? (
-        <Removable
-          align="start"
-          onRemove={(e) => {
-            if (rootEl?.current) {
-              onRemove(e, rootEl.current);
-            }
-          }}
-          removePlaceholder={removePlaceholder}
-          indent={removable === 'indent'}
-        >
-          <div
-            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}
+      <FormItemContext.Provider value={context}>
+        {removable ? (
+          <Removable
+            align="start"
+            onRemove={(e) => {
+              if (rootEl?.current) {
+                onRemove(e, rootEl.current);
+              }
+            }}
+            removePlaceholder={removePlaceholder}
+            indent={removable === 'indent'}
           >
-            {wrappedChildren}
-          </div>
-        </Removable>
-      ) : (
-        wrappedChildren
-      )}
+            <div
+              className={classNames(
+                styles['FormItem__removable'],
+                'vkuiInternalFormItem__removable',
+              )}
+            >
+              {wrappedChildren}
+            </div>
+          </Removable>
+        ) : (
+          wrappedChildren
+        )}
+      </FormItemContext.Provider>
     </RootComponent>
   );
 };

packages/vkui/src/components/FormItem/FormItemTop/FormItemTopLabel.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { HasComponent, HasRootRef } from '../../../types';
 import { Subhead } from '../../Typography/Subhead/Subhead';
+import { FormItemContext } from '../context';
 import styles from '../FormItem.module.css';
 
 export interface FormItemTopLabelProps
@@ -10,6 +11,7 @@ export interface FormItemTopLabelProps
     HasComponent {
   /**
    * Многострочный вывод заголовка.
+   * TODO [>=7]: удалить и вседа брать из контекста
    */
   multiline?: boolean;
 }
@@ -25,21 +27,28 @@ export const FormItemTopLabel = ({
   children,
   Component: componentProp,
   htmlFor,
-  multiline = false,
+  multiline,
   ...restProps
 }: FormItemTopLabelProps) => {
   const component = componentProp || (htmlFor && 'label') || 'span';
+  const { required, topMultiline: multilineContext } = React.useContext(FormItemContext);
+
   return (
     <Subhead
       className={classNames(
         styles['FormItemTop__label'],
-        multiline && styles['FormItemTop__label--multiline'],
+        (multiline ?? multilineContext) && styles['FormItemTop__label--multiline'],
       )}
       Component={component}
       htmlFor={htmlFor}
       {...restProps}
     >
       {children}
+      {required && (
+        <span className={styles['FormItemTop__label--required']} aria-hidden>
+          *
+        </span>
+      )}
     </Subhead>
   );
 };

packages/vkui/src/components/FormItem/Readme.md

@@ -103,6 +103,7 @@ const Example = () => {
                 email ? 'Электронная почта введена верно!' : 'Пожалуйста, введите электронную почту'
               }
               bottomId="email-type"
+              required
             >
               <Input
                 aria-labelledby="email-type"
@@ -198,6 +199,7 @@ const Example = () => {
               htmlFor="purpose-of-the-trip-select-id"
               bottom={purpose ? '' : 'Пожалуйста, укажите цель поездки'}
               status={purpose ? 'valid' : 'error'}
+              required
             >
               <Select
                 id="purpose-of-the-trip-select-id"

packages/vkui/src/components/FormItem/context.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+interface FormItemContextProps {
+  required?: boolean;
+  topMultiline?: boolean;
+}
+
+export const FormItemContext = React.createContext<FormItemContextProps>({
+  required: false,
+  topMultiline: false,
+});