feat: add select component #85
Merged
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
|
@yunseorim1116 혹시 storybook을 추가해주실수 있으세요? |
넹~! |
Closed
lukasjhan
reviewed
Aug 21, 2024
There was a problem hiding this comment.
스토리북을 확인해보았는데요. 현재 선택된 데이터나 placeholder의 크기에 따라서 너비가 변경되더라고요.
사이즈에 맞춰서 크기도 고정으로 하면 어떨까합니다 :)
Screencast from 2024년 08월 21일 20시 27분 23초.webm
lukasjhan
reviewed
Aug 21, 2024
| const [isOpen, setIsOpen] = useState(false); | ||
| const [selectedValue, setSelectedValue] = useState<string | null>(null); | ||
| const [focusedIndex, setFocusedIndex] = useState<number | null>(null); | ||
| const [hoveredIndex, setHoveredIndex] = useState<number | null>(null); |
There was a problem hiding this comment.
hoveredIndex는 어떤 기능을 위해서 필요한것이에요?
lukasjhan
reviewed
Aug 21, 2024
Comment on lines
315
to
323
| // export const SelectDemo = () => { | ||
| // return ( | ||
| // <div className="p-4"> | ||
| // <Select options={options} placeholder={placeholder} /> | ||
| // </div> | ||
| // ); | ||
| // }; | ||
|
|
||
| // export default SelectDemo; |
lukasjhan
reviewed
Aug 21, 2024
Comment on lines
49
to
51
| lg: 'h-12 text-lg', // Large size | ||
| md: 'h-10 text-base', // Medium size | ||
| sm: 'h-8 text-sm', // Small size |
There was a problem hiding this comment.
텍스트 사이즈는 Label 컴포넌트를 사용해서 적용하면 어떨까요?
lukasjhan
reviewed
Aug 21, 2024
| aria-haspopup="listbox" | ||
| aria-label="Select an option" | ||
| className={`w-full py-3 px-4 border ${ | ||
| isOpen ? 'border-blue-500' : 'border-gray-300' |
There was a problem hiding this comment.
컬러 부분도 저희가 사용하는 tailwindcss 컬러값이 있어요. 예를들면 'border-primary-50' 이런식으로요.
이 부분 제가 한번 설명드릴까요?
Signed-off-by: Lukas.J.Han <[email protected]>
Signed-off-by: Lukas.J.Han <[email protected]>
Signed-off-by: Lukas.J.Han <[email protected]>
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.
Selectbox Condition
Tabs start with one harbour.
Outside the select box, there is neither a harbour nor focus.
If a harbour event occurs while focus is in the middle of a selection (keyboard tap to deselect), the tab order should start at the harbour.
When the harbour index changes, the focus index should be synchronised with the change of the harbour index (so that key down and up events can be detected correctly).
하버 한 곳부터 탭이 시작한다.
셀렉트 박스를 벗어나면 하버, 포커스 둘다 없다.
포커스 하고 있을 시 (키보드 탭 으로 셀렉트를 내릴시) 중간에 하버 이벤트가 일어나면 탭 순서가 하버부터 시작되야한다.
하버 인덱스가 변경될 시 포커스 인덱스도 하버 인덱스의 변경됨에 따라 동기화 시켜야한다. (그래야만 키 down, up 이벤트를 정상적으로 감지할 수 있다.)
[Implementation condition ]
How To Use
<Select options={options} placeholder="Select an option!" size="sm" />접근성 가이드라인
상호작용 가이드라인
Click : 컨테이터를 Click 했을 때, 옵션 목록이 확장되거나 축소된다.
Enter, Space : 옵션 목록이 확장된 상태에서 셀렉트의 레이블, 컨테이너, 옵션 목록이 아닌 영역을 Click 하면 옵션 목록은 축소되어야 한다.
컨테이너에 초점이 있는 경우, 옵션 목록이 확장되거나 축소된다.
Esc: 옵션 목록을 축소하고 컨테이터로 초점이 이동해야 한다
Tab, Shift + Tab : 모든 셀렉트는 Tab, Shift + Tab 키를 눌렀을 때 접근할 수 있어야 한다.
Scroll : 옵션 목록에 스크롤이 생성된 경우 목록이 상/하로 이동한다.
Suggestions
Why not separate interface types into separate folders?