fix(theme-classic): wrap item content when there's no link (#522)

* fix(theme-classic): wrap item content when there's no link * fix: apply suggestions from code review Co-authored-by: François Chalifour <[email protected]> * fix: remove unused dependencies * fix: expose createElement Co-authored-by: François Chalifour <[email protected]>
algolia · Apr 12, 2021 · c6afe42 · c6afe42
1 parent 53c79a4
commit c6afe42
Show file tree

Hide file tree

Showing 19 changed files with 88 additions and 89 deletions.
diff --git a/cypress/test-apps/js/app.tsx b/cypress/test-apps/js/app.tsx
@@ -130,7 +130,7 @@ type ProductItemProps = {
 
 function ProductItem({ hit, insights, components }: ProductItemProps) {
   return (
-    <Fragment>
+    <div className="aa-ItemWrapper">
       <div className="aa-ItemIcon aa-ItemIcon--alignTop">
         <img src={hit.image} alt={hit.name} width="40" height="40" />
       </div>
@@ -173,6 +173,6 @@ function ProductItem({ hit, insights, components }: ProductItemProps) {
           </svg>
         </button>
       </div>
-    </Fragment>
+    </div>
   );
 }
diff --git a/cypress/test-apps/js/categoriesPlugin.tsx b/cypress/test-apps/js/categoriesPlugin.tsx
@@ -53,7 +53,7 @@ export function createCategoriesPlugin({
             },
             item({ item, components }) {
               return (
-                <Fragment>
+                <div className="aa-ItemWrapper">
                   <div className="aa-ItemIcon aa-ItemIcon--noBorder">
                     <svg
                       viewBox="0 0 24 24"
@@ -75,7 +75,7 @@ export function createCategoriesPlugin({
                       <components.Highlight hit={item} attribute="label" />
                     </div>
                   </div>
-                </Fragment>
+                </div>
               );
             },
           },

diff --git a/cypress/test-apps/js/shortcutsPlugin.tsx b/cypress/test-apps/js/shortcutsPlugin.tsx
@@ -39,7 +39,7 @@ export const shortcutsPlugin: AutocompletePlugin<DarkModeItem, undefined> = {
               createElement('div', { className: 'aa-SourceHeaderLine' })
             );
           },
-          item({ item, createElement, Fragment }) {
+          item({ item, createElement }) {
             const darkIcon = createElement(
               'svg',
               {
@@ -74,8 +74,8 @@ export const shortcutsPlugin: AutocompletePlugin<DarkModeItem, undefined> = {
             );
 
             return createElement(
-              Fragment,
-              {},
+              'div',
+              { className: 'aa-ItemWrapper' },
               createElement(
                 'div',
                 { className: 'aa-ItemIcon' },

diff --git a/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx b/examples/github-repositories-custom-plugin/createGitHubReposPlugin.tsx
@@ -63,13 +63,13 @@ export function createGitHubReposPlugin(
                 return item.html_url;
               },
               templates: {
-                item({ item, Fragment }) {
+                item({ item }) {
                   const stars = new Intl.NumberFormat('en-US').format(
                     item.stargazers_count
                   );
 
                   return (
-                    <Fragment>
+                    <div className="aa-ItemWrapper">
                       <div className="aa-ItemContent">
                         <div className="aa-ItemIcon aa-ItemIcon--alignTop">
                           <img
@@ -139,7 +139,7 @@ export function createGitHubReposPlugin(
                           </svg>
                         </button>
                       </div>
-                    </Fragment>
+                    </div>
                   );
                 },
               },

diff --git a/examples/playground/app.tsx b/examples/playground/app.tsx
@@ -132,7 +132,7 @@ type ProductItemProps = {
 
 function ProductItem({ hit, insights, components }: ProductItemProps) {
   return (
-    <Fragment>
+    <a href={hit.url} className="aa-ItemLink">
       <div className="aa-ItemContent">
         <div className="aa-ItemIcon aa-ItemIcon--picture aa-ItemIcon--alignTop">
           <img src={hit.image} alt={hit.name} width="40" height="40" />
@@ -310,6 +310,6 @@ function ProductItem({ hit, insights, components }: ProductItemProps) {
           </svg>
         </button>
       </div>
-    </Fragment>
+    </a>
   );
 }
diff --git a/examples/playground/categoriesPlugin.tsx b/examples/playground/categoriesPlugin.tsx
@@ -57,7 +57,7 @@ export function createCategoriesPlugin({
             },
             item({ item, components }) {
               return (
-                <Fragment>
+                <div className="aa-ItemWrapper">
                   <div className="aa-ItemContent">
                     <div className="aa-ItemIcon aa-ItemIcon--noBorder">
                       <svg
@@ -80,7 +80,7 @@ export function createCategoriesPlugin({
                       <components.Highlight hit={item} attribute="label" />
                     </div>
                   </div>
-                </Fragment>
+                </div>
               );
             },
           },

diff --git a/examples/playground/shortcutsPlugin.tsx b/examples/playground/shortcutsPlugin.tsx
@@ -41,7 +41,7 @@ export const shortcutsPlugin: AutocompletePlugin<DarkModeItem, undefined> = {
               createElement('div', { className: 'aa-SourceHeaderLine' })
             );
           },
-          item({ item, createElement, Fragment }) {
+          item({ item, createElement }) {
             const darkIcon = createElement(
               'svg',
               {
@@ -76,8 +76,8 @@ export const shortcutsPlugin: AutocompletePlugin<DarkModeItem, undefined> = {
             );
 
             return createElement(
-              Fragment,
-              {},
+              'div',
+              { className: 'aa-ItemWrapper' },
               createElement(
                 'div',
                 { className: 'aa-ItemContent' },

diff --git a/examples/query-suggestions-with-hits/app.tsx b/examples/query-suggestions-with-hits/app.tsx
@@ -113,7 +113,7 @@ type ProductItemProps = {
 
 function ProductItem({ hit, insights, components }: ProductItemProps) {
   return (
-    <Fragment>
+    <div className="aa-ItemWrapper">
       <div className="aa-ItemIcon aa-ItemIcon--alignTop">
         <img src={hit.image} alt={hit.name} width="40" height="40" />
       </div>
@@ -185,6 +185,6 @@ function ProductItem({ hit, insights, components }: ProductItemProps) {
           </svg>
         </button>
       </div>
-    </Fragment>
+    </div>
   );
 }
diff --git a/examples/query-suggestions-with-inline-categories/app.tsx b/examples/query-suggestions-with-inline-categories/app.tsx
@@ -2,7 +2,7 @@
 import { autocomplete } from '@algolia/autocomplete-js';
 import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
 import algoliasearch from 'algoliasearch';
-import { h, Fragment } from 'preact';
+import { h } from 'preact';
 
 import '@algolia/autocomplete-theme-classic';
 
@@ -32,7 +32,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
         ...source.templates,
         item({ item, components }) {
           return (
-            <Fragment>
+            <div className="aa-ItemWrapper">
               <div className="aa-ItemIcon aa-ItemIcon--noBorder">
                 <svg
                   viewBox="0 0 24 24"
@@ -84,7 +84,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
                   </svg>
                 </button>
               </div>
-            </Fragment>
+            </div>
           );
         },
       },

diff --git a/examples/react-renderer/src/Autocomplete.tsx b/examples/react-renderer/src/Autocomplete.tsx
@@ -159,43 +159,45 @@ export function Autocomplete(
                             className="aa-Item"
                             {...autocomplete.getItemProps({ item, source })}
                           >
-                            <div className="aa-ItemIcon">
-                              <img
-                                src={item.image}
-                                alt={item.name}
-                                width="40"
-                                height="40"
-                              />
-                            </div>
-                            <div className="aa-ItemContent">
-                              <div
-                                className="aa-ItemContentTitle"
-                                dangerouslySetInnerHTML={{
-                                  __html: item._snippetResult!.name.value,
-                                }}
-                              />
-                              <div
-                                className="aa-ItemContentDescription"
-                                dangerouslySetInnerHTML={{
-                                  __html: item._snippetResult!.description
-                                    .value,
-                                }}
-                              />
-                            </div>
-                            <button
-                              className="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
-                              type="button"
-                              title="Select"
-                            >
-                              <svg
-                                fill="currentColor"
-                                viewBox="0 0 24 24"
-                                width="20"
-                                height="20"
+                            <div className="aa-ItemWrapper">
+                              <div className="aa-ItemIcon">
+                                <img
+                                  src={item.image}
+                                  alt={item.name}
+                                  width="40"
+                                  height="40"
+                                />
+                              </div>
+                              <div className="aa-ItemContent">
+                                <div
+                                  className="aa-ItemContentTitle"
+                                  dangerouslySetInnerHTML={{
+                                    __html: item._snippetResult!.name.value,
+                                  }}
+                                />
+                                <div
+                                  className="aa-ItemContentDescription"
+                                  dangerouslySetInnerHTML={{
+                                    __html: item._snippetResult!.description
+                                      .value,
+                                  }}
+                                />
+                              </div>
+                              <button
+                                className="aa-ItemActionButton aa-DesktopOnly aa-ActiveOnly"
+                                type="button"
+                                title="Select"
                               >
-                                <path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z" />
-                              </svg>
-                            </button>
+                                <svg
+                                  fill="currentColor"
+                                  viewBox="0 0 24 24"
+                                  width="20"
+                                  height="20"
+                                >
+                                  <path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z" />
+                                </svg>
+                              </button>
+                            </div>
                           </li>
                         );
                       })}

diff --git a/examples/recently-viewed-items/app.tsx b/examples/recently-viewed-items/app.tsx
@@ -89,7 +89,7 @@ type ProductItemProps = {
 
 function AutocompleteProductItem({ hit, components }: ProductItemProps) {
   return (
-    <Fragment>
+    <div className="aa-ItemWrapper">
       <div className="aa-ItemIcon aa-ItemIcon--alignTop">
         <img src={hit.image} alt={hit.name} width="40" height="40" />
       </div>
@@ -109,6 +109,6 @@ function AutocompleteProductItem({ hit, components }: ProductItemProps) {
           </svg>
         </button>
       </div>
-    </Fragment>
+    </div>
   );
 }
diff --git a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx
@@ -11,10 +11,10 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
   onTapAhead,
 }: GetTemplatesParams<TItem>): SourceTemplates<TItem> {
   return {
-    item({ item, createElement, Fragment, components }) {
+    item({ item, createElement, components }) {
       if (item.__autocomplete_qsCategory) {
         return (
-          <Fragment>
+          <div className="aa-ItemWrapper">
             <div className="aa-ItemContent aa-ItemContent--indented">
               <div className="aa-ItemContentSubtitle aa-ItemContentSubtitle--standalone">
                 <span className="aa-ItemContentSubtitleIcon" />
@@ -26,12 +26,12 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
                 </span>
               </div>
             </div>
-          </Fragment>
+          </div>
         );
       }
 
       return (
-        <Fragment>
+        <div className="aa-ItemWrapper">
           <div className="aa-ItemContent">
             <div className="aa-ItemIcon aa-ItemIcon--noBorder">
               <svg viewBox="0 0 24 24" fill="currentColor">
@@ -59,7 +59,7 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
               </svg>
             </button>
           </div>
-        </Fragment>
+        </div>
       );
     },
   };

diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx b/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx
@@ -13,9 +13,9 @@ export function getTemplates<TItem extends RecentSearchesItem>({
   onTapAhead,
 }: GetTemplatesParams<TItem>): SourceTemplates<TItem> {
   return {
-    item({ item, createElement, Fragment, components }) {
+    item({ item, createElement, components }) {
       return (
-        <Fragment>
+        <div className="aa-ItemWrapper">
           <div className="aa-ItemContent">
             <div className="aa-ItemIcon aa-ItemIcon--noBorder">
               <svg viewBox="0 0 24 24" fill="currentColor">
@@ -65,7 +65,7 @@ export function getTemplates<TItem extends RecentSearchesItem>({
               </svg>
             </button>
           </div>
-        </Fragment>
+        </div>
       );
     },
   };

diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss
@@ -503,10 +503,6 @@ body {
   align-items: center;
   border-radius: 3px;
   cursor: pointer;
-  display: grid;
-  gap: calc(var(--aa-spacing-half) / 2);
-  grid-auto-flow: column;
-  justify-content: space-between;
   min-height: calc(var(--aa-spacing) * 2.5);
   padding: calc(var(--aa-spacing-half) / 2);
   // When the result is active
@@ -693,7 +689,10 @@ body {
     .aa-ItemLink {
     align-items: center;
     color: inherit;
-    display: flex;
+    display: grid;
+    gap: calc(var(--aa-spacing-half) / 2);
+    grid-auto-flow: column;
+    justify-content: space-between;
     text-decoration: none;
     width: 100%;
   }

diff --git a/packages/website/docs/autocomplete-theme-classic.md b/packages/website/docs/autocomplete-theme-classic.md
@@ -65,7 +65,7 @@ autocomplete({
   templates: {
     item({ item, components }) {
       return (
-        <Fragment>
+        <div className="aa-ItemWrapper">
           <div className="aa-ItemIcon">
             <img src={item.image} alt={item.name} width="40" height="40" />
           </div>
@@ -93,18 +93,16 @@ autocomplete({
               </svg>
             </button>
           </div>
-        </Fragment>
+        </div>
       );
     },
   },
 });
 ```
 
-If your renderer doesn't support `Fragment`s, you can use `div.aa-ItemWrapper`.
-
 ### Link item
 
-To wrap an item within a link, use the `.aa-ItemLink` class.
+To wrap an item within a link, use the `.aa-ItemLink` class in place of the element with `.aa-ItemWrapper`. **Make sure not to use both together.**
 
 ```jsx
 autocomplete({