👌 Integrated suggestions for EUI components

elastic · Jun 26, 2020 · 74f8eb9 · 74f8eb9
1 parent 5dbcf9f
commit 74f8eb9
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git 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
@@ -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>
   );
 }