@bitrise/bitkit 9.37.0-alpha-chakra.1 → 9.37.0

package/package.json

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

package/src/Components/Dialog/Dialog.stories.tsx

@@ -54,4 +54,5 @@ WithProps.args = {
   title: 'Title',
   lotsOfContent: false,
   dataTestid: 'test-modal',
+  trapFocus: false,
 };

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

@@ -17,8 +17,8 @@ const DialogTheme: ComponentStyleConfig = {
       borderRadius: '8',
       backgroundColor: 'neutral.100',
       boxShadow: 'large',
-      marginY: '128',
-      maxH: scrollBehavior === 'inside' ? 'calc(100% - 16rem)' : undefined,
+      marginY: '15vh',
+      maxH: scrollBehavior === 'inside' ? '70vh' : undefined,
     },
     header: {
       padding: '24',
@@ -44,6 +44,7 @@ const DialogTheme: ComponentStyleConfig = {
       gap: '16',
       padding: '32',
       paddingTop: '48',
+      flexWrap: 'wrap',
     },
   }),
   sizes: {
@@ -82,11 +83,12 @@ const DialogTheme: ComponentStyleConfig = {
     },
     mobile: {
       dialog: {
-        maxW: '100vw',
-        minH: '100vh',
+        w: '100vw',
+        maxH: '100vh',
         '@supports(min-height: -webkit-fill-available)': {
-          minH: '-webkit-fill-available',
+          maxH: '-webkit-fill-available',
         },
+        marginY: '0',
         borderRadius: 0,
       },
     },

package/src/Components/Dialog/Dialog.tsx

@@ -31,9 +31,10 @@ export interface DialogProps extends Omit<HTMLChakraProps<'section'>, 'scrollBeh
   scrollBehavior?: 'inside' | 'outside';
   state: DialogState;
   title: string;
+  trapFocus?: boolean;
 }
 
-const Dialog = ({ children, dataTestid, scrollBehavior, state, size, title, ...rest }: DialogProps) => {
+const Dialog = ({ children, dataTestid, scrollBehavior, state, size, title, trapFocus, ...rest }: DialogProps) => {
   const dialogSize = useBreakpointValue({ mobile: 'mobile', desktop: size });
   return (
     <Modal
@@ -42,7 +43,7 @@ const Dialog = ({ children, dataTestid, scrollBehavior, state, size, title, ...r
       onClose={state.onClose}
       scrollBehavior={scrollBehavior}
       size={dialogSize}
-      // trapFocus={!process?.env?.IS_STORYBOOK}
+      trapFocus={trapFocus}
     >
       <ModalOverlay />
       <ModalContent data-testid={dataTestid} {...rest}>
@@ -63,6 +64,7 @@ const Dialog = ({ children, dataTestid, scrollBehavior, state, size, title, ...r
 Dialog.defaultProps = {
   scrollBehavior: 'outside',
   size: 'medium',
+  trapFocus: true,
 } as DialogProps;
 
 export default Dialog;

package/src/index.ts

@@ -112,9 +112,3 @@ export { default as PopoverContent } from './Components/Popover/PopoverContent';
 
 export type { AvatarProps } from './Components/Avatar/Avatar';
 export { default as Avatar } from './Components/Avatar/Avatar';
-
-export type { ListProps } from './Components/List/List';
-export { default as List } from './Components/List/List';
-
-export type { ListItemProps } from './Components/List/ListItem';
-export { default as ListItem } from './Components/List/ListItem';

package/src/old.ts

@@ -100,6 +100,12 @@ export { default as InputInlineHelp } from './Old/Input/InputInlineHelp';
 export type { Props as InputLabelProps } from './Old/Input/InputLabel';
 export { default as InputLabel } from './Old/Input/InputLabel';
 
+export type { Props as ListProps } from './Old/List/List';
+export { default as List } from './Old/List/List';
+
+export type { Props as ListItemProps } from './Old/List/ListItem';
+export { default as ListItem } from './Old/List/ListItem';
+
 export type { Props as LogoProps } from './Old/Logo/Logo';
 export { default as Logo } from './Old/Logo/Logo';
 

package/src/theme.ts

@@ -7,7 +7,6 @@ import Dialog from './Components/Dialog/Dialog.theme';
 import Divider from './Components/Divider/Divider.theme';
 import EmptyState from './Components/EmptyState/EmptyState.theme';
 import Link from './Components/Link/Link.theme';
-import List from './Components/List/List.theme';
 import Menu from './Components/Menu/Menu.theme';
 import Select from './Components/Select/Select.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
@@ -69,7 +68,6 @@ const theme = {
     Divider,
     EmptyState,
     Link,
-    List,
     Menu,
     Modal: Dialog,
     Select,