Slimmer pagination look / feel (#380)

Pagination is now less heavy and also has a compressed view that only shows next / prev buttons.
elastic · Feb 9, 2018 · 693365b · 693365b
1 parent 52c5631
commit 693365b
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 212 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added component to wrap blocks of substeps `EuiSubSteps` in a shaded container. ([#375](https://github.com/elastic/eui/pull/375))
 - Added horizontal steps component ([#375](https://github.com/elastic/eui/pull/375))
+- Changed look and feel of pagination. Added compressed prop for smaller footprint pagination. ([#380](https://github.com/elastic/eui/pull/380))
 
 # [`0.0.20`](https://github.com/elastic/eui/tree/v0.0.20)
 

diff --git a/src-docs/src/views/pagination/compressed.js b/src-docs/src/views/pagination/compressed.js
@@ -0,0 +1,36 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiPagination,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activePage: 0
+    };
+
+    this.PAGE_COUNT = 4;
+  }
+
+  goToPage = pageNumber => {
+    this.setState({
+      activePage: pageNumber,
+    });
+  }
+
+  render() {
+    return (
+      <EuiPagination
+        pageCount={this.PAGE_COUNT}
+        activePage={this.state.activePage}
+        onPageClick={this.goToPage}
+        compressed
+      />
+    );
+  }
+}
diff --git a/src-docs/src/views/pagination/pagination_example.js b/src-docs/src/views/pagination/pagination_example.js
@@ -9,6 +9,7 @@ import {
 import {
   EuiCode,
   EuiPagination,
+  EuiPaginationButton,
 } from '../../../../src/components';
 
 import ManyPages from './many_pages';
@@ -27,6 +28,10 @@ import CustomizablePagination from './customizable_pagination';
 const customizablePaginationSource = require('!!raw-loader!./customizable_pagination');
 const customizablePaginationHtml = renderToHtml(CustomizablePagination);
 
+import Compressed from './compressed';
+const compressedSource = require('!!raw-loader!./compressed');
+const compressedHtml = renderToHtml(Compressed);
+
 export const PaginationExample = {
   title: 'Pagination',
   sections: [{
@@ -43,7 +48,7 @@ export const PaginationExample = {
         We only show at most 5 consecutive pages, with shortcuts to the first and/or last page.
       </p>
     ),
-    props: { EuiPagination },
+    props: { EuiPagination, EuiPaginationButton },
     demo: <ManyPages />,
   }, {
     title: 'Few pages',
@@ -75,6 +80,21 @@ export const PaginationExample = {
       </p>
     ),
     demo: <CenteredPagination />,
+  }, {
+    title: 'Compressed display',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: compressedSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: compressedHtml,
+    }],
+    text: (
+      <p>
+        Use the <EuiCode>compressed</EuiCode> prop to minimize the horizontal footprint.
+      </p>
+    ),
+    demo: <Compressed />,
   }, {
     title: 'Customizable pagination',
     source: [{

diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss
@@ -71,11 +71,7 @@ $buttonTypes: (
     }
 
     &:focus {
-      @if ($name == 'text') {
-        background-color: transparentize($euiColorPrimary, .9);
-      } @else {
-        background-color: transparentize($color, .9);
-      }
+      background-color: transparentize($color, .9);
     }
 
     &:hover {

diff --git a/src/components/index.js b/src/components/index.js
@@ -177,6 +177,7 @@ export {
 
 export {
   EuiPagination,
+  EuiPaginationButton,
 } from './pagination';
 
 export {

diff --git a/src/components/pagination/__snapshots__/pagination.test.js.snap b/src/components/pagination/__snapshots__/pagination.test.js.snap
@@ -1,76 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiPagination is rendered 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiPagination testClass1 testClass2"
-  data-test-subj="test subject string"
->
-  <button
-    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton"
-    type="button"
-  >
-    <span
-      class="euiButtonEmpty__content"
-    >
-      <svg
-        aria-hidden="true"
-        class="euiIcon euiButtonEmpty__icon euiIcon--medium"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-        xlink="http://www.w3.org/1999/xlink"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <defs>
-          <path
-            d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
-            id="arrow_left-a"
-          />
-        </defs>
-        <use
-          fill-rule="nonzero"
-          href="#arrow_left-a"
-          transform="rotate(90 8 8)"
-        />
-      </svg>
-      <span>
-        Previous
-      </span>
-    </span>
-  </button>
-  <button
-    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--iconRight euiPaginationButton"
-    type="button"
-  >
-    <span
-      class="euiButtonEmpty__content"
-    >
-      <svg
-        aria-hidden="true"
-        class="euiIcon euiButtonEmpty__icon euiIcon--medium"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-        xlink="http://www.w3.org/1999/xlink"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <defs>
-          <path
-            d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
-            id="arrow_right-a"
-          />
-        </defs>
-        <use
-          fill-rule="nonzero"
-          href="#arrow_right-a"
-          transform="matrix(0 1 1 0 0 0)"
-        />
-      </svg>
-      <span>
-        Next
-      </span>
-    </span>
-  </button>
-</div>
-`;
+exports[`EuiPagination is rendered 1`] = `<span />`;
diff --git a/src/components/pagination/__snapshots__/pagination_button.test.js.snap b/src/components/pagination/__snapshots__/pagination_button.test.js.snap
@@ -3,18 +3,14 @@
 exports[`EuiPaginationButton is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton testClass1 testClass2"
+  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton testClass1 testClass2"
   data-test-subj="test subject string"
   type="button"
 >
   <span
     class="euiButtonEmpty__content"
   >
-    <span>
-      <span>
-        …
-      </span>
-    </span>
+    <span />
   </span>
 </button>
 `;
diff --git a/src/components/pagination/_pagination_button.scss b/src/components/pagination/_pagination_button.scss
@@ -1,21 +1,15 @@
 .euiPaginationButton {
   font-size: $euiFontSizeS;
   padding: 0;
-  height: $euiSizeL;
-  min-width: $euiSizeXL;
   text-align: center;
+  border-radius: $euiBorderRadius;
 }
 
 .euiPaginationButton-isActive {
   pointer-events: none;
-  background-color: $euiColorPrimary;
-  color: $euiColorEmptyShade;
-  border-radius: $euiBorderRadius;
-
-  &:focus {
-    background-color: $euiColorPrimary;
-    color: $euiColorEmptyShade;
-  }
+  color: $euiColorPrimary;
+  text-decoration: underline;
+  font-weight: $euiFontWeightBold;
 }
 
 .euiPaginationButton-isPlaceholder {

diff --git a/src/components/pagination/index.js b/src/components/pagination/index.js
@@ -1,3 +1,7 @@
 export {
   EuiPagination,
 } from './pagination';
+
+export {
+  EuiPaginationButton,
+} from './pagination_button';