From 08d1dd0e567f50c5c9d75267440ebbd1fd48d893 Mon Sep 17 00:00:00 2001
From: Victoria Zhizhonkova <indarklight@gmail.com>
Date: Fri, 19 Apr 2024 13:23:43 +0700
Subject: [PATCH] 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 <actions@github.com>
---
 .../FormItem/FormItem.e2e-playground.tsx      |  5 ++
 .../components/FormItem/FormItem.module.css   |  5 ++
 .../vkui/src/components/FormItem/FormItem.tsx | 52 ++++++++++++-------
 .../FormItem/FormItemTop/FormItemTopLabel.tsx | 13 ++++-
 .../vkui/src/components/FormItem/Readme.md    |  2 +
 .../formitem-android-chromium-dark-1-snap.png |  4 +-
 ...formitem-android-chromium-light-1-snap.png |  4 +-
 .../formitem-ios-webkit-dark-1-snap.png       |  4 +-
 .../formitem-ios-webkit-light-1-snap.png      |  4 +-
 .../formitem-vkcom-chromium-dark-1-snap.png   |  4 +-
 .../formitem-vkcom-chromium-light-1-snap.png  |  4 +-
 .../formitem-vkcom-firefox-dark-1-snap.png    |  4 +-
 .../formitem-vkcom-firefox-light-1-snap.png   |  4 +-
 .../formitem-vkcom-webkit-dark-1-snap.png     |  4 +-
 .../formitem-vkcom-webkit-light-1-snap.png    |  4 +-
 .../vkui/src/components/FormItem/context.ts   | 11 ++++
 16 files changed, 87 insertions(+), 41 deletions(-)
 create mode 100644 packages/vkui/src/components/FormItem/context.ts

diff --git a/packages/vkui/src/components/FormItem/FormItem.e2e-playground.tsx b/packages/vkui/src/components/FormItem/FormItem.e2e-playground.tsx
index 887ef29424..b2f020c7b0 100644
--- a/packages/vkui/src/components/FormItem/FormItem.e2e-playground.tsx
+++ b/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' }} />}
diff --git a/packages/vkui/src/components/FormItem/FormItem.module.css b/packages/vkui/src/components/FormItem/FormItem.module.css
index 831bdec674..c17b7236cd 100644
--- a/packages/vkui/src/components/FormItem/FormItem.module.css
+++ b/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;
diff --git a/packages/vkui/src/components/FormItem/FormItem.tsx b/packages/vkui/src/components/FormItem/FormItem.tsx
index 2e79ba1c03..3dd80a6033 100644
--- a/packages/vkui/src/components/FormItem/FormItem.tsx
+++ b/packages/vkui/src/components/FormItem/FormItem.tsx
@@ -2,6 +2,7 @@ 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';
@@ -9,6 +10,7 @@ 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>
   );
 };
diff --git a/packages/vkui/src/components/FormItem/FormItemTop/FormItemTopLabel.tsx b/packages/vkui/src/components/FormItem/FormItemTop/FormItemTopLabel.tsx
index 3f7ab02eb4..ce50c1ce9d 100644
--- a/packages/vkui/src/components/FormItem/FormItemTop/FormItemTopLabel.tsx
+++ b/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>
   );
 };
diff --git a/packages/vkui/src/components/FormItem/Readme.md b/packages/vkui/src/components/FormItem/Readme.md
index 1ed3b86971..4212178522 100644
--- a/packages/vkui/src/components/FormItem/Readme.md
+++ b/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"
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-dark-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-dark-1-snap.png
index 5880c0d8d4..fa408e8677 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a6a383821a1a85d39bff8f63c54d35d082bded816ce27111da80713a7c54569f
-size 162524
+oid sha256:4da3a1fddcfd236c64fee29b6132a8b8bad5738954e110c6cea0e2f14a6c2235
+size 170362
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-light-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-light-1-snap.png
index 787eba6d66..c3776f0cb7 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d42ef58c7f3df4c4a77ee6c3b1b84cdb2eb37781445767f70ccd38eddd810134
-size 162039
+oid sha256:7fe5b77e2d505a4996139bca40a73c37b967b3823aa5858226e6d679ba276bdc
+size 169907
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-dark-1-snap.png
index eb18bc5ddb..0c1f6b7fdc 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:00afa855ee36bf15083e16ad66474c6b621a3a04c59005bec721c0d71fdd8986
-size 151801
+oid sha256:595ddc62cf2a6561a8f3ef5e938212eb9b87962d187f904e51337cd7363d3422
+size 158970
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-light-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-light-1-snap.png
index 07a3a2a6aa..9f075ddcd4 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ae2969f87ef4efe8e1dfa7e89d78d2e59ee4b3f8c79faa7bf00a35bd23f5f003
-size 152715
+oid sha256:15bc20c40fb997fed6645c7e7890cf5c394e3bc7dc3ff8fec83dc6755213486a
+size 159989
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-dark-1-snap.png
index 7054cdcbb9..4dd1421afe 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:60e9847c58628144924959099bf00e3d2b0d047b23e5d75877ee3c4beb0f17bf
-size 162166
+oid sha256:770356793467d7811a9000cd630769c1f6e489926a527e5eb8b56e64dfcaaf6a
+size 170157
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-light-1-snap.png
index e3adf79f9b..299e5dc6f6 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1432f50e301e7d7a1f72289cb6b484e2a7eb3263a770cdfc0b63b6576a551775
-size 163093
+oid sha256:0282a7f777422ab70c8214ac7820c8ece768dc17446532d81dc39dd8076a3074
+size 171138
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-dark-1-snap.png
index 56b9742589..5994d3da50 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b37bd79dfacee9784c579d405c6ae648174a212b042879befb1002ac9c22f55d
-size 227426
+oid sha256:66faaece9fe2d0effb620c8b7cf95fb026e89d8b1d10a6f2ae93a789753faaea
+size 237628
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-light-1-snap.png
index 586a772530..0f1e4762af 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b6a26c192105a742ec0bcdf98b7fe2990768fda8113e864a2e8a208724d5ea2c
-size 234765
+oid sha256:5db28821bba7ca7999c6e33fa214ad1cc46ccf7d27d88cdf394b6da1adbe4223
+size 245596
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-dark-1-snap.png
index ffb7b79872..f180707e12 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0abcbca91859420bce83b3882abd5b7d5778c2a328a1b35a58885b559e26f0bf
-size 145644
+oid sha256:0631a62588dccc0e4003127c7e857c34b68f81907ef734720d20336ec72c82d2
+size 152834
diff --git a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-light-1-snap.png
index 78ffa338f6..6e05b71ea3 100644
--- a/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/FormItem/__image_snapshots__/formitem-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a6e6453c0258d60690880cc188fdb58426fd4a158860cf59545ec9ada5ad84e4
-size 147497
+oid sha256:13320a711316173144f56212959af55d0a333b710343ae92627c668132739c8e
+size 154791
diff --git a/packages/vkui/src/components/FormItem/context.ts b/packages/vkui/src/components/FormItem/context.ts
new file mode 100644
index 0000000000..85918a075b
--- /dev/null
+++ b/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,
+});