@bitrise/bitkit 13.67.1-alpha.0 → 13.68.0

package/package.json

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

package/src/Components/CodeSnippet/CodeSnippet.theme.ts

@@ -1,22 +1,23 @@
 import { defineStyle, defineStyleConfig, SystemStyleObject } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
 import { CodeSnippetProps } from './CodeSnippet';
 
 const contentPadding = (variant: CodeSnippetProps['variant']) => {
   switch (variant) {
     case 'single':
       return {
-        padding: '.75rem',
-        paddingLeft: '1rem',
+        padding: '12',
+        paddingLeft: '16',
         paddingRight: '0',
       };
     case 'multi':
       return {
-        padding: '1rem',
+        padding: '16',
       };
     default:
       return {
-        paddingX: '.375rem',
-        paddingY: '.125rem',
+        paddingX: rem(6),
+        paddingY: rem(2),
       };
   }
 };
@@ -24,10 +25,10 @@ const contentPadding = (variant: CodeSnippetProps['variant']) => {
 const baseStyle = defineStyle(({ variant, size, isExpanded }): SystemStyleObject => {
   return {
     wrapper: {
+      borderRadius: '2',
       display: 'flex',
       position: 'relative',
-      width: 'fit-content',
-      borderRadius: '2',
+      width: variant !== 'inline' ? '100%' : 'fit-content',
     },
     copyContainer: {
       _after:
@@ -51,10 +52,10 @@ const baseStyle = defineStyle(({ variant, size, isExpanded }): SystemStyleObject
       borderTopRightRadius: variant === 'single' ? '0' : '2',
       borderBottomRightRadius: variant === 'single' ? '0' : '2',
       cursor: 'pointer',
-      '.chakra-collapse': {
+      div: {
         overflow: 'auto !important',
       },
-      minHeight: variant === 'inline' ? '1.5rem' : '2.5rem',
+      minHeight: variant === 'inline' ? '24' : '40',
       overflow: 'auto',
       scrollbarHeight: variant === 'single' ? 'none' : undefined,
       '::-webkit-scrollbar': {
@@ -63,7 +64,7 @@ const baseStyle = defineStyle(({ variant, size, isExpanded }): SystemStyleObject
       position: variant === 'single' ? 'relative' : 'static',
       textColor: 'text/body',
       textStyle: size === 'md' ? 'code/md' : 'code/lg',
-      lineHeight: '1rem',
+      lineHeight: rem(16),
       width: '100%',
       whiteSpace: variant === 'single' ? 'nowrap' : 'pre',
       ...contentPadding(variant),

package/src/Components/CodeSnippet/CodeSnippet.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useClipboard, useMultiStyleConfig } from '@chakra-ui/react';
+import { CollapseProps, useClipboard, useMultiStyleConfig } from '@chakra-ui/react';
 import Box, { BoxProps } from '../Box/Box';
 import Tooltip from '../Tooltip/Tooltip';
 import Button from '../Button/Button';
@@ -9,13 +9,24 @@ import IconButton from '../IconButton/IconButton';
 export interface CodeSnippetProps extends Omit<BoxProps, 'children'> {
   children: string;
   size?: 'md' | 'lg';
-  startingHeight?: number;
+  startingHeight?: CollapseProps['startingHeight'];
+  endingHeight?: CollapseProps['endingHeight'];
   textToCopy?: string;
   variant: 'inline' | 'single' | 'multi';
 }
 
 const CodeSnippet = (props: CodeSnippetProps) => {
-  const { children, variant, textToCopy, size = 'lg', startingHeight, ...rest } = props;
+  const {
+    children,
+    variant,
+    textToCopy,
+    size = 'lg',
+    startingHeight,
+    endingHeight,
+    maxHeight,
+    height,
+    ...rest
+  } = props;
 
   const [isExpanded, setExpanded] = useState(false);
 
@@ -61,13 +72,15 @@ const CodeSnippet = (props: CodeSnippetProps) => {
               <Collapse
                 in={isExpanded}
                 startingHeight={startingHeight}
-                endingHeight="100vh"
+                endingHeight={endingHeight}
                 transition={{ enter: { duration: 0.5 }, exit: { duration: 0.5 } }}
               >
                 {children}
               </Collapse>
             ) : (
-              children
+              <Box maxHeight={maxHeight} height={height}>
+                {children}
+              </Box>
             )}
           </Box>
           <IconButton

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -30,7 +30,7 @@ const defaultComponents = (size: 'sm' | 'md' | 'lg', gap: GapType = '16'): Compo
       </Box>
     ),
     code: ({ node, ...props }) => (
-      <CodeSnippet variant="multi" {...props}>
+      <CodeSnippet variant="multi" {...props} size={codeSize}>
         {props.children as string}
       </CodeSnippet>
     ),