fix: feedback

scaleway · Dec 11, 2024 · 85f0a9c · 85f0a9c
1 parent 2bda2f8
commit 85f0a9c
Show file tree

Hide file tree

Showing 7 changed files with 1,379 additions and 214 deletions.
diff --git a/packages/ui/src/components/Pagination/PaginationButtons.tsx b/packages/ui/src/components/Pagination/PaginationButtons.tsx
@@ -1,32 +1,27 @@
 import styled from '@emotion/styled'
 import { useCallback, useMemo } from 'react'
 import { Button } from '../Button'
+import { Stack } from '../Stack'
 import { Text } from '../Text'
 import { getPageNumbers } from './getPageNumbers'
 
-const PageNumbersContainer = styled.div`
-  display: flex;
-  gap: ${({ theme }) => theme.space['1']};
+const PageNumbersContainer = styled(Stack)`
   margin: 0 ${({ theme }) => theme.space['1']};
 `
 
-const PageSwitchContainer = styled.div`
-  display: flex;
-  gap: ${({ theme }) => theme.space['1']};
+const PageButton = styled(Button, {
+  shouldForwardProp: prop => !['width'].includes(prop),
+})<{ width: string }>`
+  width: ${({ theme, width }) => (width === 'small' ? theme.sizing[400] : theme.sizing[500])};
 `
 
-const StyledContainer = styled.div`
-  display: flex;
-`
-const PageButton = styled(Button)`
-  width: ${({ theme }) => theme.sizing[600]};
-`
-
-const Ellipsis = styled(Text)`
+const Ellipsis = styled(Text, {
+  shouldForwardProp: prop => !['width'].includes(prop),
+})<{ size: string }>`
   align-content: center;
   padding: ${({ theme }) => theme.space[1]};
-  height: ${({ theme }) => theme.sizing[600]};
-  width: ${({ theme }) => theme.sizing[600]};
+  height: ${({ theme, size }) => (size === 'small' ? theme.sizing[400] : theme.sizing[500])};
+  width: ${({ theme, size }) => (size === 'small' ? theme.sizing[400] : theme.sizing[500])};
 `
 
 type PaginationButtonsProps = {
@@ -37,6 +32,7 @@ type PaginationButtonsProps = {
   pageTabCount?: number
   className?: string
   'data-testid'?: string
+  perPage: boolean
 }
 
 type MakeButtonProps = {
@@ -45,13 +41,15 @@ type MakeButtonProps = {
   disabled?: boolean
   page: number
   handlePageClick: (pageNumber: number) => () => void
+  perPage: boolean
 }
 const MakeButton = ({
   hasEllipsisBefore,
   pageNumber,
   disabled,
   page,
   handlePageClick,
+  perPage,
 }: MakeButtonProps) => (
   <>
     {hasEllipsisBefore ? (
@@ -63,6 +61,7 @@ const MakeButton = ({
         prominence="default"
         as="span"
         placement="center"
+        size={perPage ? 'small' : 'medium'}
       >
         ...
       </Ellipsis>
@@ -74,6 +73,8 @@ const MakeButton = ({
       sentiment={pageNumber === page ? 'primary' : 'neutral'}
       onClick={handlePageClick(pageNumber)}
       type="button"
+      size={perPage ? 'small' : 'medium'}
+      width={perPage ? 'small' : 'medium'}
     >
       {pageNumber}
     </PageButton>
@@ -88,6 +89,7 @@ export const PaginationButtons = ({
   pageTabCount,
   'data-testid': dataTestId,
   className,
+  perPage,
 }: PaginationButtonsProps) => {
   const goToNextPage = useCallback(() => {
     onChange(page + 1)
@@ -110,18 +112,19 @@ export const PaginationButtons = ({
   )
 
   return (
-    <StyledContainer className={className} data-testid={dataTestId}>
-      <PageSwitchContainer>
+    <Stack className={className} data-testid={dataTestId} direction="row">
+      <Stack gap={1}>
         <Button
           aria-label="Back"
           disabled={page <= 1 || disabled}
           variant="outlined"
           sentiment="primary"
           onClick={goToPreviousPage}
           icon="arrow-left"
+          size={perPage ? 'small' : 'medium'}
         />
-      </PageSwitchContainer>
-      <PageNumbersContainer>
+      </Stack>
+      <PageNumbersContainer direction="row" gap={1}>
         {pageNumbersToDisplay.map((pageNumber, index) => (
           <MakeButton
             hasEllipsisBefore={
@@ -135,19 +138,21 @@ export const PaginationButtons = ({
             handlePageClick={handlePageClick}
             disabled={disabled}
             key={pageNumber}
+            perPage={perPage}
           />
         ))}
       </PageNumbersContainer>
-      <PageSwitchContainer>
+      <Stack gap={1}>
         <Button
           aria-label="Next"
           disabled={page >= pageCount || disabled}
           variant="outlined"
           sentiment="primary"
           onClick={goToNextPage}
           icon="arrow-right"
+          size={perPage ? 'small' : 'medium'}
         />
-      </PageSwitchContainer>
-    </StyledContainer>
+      </Stack>
+    </Stack>
   )
 }
diff --git a/packages/ui/src/components/Pagination/PerPage.tsx b/packages/ui/src/components/Pagination/PerPage.tsx
@@ -63,6 +63,7 @@ export const PerPage = ({
         options={optionsItemsPerPage}
         onChange={handleChange}
         name="select-items-per-page"
+        size="small"
       />
       <Text as="span" variant="body" sentiment="neutral" prominence="weak">
         {(page - 1) * perPage + 1}-{Math.min(page * perPage, numberOfItems)}{' '}

diff --git a/packages/ui/src/components/Pagination/__stories__/PerPage.stories.tsx b/packages/ui/src/components/Pagination/__stories__/PerPage.stories.tsx
@@ -7,7 +7,7 @@ import { Stack } from '../../Stack'
 
 const NUMBER_OF_ITEMS = 134
 const StyledList = styled.ul`
-  height: 210px;
+  height: 13.5rem;
   overflow-y: auto;
   border: ${({ theme }) => theme.colors.neutral.border} 1px solid;
   padding: ${({ theme }) => theme.space[1]};