feat(PF4: Pagination): When empty array sent to pagination no per pag…

…e should be visible (#2175)
patternfly · Jun 7, 2019 · cb97dfd · cb97dfd
1 parent 0bebc18
commit cb97dfd
Show file tree

Hide file tree

Showing 4 changed files with 419 additions and 17 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js b/packages/patternfly-4/react-core/src/components/Pagination/OptionsToggle.js
@@ -14,6 +14,7 @@ const OptionsToggle = ({
   widgetId,
   onToggle,
   isOpen,
+  showToggle,
   toggleTemplate: ToggleTemplate
 }) => (
   <div className={css(styles.optionsMenuToggle, getModifier(styles, 'plain'), getModifier(styles, 'text'))}>
@@ -24,18 +25,20 @@ const OptionsToggle = ({
         <ToggleTemplate firstIndex={firstIndex} lastIndex={lastIndex} itemCount={itemCount} itemsTitle={itemsTitle} />
       )}
     </span>
-    <button
-      className={css(styles.optionsMenuToggleButton)}
-      id={`${widgetId}-toggle`}
-      aria-haspopup="listbox"
-      aria-labelledby={`${widgetId}-toggle ${widgetId}-label`}
-      aria-label={optionsToggle}
-      aria-expanded={isOpen}
-      onClick={() => onToggle(!isOpen)}
-      type="button"
-    >
-      <CaretDownIcon />
-    </button>
+    {showToggle && (
+      <button
+        className={css(styles.optionsMenuToggleButton)}
+        id={`${widgetId}-toggle`}
+        aria-haspopup="listbox"
+        aria-labelledby={`${widgetId}-toggle ${widgetId}-label`}
+        aria-label={optionsToggle}
+        aria-expanded={isOpen}
+        onClick={() => onToggle(!isOpen)}
+        type="button"
+      >
+        <CaretDownIcon />
+      </button>
+    )}
   </div>
 );
 
@@ -48,6 +51,7 @@ OptionsToggle.propTypes = {
   widgetId: PropTypes.string,
   onToggle: PropTypes.func,
   isOpen: PropTypes.bool,
+  showToggle: PropTypes.bool,
   toggleTemplate: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
 };
 
@@ -60,6 +64,7 @@ OptionsToggle.defaultProps = {
   widgetId: '',
   onToggle: () => undefined,
   isOpen: false,
+  showToggle: true,
   toggleTemplate: ''
 };
 

diff --git a/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js b/packages/patternfly-4/react-core/src/components/Pagination/Pagination.test.js
@@ -28,6 +28,11 @@ describe('component render', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  test('empty per page options', () => {
+    const wrapper = mount(<Pagination itemCount={40} perPageOptions={[]} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
   test('no items', () => {
     const wrapper = mount(<Pagination itemCount={0} />);
     expect(wrapper).toMatchSnapshot();

diff --git a/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js b/packages/patternfly-4/react-core/src/components/Pagination/PaginationOptionsMenu.js
@@ -123,6 +123,7 @@ class PaginationOptionsMenu extends Component {
           toggle={
             <OptionsToggle
               optionsToggle={optionsToggle}
+              showToggle={perPageOptions && perPageOptions.length > 0}
               itemsTitle={itemsTitle}
               onToggle={this.onToggle}
               isOpen={this.state.isOpen}