Input css 관련 수정했다

cobaltinc · Dec 14, 2023 · 198f411 · 198f411
1 parent e3ed7db
commit 198f411
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 18 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
@@ -62,6 +62,7 @@ export default createStyles(
     };
 
     return {
+      root: {},
       wrapper: {
         position: 'relative',
       },
@@ -90,13 +91,14 @@ export default createStyles(
         backgroundColor: theme.foundations.tokens.color.bg.bg_surface_01,
         // transition: 'border-color 100ms ease',
 
-        '&:not(:disabled):hover': {
+        '&:not(:disabled):not(:focus):hover': {
           borderColor: invalid ? invalidColor : theme.foundations.tokens.color.border.border_strong,
         },
 
         '&:focus, &:focus-within': {
           width: 'calc(100% - 2px)',
-          border: `2px solid ${theme.foundations.tokens.color.border.border_primary}`,
+          borderColor: theme.foundations.tokens.color.border.border_primary,
+          outline: `1px solid ${theme.foundations.tokens.color.border.border_primary}`,
         },
 
         '&::placeholder': {
@@ -132,7 +134,8 @@ export default createStyles(
       },
 
       invalid: {
-        border: `2px solid ${invalidColor}`,
+        outline: `1px solid ${invalidColor}`,
+        borderColor: invalidColor,
 
         '&::placeholder': {
           opacity: 1,
@@ -188,6 +191,7 @@ export default createStyles(
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        margin: 1,
       },
 
       leftSection: {
@@ -198,6 +202,7 @@ export default createStyles(
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
+        margin: 1,
       },
 
       helperText: {

diff --git a/packages/co-design-core/src/components/Input/Input.tsx b/packages/co-design-core/src/components/Input/Input.tsx
@@ -144,8 +144,6 @@ export const Input: InputComponent & { displayName?: string } = forwardRef(
     const Element: any = component || 'input';
     const [currentLength, setCurrentLength] = useState(0);
 
-    const Wrapper = label ? View : React.Fragment;
-
     const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
       if (maximumLength) {
         setCurrentLength(e.target.value.length);
@@ -154,17 +152,19 @@ export const Input: InputComponent & { displayName?: string } = forwardRef(
     };
 
     return (
-      <Wrapper>
-        <Group className={classes.labelWrapper} position={label ? 'apart' : 'right'}>
-          {label ? (
-            <label htmlFor={inputId + name}>
-              <Typography variant={labelVariants[size]} className={classes.labelText} {...labelTextProps}>
-                {label}
-              </Typography>
-            </label>
-          ) : null}
-          {maximumLength ? <Text className={classes.maximumLength}>{`${currentLength} / ${maximumLength}`}</Text> : null}
-        </Group>
+      <View className={classes.root}>
+        {(label || maximumLength) && (
+          <Group className={classes.labelWrapper} position={label ? 'apart' : 'right'}>
+            {label ? (
+              <label htmlFor={inputId + name}>
+                <Typography variant={labelVariants[size]} className={classes.labelText} {...labelTextProps}>
+                  {label}
+                </Typography>
+              </label>
+            ) : null}
+            {maximumLength ? <Text className={classes.maximumLength}>{`${currentLength} / ${maximumLength}`}</Text> : null}
+          </Group>
+        )}
         <View className={cx(classes.wrapper, className)} co={co} style={style} {...wrapperProps}>
           {leftSection && (
             <div
@@ -206,7 +206,7 @@ export const Input: InputComponent & { displayName?: string } = forwardRef(
             </Typography>
           )}
         </View>
-      </Wrapper>
+      </View>
     );
   },
 );

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
@@ -89,7 +89,17 @@ export const WithLeftSection = {
 
     return (
       <div style={{ width: 400, padding: 24 }}>
-        <Input icon={<Icon />} leftSection={withTooltip} leftSectionWidth={50} {...props} />
+        <Input
+          icon={<Icon />}
+          leftSection={withTooltip}
+          leftSectionWidth={50}
+          overrideStyles={{
+            leftSection: {
+              backgroundColor: 'gray',
+            },
+          }}
+          {...props}
+        />
       </div>
     );
   },
@@ -107,6 +117,18 @@ export const WithLabel = {
   },
 };
 
+export const MultiInput = {
+  render: (props) => {
+    return (
+      <div style={{ width: 400, padding: 24, display: 'flex', flexDirection: 'column', gap: '32px' }}>
+        <Input {...props} />
+        <Input {...props} helperText="something wrong" />
+        <Input {...props} />
+      </div>
+    );
+  },
+};
+
 // Storybook Context 변경으로 인한 리렌더링으로 focus 풀림
 export const AutoFocus = {
   render: (props) => {