@bitrise/bitkit 13.306.0 → 13.308.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.306.0",
+  "version": "13.308.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,30 @@ const DialogTheme: ComponentStyleConfig = {
       },
     },
   },
+  variants: {
+    default: {
+      header: {
+        textStyle: 'comp/dialog/title',
+      },
+    },
+    overflow: {
+      header: {
+        textStyle: 'heading/h4',
+        padding: '16',
+        paddingLeft: '16',
+        marginRight: '16',
+      },
+      closeButton: {
+        top: '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.tsx

@@ -14,7 +14,7 @@ const LinkButton = forwardRef<LinkButtonProps, 'div'>((props, ref) => {
   const styles = useStyleConfig('LinkButton', { size, ...rest });
 
   return (
-    <Box as="button" disabled={isDisabled} ref={ref} _css={styles} {...rest}>
+    <Box as="button" disabled={isDisabled} ref={ref} __css={styles} {...rest}>
       {children}
       {rightIconName && <Icon name={rightIconName} size="16" />}
     </Box>

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';