Skip to content

Commit a56c9d4

Browse files
feat(theme): add aa-ItemWrapper CSS class
This CSS class allows to keep the same design with an item wrapper for users who don't have access to `Fragment` (e.g., when using `dangerouslySetInnerHTML`). Example: ```js autocomplete({ // ... getSources() { return [ { // ... templates: { item({ item, createElement }) { return createElement('div', { className: 'aa-ItemWrapper', dangerouslySetInnerHTML: { __html: ` <div class="aa-ItemIcon"> <img src="${item.image}" alt="${item.name}" > </div> <div class="aa-ItemContent"> <div class="aa-ItemContentTitle"> ${item.name} </div> </div> `, }, }); }, }, }, ]; }, }); ```
1 parent 6eaeadb commit a56c9d4

File tree

1 file changed

+5
-2
lines changed

1 file changed

+5
-2
lines changed

packages/autocomplete-theme-classic/src/theme.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -300,13 +300,16 @@ body {
300300
}
301301
}
302302
// wrap hit with url but we don't need to see it
303+
.aa-ItemWrapper,
303304
.aa-ItemLink {
304305
align-items: center;
305-
color: inherit;
306306
display: flex;
307-
text-decoration: none;
308307
width: 100%;
309308
}
309+
.aa-ItemLink {
310+
color: inherit;
311+
text-decoration: none;
312+
}
310313
// the result type icon inlined svg or img
311314
.aa-ItemIcon {
312315
align-items: center;

0 commit comments

Comments
 (0)