From a17673deef6237a3f3b9bf37b255218577ee8031 Mon Sep 17 00:00:00 2001
From: dej611 <dej611@gmail.com>
Date: Fri, 26 Jun 2020 10:26:23 +0200
Subject: [PATCH] :ok_hand: Integrated suggestions for EUI components

---
 .../public/application/_discover.scss         | 10 +-------
 .../skip_bottom_button/skip_bottom_button.tsx | 23 +++++++++++++++----
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss
index 3eeb1f217d1f3b8..57cd8024185bf73 100644
--- a/src/plugins/discover/public/application/_discover.scss
+++ b/src/plugins/discover/public/application/_discover.scss
@@ -100,14 +100,6 @@ discover-app {
 
 .dscSkipButton {
   position: absolute;
-  left: -10000px;
+  right: $euiSizeXS;
   top: $euiSizeXS;
-  width: 1px;
-  overflow: hidden;
-
-  &:focus, &:hover {
-    left: initial;
-    right: $euiSize;
-    width: auto;
-  }
 }
diff --git a/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.tsx b/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.tsx
index 0b090e547cc5fe3..65c772f3b0c74af 100644
--- a/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.tsx
+++ b/src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { EuiButton } from '@elastic/eui';
+import { EuiSkipLink } from '@elastic/eui';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 
 export interface SkipBottomButtonProps {
@@ -30,9 +30,24 @@ export interface SkipBottomButtonProps {
 export function SkipBottomButton({ onClick }: SkipBottomButtonProps) {
   return (
     <I18nProvider>
-      <EuiButton onClick={onClick} iconType="arrowDown" className="dscSkipButton">
-        <FormattedMessage id="discover.skipToBottomButtonLabel" defaultMessage="Skip to bottom" />
-      </EuiButton>
+      <EuiSkipLink
+        size="s"
+        iconType="arrowDown"
+        onClick={(event) => {
+          // prevent the anchor to reload the page on click
+          event.preventDefault();
+          // The destinationId prop cannot be leveraged here as the table needs
+          // to be updated first (angular logic)
+          onClick();
+        }}
+        className="dscSkipButton"
+        destinationId=""
+      >
+        <FormattedMessage
+          id="discover.skipToBottomButtonLabel"
+          defaultMessage="Skip to end of table"
+        />
+      </EuiSkipLink>
     </I18nProvider>
   );
 }