@bitrise/bitkit 10.5.3 → 10.6.0

package/package.json

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

package/src/Components/ColorButton/ColorButton.stories.tsx

@@ -1,5 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { sortObjectByKey } from '../../utils/storyUtils';
+import Box from '../Box/Box';
 import ColorButton from './ColorButton';
 
 export default {
@@ -13,7 +14,11 @@ export default {
   },
 } as ComponentMeta<typeof ColorButton>;
 
-const Template: ComponentStory<typeof ColorButton> = (props) => <ColorButton {...props} />;
+const Template: ComponentStory<typeof ColorButton> = ({ colorScheme, ...props }) => (
+  <Box padding={16} backgroundColor={colorScheme === 'neutral' ? 'black' : undefined}>
+    <ColorButton colorScheme={colorScheme} {...props} />
+  </Box>
+);
 
 export const WithProps = Template.bind({});
 WithProps.args = sortObjectByKey({

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -1,4 +1,6 @@
-const schemeColors = {
+import { ColorScheme } from '../../Foundations/Colors/Colors';
+
+const schemeColors: Record<ColorScheme, any> = {
   blue: {
     color: 'blue.40',
     _active: {
@@ -44,16 +46,25 @@ const schemeColors = {
       backgroundColor: 'purple.93',
     },
   },
+  neutral: {
+    color: 'neutral.100',
+    _active: {
+      backgroundColor: 'rgba(255, 255, 255, 0.3)',
+    },
+    _hover: {
+      backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    },
+  },
 };
 
 const ColorButtonTheme = {
-  baseStyle: ({ colorScheme: c }: { colorScheme?: 'blue' | 'red' | 'green' | 'yellow' | 'purple' }) => {
+  baseStyle: ({ colorScheme }: { colorScheme?: ColorScheme }) => {
     return {
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
       backgroundColor: 'transparent',
-      ...schemeColors[c || 'blue'],
+      ...schemeColors[colorScheme || 'blue'],
     };
   },
 };

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

@@ -36,7 +36,7 @@ const DialogTheme: ComponentStyleConfig = {
     body: {
       flex: 1,
       paddingX: '32',
-      overflow: 'auto',
+      overflow: scrollBehavior === 'inside' ? 'auto' : undefined,
     },
     footer: {
       display: 'flex',

package/src/Foundations/Colors/Colors.ts

@@ -127,6 +127,6 @@ const colors = {
 
 export type Colors = typeof colors;
 
-export type ColorScheme = 'blue' | 'red' | 'green' | 'yellow' | 'purple';
+export type ColorScheme = 'blue' | 'red' | 'green' | 'yellow' | 'purple' | 'neutral';
 
 export default colors;