@bitrise/bitkit 10.0.0 → 10.0.3

package/package.json

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

package/src/Components/ButtonGroup/ButtonGroup.stories.tsx

@@ -7,7 +7,7 @@ export default {
 } as ComponentMeta<typeof ButtonGroup>;
 
 const Template: ComponentStory<typeof ButtonGroup> = (props) => (
-  <ButtonGroup {...props} width="900px" flexDirection="column">
+  <ButtonGroup {...props} width="900px" flexDirection="row">
     <Button>Button 1</Button>
     <Button>Button 2</Button>
     <Button>Button 3</Button>

package/src/Components/Dialog/Dialog.tsx

@@ -5,8 +5,10 @@ import {
   ModalCloseButton,
   ModalHeader,
   useBreakpointValue,
+  usePrefersReducedMotion,
   HTMLChakraProps,
 } from '@chakra-ui/react';
+import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
 import Icon from '../Icon/Icon';
 import Text from '../Text/Text';
 
@@ -33,12 +35,15 @@ const Dialog = ({
   trapFocus,
   ...rest
 }: DialogProps) => {
-  const dialogSize = useBreakpointValue({ mobile: 'mobile', desktop: size });
+  const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
+  const prefersReducedMotion = usePrefersReducedMotion();
+
   return (
     <Modal
       closeOnEsc={isClosable}
       closeOnOverlayClick={false}
       isOpen={isOpen}
+      motionPreset={prefersReducedMotion ? 'none' : 'scale'}
       onClose={isClosable ? onClose : () => {}}
       scrollBehavior={scrollBehavior}
       size={dialogSize}

package/src/Components/EmptyState/EmptyState.theme.ts

@@ -10,7 +10,7 @@ const EmptyStateTheme: ComponentStyleConfig = {
       justifyContent: 'center',
       paddingX: '16',
       paddingY: {
-        mobile: '32',
+        base: '32',
         desktop: '48',
       },
       backgroundColor: 'neutral.95',

package/src/Components/Menu/Menu.tsx

@@ -2,6 +2,6 @@ import { Menu as ChakraMenu, MenuProps as ChakraMenuProps } from '@chakra-ui/rea
 
 export type MenuProps = ChakraMenuProps;
 
-const Menu = (props: MenuProps) => <ChakraMenu matchWidth {...props} />;
+const Menu = (props: MenuProps) => <ChakraMenu {...props} />;
 
 export default Menu;

package/src/Foundations/Breakpoints/Breakpoints.ts

@@ -1,7 +1,13 @@
+export const BREAKPOINTS = {
+  MOBILE: 'base',
+  DESKTOP: 'desktop',
+  WIDE: 'wide',
+};
+
 const breakpoints = {
-  mobile: '0rem',
-  desktop: '53rem', // 848px
-  wide: '101rem', // 1616px
+  [BREAKPOINTS.MOBILE]: '0rem',
+  [BREAKPOINTS.DESKTOP]: '53rem', // 848px
+  [BREAKPOINTS.WIDE]: '101rem', // 1616px
 };
 
 export default breakpoints;

package/src/index.ts

@@ -132,3 +132,5 @@ export { default as RadioGroup } from './Components/Form/Radio/RadioGroup';
 
 export type { ImageProps } from './Components/Image/Image';
 export { default as Image } from './Components/Image/Image';
+
+export { BREAKPOINTS } from './Foundations/Breakpoints/Breakpoints';