diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.bfe7167fdaa29d6c6640740b36df8440.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.bfe7167fdaa29d6c6640740b36df8440.png deleted file mode 100644 index 8f4205469b..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.bfe7167fdaa29d6c6640740b36df8440.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.png deleted file mode 100644 index 8f4205469b..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.svg new file mode 100644 index 0000000000..50bf6c9952 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/compact-pagination.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-page.1fbe2116b67ec30172091e5c8a1d2c99.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-page.1fbe2116b67ec30172091e5c8a1d2c99.png deleted file mode 100644 index edec979c9b..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-page.1fbe2116b67ec30172091e5c8a1d2c99.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-page.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-page.png deleted file mode 100644 index edec979c9b..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-page.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-pagination.806443880103206b664aa5e0e22ea0c4.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-pagination.806443880103206b664aa5e0e22ea0c4.png deleted file mode 100644 index 1c9db53f4f..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-pagination.806443880103206b664aa5e0e22ea0c4.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-pagination.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-pagination.png deleted file mode 100644 index 1c9db53f4f..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/full-pagination.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/indeterminate-pagination.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/indeterminate-pagination.png deleted file mode 100644 index f79e380bf7..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/indeterminate-pagination.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/indeterminate-pagination.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/indeterminate-pagination.svg new file mode 100644 index 0000000000..5dc4822544 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/indeterminate-pagination.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/mobile-pagination.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/mobile-pagination.png deleted file mode 100644 index f1bc5492a3..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/mobile-pagination.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/mobile-pagination.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/mobile-pagination.svg new file mode 100644 index 0000000000..85fec1afe5 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/mobile-pagination.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/pagination-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/pagination-elements.svg new file mode 100644 index 0000000000..088e353f33 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/pagination-elements.svg @@ -0,0 +1,255 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/toolbar-pagination.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/toolbar-pagination.svg new file mode 100644 index 0000000000..ccef717a7a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/img/toolbar-pagination.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/pagination.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/pagination.md index b6353c011c..c2df88f7d8 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/pagination.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/pagination/pagination.md @@ -3,10 +3,14 @@ id: Pagination section: components --- +import '../components.css'; + ## Usage Add pagination above and below content views so that users can easily navigate as they read through listed items on a page. -Example of pagination on full page table +
+![a full page demo with a table and a pagination component within a toolbar.](./img/pagination-elements.svg) +
1. **Top pagination:** Always right-align pagination in the top toolbar, above content views. @@ -21,17 +25,21 @@ Use full pagination unless you're restricted to a narrow workspace, then use +
+![an example of a desktop pagination component within a toolbar.](./img/toolbar-pagination.svg) +
1. **Items in view:** Allows the user to select the item count (number of listed items) per page. 2. **Full pager:** Supplies all necessary pagination options including page-back and page-forward, page-first and page-last, and a manual option to type in a desired page number. -Mobile full pagination in toolbar +#### Mobile full pagination in toolbar -Example of pagination on mobile table view +
+![Example of pagination on mobile table view.](./img/mobile-pagination.svg) +
1. **Items in view:** At this screen size, the top toolbar only shows the item count to indicate items currently in view. It hides all other pagination controls. @@ -41,9 +49,11 @@ Mobile full pagination in toolbar Compact pagination fits more actions into top toolbars with limited space. Choose this compact variation when your top toolbar contains many items or looks overcrowded. As with full pagination, the compact variation condenses to an item count for mobile views. -Desktop compact pagination in toolbar +#### Desktop compact pagination in toolbar -Example of compact pagination +
+![Example of a compact pagination.](./img/compact-pagination.svg) +
1. **Items in view:** Allows the user to select the item count (number of listed items) per page, as seen in full pagination. @@ -53,6 +63,8 @@ Desktop compact pagination in toolbar Use indeterminate pagination if it’s difficult to calculate the total number of items or page count upfront. In these cases, you may use “many” instead of the usual page count that would appear. -Indeterminate pagination +
+![Example of a indeterminate pagination.](./img/indeterminate-pagination.svg) +
The text indicator provides the user with a control that displays indeterminate page count or items.