@bitrise/bitkit 13.67.1-alpha.0 → 13.67.1-alpha.1

package/package.json

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

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

@@ -24,10 +24,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,7 +51,7 @@ 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',

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