Feat/vue featured suggestions #2221
Conversation
|
|
Review change has been done. Loom is included in the comments of notion card. |
|
Check latest comments in notion for loom preview |
There was a problem hiding this comment.
See the comments,
Also please share a loom testing for various icon combinations, we have encountered issues with input padding in the past and thus we should make sure we are dealing with it right. You can refer to the react version for padding values.
The test icon combinations could be -
- focusshortcuts icon + clear icon + voice search icon + search icon(left)
- focusshortcuts icon + clear icon + voice search icon + search icon(right)
- focusshortcuts icon + clear icon + search icon(right)
- focusshortcuts icon + voice search icon + search icon(right)
- focusshortcuts icon + voice search icon
- focusshortcuts icon + clear icon
- focusshortcuts icon + search icon(right)
- clear icon + voice search icon
- clear icon + voice search icon + search icon(right)
- clear icon + search icon(right)
- voice search icon + search icon(right)
- voice search icon
- clear icon
- focusshortcuts icon
| @@ -1125,7 +1125,7 @@ const SearchBox = defineComponent({ | |||
| /> | |||
| ); | |||
| } | |||
| return null | |||
| return ()=>(<span></span>) | |||
There was a problem hiding this comment.
@SavvyShah Doesn't return null work here? It would help if you can specify the reason to use empty span vs null.
There was a problem hiding this comment.
The code in comment looks like below now.
return () => (
<span
style={{
display: 'inline-block',
height: '25px',
width: leaveSpaceForIcon ? '25px' : 0,
}}
></span>
);| <img | ||
| style={{ maxHeight: '25px' }} | ||
| src={xss(item.iconURL)} | ||
| alt={item.value} | ||
| /> | ||
| ); | ||
| } | ||
| return ()=>(<span></span>) | ||
| // Render an empty icon when no icon is provided from the dashboard | ||
| return ()=>(<span style={{display: 'inline-block',height: '25px', width: leaveSpaceForIcon?'25px': 0}}></span>) |
There was a problem hiding this comment.
@SavvyShah The formatting seems a bit off, haven't you turned on lint on your machine? I have seen this in the other PR(s) as well.
There was a problem hiding this comment.
The above comment is the same.
return () => (
<span
style={{
display: 'inline-block',
height: '25px',
width: leaveSpaceForIcon ? '25px' : 0,
}}
></span>
);
Notion card
Support featured suggestions in Vue Searchbox component like in React.
Example added in showcase #2216 PR under
vue/examples/search-showcase/featured-suggestionsDocs PR