feat(js): wrap item action buttons in container (#434)

algolia · Feb 8, 2021 · 0032f38 · 0032f38
1 parent 1d53bb9
commit 0032f38
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 44 deletions.
diff --git a/examples/js/app.tsx b/examples/js/app.tsx
@@ -124,15 +124,17 @@ function ProductItem({ hit }: ProductItemProps) {
           {snippetHit<ProductHit>({ hit, attribute: 'description' })}
         </div>
       </div>
-      <button
-        className="aa-ItemActionButton aa-TouchOnly aa-ActiveOnly"
-        type="button"
-        title="Select"
-      >
-        <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"></path>
-        </svg>
-      </button>
+      <div className="aa-ItemActions">
+        <button
+          className="aa-ItemActionButton aa-TouchOnly aa-ActiveOnly"
+          type="button"
+          title="Select"
+        >
+          <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"></path>
+          </svg>
+        </button>
+      </div>
     </Fragment>
   );
 }
diff --git a/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx b/packages/autocomplete-plugin-query-suggestions/src/getTemplates.tsx
@@ -36,19 +36,26 @@ export function getTemplates<TItem extends QuerySuggestionsHit>({
               })}
             </div>
           </div>
-          <button
-            className="aa-ItemActionButton"
-            title={`Fill query with "${item.query}"`}
-            onClick={(event) => {
-              event.stopPropagation();
-              onTapAhead(item);
-            }}
-          >
-            <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
-              <rect fill="none" height="24" width="24" />
-              <path d="M5,15h2V8.41L18.59,20L20,18.59L8.41,7H15V5H5V15z" />
-            </svg>
-          </button>
+          <div className="aa-ItemActions">
+            <button
+              className="aa-ItemActionButton"
+              title={`Fill query with "${item.query}"`}
+              onClick={(event) => {
+                event.stopPropagation();
+                onTapAhead(item);
+              }}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                width="18"
+                height="18"
+              >
+                <rect fill="none" height="24" width="24" />
+                <path d="M5,15h2V8.41L18.59,20L20,18.59L8.41,7H15V5H5V15z" />
+              </svg>
+            </button>
+          </div>
         </Fragment>
       );
     },

diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx b/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx
@@ -29,29 +29,31 @@ export function getTemplates<TItem extends RecentSearchesItem>({
               })}
             </div>
           </div>
-          <button
-            className="aa-ItemActionButton"
-            title="Remove this search"
-            onClick={(event) => {
-              event.stopPropagation();
-              onRemove(item.id);
-            }}
-          >
-            <svg
-              viewBox="0 0 24 24"
-              width="20"
-              height="20"
-              fill="none"
-              stroke="currentColor"
+          <div className="aa-ItemActions">
+            <button
+              className="aa-ItemActionButton"
+              title="Remove this search"
+              onClick={(event) => {
+                event.stopPropagation();
+                onRemove(item.id);
+              }}
             >
-              <path
-                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-              />
-            </svg>
-          </button>
+              <svg
+                viewBox="0 0 24 24"
+                width="18"
+                height="18"
+                fill="none"
+                stroke="currentColor"
+              >
+                <path
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                />
+              </svg>
+            </button>
+          </div>
         </Fragment>
       );
     },

diff --git a/packages/autocomplete-theme-classic/src/theme.scss b/packages/autocomplete-theme-classic/src/theme.scss
@@ -410,6 +410,9 @@ body {
     }
   }
   // secondary click action
+  .aa-ItemActions {
+    display: flex;
+  }
   .aa-ItemActionButton {
     align-items: center;
     background: none;