@croquiscom/pds 8.22.2 → 8.22.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @croquiscom/pds
 
+## 8.22.3
+
+### Patch Changes
+
+- 6b5d323: FormField 컴포넌트 사용 패턴 개선(status를 공유하는 형태로 제공)
+
 ## 8.22.2
 
 ### Patch Changes

package/dist/components/form/FormField.d.ts

@@ -1,11 +1,18 @@
-import React, { ReactNode, PropsWithChildren } from 'react';
+import React, { ReactNode, PropsWithChildren, ReactElement } from 'react';
 import { HelpTextProps } from '../text';
 import { VerticalAlignment } from '../stack';
 import { CSSValueWithLength } from '../../styles';
+import { InputStatus } from '../input/types';
 type FormFieldAlignment = Extract<VerticalAlignment, 'top' | 'center'>;
 type FormFieldPosition = 'left' | 'top';
 export interface FormFieldProps {
     className?: string;
+    /**
+     * FormField의 상태를 지정하면 children과 formHelperText 상태를 공유합니다.
+     * PDS의 Input, Dropdown, DropdownInput, NumericInput 컴포넌트만 공유하도록 제한합니다.
+     * 다른 컴포넌트는 사용하더라도 formHelperText에만 status가 적용됩니다.
+     */
+    status?: InputStatus;
     label?: ReactNode;
     /**
      * 라벨 우측 렌더링될 Addon 요소
@@ -20,7 +27,7 @@ export interface FormFieldProps {
      */
     helper?: HelpTextProps;
     /**
-     * FormHelperText 컴포넌트로 라벨 아래에 메세지를 표시합니다.
+     * FormHelperText 컴포넌트로 children 아래에 메세지를 표시합니다.
      */
     formHelperText?: ReactNode;
     /**
@@ -39,6 +46,9 @@ export interface FormFieldProps {
      * @default left
      */
     position?: FormFieldPosition;
+    children?: ReactElement<{
+        status?: InputStatus;
+    }>;
 }
-export declare const FormField: ({ className, label, rightAddon, required, helper, formHelperText, labelWidth, alignment, position, children, }: PropsWithChildren<FormFieldProps>) => React.JSX.Element;
+export declare const FormField: ({ className, label, status, rightAddon, required, helper, formHelperText, labelWidth, alignment, position, children, }: PropsWithChildren<FormFieldProps>) => React.JSX.Element;
 export {};

package/dist/components/form/FormField.stories.d.ts

@@ -10,7 +10,9 @@ export declare const WithCheckboxGroup: Story;
 export declare const WithHelpPopover: Story;
 export declare const TopAlign: Story;
 export declare const TopPosition: Story;
+export declare const SuccessCheckboxGroup: Story;
 export declare const Error: Story;
+export declare const ErrorDropdown: Story;
 export declare const ErrorLongLabel: Story;
 export declare const ErrorOverflowLabel: Story;
 export declare const ErrorTop: Story;