@bitrise/bitkit 12.18.0-alpha-drawer.2 → 12.19.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.18.0-alpha-drawer.2",
+  "version": "12.19.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",

package/src/Components/CloseButton/CloseButton.tsx

@@ -3,6 +3,7 @@ import {
   CloseButton as ChakraCloseButton,
   CloseButtonProps as ChakraCloseButtonProps,
 } from '@chakra-ui/react';
+import Icon from '../Icon/Icon';
 import CloseButtonTheme from './CloseButton.theme';
 
 type ThemeArguments = Parameters<(typeof CloseButtonTheme)['baseStyle']>[0];
@@ -12,7 +13,9 @@ export interface CloseButtonProps extends ChakraCloseButtonProps {
 }
 
 const CloseButton = forwardRef<CloseButtonProps, 'button'>((props, ref) => (
-  <ChakraCloseButton ref={ref} {...CloseButtonTheme.defaultProps} {...props} />
+  <ChakraCloseButton ref={ref} {...CloseButtonTheme.defaultProps} {...props}>
+    <Icon name="CloseSmall" />
+  </ChakraCloseButton>
 ));
 
 export default CloseButton;

package/src/Components/Dialog/Dialog.theme.ts

@@ -28,10 +28,6 @@ const DialogTheme: ComponentStyleConfig = {
       position: 'absolute',
       top: '22',
       right: '22',
-      width: '40',
-      height: '40',
-      padding: '8',
-      borderRadius: '8',
     },
     body: {
       flex: 1,

package/src/Components/Dialog/Dialog.tsx

@@ -59,7 +59,7 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
                 {title}
               </Text>
             </ModalHeader>
-            <ModalCloseButton isDisabled={!isClosable}>
+            <ModalCloseButton isDisabled={!isClosable} size="large">
               <Icon name="CloseSmall" />
             </ModalCloseButton>
           </>

package/src/Components/Drawer/Drawer.theme.ts

@@ -27,7 +27,7 @@ const DrawerTheme = defineMultiStyleConfig({
       padding: '24',
       display: 'flex',
       flexDirection: 'column',
-      gap: '9',
+      gap: '8',
     },
     closeButton: {
       position: 'absolute',

package/src/Components/Drawer/Drawer.tsx

@@ -10,6 +10,7 @@ import {
   DrawerCloseButton,
   DrawerContentProps,
 } from '@chakra-ui/react';
+import Icon from '../Icon/Icon';
 
 export interface DrawerProps
   extends Pick<ChakraDrawerProps, 'finalFocusRef' | 'initialFocusRef' | 'isOpen' | 'onClose'> {
@@ -25,7 +26,9 @@ const Drawer = (props: DrawerProps) => {
     <ChakraDrawer {...drawerProps}>
       <DrawerOverlay />
       <DrawerContent>
-        <DrawerCloseButton />
+        <DrawerCloseButton size="small">
+          <Icon name="CloseSmall" />
+        </DrawerCloseButton>
         <DrawerHeader as="h3">{title}</DrawerHeader>
         <DrawerBody>{children}</DrawerBody>
         {footer && <DrawerFooter>{footer}</DrawerFooter>}

package/src/Components/Form/Radio/RadioGroup.tsx

@@ -1,27 +1,13 @@
-import { RadioGroup as ChakraRadioGroup, RadioGroupProps as ChakraRadioGroupProps } from '@chakra-ui/react';
-import Box, { BoxProps } from '../../Box/Box';
+import { RadioGroup as ChakraRadioGroup, RadioGroupProps } from '@chakra-ui/react';
 
-export type RadioGroupProps = ChakraRadioGroupProps & Omit<BoxProps, 'onChange'>;
+export type { RadioGroupProps };
 
 /**
  * RadioGroup component to help manage Radio components and conveniently pass a few shared style props to each.
  * Composes Box.
  */
 const RadioGroup = (props: RadioGroupProps) => {
-  const { children, defaultValue, isDisabled, isFocusable, isNative, onChange, value, ...boxProps } = props;
-  const groupProps = {
-    defaultValue,
-    isDisabled,
-    isFocusable,
-    isNative,
-    onChange,
-    value,
-  };
-  return (
-    <ChakraRadioGroup {...groupProps}>
-      <Box {...boxProps}>{children}</Box>
-    </ChakraRadioGroup>
-  );
+  return <ChakraRadioGroup {...props} />;
 };
 
 export default RadioGroup;

package/src/Components/Notification/Notification.tsx

@@ -87,9 +87,7 @@ const Notification = forwardRef<NotificationProps, 'div'>((props, ref) => {
             marginTop={marginTop}
             colorScheme={colorScheme}
             onClick={onClose}
-          >
-            <Icon name="CloseSmall" />
-          </CloseButton>
+          />
         )}
       </ActionContext.Provider>
     </ChakraAlert>

package/src/Components/Ribbon/Ribbon.tsx

@@ -4,7 +4,6 @@ import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 import { ColorScheme } from '../../Foundations/Colors/Colors';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
-import Icon from '../Icon/Icon';
 import Box from '../Box/Box';
 
 export type ActionProps = {
@@ -66,11 +65,7 @@ const Ribbon = forwardRef<RibbonProps, 'div'>((props, ref) => {
           {children}
           {actionButton}
         </Box>
-        {onClose && (
-          <CloseButton flexShrink={0} colorScheme={colorScheme} marginStart="auto" onClick={onClose}>
-            <Icon name="CloseSmall" />
-          </CloseButton>
-        )}
+        {onClose && <CloseButton flexShrink={0} colorScheme={colorScheme} marginStart="auto" onClick={onClose} />}
       </ActionContext.Provider>
     </ChakraAlert>
   );

package/src/Components/Table/ClickableRow.tsx

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { LinkBox, LinkOverlay } from '@chakra-ui/react';
+import Link, { LinkProps } from '../Link/Link';
+import Td from './Td';
+import Tr, { RowProps } from './Tr';
+
+export interface ClickableRowProps extends RowProps {
+  label: ReactNode;
+  linkProps?: Omit<LinkProps, 'children'>;
+}
+
+const ClickableRow = (props: ClickableRowProps) => {
+  const { children, label, linkProps, ...rest } = props;
+
+  return (
+    <LinkBox as={Tr} {...rest}>
+      <Td>
+        <LinkOverlay as={Link} {...linkProps}>
+          {label}
+        </LinkOverlay>
+      </Td>
+      {children}
+    </LinkBox>
+  );
+};
+
+export default ClickableRow;

package/src/Components/Table/SelectableRow.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { LinkBox, LinkOverlay } from '@chakra-ui/react';
+import Radio from '../Form/Radio/Radio';
+import Td from './Td';
+import Tr, { RowProps } from './Tr';
+
+export interface SelectableRowProps extends RowProps {
+  id: string;
+  label: ReactNode;
+  value: string;
+}
+
+const SelectableRow = (props: SelectableRowProps) => {
+  const { children, id, label, value, ...rest } = props;
+
+  return (
+    <LinkBox
+      as={Tr}
+      _hover={{
+        td: { background: 'neutral.95' },
+        ':has(input:checked)': {
+          td: { background: 'purple.93' },
+        },
+      }}
+      sx={{
+        ':has(input:checked)': {
+          td: { background: 'purple.95' },
+        },
+      }}
+      {...rest}
+    >
+      <Td>
+        <Radio id={id} value={value} />
+      </Td>
+      <Td>
+        <LinkOverlay as="label" cursor="pointer" htmlFor={id}>
+          {label}
+        </LinkOverlay>
+      </Td>
+      {children}
+    </LinkBox>
+  );
+};
+
+export default SelectableRow;

package/src/Components/Table/Table.theme.ts

@@ -40,12 +40,6 @@ const Tabletheme: SystemStyleObject = {
       borderTopLeftRadius: '4',
       borderTopRightRadius: '4',
     },
-    clickableTr: {
-      cursor: 'pointer',
-      '&:hover > td': {
-        backgroundColor: 'neutral.95',
-      },
-    },
     th: {
       paddingX: '16',
       paddingY: '12',

package/src/Components/Table/Tr.tsx

@@ -10,12 +10,7 @@ import {
 import IconButton from '../IconButton/IconButton';
 import Td from './Td';
 
-type RowProps = ChakraTableRowProps & {
-  /**
-   * @deprecated - Please use it only when really necessary, we are working on a new table-like components with clickable items
-   */
-  onClick?: ChakraTableRowProps['onClick'];
-};
+export type RowProps = ChakraTableRowProps;
 
 type NonExpandableProps = ChakraTableRowProps & {
   expandableContent?: never;
@@ -38,14 +33,9 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
   const css = useTableStyles();
 
   const properties: ChakraTableRowProps = {
-    onClick,
     ...rest,
   };
 
-  if (onClick) {
-    properties.sx = css.clickableTr;
-  }
-
   const onToggleClick = useCallback(() => {
     const nextOpen = !isOpen;
     onToggle();

package/src/index.ts

@@ -276,3 +276,9 @@ export { default as ContentSwitcherItem } from './Components/ContentSwitcher/Con
 export type { DrawerProps } from './Components/Drawer/Drawer';
 export { default as Drawer } from './Components/Drawer/Drawer';
 export { default as useDrawer } from './Components/Drawer/useDrawer';
+
+export type { ClickableRowProps } from './Components/Table/ClickableRow';
+export { default as ClickableRow } from './Components/Table/ClickableRow';
+
+export type { SelectableRowProps } from './Components/Table/SelectableRow';
+export { default as SelectableRow } from './Components/Table/SelectableRow';