@bitrise/bitkit 13.305.0 → 13.307.0

package/package.json

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

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

@@ -6,6 +6,7 @@ const DialogTheme: ComponentStyleConfig = {
       flex: 1,
       overflow: scrollBehavior === 'inside' ? 'auto' : undefined,
       paddingX: '32',
+      marginBottom: '16',
     },
     closeButton: {
       color: 'purple.10',
@@ -33,12 +34,12 @@ const DialogTheme: ComponentStyleConfig = {
       gap: '16',
       justifyContent: 'end',
       padding: '32',
-      paddingTop: '48',
     },
     header: {
       color: 'purple.10',
       padding: '24',
       paddingLeft: '30',
+      marginRight: '48',
     },
     overlay: {
       backgroundColor: 'rgba(0, 0, 0, .5)',
@@ -91,6 +92,27 @@ const DialogTheme: ComponentStyleConfig = {
       },
     },
   },
+  variants: {
+    default: {
+      header: {
+        textStyle: 'comp/dialog/title',
+      },
+    },
+    overflow: {
+      header: {
+        textStyle: 'heading/h4',
+        padding: '16',
+        paddingLeft: '16',
+        marginRight: '16',
+      },
+      body: {
+        paddingX: '16',
+      },
+      footer: {
+        padding: '16',
+      },
+    },
+  },
 };
 
 export default DialogTheme;

package/src/Components/Dialog/Dialog.tsx

@@ -36,11 +36,32 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
   const headerId = useId();
 
   const closeBtn = (
-    <ModalCloseButton isDisabled={!isClosable} size="large">
+    <ModalCloseButton isDisabled={!isClosable} size={variant === 'overflow' ? 'small' : `large`}>
       <Icon name="Cross" />
     </ModalCloseButton>
   );
 
+  const modalHeader = () => {
+    if (variant === 'empty') return null;
+
+    return (
+      <>
+        <ModalHeader>
+          <Text as="h1" id={headerId}>
+            {title}
+          </Text>
+        </ModalHeader>
+        {closeNotice ? (
+          <Tooltip label={closeNotice} placement="top">
+            {closeBtn}
+          </Tooltip>
+        ) : (
+          closeBtn
+        )}
+      </>
+    );
+  };
+
   return (
     <DialogContextProvider value={{ scrollBehavior }}>
       <Modal
@@ -54,26 +75,12 @@ const Dialog: ComponentWithAs<'section', DialogProps> = ({
         scrollBehavior={scrollBehavior}
         size={dialogSize}
         trapFocus={trapFocus}
+        variant={variant}
       >
         <ModalOverlay />
 
         <ModalContent aria-labelledby={variant !== 'empty' ? headerId : undefined} {...rest}>
-          {variant !== 'empty' && (
-            <>
-              <ModalHeader marginRight="48">
-                <Text as="h1" id={headerId} textStyle="comp/dialog/title">
-                  {title}
-                </Text>
-              </ModalHeader>
-              {closeNotice ? (
-                <Tooltip label={closeNotice} placement="top">
-                  {closeBtn}
-                </Tooltip>
-              ) : (
-                closeBtn
-              )}
-            </>
-          )}
+          {modalHeader()}
           {children}
         </ModalContent>
       </Modal>

package/src/Components/Dialog/DialogBody.tsx

@@ -69,24 +69,33 @@ const ScrollableDialogBody = (props: DialogBodyProps) => {
     <Box display="flex" flexDir="column" minH={0} position="relative">
       <ModalBody ref={contentRef} {...props} />
       {isScrollButtonVisible && (
-        <ScrollButton
-          alignSelf="center"
-          bottom={8}
-          flexShrink={0}
-          onClick={(e) => {
-            if (!contentRef.current) {
-              return;
-            }
-
-            (e.currentTarget as HTMLElement).blur();
-
-            contentRef.current.scrollTo({
-              top: contentRef.current.scrollHeight,
-              behavior: 'smooth',
-            });
-          }}
-          position="absolute"
-        />
+        <>
+          <Box
+            background="linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%)"
+            width="100%"
+            height={32}
+            bottom={16}
+            position="absolute"
+          />
+          <ScrollButton
+            alignSelf="center"
+            bottom={16}
+            flexShrink={0}
+            onClick={(e) => {
+              if (!contentRef.current) {
+                return;
+              }
+
+              (e.currentTarget as HTMLElement).blur();
+
+              contentRef.current.scrollTo({
+                top: contentRef.current.scrollHeight,
+                behavior: 'smooth',
+              });
+            }}
+            position="absolute"
+          />
+        </>
       )}
     </Box>
   );

package/src/Components/Dialog/DialogProps.ts

@@ -11,6 +11,6 @@ export interface DialogProps
   scrollBehavior?: 'inside' | 'outside';
   title: string;
   trapFocus?: boolean;
-  variant?: 'default' | 'empty';
+  variant?: 'default' | 'empty' | 'overflow';
   closeNotice?: string;
 }

package/src/Components/LinkButton/LinkButton.theme.ts

@@ -0,0 +1,39 @@
+import { defineStyle, defineStyleConfig } from 'chakra-ui-2--styled-system';
+
+const baseStyle = defineStyle(() => {
+  return {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '4',
+    color: 'text/link',
+    _active: {
+      color: 'text/primary',
+      backgroundColor: `transparent`,
+    },
+    _hover: {
+      color: 'text/link-hover',
+      backgroundColor: `transparent`,
+    },
+    _disabled: {
+      color: 'text/disabled',
+      cursor: 'not-allowed',
+    },
+  };
+});
+
+const linkButtonTheme = defineStyleConfig({
+  baseStyle,
+  sizes: {
+    lg: {
+      textStyle: 'body/lg/regular',
+    },
+    md: {
+      textStyle: 'body/md/regular',
+    },
+    sm: {
+      textStyle: 'body/sm/regular',
+    },
+  },
+});
+
+export default linkButtonTheme;

package/src/Components/LinkButton/LinkButton.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, useStyleConfig } from 'chakra-ui-2--react';
+import Icon, { TypeIconName } from '../Icon/Icon';
+import Box, { BoxProps } from '../Box/Box';
+
+export interface LinkButtonProps extends BoxProps {
+  isDisabled?: boolean;
+  rightIconName?: TypeIconName;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const LinkButton = forwardRef<LinkButtonProps, 'div'>((props, ref) => {
+  const { rightIconName, isDisabled = false, size = 'lg', children, ...rest } = props;
+
+  const styles = useStyleConfig('LinkButton', { size, ...rest });
+
+  return (
+    <Box as="button" disabled={isDisabled} ref={ref} _css={styles} {...rest}>
+      {children}
+      {rightIconName && <Icon name={rightIconName} size="16" />}
+    </Box>
+  );
+});
+
+export default LinkButton;

package/src/Components/components.theme.ts

@@ -14,6 +14,7 @@ import Divider from './Divider/Divider.theme';
 import Drawer from './Drawer/Drawer.theme';
 import EmptyState from './EmptyState/EmptyState.theme';
 import Link from './Link/Link.theme';
+import LinkButton from './LinkButton/LinkButton.theme';
 import List from './List/List.theme';
 import Menu from './Menu/Menu.theme';
 import Radio from './Form/Radio/Radio.theme';
@@ -80,6 +81,7 @@ const components = {
   Filter,
   Input,
   Link,
+  LinkButton,
   List,
   Menu,
   Modal: Dialog,

package/src/index.ts

@@ -5,6 +5,9 @@ export * from './hooks';
 
 export { default as theme, breakpoints } from './theme';
 
+export type { LinkButtonProps } from './Components/LinkButton/LinkButton';
+export { default as LinkButton } from './Components/LinkButton/LinkButton';
+
 export type { LinkProps } from './Components/Link/Link';
 export { default as Link } from './Components/Link/Link';