Input 의 label layout 을 위해 개선했다

cobaltinc · Sep 4, 2023 · c796007 · c796007
1 parent 78a9049
commit c796007
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/packages/co-design-core/src/components/Input/Input.style.ts b/packages/co-design-core/src/components/Input/Input.style.ts
@@ -27,6 +27,7 @@ export default createStyles((theme, { size, multiline, radius, invalid, isLeftSe
       position: 'relative',
     },
     label: {
+      display: 'block',
       marginBottom: theme.spacing.small,
     },
     labelText: {

diff --git a/packages/co-design-core/src/components/Input/Input.tsx b/packages/co-design-core/src/components/Input/Input.tsx
@@ -53,7 +53,7 @@ export interface InputBaseProps {
   /** disabled 상태가 됩니다. */
   disabled?: boolean;
 
-  /** Input 을 섦명할 label을 지정합니다. */
+  /** Input 을 설명할 label을 지정합니다. */
   label?: string;
 
   /** Label Text의 Props 를 설정합니다. */
@@ -106,8 +106,10 @@ export const Input: InputComponent & { displayName?: string } = forwardRef(
     );
     const Element: any = component || 'input';
 
+    const Wrapper = label ? View : React.Fragment;
+
     return (
-      <>
+      <Wrapper>
         {label && (
           <label htmlFor={inputId} className={classes.label}>
             <Text className={classes.labelText} {...labelTextProps}>
@@ -149,7 +151,7 @@ export const Input: InputComponent & { displayName?: string } = forwardRef(
             </div>
           )}
         </View>
-      </>
+      </Wrapper>
     );
   },
 );

diff --git a/packages/co-design-core/src/components/Input/stories/Input.stories.tsx b/packages/co-design-core/src/components/Input/stories/Input.stories.tsx
@@ -107,8 +107,10 @@ export const Textarea = {
 export const WithLabel = {
   render: (props) => {
     return (
-      <div style={{ width: 400, padding: 24 }}>
+      <div style={{ width: 400, padding: 24, display: 'flex', flexDirection: 'column', gap: '16px' }}>
         <Input {...props} label="name" />
+        <Input {...props} label="email" />
+        <Input {...props} label="password" />
       </div>
     );
   },