List box - tree implementation #510
Conversation
|
|
||
| /** The (inline) size of the list box. Optional. Default: `medium`. */ | ||
| size?: undefined | 'shrink' | 'small' | 'medium' | 'large', | ||
| size?: undefined | 'shrink' | 'small' | 'medium' | 'large' | 'xl', |
There was a problem hiding this comment.
Let's rename xl → x-large
| requestFocus: () => void; | ||
| isSelected: boolean; | ||
| requestSelection: () => void; | ||
| selectedChildKey: string | null; |
There was a problem hiding this comment.
Can you convert the ; to , here?
| <div | ||
| className={cx( | ||
| cl['bk-list-box__group-layout'], | ||
| { [cl['is-searching']]: isSearching }, |
There was a problem hiding this comment.
Should follow BEM: bk-list-box__group-layout--searching
| }, [groups, selectedItemKey]); | ||
|
|
||
| // --- Layout selection --- | ||
| let content: React.ReactNode; |
There was a problem hiding this comment.
Can you move this section to a function? Like renderContent. Then we don't need the let (and the whole thing becomes nicely encapsulated)
| React.isValidElement(child) && | ||
| (child.props as OptionProps)?.itemKey === selectedItemKey | ||
| ); | ||
| if (foundChild) return group; |
There was a problem hiding this comment.
Add explicit braces if () { ... }. Also elsewhere
| const results: OptionElement[] = []; | ||
|
|
||
| groups.forEach((group) => { | ||
| React.Children.forEach(group.props.children, (option) => { |
There was a problem hiding this comment.
I would rather avoid JSX walking, this is deprecated in React.
| @include bk.scroll-shadow($dir: start); | ||
| } | ||
|
|
||
There was a problem hiding this comment.
Trim the extra spaces here
| &.bk-list-box__item--group, &.bk-list-box__item--option { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| inline-size: 100%; |
There was a problem hiding this comment.
Do you need the inline-size: 100%? Can this be converted to flex stretch?
| /** Custom icon component. */ | ||
| Icon?: undefined | ListBoxIcon, | ||
|
|
||
| info?: React.ReactNode, |
No description provided.