Merge pull request #2221 from teamleadercrm/FRAF-633-Improvements-Pag…

…ination-component

Improvements pagination component

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Changed
 
+- `Pagination`: always show arrows ([@qubis741](https://github.com/qubis741)) in [#2221](https://github.com/teamleadercrm/ui/pull/2221))
+
 ### Deprecated
 
 ### Removed

src/components/pagination/Pagination.js

@@ -45,16 +45,14 @@ class Pagination extends PureComponent {
     return (
       <Box data-teamleader-ui="pagination" className={classNames} element="nav" {...others}>
         <ul className={theme['list']}>
-          {currentPage > 1 && (
-            <li className={theme['list-item']}>
-              {children({
-                number: currentPage - 1,
-                isActive: false,
-                icon: <IconChevronLeftMediumOutline />,
-                iconPlacement: 'left',
-              })}
-            </li>
-          )}
+          <li className={cx(theme['list-item'], theme['list-item__arrowed'])}>
+            {children({
+              number: currentPage - 1,
+              isActive: currentPage === 1,
+              icon: <IconChevronLeftMediumOutline />,
+              iconPlacement: 'left',
+            })}
+          </li>
           {iterator.map((page) => {
             const isActive = page === currentPage;
 
@@ -75,16 +73,14 @@ class Pagination extends PureComponent {
               </li>
             );
           })}
-          {currentPage < numPages && (
-            <li className={theme['list-item']}>
-              {children({
-                number: currentPage + 1,
-                isActive: false,
-                icon: <IconChevronRightMediumOutline />,
-                iconPlacement: 'right',
-              })}
-            </li>
-          )}
+          <li className={cx(theme['list-item'], theme['list-item__arrowed'])}>
+            {children({
+              number: currentPage + 1,
+              isActive: currentPage === numPages,
+              icon: <IconChevronRightMediumOutline />,
+              iconPlacement: 'right',
+            })}
+          </li>
         </ul>
       </Box>
     );

src/components/pagination/pagination.stories.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { addStoryInGroup, MID_LEVEL_BLOCKS } from '../../../.storybook/utils';
 import { Pagination, Button } from '../../index';
 
@@ -7,13 +7,25 @@ export default {
   title: addStoryInGroup(MID_LEVEL_BLOCKS, 'Pagination'),
 };
 
-export const DefaultStory = (args) => (
-  <Pagination {...args}>
-    {({ number, text, isActive, ...others }) => {
-      return <Button level="link" label={text} disabled={isActive} size="small" {...others} />;
-    }}
-  </Pagination>
-);
+export const DefaultStory = (args) => {
+  const [page, setPage] = useState(1);
+  return (
+    <Pagination {...args} currentPage={page}>
+      {({ number, text, isActive, ...others }) => {
+        return (
+          <Button
+            level="link"
+            label={text}
+            disabled={isActive}
+            size="small"
+            {...others}
+            onClick={() => setPage(number)}
+          />
+        );
+      }}
+    </Pagination>
+  );
+};
 
 DefaultStory.args = {
   currentPage: 3,

src/components/pagination/theme.css

@@ -27,10 +27,18 @@
 
 .list-item {
   margin: 0 var(--spacer-smallest);
-
+  min-width: 36px;
+  display: flex;
   > * {
     transition: none;
     text-decoration: none;
+    flex: 1;
+    padding: 0!important;
+  }
+
+  &__arrowed {
+    width: 30px;
+    min-width: 0;
   }
 }