@bitrise/bitkit 9.39.0-alpha-form.2 → 9.39.1

package/package.json

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

package/src/Components/CloseButton/CloseButton.theme.ts

@@ -3,6 +3,14 @@ const sizes = {
   medium: { w: '32', h: '32' },
   small: { w: '24', h: '24' },
 };
+
+// eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
+const _disabled = {
+  cursor: 'not-allowed',
+  opacity: '0.4',
+  background: 'transparent',
+};
+
 const CloseButtonTheme = {
   baseStyle({
     colorScheme,
@@ -19,6 +27,7 @@ const CloseButtonTheme = {
         _hover: { bg: 'neutral.95' },
         _active: { bg: 'neutral.90' },
         ...sizes[size],
+        _disabled,
       };
     }
     return {
@@ -28,6 +37,7 @@ const CloseButtonTheme = {
       _hover: { bg: `${colorScheme}.93` },
       _active: { bg: `${colorScheme}.90` },
       ...sizes[size],
+      _disabled,
     };
   },
   defaultProps: { colorScheme: 'neutral', size: 'small' },

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

@@ -1,5 +1,6 @@
 import { Story, ComponentMeta } from '@storybook/react';
 import { useDisclosure } from '@chakra-ui/react';
+import { sortObjectByKey } from '../../utils/storyUtils';
 import Button from '../Button/Button';
 import Dialog, { DialogProps } from './Dialog';
 import DialogBody from './DialogBody';
@@ -50,10 +51,10 @@ export const WithProps: Story<StoryType> = ({ lotsOfContent, ...props }: StoryTy
   );
 };
 
-WithProps.args = {
+WithProps.args = sortObjectByKey({
   ...Dialog.defaultProps,
   title: 'Title',
   lotsOfContent: false,
   dataTestid: 'test-modal',
   trapFocus: false,
-};
+});

package/src/Components/Dialog/Dialog.tsx

@@ -12,6 +12,7 @@ import Text from '../Text/Text';
 
 export interface DialogProps extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'> {
   dataTestid?: string;
+  isClosable?: boolean;
   isOpen: boolean;
   onClose(): void;
   size?: 'small' | 'medium' | 'large' | 'full';
@@ -23,6 +24,7 @@ export interface DialogProps extends Omit<HTMLChakraProps<'section'>, 'scrollBeh
 const Dialog = ({
   children,
   dataTestid,
+  isClosable,
   isOpen,
   onClose,
   scrollBehavior,
@@ -34,9 +36,10 @@ const Dialog = ({
   const dialogSize = useBreakpointValue({ mobile: 'mobile', desktop: size });
   return (
     <Modal
+      closeOnEsc={isClosable}
       closeOnOverlayClick={false}
       isOpen={isOpen}
-      onClose={onClose}
+      onClose={isClosable ? onClose : () => {}}
       scrollBehavior={scrollBehavior}
       size={dialogSize}
       trapFocus={trapFocus}
@@ -48,7 +51,7 @@ const Dialog = ({
             {title}
           </Text>
         </ModalHeader>
-        <ModalCloseButton>
+        <ModalCloseButton isDisabled={!isClosable}>
           <Icon name="CloseSmall" />
         </ModalCloseButton>
         {children}
@@ -58,6 +61,7 @@ const Dialog = ({
 };
 
 Dialog.defaultProps = {
+  isClosable: true,
   scrollBehavior: 'outside',
   size: 'medium',
   trapFocus: true,

package/src/Components/Form/Checkbox/Checkbox.stories.tsx

@@ -26,7 +26,14 @@ export const InGroup: ComponentStory<typeof CheckboxGroup> = (props) => (
       Checkbox 1<br />
       asddssadsda
     </Checkbox>
-    <Checkbox value="2">Checkbox 2</Checkbox>
+    <Checkbox
+      value="2"
+      inputProps={{
+        'data-testid': 'test-checkbox-2',
+      }}
+    >
+      Checkbox 2
+    </Checkbox>
     <Checkbox value="3">Checkbox 3</Checkbox>
   </CheckboxGroup>
 );

package/src/Components/Form/Checkbox/Checkbox.tsx

@@ -1,9 +1,15 @@
 import { Checkbox as ChakraCheckbox, CheckboxProps as ChakraCheckboxProps, forwardRef } from '@chakra-ui/react';
 import Icon from '../../Icon/Icon';
 
-export type CheckboxProps = Omit<ChakraCheckboxProps, 'icon' | 'iconColor' | 'iconSize'>;
+type CheckboxInputProps = ChakraCheckboxProps['inputProps'] & {
+  'data-testid': string;
+};
+
+export interface CheckboxProps extends Omit<ChakraCheckboxProps, 'icon' | 'iconColor' | 'iconSize' | 'inputProps'> {
+  inputProps?: CheckboxInputProps;
+}
 
-const CustomIcon = (props: CheckboxProps) => {
+const CustomIcon = (props: any) => {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const { __css, isChecked, isIndeterminate } = props;
   if (!isChecked) {

package/src/Components/Form/Radio/Radio.stories.tsx

@@ -17,7 +17,14 @@ export const InGroup: ComponentStory<typeof RadioGroup> = (props) => (
       Radio 1<br />
       asdasddsa
     </Radio>
-    <Radio value="2">Radio 2</Radio>
+    <Radio
+      value="2"
+      inputProps={{
+        'data-testid': 'test-radio-2',
+      }}
+    >
+      Radio 2
+    </Radio>
     <Radio value="3">Radio 3</Radio>
   </RadioGroup>
 );

package/src/Components/Form/Radio/Radio.tsx

@@ -1,6 +1,12 @@
 import { Radio as ChakraRadio, RadioProps as ChakraRadioProps, forwardRef } from '@chakra-ui/react';
 
-export type RadioProps = ChakraRadioProps;
+type RadioInputProps = ChakraRadioProps['inputProps'] & {
+  'data-testid': string;
+};
+
+export interface RadioProps extends Omit<ChakraRadioProps, 'inputProps'> {
+  inputProps?: RadioInputProps;
+}
 
 /**
  * Radios are used when only one choice may be selected in a series of options.