Merge pull request #97 from jlmitch5/newPagination

New pagination

__tests__/components/Pagination.test.jsx

@@ -120,8 +120,8 @@ describe('<Pagination />', () => {
   });
 
   test('submit a new page by typing in input works', () => {
-    const textInputSelector = '.pf-l-split__item.pf-m-main .pf-c-form-control';
+    const textInputSelector = '.awx-pagination__page-input.pf-c-form-control';
-    const submitFormSelector = '.pf-l-split__item.pf-m-main form';
+    const submitFormSelector = '.awx-pagination__page-input-form';
     const onSetPage = jest.fn();
 
     pagination = mount(

src/components/Pagination/Pagination.jsx

@@ -7,11 +7,7 @@ import {
   DropdownDirection,
   DropdownItem,
   DropdownToggle,
-  Level,
+  TextInput
-  LevelItem,
-  TextInput,
-  Split,
-  SplitItem,
 } from '@patternfly/react-core';
 
 class Pagination extends Component {
@@ -120,19 +116,12 @@ class Pagination extends Component {
     const itemMin = ((page - 1) * page_size) + 1;
     const itemMax = itemMin + itemCount - 1;
 
-    const disabledStyle = {
-      backgroundColor: '#EDEDED',
-      border: '1px solid #C2C2CA',
-      borderRadius: '0px',
-      color: '#C2C2CA',
-    };
-
     return (
       <I18n>
         {({ i18n }) => (
           <div className="awx-pagination">
-            <Level>
+            <div className="awx-pagination__page-size-selection">
-              <LevelItem>
+              <Trans>Items Per Page</Trans>
               <Dropdown
                 onToggle={this.onTogglePageSize}
                 onSelect={this.onSelectPageSize}
@@ -156,50 +145,42 @@ class Pagination extends Component {
                   </DropdownItem>
                 ))}
               </Dropdown>
-                <Trans> Per Page</Trans>
+            </div>
-              </LevelItem>
+            <div className="awx-pagination__counts">
-              <LevelItem>
+              <div className="awx-pagination__item-count">
-                <Split gutter="md" className="pf-u-display-flex pf-u-align-items-center">
+                <Trans>{`Items ${itemMin} - ${itemMax} of ${count}`}</Trans>
-                  <SplitItem>
+              </div>
-                    <Trans>{`${itemMin} - ${itemMax} of ${count}`}</Trans>
+              {pageCount !== 1 && (
-                  </SplitItem>
+                <div className="awx-pagination__page-count">
-                  <SplitItem>
+                  <div className="pf-c-input-group pf-m-previous">
-                    <div className="pf-c-input-group">
                     <Button
+                      className="awx-pagination__page-button"
                       variant="tertiary"
                       aria-label={i18n._(t`First`)}
-                        style={isOnFirst ? disabledStyle : {}}
                       isDisabled={isOnFirst}
                       onClick={this.onFirst}
                     >
                       <i className="fas fa-angle-double-left" />
                     </Button>
                     <Button
+                      className="awx-pagination__page-button"
                       variant="tertiary"
                       aria-label={i18n._(t`Previous`)}
-                        style={isOnFirst ? disabledStyle : {}}
                       isDisabled={isOnFirst}
                       onClick={this.onPrevious}
                     >
                       <i className="fas fa-angle-left" />
                     </Button>
                   </div>
-                  </SplitItem>
+                  <form
-                  <SplitItem isMain>
+                    className="awx-pagination__page-input-form"
-                    <form onSubmit={this.onSubmit}>
+                    onSubmit={this.onSubmit}
+                  >
                     <Trans>
                       {'Page '}
                       <TextInput
-                          isDisabled={pageCount === 1}
+                        className="awx-pagination__page-input"
                         aria-label={i18n._(t`Page Number`)}
-                          style={{
-                            height: '30px',
-                            width: '30px',
-                            textAlign: 'center',
-                            padding: '0',
-                            margin: '0',
-                            ...(pageCount === 1 ? disabledStyle : {})
-                          }}
                         value={value}
                         type="text"
                         onChange={this.onPageChange}
@@ -208,32 +189,29 @@ class Pagination extends Component {
                       {pageCount}
                     </Trans>
                   </form>
-                  </SplitItem>
-                  <SplitItem>
                   <div className="pf-c-input-group">
                     <Button
+                      className="awx-pagination__page-button"
                       variant="tertiary"
                       aria-label={i18n._(t`Next`)}
-                        style={isOnLast ? disabledStyle : {}}
                       isDisabled={isOnLast}
                       onClick={this.onNext}
                     >
                       <i className="fas fa-angle-right" />
                     </Button>
                     <Button
+                      className="awx-pagination__page-button"
                       variant="tertiary"
                       aria-label={i18n._(t`Last`)}
-                        style={isOnLast ? disabledStyle : {}}
                       isDisabled={isOnLast}
                       onClick={this.onLast}
                     >
                       <i className="fas fa-angle-double-right" />
                     </Button>
                   </div>
-                  </SplitItem>
+                </div>
-                </Split>
+              )}
-              </LevelItem>
+            </div>
-            </Level>
           </div>
         )}
       </I18n>

src/components/Pagination/styles.scss

@@ -1,39 +1,87 @@
 .awx-pagination {
   --awx-pagination--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --awx-pagination--BorderColor: var(--pf-global--Color--light-200);
+  --awx-pagination--BorderColor: var(--pf-global--BackgroundColor--light-300);
-  --awx-pagination--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --awx-pagination--disabled-BackgroundColor: #f2f2f2;
+  --awx-pagination--disabled-Color: #C2C2CA;
 
-  border: var(--awx-pagination--BorderWidth) solid var(--awx-pagination--BorderColor);
+  border-top: 1px solid var(--awx-pagination--BorderColor);
   background-color: var(--awx-pagination--BackgroundColor);
-  padding-left: 20px;
+  height: 55px;
-  padding-right: 20px;
+  display: flex;
-  padding-top: 20px;
+  align-items: center;
-  height: 70px;
+  justify-content: space-between;
+  padding: 0 20px;
+  font-size: 14px;
+  font-weight: bold;
 
   --pf-global--target-size--MinHeight: 30px;
   --pf-global--target-size--MinWidth: 30px;
   --pf-global--FontSize--md: 14px;
 
-  .pf-c-input-group button {
+  .awx-pagination__page-size-selection .pf-c-dropdown__toggle {
-    width: 30px;
+    font-weight: bold;
-    height: 30px;
+    margin-left: 10px;
-    padding: 0px;
   }
 
-  .pf-c-dropdown button {
+  .awx-pagination__counts {
+    display: flex;
+    align-items: center;
+    margin-right: -20px;
+  }
+
+  .awx-pagination__item-count {
+    margin-right: 20px;
+  }
+
+  .awx-pagination__page-count {
+    margin-left: -10px;
+    display: flex;
+    align-items: center;
+  }
+
+  .awx-pagination__page-input-form {
+    display: flex;
+    align-items: center;
+    margin: 0 10px;
+    white-space: nowrap;
+  }
+
+  .awx-pagination__page-input {
+    width: 35px;
+    margin: 0 10px;
+    font-weight: bold;
+  }
+
+  .awx-pagination__page-button {
     width: 55px;
-    height: 30px;
+    height: 55px;
-    padding-left: 10px;
+  }
-    padding-right: 10px;
-    margin: 0px;
-    margin-right: 10px;
-    text-align: left;
 
-    .pf-c-dropdown__toggle-icon {
+  .pf-c-input-group .awx-pagination__page-button,
-        margin: 0px;
+  .pf-c-input-group .awx-pagination__page-button:after {
-        margin-top: 2px;
+    border: 0;
-        padding: 0px;
+    border-radius: 0;
-        float: right;
+  }
-      }
+
+  .pf-c-input-group .pf-c-button {
+    border-left: 1px solid var(--awx-pagination--BorderColor);
+  }
+  
+  .pf-c-input-group {
+    height: 56px;
+  }
+
+  .pf-c-input-group.pf-m-previous {
+    border-right: 1px solid var(--awx-pagination--BorderColor);
+  }
+
+  .pf-c-input-group .pf-c-button.pf-m-disabled {
+    border: 1px solid var(--awx-pagination--BorderColor);
+    background-color: var(--awx-pagination--disabled-BackgroundColor);
+    color: var(--awx-pagination--disabled-Color);
+  }
+
+  .pf-c-input-group.pf-m-previous .pf-c-button.pf-m-disabled {
+    border-right: 0;
   }
 }

src/pages/Organizations/screens/OrganizationsList.jsx

@@ -8,6 +8,7 @@ import {
 import { I18n, i18nMark } from '@lingui/react';
 import { t } from '@lingui/macro';
 import {
+  Card,
   PageSection,
   PageSectionVariants,
 } from '@patternfly/react-core';
@@ -195,6 +196,7 @@ class OrganizationsList extends Component {
     return (
       <Fragment>
         <PageSection variant={medium}>
+          <Card>
             <DataListToolbar
               addUrl={`${match.url}/add`}
               isAllSelected={selected.length === results.length}
@@ -235,6 +237,7 @@ class OrganizationsList extends Component {
             />
             { loading ? <div>loading...</div> : '' }
             { error ? <div>error</div> : '' }
+          </Card>
         </PageSection>
       </Fragment>
     );