@bitrise/bitkit 12.33.2 → 12.34.0

package/package.json

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

package/src/Components/DefinitionTooltip/DefinitionTooltip.theme.ts

@@ -0,0 +1,23 @@
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
+
+const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(['content', 'trigger']);
+
+const DefinitionTooltipTheme = defineMultiStyleConfig({
+  baseStyle: {
+    content: {
+      paddingX: '12',
+      paddingY: '8',
+      maxWidth: rem(320),
+    },
+    trigger: {
+      borderBottom: '1px dotted',
+      borderBottomColor: 'neutral.60',
+      _hover: {
+        borderBottomColor: 'purple.50',
+      },
+    },
+  },
+});
+
+export default DefinitionTooltipTheme;

package/src/Components/DefinitionTooltip/DefinitionTooltip.tsx

@@ -0,0 +1,29 @@
+import { useMultiStyleConfig } from '@chakra-ui/react';
+import Popover, { PopoverProps } from '../Popover/Popover';
+import PopoverContent from '../Popover/PopoverContent';
+import PopoverTrigger from '../Popover/PopoverTrigger';
+import Box from '../Box/Box';
+
+export interface DefinitionTooltipProps extends Omit<PopoverProps, 'children'> {
+  children: string;
+  label: string;
+}
+
+const DefinitionTooltip = (props: DefinitionTooltipProps) => {
+  const { children, label, ...rest } = props;
+
+  const style = useMultiStyleConfig('DefinitionTooltip');
+
+  return (
+    <Popover placement="top" variant="dark" withArrow {...rest}>
+      <PopoverTrigger>
+        <Box as="button" __css={style.trigger}>
+          {children}
+        </Box>
+      </PopoverTrigger>
+      <PopoverContent sx={style.content}>{label}</PopoverContent>
+    </Popover>
+  );
+};
+
+export default DefinitionTooltip;

package/src/Components/Popover/Popover.theme.ts

@@ -9,12 +9,26 @@ const PopoverTheme: SystemStyleObject = {
       zIndex: 'popover',
     },
     content: {
-      [$arrowBackground.variable]: 'colors.neutral.100',
-      backgroundColor: 'neutral.100',
       borderRadius: 8,
       boxShadow: 'large',
     },
   },
+  variants: {
+    dark: {
+      content: {
+        [$arrowBackground.variable]: 'colors.neutral.10',
+        backgroundColor: 'neutral.10',
+        color: 'neutral.95',
+      },
+    },
+    light: {
+      content: {
+        [$arrowBackground.variable]: 'colors.neutral.100',
+        backgroundColor: 'neutral.100',
+        color: 'text.body',
+      },
+    },
+  },
 };
 
 export default PopoverTheme;

package/src/Components/Popover/Popover.tsx

@@ -4,6 +4,7 @@ import { PopoverContext, PopoverContextType } from './Popover.context';
 
 export interface PopoverProps extends ChakraPopoverProps {
   withArrow?: boolean;
+  variant?: 'dark' | 'light';
 }
 
 const Popover = (props: PopoverProps) => {
@@ -28,4 +29,8 @@ const Popover = (props: PopoverProps) => {
   );
 };
 
+Popover.defaultProps = {
+  variant: 'light',
+};
+
 export default Popover;

package/src/Components/Table/Tr.tsx

@@ -66,7 +66,13 @@ const Tr = forwardRef<TableRowProps, 'tr'>((props, ref) => {
           {children}
         </ChakraTr>
         <ChakraTr>
-          <Td colSpan={colSpan} paddingY="0" transform={isOpen ? 'none' : 'translateY(-1px)'}>
+          <Td
+            borderColor={isOpen ? undefined : 'transparent'}
+            colSpan={colSpan}
+            height="0"
+            paddingY="0"
+            transform={isOpen ? 'none' : 'translateY(-1px)'}
+          >
             <Collapse in={isOpen} unmountOnExit>
               {expandableContent}
             </Collapse>

package/src/index.ts

@@ -286,3 +286,6 @@ export { default as Tag } from './Components/Tag/Tag';
 export { default as Note } from './Components/Note/Note';
 export { default as MarkdownContent } from './Components/Note/NoteMarkdownContent';
 export { default as CodeBlock } from './Components/CodeBlock/CodeBlock';
+
+export type { DefinitionTooltipProps } from './Components/DefinitionTooltip/DefinitionTooltip';
+export { default as DefinitionTooltip } from './Components/DefinitionTooltip/DefinitionTooltip';

package/src/theme.ts

@@ -38,6 +38,7 @@ import SegmentedControl from './Components/SegmentedControl/SegmentedControl.the
 import Tag from './Components/Tag/Tag.theme';
 import Note from './Components/Note/Note.theme';
 import CodeBlock from './Components/CodeBlock/CodeBlock.theme';
+import DefinitionTooltip from './Components/DefinitionTooltip/DefinitionTooltip.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -123,6 +124,7 @@ const theme = {
     Tag,
     Note,
     CodeBlock,
+    DefinitionTooltip,
   },
 };