feat(Pagination): and PageSize support alwaysVisible - visible even when there are no pages to paginate (#2273)

* feat(Pagination): & PageSize now support alwaysVisible

Automatically keeps pagination visible even when there are no pages to paginate

* Minor updates to Pagination test text

* PageSize - if given a per page value > total, the value in the select === total

* chore: image-snapshot updates (#2275)

Co-authored-by: ElliotTheHuman <[email protected]>

* Added auto-disable behavior when all options > total

* Update snapshot

Co-authored-by: Elliot Park <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: ElliotTheHuman <[email protected]>

Author: 4 people

packages/components/src/PageSize/PageSize.story.tsx

@@ -0,0 +1,48 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import React, { useState } from 'react'
+import { Story } from '@storybook/react/types-6-0'
+import { PageSizeProps, PageSize } from '.'
+
+const Template: Story<PageSizeProps> = (args) => <PageSize {...args} />
+
+export const Basic = Template.bind({})
+Basic.args = {
+  onChange: (value: number) => alert(`You chose ${value} per page`),
+  total: 100,
+  value: 100,
+}
+
+export const AlwaysVisible = () => {
+  const [value, setValue] = useState(100)
+  return <PageSize alwaysVisible total={3} value={value} onChange={setValue} />
+}
+
+export default {
+  component: PageSize,
+  title: 'PageSize',
+}

packages/components/src/PageSize/PageSize.test.tsx

@@ -35,55 +35,82 @@ afterEach(() => {
   onChange.mockClear()
 })
 
-test('<PageSize/> with defaults', () => {
-  renderWithTheme(<PageSize value={10} total={1000} onChange={onChange} />)
-
-  const select = screen.getByDisplayValue('10')
-
-  fireEvent.click(select)
-
-  expect(screen.getByText('10')).toBeInTheDocument()
-  expect(screen.getByText('25')).toBeInTheDocument()
-  expect(screen.getByText('50')).toBeInTheDocument()
-  expect(screen.getByText('100')).toBeInTheDocument()
-
-  fireEvent.click(screen.getByText('50'))
-  expect(onChange).toHaveBeenCalledTimes(1)
-})
-
-test('<PageSize/> with custom options prop', () => {
-  renderWithTheme(
-    <PageSize
-      value={20}
-      total={1000}
-      options={[20, 40, 60]}
-      onChange={onChange}
-    />
-  )
-
-  const select = screen.getByDisplayValue('20')
-
-  fireEvent.click(select)
-
-  expect(screen.getByText('20')).toBeInTheDocument()
-  expect(screen.getByText('40')).toBeInTheDocument()
-  expect(screen.getByText('60')).toBeInTheDocument()
-
-  fireEvent.click(screen.getByText('40'))
-  expect(onChange).toHaveBeenCalledTimes(1)
-})
-
-test('<PageSize/> does not load when smallest option >= total', () => {
-  renderWithTheme(
-    <PageSize
-      value={100}
-      total={5}
-      options={[100, 200, 300]}
-      onChange={onChange}
-    />
-  )
-
-  expect(screen.queryByText('Display')).not.toBeInTheDocument()
-  expect(screen.queryByDisplayValue('100')).not.toBeInTheDocument()
-  expect(screen.queryByText('of 5')).not.toBeInTheDocument()
+describe('PageSize', () => {
+  test('defaults', () => {
+    renderWithTheme(<PageSize value={10} total={1000} onChange={onChange} />)
+
+    const select = screen.getByDisplayValue('10')
+    expect(screen.getByText('of 1000')).toBeInTheDocument()
+
+    fireEvent.click(select)
+
+    expect(screen.getByText('10')).toBeInTheDocument()
+    expect(screen.getByText('25')).toBeInTheDocument()
+    expect(screen.getByText('50')).toBeInTheDocument()
+    expect(screen.getByText('100')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('50'))
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  test('custom options prop', () => {
+    renderWithTheme(
+      <PageSize
+        value={20}
+        total={1000}
+        options={[20, 40, 60]}
+        onChange={onChange}
+      />
+    )
+
+    const select = screen.getByDisplayValue('20')
+    expect(screen.getByText('of 1000')).toBeInTheDocument()
+
+    fireEvent.click(select)
+
+    expect(screen.getByText('20')).toBeInTheDocument()
+    expect(screen.getByText('40')).toBeInTheDocument()
+    expect(screen.getByText('60')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText('40'))
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
+  test('does not load when smallest option >= total', () => {
+    renderWithTheme(
+      <PageSize
+        value={100}
+        total={5}
+        options={[100, 200, 300]}
+        onChange={jest.fn()}
+      />
+    )
+
+    expect(screen.queryByText('Display')).not.toBeInTheDocument()
+    expect(screen.queryByDisplayValue('100')).not.toBeInTheDocument()
+    expect(screen.queryByText('of 5')).not.toBeInTheDocument()
+  })
+
+  test('alwaysVisible', () => {
+    renderWithTheme(
+      <PageSize
+        value={100}
+        total={5}
+        options={[100, 200, 300]}
+        onChange={jest.fn()}
+        alwaysVisible
+      />
+    )
+
+    const select = screen.getByDisplayValue('5')
+    expect(select).toBeInTheDocument()
+    expect(screen.getByText('of 5')).toBeInTheDocument()
+
+    // This select should be auto-disabled since all options are greater than the total
+    fireEvent.click(select)
+
+    expect(screen.queryByText('100')).not.toBeInTheDocument()
+    expect(screen.queryByText('200')).not.toBeInTheDocument()
+    expect(screen.queryByText('300')).not.toBeInTheDocument()
+  })
 })

packages/components/src/PageSize/PageSize.tsx

@@ -48,6 +48,12 @@ export interface PageSizeProps {
    * Callback that triggers when new value is selected
    */
   onChange: (value: number) => void
+  /**
+   * If enabled controls will always be shown regardless of whether or not
+   * there are any additional pages to be displayed.
+   * @default false
+   */
+  alwaysVisible?: boolean
 }
 
 const defaultPageSizes = [10, 25, 50, 100]
@@ -61,6 +67,7 @@ const arrayToSelectOptions = (options: Array<string | number>) =>
   options.map((option) => stringToSelectOption(String(option)))
 
 export const PageSizeLayout: FC<PageSizeProps> = ({
+  alwaysVisible = false,
   value,
   total,
   className,
@@ -71,17 +78,20 @@ export const PageSizeLayout: FC<PageSizeProps> = ({
 
   const handleOnChange = (newValue: string) => onChange(Number(newValue))
 
-  return Math.min(...options) < total ? (
+  return alwaysVisible || Math.min(...options) < total ? (
     <div className={className}>
       {t('Display')}
       <Select
         width="5rem"
         mx="xsmall"
         options={arrayToSelectOptions(options)}
-        value={String(value)}
+        value={String(value > total ? total : value)}
         onChange={handleOnChange}
+        disabled={options.every((option) => option > total)}
       />
-      {t('of')} {total}
+      <span>
+        {t('of')} {total}
+      </span>
     </div>
   ) : null
 }