@bitrise/bitkit 12.18.0 → 12.20.0

package/package.json

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

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/Components/Tag/Tag.theme.ts

@@ -0,0 +1,104 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
+
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
+  'container',
+  'icon',
+  'label',
+  'closeButton',
+  'skeleton',
+]);
+
+const sizes = {
+  sm: definePartsStyle({
+    container: {
+      paddingX: rem(7),
+      paddingY: rem(1),
+    },
+    label: {
+      fontSize: '1',
+      lineHeight: rem(16),
+    },
+    closeButton: {
+      height: '20',
+      width: '20',
+      marginRight: rem(-6),
+    },
+  }),
+  md: definePartsStyle({
+    container: {
+      paddingX: rem(11),
+      paddingY: rem(3),
+    },
+    label: {
+      fontSize: '2',
+      lineHeight: rem(24),
+    },
+    closeButton: {
+      height: '24',
+      width: '24',
+      marginRight: rem(-7),
+    },
+  }),
+};
+
+const baseStyle = definePartsStyle(({ colorScheme }) => {
+  const scheme = {
+    color: `${colorScheme}.40`,
+    backgroundColor: `${colorScheme}.93`,
+    borderColor: `${colorScheme}.80`,
+  };
+  if (colorScheme === 'neutral') {
+    scheme.color = 'purple.10';
+  }
+  return {
+    container: {
+      border: '1px solid',
+      borderRadius: '4',
+      ...scheme,
+      _disabled: {
+        cursor: 'not-allowed',
+        backgroundColor: 'neutral.95',
+        borderColor: 'neutral.90',
+        color: 'neutral.80',
+      },
+      _loading: {
+        cursor: 'wait',
+        backgroundColor: 'neutral.93',
+        borderColor: 'neutral.93',
+        color: 'neutral.60',
+      },
+    },
+    icon: {
+      marginInlineEnd: '4',
+    },
+    label: {
+      display: 'inline',
+    },
+    closeButton: {
+      marginInlineStart: '4',
+      borderRadius: rem(2),
+      _hover: {
+        backgroundColor: `${colorScheme}.90`,
+      },
+      _focus: {
+        boxShadow: '0 0 0 1px var(--colors-purple-70) inset',
+      },
+      _disabled: {
+        pointerEvents: 'none',
+      },
+    },
+    skeleton: {
+      minWidth: '32',
+      height: '8',
+      backgroundColor: 'neutral.80',
+    },
+  };
+});
+
+const TagTheme = defineMultiStyleConfig({
+  baseStyle,
+  sizes,
+});
+
+export default TagTheme;

package/src/Components/Tag/Tag.tsx

@@ -0,0 +1,56 @@
+import { Tag as ChakraTag, TagCloseButton, TagProps as ChakraTagProps, useMultiStyleConfig } from '@chakra-ui/react';
+import Icon from '../Icon/Icon';
+import Skeleton from '../Skeleton/Skeleton';
+import SkeletonBox from '../Skeleton/SkeletonBox';
+import Text from '../Text/Text';
+import Tooltip from '../Tooltip/Tooltip';
+
+export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' | 'variant'> {
+  closeButtonTooltip?: string;
+  colorScheme?: 'neutral' | 'blue' | 'green' | 'red' | 'yellow' | 'purple';
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  onClose?: () => void;
+  size?: 'sm' | 'md';
+  withIcon?: boolean;
+}
+
+const Tag = (props: TagProps) => {
+  const { children, closeButtonTooltip, isDisabled, isLoading, onClose, withIcon, ...tagProps } = props;
+  const style = useMultiStyleConfig('Tag', tagProps);
+
+  return (
+    <ChakraTag
+      aria-disabled={isDisabled}
+      data-disabled={isDisabled || undefined}
+      aria-busy={isLoading}
+      data-loading={isLoading || undefined}
+      {...tagProps}
+    >
+      {withIcon && <Icon name="Tick" size={tagProps.size === 'sm' ? '16' : '24'} __css={style.icon} />}
+      <Text as="span" hasEllipsis sx={style.label}>
+        {isLoading ? (
+          <Skeleton isActive>
+            <SkeletonBox sx={style.skeleton} />
+          </Skeleton>
+        ) : (
+          children
+        )}
+      </Text>
+      {!!onClose && (
+        <Tooltip isDisabled={!closeButtonTooltip} label={closeButtonTooltip}>
+          <TagCloseButton isDisabled={isDisabled || isLoading} onClick={onClose}>
+            <Icon name="CloseSmall" size="16" />
+          </TagCloseButton>
+        </Tooltip>
+      )}
+    </ChakraTag>
+  );
+};
+
+Tag.defaultProps = {
+  colorScheme: 'neutral',
+  size: 'md',
+};
+
+export default Tag;

package/src/index.ts

@@ -276,3 +276,12 @@ 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';
+
+export type { TagProps } from './Components/Tag/Tag';
+export { default as Tag } from './Components/Tag/Tag';

package/src/theme.ts

@@ -35,6 +35,7 @@ import Slider from './Components/Slider/Slider.theme';
 import Sidebar from './Components/Sidebar/Sidebar.theme';
 import SidebarItem from './Components/Sidebar/SidebarItem.theme';
 import ContentSwitcher from './Components/ContentSwitcher/ContentSwitcher.theme';
+import Tag from './Components/Tag/Tag.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -117,6 +118,7 @@ const theme = {
     Progress: ProgressBar,
     Slider,
     ContentSwitcher,
+    Tag,
   },
 };