@bitrise/bitkit 10.0.1 → 10.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit",
3
3
  "description": "Bitrise React component library",
4
- "version": "10.0.1",
4
+ "version": "10.0.2",
5
5
  "repository": "git@github.com:bitrise-io/bitkit.git",
6
6
  "main": "src/index.ts",
7
7
  "license": "UNLICENSED",
@@ -7,7 +7,7 @@ export default {
7
7
  } as ComponentMeta<typeof ButtonGroup>;
8
8
 
9
9
  const Template: ComponentStory<typeof ButtonGroup> = (props) => (
10
- <ButtonGroup {...props} width="900px" flexDirection="column">
10
+ <ButtonGroup {...props} width="900px" flexDirection="row">
11
11
  <Button>Button 1</Button>
12
12
  <Button>Button 2</Button>
13
13
  <Button>Button 3</Button>
@@ -7,6 +7,7 @@ import {
7
7
  useBreakpointValue,
8
8
  HTMLChakraProps,
9
9
  } from '@chakra-ui/react';
10
+ import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
10
11
  import Icon from '../Icon/Icon';
11
12
  import Text from '../Text/Text';
12
13
 
@@ -33,7 +34,7 @@ const Dialog = ({
33
34
  trapFocus,
34
35
  ...rest
35
36
  }: DialogProps) => {
36
- const dialogSize = useBreakpointValue({ mobile: 'mobile', desktop: size });
37
+ const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
37
38
  return (
38
39
  <Modal
39
40
  closeOnEsc={isClosable}
@@ -10,7 +10,7 @@ const EmptyStateTheme: ComponentStyleConfig = {
10
10
  justifyContent: 'center',
11
11
  paddingX: '16',
12
12
  paddingY: {
13
- mobile: '32',
13
+ base: '32',
14
14
  desktop: '48',
15
15
  },
16
16
  backgroundColor: 'neutral.95',
@@ -1,7 +1,13 @@
1
+ export const BREAKPOINTS = {
2
+ MOBILE: 'base',
3
+ DESKTOP: 'desktop',
4
+ WIDE: 'wide',
5
+ };
6
+
1
7
  const breakpoints = {
2
- mobile: '0rem',
3
- desktop: '53rem', // 848px
4
- wide: '101rem', // 1616px
8
+ [BREAKPOINTS.MOBILE]: '0rem',
9
+ [BREAKPOINTS.DESKTOP]: '53rem', // 848px
10
+ [BREAKPOINTS.WIDE]: '101rem', // 1616px
5
11
  };
6
12
 
7
13
  export default breakpoints;
package/src/index.ts CHANGED
@@ -132,3 +132,5 @@ export { default as RadioGroup } from './Components/Form/Radio/RadioGroup';
132
132
 
133
133
  export type { ImageProps } from './Components/Image/Image';
134
134
  export { default as Image } from './Components/Image/Image';
135
+
136
+ export { BREAKPOINTS } from './Foundations/Breakpoints/Breakpoints';