@bitrise/bitkit 13.220.0 → 13.222.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.220.0",
+  "version": "13.222.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Button/Button.tsx

@@ -6,7 +6,7 @@ export interface ButtonProps extends ChakraButtonProps {
   disabled?: never;
   isDanger?: boolean;
   leftIconName?: TypeIconName;
-  rightIconName?: 'ArrowRight' | 'ChevronDown' | 'ChevronUp' | 'SelectChevron' | 'OpenInBrowser' | 'ArrowNorthEast';
+  rightIconName?: TypeIconName;
   size?: 'sm' | 'md' | 'lg';
   variant?: 'primary' | 'secondary' | 'tertiary' | 'danger-primary' | 'danger-secondary' | 'danger-tertiary';
 }

package/src/Components/Pagination/Pagination.tsx

@@ -4,7 +4,7 @@ import Divider from '../Divider/Divider';
 import Dropdown from '../Dropdown/Dropdown';
 import { DropdownOption } from '../Dropdown/DropdownOption';
 import IconButton from '../IconButton/IconButton';
-import Text from '../Text/Text';
+import Text, { TextProps } from '../Text/Text';
 
 const defaultItemsPerPageOptions = [10, 20, 50];
 
@@ -15,6 +15,7 @@ export type PaginationProps = {
   setPage: (newPage: number) => void;
   itemsPerPageOptions?: number[];
   setPerPage?: (newPerPage: number) => void;
+  variant: 'page' | 'table' | 'card';
 };
 
 const Pagination = ({
@@ -24,17 +25,27 @@ const Pagination = ({
   setPage,
   setPerPage,
   totalCount,
+  variant = 'page',
 }: PaginationProps) => {
   const pageCount = totalCount && Math.ceil(totalCount / perPage);
   const itemsStartIndex = (page - 1) * perPage + 1;
   const itemsEndIndex = Math.min(page * perPage, totalCount);
 
+  let textColor: TextProps['color'] = 'text/body';
+  if (variant === 'table') {
+    textColor = 'text/secondary';
+  } else if (variant === 'card') {
+    textColor = 'text/tertiary';
+  }
+
   return (
     <Box alignItems="center" display="flex" gap="1rem">
       {setPerPage && (
         <>
           <Box alignItems="center" display="flex" gap="0.5rem">
-            <Text textStyle="body/md/regular">Items per page:</Text>
+            <Text color={textColor} textStyle="body/md/regular">
+              Items per page:
+            </Text>
             <Dropdown
               onChange={({ target }) => setPerPage(Number(target.value))}
               search={false}
@@ -52,7 +63,7 @@ const Pagination = ({
           <Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
         </>
       )}
-      <Text as="span" marginRight="auto" textStyle="body/md/regular">
+      <Text as="span" color={textColor} marginRight="auto" textStyle="body/md/regular">
         {itemsStartIndex}-{itemsEndIndex} of {totalCount} items
       </Text>
       <Divider color="pal.neutral.90" height="3rem" orientation="vertical" />
@@ -74,7 +85,7 @@ const Pagination = ({
             );
           })}
         </Dropdown>
-        <Text as="span" textStyle="body/md/regular">
+        <Text as="span" color={textColor} textStyle="body/md/regular">
           of {pageCount} pages
         </Text>
       </Box>

package/src/Components/Table/TablePagination.tsx

@@ -3,14 +3,14 @@ import Pagination, { PaginationProps } from '../Pagination/Pagination';
 import Td from './Td';
 import Tr from './Tr';
 
-export type TablePaginationProps = PaginationProps & { colSpan: number };
+export type TablePaginationProps = Omit<PaginationProps, 'variant'> & { colSpan: number };
 
 const TablePagination = ({ colSpan, ...paginationProps }: TablePaginationProps): JSX.Element => {
   return (
     <Tfoot>
       <Tr>
         <Td colSpan={colSpan}>
-          <Pagination {...paginationProps} />
+          <Pagination {...paginationProps} variant="table" />
         </Td>
       </Tr>
     </Tfoot>