allow pagination to be small, default, or large size [#150235312]

Signed-off-by: Reid Mitchell <rmitchell@pivotal.io>
pivotal-cf · Sep 5, 2017 · 01a9323 · 01a9323
1 parent 7db6887
commit 01a9323
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 56 deletions.
diff --git a/spec/pivotal-ui-react/pagination/pagination_spec.js b/spec/pivotal-ui-react/pagination/pagination_spec.js
@@ -75,6 +75,20 @@ describe('Pagination', () => {
       expect('.pagination button:eq(1)').not.toHaveClass('btn-default-alt');
     });
 
+    it('renders large buttons when large prop is true', () => {
+      subject = renderComponent({large: true});
+      expect('div.pagination').toHaveClass('btn-group-large');
+      expect('div.pagination').not.toHaveClass('btn-group-small');
+      expect('div.pagination').toHaveClass('btn-group');
+    });
+
+    it('renders small buttons when small prop is true', () => {
+      subject = renderComponent({small: true});
+      expect('div.pagination').toHaveClass('btn-group-small');
+      expect('div.pagination').not.toHaveClass('btn-group-large');
+      expect('div.pagination').toHaveClass('btn-group');
+    });
+
     describe('onSelect', () => {
       let onSelect;
 

diff --git a/src/pivotal-ui-react/pagination/pagination.js b/src/pivotal-ui-react/pagination/pagination.js
@@ -32,7 +32,9 @@ export class Pagination extends React.PureComponent {
     next: PropTypes.bool,
     prev: PropTypes.bool,
     activePage: PropTypes.number,
-    onSelect: PropTypes.func
+    onSelect: PropTypes.func,
+    small: PropTypes.bool,
+    large: PropTypes.bool
   };
 
   static defaultProps = {
@@ -44,7 +46,7 @@ export class Pagination extends React.PureComponent {
   };
 
   render() {
-    const {items, next, prev, activePage, onSelect, ...props} = this.props;
+    const {items, next, prev, activePage, onSelect, small, large, ...props} = this.props;
     const paginationButtons = [];
     for (let i = 0; i < items; i++) {
       const isActive = (i + 1 === activePage);
@@ -61,7 +63,10 @@ export class Pagination extends React.PureComponent {
     const prevButton = <PaginationButton onSelect={onSelect} eventKey="prev" content="&lsaquo;"/>;
     const nextButton = <PaginationButton onSelect={onSelect} eventKey="next" content="&rsaquo;"/>;
 
-    return (<div className="pagination btn-group" role="group">
+    return (<div className={classnames('pagination', 'btn-group', {
+      'btn-group-small': small,
+      'btn-group-large': large
+    })} role="group">
       {prev ? prevButton : null}
       {paginationButtons}
       {next ? nextButton : null}

diff --git a/src/pivotal-ui/components/pagination/pagination.scss b/src/pivotal-ui/components/pagination/pagination.scss
@@ -6,57 +6,4 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-
-  li {
-    display: inline-block;
-    font-size: $font-size-base;
-    border-right: 1px solid $pagination-border;
-    border-top: 1px solid $pagination-border;
-    border-bottom: 1px solid $pagination-border;
-    background-color: $pagination-bg;
-    cursor: pointer;
-    font-weight: $btn-font-weight;
-
-    a {
-      display: block;
-      padding: 6px 12px;
-
-    }
-
-    &:hover {
-      background-color: $pagination-hover-bg;
-      a {
-        color: $pagination-hover-color;
-      }
-    }
-
-    &:first-child {
-      border-left: 1px solid $pagination-border;
-      border-bottom-left-radius: 4px;
-      border-top-left-radius: 4px;
-    }
-
-    &:last-child {
-      border-bottom-right-radius: 4px;
-      border-top-right-radius: 4px;
-    }
-
-    &.disabled {
-      background-color: $pagination-disabled-bg;
-      cursor: default;
-      a {
-        cursor: default;
-        color: $pagination-disabled-color;
-      }
-    }
-
-    &.active {
-      background-color: $pagination-hover-color;
-      cursor: default;
-      a {
-        cursor: default;
-        color: $neutral-11;
-      }
-    }
-  }
 }