From 927c0f530a0ed5c5cdbd2c3d18ef8bbc87c64bba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Tue, 26 Jul 2022 14:13:35 +0200
Subject: [PATCH 1/2] chore(Pagination) convert examples to TypeScript

---
 .../components/Pagination/examples/Bottom.tsx |  33 ++
 .../Pagination/examples/Compact.tsx           |  33 ++
 .../Pagination/examples/Disabled.tsx          |  33 ++
 .../Pagination/examples/Indeterminate.tsx     |  39 ++
 .../Pagination/examples/NoItems.tsx           |  32 ++
 .../Pagination/examples/OnePage.tsx           |  32 ++
 .../Pagination/examples/Pagination.md         | 363 +-----------------
 .../components/Pagination/examples/Sticky.tsx |  81 ++++
 .../components/Pagination/examples/Top.tsx    |  32 ++
 9 files changed, 323 insertions(+), 355 deletions(-)
 create mode 100644 packages/react-core/src/components/Pagination/examples/Bottom.tsx
 create mode 100644 packages/react-core/src/components/Pagination/examples/Compact.tsx
 create mode 100644 packages/react-core/src/components/Pagination/examples/Disabled.tsx
 create mode 100644 packages/react-core/src/components/Pagination/examples/Indeterminate.tsx
 create mode 100644 packages/react-core/src/components/Pagination/examples/NoItems.tsx
 create mode 100644 packages/react-core/src/components/Pagination/examples/OnePage.tsx
 create mode 100644 packages/react-core/src/components/Pagination/examples/Sticky.tsx
 create mode 100644 packages/react-core/src/components/Pagination/examples/Top.tsx

diff --git a/packages/react-core/src/components/Pagination/examples/Bottom.tsx b/packages/react-core/src/components/Pagination/examples/Bottom.tsx
new file mode 100644
index 00000000000..051c1cfa19b
--- /dev/null
+++ b/packages/react-core/src/components/Pagination/examples/Bottom.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Pagination, PaginationVariant } from '@patternfly/react-core';
+
+export const PaginationBottom: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(10);
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  return (
+    <Pagination
+      perPageComponent="button"
+      itemCount={333}
+      widgetId="pagination-options-menu-bottom"
+      perPage={perPage}
+      page={page}
+      variant={PaginationVariant.bottom}
+      onSetPage={onSetPage}
+      onPerPageSelect={onPerPageSelect}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/Pagination/examples/Compact.tsx b/packages/react-core/src/components/Pagination/examples/Compact.tsx
new file mode 100644
index 00000000000..e71ba1ee4cd
--- /dev/null
+++ b/packages/react-core/src/components/Pagination/examples/Compact.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationTop: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  return (
+    <Pagination
+      perPageComponent="button"
+      itemCount={523}
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      widgetId="pagination-options-menu-top"
+      onPerPageSelect={onPerPageSelect}
+      isCompact
+    />
+  );
+};
diff --git a/packages/react-core/src/components/Pagination/examples/Disabled.tsx b/packages/react-core/src/components/Pagination/examples/Disabled.tsx
new file mode 100644
index 00000000000..a105a8d2d98
--- /dev/null
+++ b/packages/react-core/src/components/Pagination/examples/Disabled.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationDisabled: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  return (
+    <Pagination
+      perPageComponent="button"
+      itemCount={523}
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      widgetId="pagination-options-menu-top"
+      onPerPageSelect={onPerPageSelect}
+      isDisabled
+    />
+  );
+};
diff --git a/packages/react-core/src/components/Pagination/examples/Indeterminate.tsx b/packages/react-core/src/components/Pagination/examples/Indeterminate.tsx
new file mode 100644
index 00000000000..86a9ef50783
--- /dev/null
+++ b/packages/react-core/src/components/Pagination/examples/Indeterminate.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationIndeterminate: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  return (
+    <Pagination
+      perPageComponent="button"
+      toggleTemplate={({ firstIndex, lastIndex }) => (
+        <React.Fragment>
+          <b>
+            {firstIndex} - {lastIndex}
+          </b>
+          of
+          <b>many</b>
+        </React.Fragment>
+      )}
+      widgetId="pagination-indeterminate"
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      onPerPageSelect={onPerPageSelect}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/Pagination/examples/NoItems.tsx b/packages/react-core/src/components/Pagination/examples/NoItems.tsx
new file mode 100644
index 00000000000..93b55045a7a
--- /dev/null
+++ b/packages/react-core/src/components/Pagination/examples/NoItems.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationTop: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  return (
+    <Pagination
+      perPageComponent="button"
+      itemCount={0}
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      widgetId="pagination-options-menu-top"
+      onPerPageSelect={onPerPageSelect}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/Pagination/examples/OnePage.tsx b/packages/react-core/src/components/Pagination/examples/OnePage.tsx
new file mode 100644
index 00000000000..f97b5205b01
--- /dev/null
+++ b/packages/react-core/src/components/Pagination/examples/OnePage.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationTop: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  return (
+    <Pagination
+      perPageComponent="button"
+      itemCount={15}
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      widgetId="pagination-options-menu-top"
+      onPerPageSelect={onPerPageSelect}
+    />
+  );
+};
diff --git a/packages/react-core/src/components/Pagination/examples/Pagination.md b/packages/react-core/src/components/Pagination/examples/Pagination.md
index e64119588b6..6ab0a3d6826 100644
--- a/packages/react-core/src/components/Pagination/examples/Pagination.md
+++ b/packages/react-core/src/components/Pagination/examples/Pagination.md
@@ -10,389 +10,42 @@ ouia: true
 
 ### Top
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationTop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={523}
-        perPage={this.state.perPage}
-        page={this.state.page}
-        onSetPage={this.onSetPage}
-        widgetId="pagination-options-menu-top"
-        onPerPageSelect={this.onPerPageSelect}
-      />
-    );
-  }
-}
+```ts file="./Top.tsx"
 ```
 
 ### Bottom
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationBottom extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1
-    };
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={333}
-        widgetId="pagination-options-menu-bottom"
-        perPage={this.state.perPage}
-        page={this.state.page}
-        variant={PaginationVariant.bottom}
-        onSetPage={this.onSetPage}
-        onPerPageSelect={this.onPerPageSelect}
-      />
-    );
-  }
-}
+```ts file="./Bottom.tsx"
 ```
 
 ### Indeterminate
 
 By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
 
-```js
-import React from 'react';
-import { Pagination } from '@patternfly/react-core';
-
-PaginationIndeterminate = () => {
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(20);
-
-  const onSetPage = (_event, pageNumber) => setPage(pageNumber);
-  const onPerPageSelect = (_event, perPage) => setPerPage(perPage);
-
-  return (
-    <Pagination
-      perPageComponent="button"
-      toggleTemplate={({ firstIndex, lastIndex }) => (
-        <React.Fragment>
-          <b>
-            {firstIndex} - {lastIndex}
-          </b>
-          of
-          <b>many</b>
-        </React.Fragment>
-      )}
-      widgetId="pagination-indeterminate"
-      perPage={perPage}
-      page={page}
-      onSetPage={onSetPage}
-      onPerPageSelect={onPerPageSelect}
-    />
-  );
-};
+```ts file="./Indeterminate.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationDisabled extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={523}
-        perPage={this.state.perPage}
-        page={this.state.page}
-        onSetPage={this.onSetPage}
-        widgetId="pagination-options-menu-top"
-        onPerPageSelect={this.onPerPageSelect}
-        isDisabled
-      />
-    );
-  }
-}
+```ts file="./Disabled.tsx"
 ```
 
 ### No items
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationTop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={0}
-        perPage={this.state.perPage}
-        page={this.state.page}
-        onSetPage={this.onSetPage}
-        widgetId="pagination-options-menu-top"
-        onPerPageSelect={this.onPerPageSelect}
-      />
-    );
-  }
-}
+```ts file="./NoItems.tsx"
 ```
 
 ### One page
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationTop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={15}
-        perPage={this.state.perPage}
-        page={this.state.page}
-        onSetPage={this.onSetPage}
-        widgetId="pagination-options-menu-top"
-        onPerPageSelect={this.onPerPageSelect}
-      />
-    );
-  }
-}
+```ts file="./OnePage.tsx"
 ```
 
 ### Compact
 
-```js
-import React from 'react';
-import { Pagination, PaginationVariant } from '@patternfly/react-core';
-
-class PaginationTop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <Pagination
-        perPageComponent="button"
-        itemCount={523}
-        perPage={this.state.perPage}
-        page={this.state.page}
-        onSetPage={this.onSetPage}
-        widgetId="pagination-options-menu-top"
-        onPerPageSelect={this.onPerPageSelect}
-        isCompact
-      />
-    );
-  }
-}
+```ts file="./Compact.tsx"
 ```
 
 ### Sticky
 
-```js isFullscreen
-import React from 'react';
-import { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';
-
-class PaginationSticky extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      page: 1,
-      perPage: 20,
-      isTopSticky: true
-    };
-
-    this.onToggleSticky = () => {
-      this.setState({
-        isTopSticky: !this.state.isTopSticky
-      });
-    };
-
-    this.onSetPage = (_event, pageNumber) => {
-      this.setState({
-        page: pageNumber
-      });
-    };
-
-    this.onPerPageSelect = (_event, perPage, page) => {
-      this.setState({
-        page, perPage
-      });
-    };
-  }
-
-  render() {
-    return (
-      <div>
-        {this.state.isTopSticky && (
-          <React.Fragment>
-            <Pagination
-              perPageComponent="button"
-              itemCount={523}
-              perPage={this.state.perPage}
-              page={this.state.page}
-              onSetPage={this.onSetPage}
-              widgetId="pagination-options-menu-top"
-              onPerPageSelect={this.onPerPageSelect}
-              isSticky
-            >
-              <button onClick={this.onToggleSticky}>Toggle to bottom position</button>
-            </Pagination>
-            <Gallery hasGutter>
-              {Array.apply(0, Array(40)).map((x, i) => (
-                <GalleryItem key={i}>
-                  <Card>
-                    <CardBody>This is a card</CardBody>
-                  </Card>
-                </GalleryItem>
-              ))}
-            </Gallery>
-          </React.Fragment>
-        )}
-        {!this.state.isTopSticky && (
-          <React.Fragment>
-            <Gallery hasGutter>
-              {Array.apply(0, Array(40)).map((x, i) => (
-                <GalleryItem key={i}>
-                  <Card>
-                    <CardBody>This is a card</CardBody>
-                  </Card>
-                </GalleryItem>
-              ))}
-            </Gallery>
-            <Pagination
-              perPageComponent="button"
-              itemCount={523}
-              perPage={this.state.perPage}
-              page={this.state.page}
-              onSetPage={this.onSetPage}
-              widgetId="pagination-options-menu-top"
-              onPerPageSelect={this.onPerPageSelect}
-              isSticky
-              variant={PaginationVariant.bottom}
-            >
-              <button onClick={this.onToggleSticky}>Toggle to top position</button>
-            </Pagination>
-          </React.Fragment>
-        )}
-      </div>
-    );
-  }
-}
+```ts isFullscreen file="./Sticky.tsx"
 ```
diff --git a/packages/react-core/src/components/Pagination/examples/Sticky.tsx b/packages/react-core/src/components/Pagination/examples/Sticky.tsx
new file mode 100644
index 00000000000..45affd06b1d
--- /dev/null
+++ b/packages/react-core/src/components/Pagination/examples/Sticky.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';
+
+export const PaginationSticky: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+  const [isTopSticky, setIsTopSticky] = React.useState(true);
+
+  const onToggleSticky = () => {
+    setIsTopSticky(prev => !prev);
+  };
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  return (
+    <div>
+      {isTopSticky && (
+        <React.Fragment>
+          <Pagination
+            perPageComponent="button"
+            itemCount={523}
+            perPage={perPage}
+            page={page}
+            onSetPage={onSetPage}
+            widgetId="pagination-options-menu-top"
+            onPerPageSelect={onPerPageSelect}
+            isSticky
+          >
+            <button onClick={onToggleSticky}>Toggle to bottom position</button>
+          </Pagination>
+          <Gallery hasGutter>
+            {Array.apply(0, Array(40)).map((x, i) => (
+              <GalleryItem key={i}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </React.Fragment>
+      )}
+      {!isTopSticky && (
+        <React.Fragment>
+          <Gallery hasGutter>
+            {Array.apply(0, Array(40)).map((x, i) => (
+              <GalleryItem key={i}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+          <Pagination
+            perPageComponent="button"
+            itemCount={523}
+            perPage={perPage}
+            page={page}
+            onSetPage={onSetPage}
+            widgetId="pagination-options-menu-top"
+            onPerPageSelect={onPerPageSelect}
+            isSticky
+            variant={PaginationVariant.bottom}
+          >
+            <button onClick={onToggleSticky}>Toggle to top position</button>
+          </Pagination>
+        </React.Fragment>
+      )}
+    </div>
+  );
+};
diff --git a/packages/react-core/src/components/Pagination/examples/Top.tsx b/packages/react-core/src/components/Pagination/examples/Top.tsx
new file mode 100644
index 00000000000..fdd3c7891d3
--- /dev/null
+++ b/packages/react-core/src/components/Pagination/examples/Top.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Pagination } from '@patternfly/react-core';
+
+export const PaginationTop: React.FunctionComponent = () => {
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(20);
+
+  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
+    newPerPage: number,
+    newPage: number
+  ) => {
+    setPerPage(newPerPage);
+    setPage(newPage);
+  };
+
+  return (
+    <Pagination
+      perPageComponent="button"
+      itemCount={523}
+      perPage={perPage}
+      page={page}
+      onSetPage={onSetPage}
+      widgetId="pagination-options-menu-top"
+      onPerPageSelect={onPerPageSelect}
+    />
+  );
+};

From af05ff8bf0893c45bbdf07a1f0197c3e2613a087 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Thu, 28 Jul 2022 10:28:57 +0200
Subject: [PATCH 2/2] chore(Pagination) fix filenames, formatting

---
 .../components/Pagination/examples/Pagination.md | 16 ++++++++--------
 .../{Bottom.tsx => PaginationBottom.tsx}         |  0
 .../{Compact.tsx => PaginationCompact.tsx}       |  2 +-
 .../{Disabled.tsx => PaginationDisabled.tsx}     |  0
 ...terminate.tsx => PaginationIndeterminate.tsx} |  1 +
 .../{NoItems.tsx => PaginationNoItems.tsx}       |  2 +-
 .../{OnePage.tsx => PaginationOnePage.tsx}       |  2 +-
 .../{Sticky.tsx => PaginationSticky.tsx}         |  0
 .../examples/{Top.tsx => PaginationTop.tsx}      |  0
 9 files changed, 12 insertions(+), 11 deletions(-)
 rename packages/react-core/src/components/Pagination/examples/{Bottom.tsx => PaginationBottom.tsx} (100%)
 rename packages/react-core/src/components/Pagination/examples/{Compact.tsx => PaginationCompact.tsx} (92%)
 rename packages/react-core/src/components/Pagination/examples/{Disabled.tsx => PaginationDisabled.tsx} (100%)
 rename packages/react-core/src/components/Pagination/examples/{Indeterminate.tsx => PaginationIndeterminate.tsx} (99%)
 rename packages/react-core/src/components/Pagination/examples/{NoItems.tsx => PaginationNoItems.tsx} (92%)
 rename packages/react-core/src/components/Pagination/examples/{OnePage.tsx => PaginationOnePage.tsx} (92%)
 rename packages/react-core/src/components/Pagination/examples/{Sticky.tsx => PaginationSticky.tsx} (100%)
 rename packages/react-core/src/components/Pagination/examples/{Top.tsx => PaginationTop.tsx} (100%)

diff --git a/packages/react-core/src/components/Pagination/examples/Pagination.md b/packages/react-core/src/components/Pagination/examples/Pagination.md
index 6ab0a3d6826..c11bd37a2e4 100644
--- a/packages/react-core/src/components/Pagination/examples/Pagination.md
+++ b/packages/react-core/src/components/Pagination/examples/Pagination.md
@@ -10,42 +10,42 @@ ouia: true
 
 ### Top
 
-```ts file="./Top.tsx"
+```ts file="./PaginationTop.tsx"
 ```
 
 ### Bottom
 
-```ts file="./Bottom.tsx"
+```ts file="./PaginationBottom.tsx"
 ```
 
 ### Indeterminate
 
 By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
 
-```ts file="./Indeterminate.tsx"
+```ts file="./PaginationIndeterminate.tsx"
 ```
 
 ### Disabled
 
-```ts file="./Disabled.tsx"
+```ts file="./PaginationDisabled.tsx"
 ```
 
 ### No items
 
-```ts file="./NoItems.tsx"
+```ts file="./PaginationNoItems.tsx"
 ```
 
 ### One page
 
-```ts file="./OnePage.tsx"
+```ts file="./PaginationOnePage.tsx"
 ```
 
 ### Compact
 
-```ts file="./Compact.tsx"
+```ts file="./PaginationCompact.tsx"
 ```
 
 ### Sticky
 
-```ts isFullscreen file="./Sticky.tsx"
+```ts isFullscreen file="./PaginationSticky.tsx"
 ```
diff --git a/packages/react-core/src/components/Pagination/examples/Bottom.tsx b/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx
similarity index 100%
rename from packages/react-core/src/components/Pagination/examples/Bottom.tsx
rename to packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx
diff --git a/packages/react-core/src/components/Pagination/examples/Compact.tsx b/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx
similarity index 92%
rename from packages/react-core/src/components/Pagination/examples/Compact.tsx
rename to packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx
index e71ba1ee4cd..7d28387b425 100644
--- a/packages/react-core/src/components/Pagination/examples/Compact.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Pagination } from '@patternfly/react-core';
 
-export const PaginationTop: React.FunctionComponent = () => {
+export const PaginationCompact: React.FunctionComponent = () => {
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(20);
 
diff --git a/packages/react-core/src/components/Pagination/examples/Disabled.tsx b/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx
similarity index 100%
rename from packages/react-core/src/components/Pagination/examples/Disabled.tsx
rename to packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx
diff --git a/packages/react-core/src/components/Pagination/examples/Indeterminate.tsx b/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx
similarity index 99%
rename from packages/react-core/src/components/Pagination/examples/Indeterminate.tsx
rename to packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx
index 86a9ef50783..6b26fd0ac0d 100644
--- a/packages/react-core/src/components/Pagination/examples/Indeterminate.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx
@@ -8,6 +8,7 @@ export const PaginationIndeterminate: React.FunctionComponent = () => {
   const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
   };
+
   const onPerPageSelect = (
     _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,
     newPerPage: number,
diff --git a/packages/react-core/src/components/Pagination/examples/NoItems.tsx b/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx
similarity index 92%
rename from packages/react-core/src/components/Pagination/examples/NoItems.tsx
rename to packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx
index 93b55045a7a..0b4fa6f94c8 100644
--- a/packages/react-core/src/components/Pagination/examples/NoItems.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Pagination } from '@patternfly/react-core';
 
-export const PaginationTop: React.FunctionComponent = () => {
+export const PaginationNoItems: React.FunctionComponent = () => {
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(20);
 
diff --git a/packages/react-core/src/components/Pagination/examples/OnePage.tsx b/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx
similarity index 92%
rename from packages/react-core/src/components/Pagination/examples/OnePage.tsx
rename to packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx
index f97b5205b01..ed8d11569e8 100644
--- a/packages/react-core/src/components/Pagination/examples/OnePage.tsx
+++ b/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Pagination } from '@patternfly/react-core';
 
-export const PaginationTop: React.FunctionComponent = () => {
+export const PaginationOnePage: React.FunctionComponent = () => {
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(20);
 
diff --git a/packages/react-core/src/components/Pagination/examples/Sticky.tsx b/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx
similarity index 100%
rename from packages/react-core/src/components/Pagination/examples/Sticky.tsx
rename to packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx
diff --git a/packages/react-core/src/components/Pagination/examples/Top.tsx b/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx
similarity index 100%
rename from packages/react-core/src/components/Pagination/examples/Top.tsx
rename to packages/react-core/src/components/Pagination/examples/PaginationTop.tsx