From 198f411efbcbdbd30e3eade138be5a86eca53e9d Mon Sep 17 00:00:00 2001 From: healtheloper Date: Thu, 14 Dec 2023 16:09:35 +0900 Subject: [PATCH] =?UTF-8?q?Input=20css=20=EA=B4=80=EB=A0=A8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=ED=96=88=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Input/Input.style.ts | 11 ++++++-- .../src/components/Input/Input.tsx | 28 +++++++++---------- .../Input/stories/Input.stories.tsx | 24 +++++++++++++++- 3 files changed, 45 insertions(+), 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 index 6520cf5..5961de6 100644 --- 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 index 39c5206..91c8bea 100644 --- 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) => { if (maximumLength) { setCurrentLength(e.target.value.length); @@ -154,17 +152,19 @@ export const Input: InputComponent & { displayName?: string } = forwardRef( }; return ( - - - {label ? ( - - ) : null} - {maximumLength ? {`${currentLength} / ${maximumLength}`} : null} - + + {(label || maximumLength) && ( + + {label ? ( + + ) : null} + {maximumLength ? {`${currentLength} / ${maximumLength}`} : null} + + )} {leftSection && (
)} - + ); }, ); 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 index 29c287f..56107d4 100644 --- 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 (
- } leftSection={withTooltip} leftSectionWidth={50} {...props} /> + } + leftSection={withTooltip} + leftSectionWidth={50} + overrideStyles={{ + leftSection: { + backgroundColor: 'gray', + }, + }} + {...props} + />
); }, @@ -107,6 +117,18 @@ export const WithLabel = { }, }; +export const MultiInput = { + render: (props) => { + return ( +
+ + + +
+ ); + }, +}; + // Storybook Context 변경으로 인한 리렌더링으로 focus 풀림 export const AutoFocus = { render: (props) => {