inv-79, inv-80, inv-84, inv-85 엘리먼트 > 컨테이너 > 설정 #41
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
bepyan
requested review from
xilucks,
WooWan,
delphox60 and
9keyyyy
as code owners
|
The latest updates on your projects.
|
WooWan
reviewed
Aug 15, 2024
Comment on lines
+31
to
+33
| <> | ||
| <TextSetting /> | ||
| </> |
There was a problem hiding this comment.
성능이슈도 없고, 기타 영역 컨벤션 지킬 겸, 추후 기타 컴포넌트를 쉽게 추가할 수 있도록 현행유지할게요.
Comment on lines
+1
to
11
| export function EditorInput({ | ||
| id, | ||
| icon, | ||
| componentPrefix, | ||
| ...props | ||
| }: { icon: React.ReactNode } & React.ComponentProps<"input">) { | ||
| }: { componentPrefix: React.ReactNode } & React.ComponentProps<"input">) { | ||
| return ( | ||
| <div className="-ml-0.5 mr-2 flex h-7 items-center gap-2 rounded-sm px-1.5 py-0.5 ring-border focus-within:bg-secondary hover:ring-1"> | ||
| <label htmlFor={id}>{icon}</label> | ||
| <label htmlFor={id}>{componentPrefix}</label> | ||
| <input | ||
| id={id} | ||
| {...props} |
There was a problem hiding this comment.
이전에도 ui 컴포넌트가 유연하게 작성된 편이기는 한데..
icon -> componentPrefix 로 변경되면서 유연해지는 것 같아요
예를 들어, suffix도 필요하다면, componentSuffix, 추후에 leftIcon, rightIcon.... 등 계속해서 추가되다보면 사용하는 입장에서 컴포넌트에 대해 알아야 할 인지부하가 커지고 조건문 등 복잡해질 수 있는 여지가 큰 것 같더라고요.
그래서 컴포넌트를 유연하게 사용하고 싶을 때는 아래처럼 사용하는 곳에서 컴포넌트를 합성하는 방식을 좀 더 선호해요
<>
<SomeComponent />
<Input />
</>There was a problem hiding this comment.
공감되는 내용입니다. radix-primitives가 큰 인기를 얻는 이유이죠.
다면 이 상황에선 prefix, suffix이 더 합리적인 접근이라고 생각해요.
input내부 확장의 가능성은prefix,suffix이상으론 없음- 자유도가 높으면 오히려 사용하기 불편
- 이는 mui의 startAdornment과 antd의 prefix으로 사용하고 있는 대중성 있는 패턴이기에 혼란이 적음
// compose style
<InputContainer>
<Icon />
<Input />
</InputContainer>
// props style
<Input prefix={<Icon />} />
WooWan
approved these changes
Aug 15, 2024
xilucks
approved these changes
Aug 16, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
엘리먼트의 배경 설정, 테두리 설정을 구현했습니다.
기존
advance-setting.tsx내용을 editor/ui 로 마크업을 재작성하여 통일성을 맞췄습니다.거의 number input, string input으로 모든 설정을 진행하는 것으로 복잡성을 타협했습니다.
결과물: