From b8308f8bc1ab76b8f032587224b91276128db4ce Mon Sep 17 00:00:00 2001
From: Lee Reilly <lee@github.com>
Date: Fri, 4 Mar 2022 15:00:14 -0800
Subject: [PATCH 1/3] Wrap GIF CTA in <md-gif>

---
 src/components/giphy-toolbar-item.js | 72 ++++++++++++++--------------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/src/components/giphy-toolbar-item.js b/src/components/giphy-toolbar-item.js
index e69cf62..c899674 100644
--- a/src/components/giphy-toolbar-item.js
+++ b/src/components/giphy-toolbar-item.js
@@ -2,40 +2,42 @@
 import React from 'dom-chef'
 
 export default (
-  <details class="details-reset details-overlay toolbar-item select-menu select-menu-modal-right ghg-trigger">
-    <summary class="menu-target" aria-label="Insert a GIF" aria-haspopup="menu">
-      {'GIF'}
-    </summary>
-    <details-menu
-      class="select-menu-modal position-absolute right-0 ghg-modal"
-      style={{'z-index': 99, width: '480px', 'max-height': '410px'}}
-      role="menu"
-    >
-      <div class="select-menu-header d-flex">
-        <span class="select-menu-title flex-auto">Select a GIF</span>
-        <span class="ghg-powered-by-giphy" />
-      </div>
-      <tab-list>
-        <div class="select-menu-filters">
-          <div class="select-menu-text-filter">
-            <input
-              type="text"
-              class="form-control ghg-search-input"
-              placeholder="Search for a GIF…"
-              aria-label="Search for a GIF"
-              autofocus=""
-            />
-          </div>
+  <md-gif aria-label="GIF" id="md-gif" role="button" tabindex="-1" class="toolbar-item btn-octicon p-2 p-md-1 mx-1">
+    <details class="details-reset details-overlay toolbar-item select-menu select-menu-modal-right ghg-trigger">
+      <summary class="menu-target" aria-label="Insert a GIF" aria-haspopup="menu">
+        {'GIF'}
+      </summary>
+      <details-menu
+        class="select-menu-modal position-absolute right-0 ghg-modal"
+        style={{'z-index': 99, width: '480px', 'max-height': '410px'}}
+        role="menu"
+      >
+        <div class="select-menu-header d-flex">
+          <span class="select-menu-title flex-auto">Select a GIF</span>
+          <span class="ghg-powered-by-giphy" />
         </div>
-        <div
-          class="ghg-giphy-results"
-          style={{
-            display: 'flex',
-            'align-items': 'center',
-            'justify-content': 'center'
-          }}
-        />
-      </tab-list>
-    </details-menu>
-  </details>
+        <tab-list>
+          <div class="select-menu-filters">
+            <div class="select-menu-text-filter">
+              <input
+                type="text"
+                class="form-control ghg-search-input"
+                placeholder="Search for a GIF…"
+                aria-label="Search for a GIF"
+                autofocus=""
+              />
+            </div>
+          </div>
+          <div
+            class="ghg-giphy-results"
+            style={{
+              display: 'flex',
+              'align-items': 'center',
+              'justify-content': 'center'
+            }}
+          />
+        </tab-list>
+      </details-menu>
+    </details>
+  </md-gif>
 )

From 790f0926f49fb8cac6e2dbf43f0112b12d619379 Mon Sep 17 00:00:00 2001
From: Nick Lockhart <nicholas.o.lockhart@gmail.com>
Date: Thu, 17 Mar 2022 13:15:43 +1300
Subject: [PATCH 2/3] Remove superfluous `<md-gif>` element wrapper

Co-authored-by: Lee Reilly <lee@github.com>
---
 src/components/giphy-toolbar-item.js | 72 ++++++++++++++--------------
 1 file changed, 35 insertions(+), 37 deletions(-)

diff --git a/src/components/giphy-toolbar-item.js b/src/components/giphy-toolbar-item.js
index c899674..19fafec 100644
--- a/src/components/giphy-toolbar-item.js
+++ b/src/components/giphy-toolbar-item.js
@@ -2,42 +2,40 @@
 import React from 'dom-chef'
 
 export default (
-  <md-gif aria-label="GIF" id="md-gif" role="button" tabindex="-1" class="toolbar-item btn-octicon p-2 p-md-1 mx-1">
-    <details class="details-reset details-overlay toolbar-item select-menu select-menu-modal-right ghg-trigger">
-      <summary class="menu-target" aria-label="Insert a GIF" aria-haspopup="menu">
-        {'GIF'}
-      </summary>
-      <details-menu
-        class="select-menu-modal position-absolute right-0 ghg-modal"
-        style={{'z-index': 99, width: '480px', 'max-height': '410px'}}
-        role="menu"
-      >
-        <div class="select-menu-header d-flex">
-          <span class="select-menu-title flex-auto">Select a GIF</span>
-          <span class="ghg-powered-by-giphy" />
-        </div>
-        <tab-list>
-          <div class="select-menu-filters">
-            <div class="select-menu-text-filter">
-              <input
-                type="text"
-                class="form-control ghg-search-input"
-                placeholder="Search for a GIF…"
-                aria-label="Search for a GIF"
-                autofocus=""
-              />
-            </div>
+  <details class="details-reset details-overlay toolbar-item select-menu select-menu-modal-right ghg-trigger btn-octicon p-2 p-md-1 mx-1">
+    <summary class="menu-target" aria-label="Insert a GIF" aria-haspopup="menu">
+      {'GIF'}
+    </summary>
+    <details-menu
+      class="select-menu-modal position-absolute right-0 ghg-modal"
+      style={{'z-index': 99, width: '480px', 'max-height': '410px'}}
+      role="menu"
+    >
+      <div class="select-menu-header d-flex">
+        <span class="select-menu-title flex-auto">Select a GIF</span>
+        <span class="ghg-powered-by-giphy" />
+      </div>
+      <tab-list>
+        <div class="select-menu-filters">
+          <div class="select-menu-text-filter">
+            <input
+              type="text"
+              class="form-control ghg-search-input"
+              placeholder="Search for a GIF…"
+              aria-label="Search for a GIF"
+              autofocus=""
+            />
           </div>
-          <div
-            class="ghg-giphy-results"
-            style={{
-              display: 'flex',
-              'align-items': 'center',
-              'justify-content': 'center'
-            }}
-          />
-        </tab-list>
-      </details-menu>
-    </details>
-  </md-gif>
+        </div>
+        <div
+          class="ghg-giphy-results"
+          style={{
+            display: 'flex',
+            'align-items': 'center',
+            'justify-content': 'center'
+          }}
+        />
+      </tab-list>
+    </details-menu>
+  </details>
 )

From 8641059e0a12eee0b93aefe0ddaeb1c9a9248d69 Mon Sep 17 00:00:00 2001
From: Nick Lockhart <nicholas.o.lockhart@gmail.com>
Date: Thu, 17 Mar 2022 13:20:17 +1300
Subject: [PATCH 3/3] Move padding to `<summary>` element.

Otherwise the `<details>` element receives the click and doesn't trigger popover.

Co-authored-by: Lee Reilly <lee@github.com>
---
 src/components/giphy-toolbar-item.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/giphy-toolbar-item.js b/src/components/giphy-toolbar-item.js
index 19fafec..a5e7302 100644
--- a/src/components/giphy-toolbar-item.js
+++ b/src/components/giphy-toolbar-item.js
@@ -2,8 +2,12 @@
 import React from 'dom-chef'
 
 export default (
-  <details class="details-reset details-overlay toolbar-item select-menu select-menu-modal-right ghg-trigger btn-octicon p-2 p-md-1 mx-1">
-    <summary class="menu-target" aria-label="Insert a GIF" aria-haspopup="menu">
+  <details class="details-reset details-overlay toolbar-item select-menu select-menu-modal-right ghg-trigger btn-octicon">
+    <summary
+      class="menu-target p-2 p-md-1 mx-1"
+      aria-label="Insert a GIF"
+      aria-haspopup="menu"
+    >
       {'GIF'}
     </summary>
     <details-menu