Skip to content

Commit

Permalink
feat(theme): add aa-ItemWrapper CSS class
Browse files Browse the repository at this point in the history
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>
                `,
              },
            });
          },
        },
      },
    ];
  },
});
```
  • Loading branch information
francoischalifour committed Feb 9, 2021
1 parent 6eaeadb commit a56c9d4
Showing 1 changed file with 5 additions and 2 deletions.
7 changes: 5 additions & 2 deletions packages/autocomplete-theme-classic/src/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -300,13 +300,16 @@ body {
}
}
// wrap hit with url but we don't need to see it
.aa-ItemWrapper,
.aa-ItemLink {
align-items: center;
color: inherit;
display: flex;
text-decoration: none;
width: 100%;
}
.aa-ItemLink {
color: inherit;
text-decoration: none;
}
// the result type icon inlined svg or img
.aa-ItemIcon {
align-items: center;
Expand Down

0 comments on commit a56c9d4

Please sign in to comment.