@bitrise/bitkit 13.69.0 → 13.71.0

package/package.json

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

package/src/Components/ControlButton/ControlButton.tsx

@@ -0,0 +1,35 @@
+import { forwardRef } from '@chakra-ui/react';
+import IconButton, { IconButtonProps } from '../IconButton/IconButton';
+
+export interface ControlButtonProps extends Omit<IconButtonProps, 'iconSize' | 'size' | 'variant'> {
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+}
+
+const colors: ControlButtonProps['sx'] = {
+  color: 'button/secondary/fg',
+  _hover: {
+    backgroundColor: 'button/tertiary/bg-hover',
+    color: 'button/secondary/fg-hover',
+  },
+  _active: {
+    backgroundColor: 'button/tertiary/bg-active',
+    color: 'button/secondary/fg-active',
+  },
+};
+
+const ControlButton = forwardRef<ControlButtonProps, 'button'>((props, ref) => {
+  const { isDanger, size = 'sm', ...rest } = props;
+  return (
+    <IconButton
+      iconSize={size === 'xs' ? '16' : '24'}
+      isDanger={isDanger}
+      ref={ref}
+      size={size === 'xs' ? 'sm' : size}
+      sx={!isDanger ? colors : undefined}
+      variant="tertiary"
+      {...rest}
+    />
+  );
+});
+
+export default ControlButton;

package/src/Components/Table/Tr.tsx

@@ -8,8 +8,8 @@ import {
   useTableStyles,
 } from '@chakra-ui/react';
 import Box from '../Box/Box';
+import ControlButton from '../ControlButton/ControlButton';
 import Td from './Td';
-import TableIconButton from './TableIconButton';
 
 export type RowProps = ChakraTableRowProps;
 
@@ -49,7 +49,7 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
       <>
         <ChakraTr {...properties} ref={ref}>
           <Td sx={css.expandTd}>
-            <TableIconButton
+            <ControlButton
               aria-label={isOpen ? 'Collapse row' : 'Expand row'}
               iconName="ChevronDown"
               isTooltipDisabled

package/src/index.ts

@@ -294,9 +294,6 @@ export { default as LinkBox } from './Components/LinkBox/LinkBox';
 export type { LinkOverlayProps } from './Components/LinkOverlay/LinkOverlay';
 export { default as LinkOverlay } from './Components/LinkOverlay/LinkOverlay';
 
-export type { TableIconButtonProps } from './Components/Table/TableIconButton';
-export { default as TableIconButton } from './Components/Table/TableIconButton';
-
 export type { ExpandableCardProps } from './Components/ExpandableCard/ExpandableCard';
 export { default as ExpandableCard } from './Components/ExpandableCard/ExpandableCard';
 
@@ -329,3 +326,6 @@ export { default as TagsInput } from './Components/Form/TagsInput/TagsInput';
 
 export type { DraggableCardProps } from './Components/DraggableCard/DraggableCard';
 export { default as DraggableCard } from './Components/DraggableCard/DraggableCard';
+
+export type { ControlButtonProps } from './Components/ControlButton/ControlButton';
+export { default as ControlButton } from './Components/ControlButton/ControlButton';

package/src/Components/Table/TableIconButton.tsx

@@ -1,27 +0,0 @@
-import { forwardRef } from '@chakra-ui/react';
-import IconButton, { IconButtonProps } from '../IconButton/IconButton';
-
-export type TableIconButtonProps = Omit<IconButtonProps, 'iconSize' | 'size' | 'variant'>;
-
-const TableIconButton = forwardRef<TableIconButtonProps, 'button'>((props, ref) => {
-  const { isDanger } = props;
-  return (
-    <IconButton
-      ref={ref}
-      _active={{
-        backgroundColor: 'pal.neutral.80',
-      }}
-      _hover={{
-        backgroundColor: 'pal.neutral.90',
-      }}
-      color={isDanger ? undefined : 'pal.purple.10'}
-      iconSize="24"
-      isDanger={isDanger}
-      size="sm"
-      variant="tertiary"
-      {...props}
-    />
-  );
-});
-
-export default TableIconButton;