From 459b1e0efe48adcd2a24903e5a75493dd52f2d0b Mon Sep 17 00:00:00 2001
From: leSamo <soleksak@redhat.com>
Date: Tue, 13 Aug 2024 12:38:56 +0200
Subject: [PATCH] Add default tooltip to table toolbar export button

---
 .../src/DownloadButton/DownloadButton.tsx     |   2 +-
 .../__snapshots__/DownloadButton.test.js.snap | 297 +++++++++---------
 2 files changed, 158 insertions(+), 141 deletions(-)

diff --git a/packages/components/src/DownloadButton/DownloadButton.tsx b/packages/components/src/DownloadButton/DownloadButton.tsx
index 169d11e43..4e9209ed8 100644
--- a/packages/components/src/DownloadButton/DownloadButton.tsx
+++ b/packages/components/src/DownloadButton/DownloadButton.tsx
@@ -31,7 +31,7 @@ const DownloadButton: React.FunctionComponent<DownloadButtonProps> = ({
   extraItems = [],
   onSelect = () => undefined,
   isDisabled,
-  tooltipText,
+  tooltipText = 'Export data',
   ...props
 }) => {
   const [isOpen, setIsOpen] = useState(false);
diff --git a/packages/components/src/DownloadButton/__snapshots__/DownloadButton.test.js.snap b/packages/components/src/DownloadButton/__snapshots__/DownloadButton.test.js.snap
index a79e7cebe..eef5184a5 100644
--- a/packages/components/src/DownloadButton/__snapshots__/DownloadButton.test.js.snap
+++ b/packages/components/src/DownloadButton/__snapshots__/DownloadButton.test.js.snap
@@ -2,108 +2,113 @@
 
 exports[`DownloadButton component API clicking should open dropdown 1`] = `
 <div>
-  <button
-    aria-expanded="true"
-    aria-label="Export"
-    class="pf-v5-c-menu-toggle pf-m-expanded pf-m-plain"
-    type="button"
-  >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 1024 1024"
-      width="1em"
-    >
-      <path
-        d="M975.8,636.9 L870.9,741.8 L457.9,328.6 C452.1,322.8 445.4,319.9 437.9,319.9 C430.4,319.9 423.7,322.8 417.9,328.6 L328.8,417.7 C323,423.5 320.1,430.2 320.1,437.7 C320.1,445.2 323,451.9 328.8,457.7 L742,870.7 L636.9,975.8 C610.5,1002.2 619.4,1024 656.8,1024 L956,1024 C1014.5,1024 1024,1013.7 1024,955.9 L1024,656.7 C1023.9,619.4 1002.2,610.5 975.8,636.9 Z M128,128 L896,128 L896,361.7 C896.007942,370.182681 899.389907,378.313788 905.4,384.3 L996.7,475.6 C1006.8,485.7 1024,478.5 1024,464.3 L1024,22.7 C1024,16.1 1021.9,10.7 1017.6,6.4 C1013.3,2.1 1007.9,0 1001.3,0 L22.7,0 C16.1,0 10.7,2.1 6.4,6.4 C2.1,10.7 0,16.1 0,22.7 L0,1001.3 C0,1007.9 2.1,1013.3 6.4,1017.6 C10.7,1021.9 16.1,1024 22.7,1024 L463.4,1024 C469.862884,1023.98894 475.684489,1020.0908 478.156232,1014.11925 C480.627976,1008.14769 479.264428,1001.27548 474.7,996.7 L383.4,905.4 C377.413788,899.389907 369.282681,896.007942 360.8,896 L128,896 L128,128 Z"
-      />
-    </svg>
-  </button>
   <div
-    class="pf-v5-c-menu"
-    data-ouia-component-id="Export"
-    data-ouia-component-type="PF5/Dropdown"
-    data-ouia-safe="true"
-    data-popper-escaped="true"
-    data-popper-placement="bottom-start"
-    data-popper-reference-hidden="true"
-    style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
+    style="display: contents;"
   >
+    <button
+      aria-expanded="true"
+      aria-label="Export"
+      class="pf-v5-c-menu-toggle pf-m-expanded pf-m-plain"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 1024 1024"
+        width="1em"
+      >
+        <path
+          d="M975.8,636.9 L870.9,741.8 L457.9,328.6 C452.1,322.8 445.4,319.9 437.9,319.9 C430.4,319.9 423.7,322.8 417.9,328.6 L328.8,417.7 C323,423.5 320.1,430.2 320.1,437.7 C320.1,445.2 323,451.9 328.8,457.7 L742,870.7 L636.9,975.8 C610.5,1002.2 619.4,1024 656.8,1024 L956,1024 C1014.5,1024 1024,1013.7 1024,955.9 L1024,656.7 C1023.9,619.4 1002.2,610.5 975.8,636.9 Z M128,128 L896,128 L896,361.7 C896.007942,370.182681 899.389907,378.313788 905.4,384.3 L996.7,475.6 C1006.8,485.7 1024,478.5 1024,464.3 L1024,22.7 C1024,16.1 1021.9,10.7 1017.6,6.4 C1013.3,2.1 1007.9,0 1001.3,0 L22.7,0 C16.1,0 10.7,2.1 6.4,6.4 C2.1,10.7 0,16.1 0,22.7 L0,1001.3 C0,1007.9 2.1,1013.3 6.4,1017.6 C10.7,1021.9 16.1,1024 22.7,1024 L463.4,1024 C469.862884,1023.98894 475.684489,1020.0908 478.156232,1014.11925 C480.627976,1008.14769 479.264428,1001.27548 474.7,996.7 L383.4,905.4 C377.413788,899.389907 369.282681,896.007942 360.8,896 L128,896 L128,128 Z"
+        />
+      </svg>
+    </button>
     <div
-      class="pf-v5-c-menu__content"
+      aria-describedby="pf-tooltip-5"
+      class="pf-v5-c-menu"
+      data-ouia-component-id="Export"
+      data-ouia-component-type="PF5/Dropdown"
+      data-ouia-safe="true"
+      data-popper-escaped="true"
+      data-popper-placement="bottom-start"
+      data-popper-reference-hidden="true"
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
     >
-      <ul
-        class="pf-v5-c-menu__list"
-        role="menu"
+      <div
+        class="pf-v5-c-menu__content"
       >
-        <li
-          class="pf-v5-c-menu__list-item"
-          data-ouia-component-id="DownloadCSV"
-          data-ouia-component-type="PF5/DropdownItem"
-          data-ouia-safe="true"
-          role="none"
+        <ul
+          class="pf-v5-c-menu__list"
+          role="menu"
         >
-          <button
-            aria-label="Export to CSV"
-            class="pf-v5-c-menu__item"
-            role="menuitem"
-            tabindex="0"
-            type="button"
+          <li
+            class="pf-v5-c-menu__list-item"
+            data-ouia-component-id="DownloadCSV"
+            data-ouia-component-type="PF5/DropdownItem"
+            data-ouia-safe="true"
+            role="none"
           >
-            <span
-              class="pf-v5-c-menu__item-main"
+            <button
+              aria-label="Export to CSV"
+              class="pf-v5-c-menu__item"
+              role="menuitem"
+              tabindex="0"
+              type="button"
             >
               <span
-                class="pf-v5-c-menu__item-text"
+                class="pf-v5-c-menu__item-main"
               >
-                Export to CSV
+                <span
+                  class="pf-v5-c-menu__item-text"
+                >
+                  Export to CSV
+                </span>
               </span>
-            </span>
-          </button>
-        </li>
-        <li
-          class="pf-v5-c-menu__list-item"
-          data-ouia-component-id="DownloadJSON"
-          data-ouia-component-type="PF5/DropdownItem"
-          data-ouia-safe="true"
-          role="none"
-        >
-          <button
-            aria-label="Export to JSON"
-            class="pf-v5-c-menu__item"
-            role="menuitem"
-            tabindex="-1"
-            type="button"
+            </button>
+          </li>
+          <li
+            class="pf-v5-c-menu__list-item"
+            data-ouia-component-id="DownloadJSON"
+            data-ouia-component-type="PF5/DropdownItem"
+            data-ouia-safe="true"
+            role="none"
           >
-            <span
-              class="pf-v5-c-menu__item-main"
+            <button
+              aria-label="Export to JSON"
+              class="pf-v5-c-menu__item"
+              role="menuitem"
+              tabindex="-1"
+              type="button"
             >
               <span
-                class="pf-v5-c-menu__item-text"
+                class="pf-v5-c-menu__item-main"
               >
-                Export to JSON
+                <span
+                  class="pf-v5-c-menu__item-text"
+                >
+                  Export to JSON
+                </span>
               </span>
-            </span>
-          </button>
-        </li>
-        <li
-          role="none"
-        >
-          <button
-            aria-disabled="false"
-            class=""
-            data-ouia-component-id="OUIA-Generated-DropdownItem-3"
-            data-ouia-component-type="PF5/DropdownItem"
-            data-ouia-safe="true"
-            role="menuitem"
-            tabindex="-1"
-            type="button"
-          />
-        </li>
-      </ul>
+            </button>
+          </li>
+          <li
+            role="none"
+          >
+            <button
+              aria-disabled="false"
+              class=""
+              data-ouia-component-id="OUIA-Generated-DropdownItem-3"
+              data-ouia-component-type="PF5/DropdownItem"
+              data-ouia-safe="true"
+              role="menuitem"
+              tabindex="-1"
+              type="button"
+            />
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </div>
@@ -111,75 +116,87 @@ exports[`DownloadButton component API clicking should open dropdown 1`] = `
 
 exports[`DownloadButton component should render CSV and JSON by default 1`] = `
 <div>
-  <button
-    aria-expanded="false"
-    aria-label="Export"
-    class="pf-v5-c-menu-toggle pf-m-plain"
-    type="button"
+  <div
+    style="display: contents;"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 1024 1024"
-      width="1em"
+    <button
+      aria-expanded="false"
+      aria-label="Export"
+      class="pf-v5-c-menu-toggle pf-m-plain"
+      type="button"
     >
-      <path
-        d="M975.8,636.9 L870.9,741.8 L457.9,328.6 C452.1,322.8 445.4,319.9 437.9,319.9 C430.4,319.9 423.7,322.8 417.9,328.6 L328.8,417.7 C323,423.5 320.1,430.2 320.1,437.7 C320.1,445.2 323,451.9 328.8,457.7 L742,870.7 L636.9,975.8 C610.5,1002.2 619.4,1024 656.8,1024 L956,1024 C1014.5,1024 1024,1013.7 1024,955.9 L1024,656.7 C1023.9,619.4 1002.2,610.5 975.8,636.9 Z M128,128 L896,128 L896,361.7 C896.007942,370.182681 899.389907,378.313788 905.4,384.3 L996.7,475.6 C1006.8,485.7 1024,478.5 1024,464.3 L1024,22.7 C1024,16.1 1021.9,10.7 1017.6,6.4 C1013.3,2.1 1007.9,0 1001.3,0 L22.7,0 C16.1,0 10.7,2.1 6.4,6.4 C2.1,10.7 0,16.1 0,22.7 L0,1001.3 C0,1007.9 2.1,1013.3 6.4,1017.6 C10.7,1021.9 16.1,1024 22.7,1024 L463.4,1024 C469.862884,1023.98894 475.684489,1020.0908 478.156232,1014.11925 C480.627976,1008.14769 479.264428,1001.27548 474.7,996.7 L383.4,905.4 C377.413788,899.389907 369.282681,896.007942 360.8,896 L128,896 L128,128 Z"
-      />
-    </svg>
-  </button>
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 1024 1024"
+        width="1em"
+      >
+        <path
+          d="M975.8,636.9 L870.9,741.8 L457.9,328.6 C452.1,322.8 445.4,319.9 437.9,319.9 C430.4,319.9 423.7,322.8 417.9,328.6 L328.8,417.7 C323,423.5 320.1,430.2 320.1,437.7 C320.1,445.2 323,451.9 328.8,457.7 L742,870.7 L636.9,975.8 C610.5,1002.2 619.4,1024 656.8,1024 L956,1024 C1014.5,1024 1024,1013.7 1024,955.9 L1024,656.7 C1023.9,619.4 1002.2,610.5 975.8,636.9 Z M128,128 L896,128 L896,361.7 C896.007942,370.182681 899.389907,378.313788 905.4,384.3 L996.7,475.6 C1006.8,485.7 1024,478.5 1024,464.3 L1024,22.7 C1024,16.1 1021.9,10.7 1017.6,6.4 C1013.3,2.1 1007.9,0 1001.3,0 L22.7,0 C16.1,0 10.7,2.1 6.4,6.4 C2.1,10.7 0,16.1 0,22.7 L0,1001.3 C0,1007.9 2.1,1013.3 6.4,1017.6 C10.7,1021.9 16.1,1024 22.7,1024 L463.4,1024 C469.862884,1023.98894 475.684489,1020.0908 478.156232,1014.11925 C480.627976,1008.14769 479.264428,1001.27548 474.7,996.7 L383.4,905.4 C377.413788,899.389907 369.282681,896.007942 360.8,896 L128,896 L128,128 Z"
+        />
+      </svg>
+    </button>
+  </div>
 </div>
 `;
 
 exports[`DownloadButton component should render custom items 1`] = `
 <div>
-  <button
-    aria-expanded="false"
-    aria-label="Export"
-    class="pf-v5-c-menu-toggle pf-m-plain"
-    type="button"
+  <div
+    style="display: contents;"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 1024 1024"
-      width="1em"
+    <button
+      aria-expanded="false"
+      aria-label="Export"
+      class="pf-v5-c-menu-toggle pf-m-plain"
+      type="button"
     >
-      <path
-        d="M975.8,636.9 L870.9,741.8 L457.9,328.6 C452.1,322.8 445.4,319.9 437.9,319.9 C430.4,319.9 423.7,322.8 417.9,328.6 L328.8,417.7 C323,423.5 320.1,430.2 320.1,437.7 C320.1,445.2 323,451.9 328.8,457.7 L742,870.7 L636.9,975.8 C610.5,1002.2 619.4,1024 656.8,1024 L956,1024 C1014.5,1024 1024,1013.7 1024,955.9 L1024,656.7 C1023.9,619.4 1002.2,610.5 975.8,636.9 Z M128,128 L896,128 L896,361.7 C896.007942,370.182681 899.389907,378.313788 905.4,384.3 L996.7,475.6 C1006.8,485.7 1024,478.5 1024,464.3 L1024,22.7 C1024,16.1 1021.9,10.7 1017.6,6.4 C1013.3,2.1 1007.9,0 1001.3,0 L22.7,0 C16.1,0 10.7,2.1 6.4,6.4 C2.1,10.7 0,16.1 0,22.7 L0,1001.3 C0,1007.9 2.1,1013.3 6.4,1017.6 C10.7,1021.9 16.1,1024 22.7,1024 L463.4,1024 C469.862884,1023.98894 475.684489,1020.0908 478.156232,1014.11925 C480.627976,1008.14769 479.264428,1001.27548 474.7,996.7 L383.4,905.4 C377.413788,899.389907 369.282681,896.007942 360.8,896 L128,896 L128,128 Z"
-      />
-    </svg>
-  </button>
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 1024 1024"
+        width="1em"
+      >
+        <path
+          d="M975.8,636.9 L870.9,741.8 L457.9,328.6 C452.1,322.8 445.4,319.9 437.9,319.9 C430.4,319.9 423.7,322.8 417.9,328.6 L328.8,417.7 C323,423.5 320.1,430.2 320.1,437.7 C320.1,445.2 323,451.9 328.8,457.7 L742,870.7 L636.9,975.8 C610.5,1002.2 619.4,1024 656.8,1024 L956,1024 C1014.5,1024 1024,1013.7 1024,955.9 L1024,656.7 C1023.9,619.4 1002.2,610.5 975.8,636.9 Z M128,128 L896,128 L896,361.7 C896.007942,370.182681 899.389907,378.313788 905.4,384.3 L996.7,475.6 C1006.8,485.7 1024,478.5 1024,464.3 L1024,22.7 C1024,16.1 1021.9,10.7 1017.6,6.4 C1013.3,2.1 1007.9,0 1001.3,0 L22.7,0 C16.1,0 10.7,2.1 6.4,6.4 C2.1,10.7 0,16.1 0,22.7 L0,1001.3 C0,1007.9 2.1,1013.3 6.4,1017.6 C10.7,1021.9 16.1,1024 22.7,1024 L463.4,1024 C469.862884,1023.98894 475.684489,1020.0908 478.156232,1014.11925 C480.627976,1008.14769 479.264428,1001.27548 474.7,996.7 L383.4,905.4 C377.413788,899.389907 369.282681,896.007942 360.8,896 L128,896 L128,128 Z"
+        />
+      </svg>
+    </button>
+  </div>
 </div>
 `;
 
 exports[`DownloadButton component should render disabled 1`] = `
 <div>
-  <button
-    aria-expanded="false"
-    aria-label="Export"
-    class="pf-v5-c-menu-toggle pf-m-plain"
-    type="button"
+  <div
+    style="display: contents;"
   >
-    <svg
-      aria-hidden="true"
-      class="pf-v5-svg"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      viewBox="0 0 1024 1024"
-      width="1em"
+    <button
+      aria-expanded="false"
+      aria-label="Export"
+      class="pf-v5-c-menu-toggle pf-m-plain"
+      type="button"
     >
-      <path
-        d="M975.8,636.9 L870.9,741.8 L457.9,328.6 C452.1,322.8 445.4,319.9 437.9,319.9 C430.4,319.9 423.7,322.8 417.9,328.6 L328.8,417.7 C323,423.5 320.1,430.2 320.1,437.7 C320.1,445.2 323,451.9 328.8,457.7 L742,870.7 L636.9,975.8 C610.5,1002.2 619.4,1024 656.8,1024 L956,1024 C1014.5,1024 1024,1013.7 1024,955.9 L1024,656.7 C1023.9,619.4 1002.2,610.5 975.8,636.9 Z M128,128 L896,128 L896,361.7 C896.007942,370.182681 899.389907,378.313788 905.4,384.3 L996.7,475.6 C1006.8,485.7 1024,478.5 1024,464.3 L1024,22.7 C1024,16.1 1021.9,10.7 1017.6,6.4 C1013.3,2.1 1007.9,0 1001.3,0 L22.7,0 C16.1,0 10.7,2.1 6.4,6.4 C2.1,10.7 0,16.1 0,22.7 L0,1001.3 C0,1007.9 2.1,1013.3 6.4,1017.6 C10.7,1021.9 16.1,1024 22.7,1024 L463.4,1024 C469.862884,1023.98894 475.684489,1020.0908 478.156232,1014.11925 C480.627976,1008.14769 479.264428,1001.27548 474.7,996.7 L383.4,905.4 C377.413788,899.389907 369.282681,896.007942 360.8,896 L128,896 L128,128 Z"
-      />
-    </svg>
-  </button>
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 1024 1024"
+        width="1em"
+      >
+        <path
+          d="M975.8,636.9 L870.9,741.8 L457.9,328.6 C452.1,322.8 445.4,319.9 437.9,319.9 C430.4,319.9 423.7,322.8 417.9,328.6 L328.8,417.7 C323,423.5 320.1,430.2 320.1,437.7 C320.1,445.2 323,451.9 328.8,457.7 L742,870.7 L636.9,975.8 C610.5,1002.2 619.4,1024 656.8,1024 L956,1024 C1014.5,1024 1024,1013.7 1024,955.9 L1024,656.7 C1023.9,619.4 1002.2,610.5 975.8,636.9 Z M128,128 L896,128 L896,361.7 C896.007942,370.182681 899.389907,378.313788 905.4,384.3 L996.7,475.6 C1006.8,485.7 1024,478.5 1024,464.3 L1024,22.7 C1024,16.1 1021.9,10.7 1017.6,6.4 C1013.3,2.1 1007.9,0 1001.3,0 L22.7,0 C16.1,0 10.7,2.1 6.4,6.4 C2.1,10.7 0,16.1 0,22.7 L0,1001.3 C0,1007.9 2.1,1013.3 6.4,1017.6 C10.7,1021.9 16.1,1024 22.7,1024 L463.4,1024 C469.862884,1023.98894 475.684489,1020.0908 478.156232,1014.11925 C480.627976,1008.14769 479.264428,1001.27548 474.7,996.7 L383.4,905.4 C377.413788,899.389907 369.282681,896.007942 360.8,896 L128,896 L128,128 Z"
+        />
+      </svg>
+    </button>
+  </div>
 </div>
 `;