feat: FormControl / Fieldset 内における入力要素の error 状態紐づけ制御用 props を足す (#4748)

* feat: FormControl / Fieldset 内における入力要素の error 状態紐づけ制御用 props を足す

* chore: Story を追加

Author: uknmr

packages/smarthr-ui/src/components/FormControl/FormControl.stories.tsx

@@ -17,7 +17,6 @@ export default {
   title: 'Forms（フォーム）/FormControl',
   component: FormControl,
 }
-
 export const All: StoryFn = () => (
   <Stack gap={2} as="dl">
     <Stack>
@@ -126,6 +125,20 @@ export const All: StoryFn = () => (
         </FormControl>
       </dd>
     </Stack>
+    <Stack>
+      <Text italic color="TEXT_GREY" as="dt">
+        入力要素への error 自動紐づけ（VRT 用の自動紐づけを切った場合）
+      </Text>
+      <dd>
+        <FormControl
+          title="氏名"
+          autoBindErrorInput={false}
+          errorMessages="氏名が入力されていません。"
+        >
+          <Input name="fullname" value="草野栄一郎" />
+        </FormControl>
+      </dd>
+    </Stack>
   </Stack>
 )
 All.storyName = 'all'

packages/smarthr-ui/src/components/FormControl/FormControl.tsx

@@ -47,6 +47,8 @@ type Props = PropsWithChildren<{
   exampleMessage?: ReactNode
   /** タイトルの下に表示するエラーメッセージ */
   errorMessages?: ReactNode | ReactNode[]
+  /** エラーがある場合に自動的に入力要素を error にするかどうか */
+  autoBindErrorInput?: boolean
   /** フォームコントロールの下に表示する補足メッセージ */
   supplementaryMessage?: ReactNode
   /** `true` のとき、文字色を `TEXT_DISABLED` にする */
@@ -133,6 +135,7 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
   helpMessage,
   exampleMessage,
   errorMessages,
+  autoBindErrorInput = true,
   supplementaryMessage,
   as = 'div',
   className,
@@ -233,7 +236,7 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
         {decorateFirstInputElement(children, {
           managedHtmlFor,
           describedbyIds,
-          error: actualErrorMessages.length > 0,
+          error: autoBindErrorInput && actualErrorMessages.length > 0,
         })}
       </div>