@bitrise/bitkit 9.39.0-alpha-form.1 → 9.39.0

package/package.json

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

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

@@ -22,8 +22,18 @@ WithProps.args = {
 
 export const InGroup: ComponentStory<typeof CheckboxGroup> = (props) => (
   <CheckboxGroup {...props} display="flex" gap="24">
-    <Checkbox value="1">Checkbox 1</Checkbox>
-    <Checkbox value="2">Checkbox 2</Checkbox>
+    <Checkbox value="1">
+      Checkbox 1<br />
+      asddssadsda
+    </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) {
@@ -16,7 +22,7 @@ const CustomIcon = (props: CheckboxProps) => {
  * Checkbox component is used in forms when a user needs to select multiple values from several options.
  */
 const Checkbox = forwardRef<CheckboxProps, 'input'>((props, ref) => {
-  return <ChakraCheckbox icon={<CustomIcon />} {...props} ref={ref} />;
+  return <ChakraCheckbox alignItems="flex-start" icon={<CustomIcon />} {...props} ref={ref} />;
 });
 
 export default Checkbox;

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

@@ -13,8 +13,18 @@ export default {
 
 export const InGroup: ComponentStory<typeof RadioGroup> = (props) => (
   <RadioGroup {...props} display="flex" gap="24">
-    <Radio value="1">Radio 1</Radio>
-    <Radio value="2">Radio 2</Radio>
+    <Radio value="1">
+      Radio 1<br />
+      asdasddsa
+    </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.theme.ts

@@ -6,6 +6,7 @@ const RadioTheme: ComponentStyleConfig = {
       color: 'neutral.100',
     },
     container: {
+      alignItems: 'flex-start',
       _disabled: {
         cursor: 'not-allowed',
         ':hover > span:first-of-type': {
@@ -23,13 +24,17 @@ const RadioTheme: ComponentStyleConfig = {
       borderColor: 'neutral.90',
       borderRadius: '12',
       boxShadow: 'inner',
+      _before: {
+        content: `""`,
+        display: 'inline-block',
+        width: '12',
+        height: '12',
+        borderRadius: '50%',
+        backgroundColor: 'transparent',
+        transitionDuration: '200ms',
+      },
       _checked: {
         _before: {
-          content: `""`,
-          display: 'inline-block',
-          width: '12',
-          height: '12',
-          borderRadius: '50%',
           backgroundColor: 'purple.40',
         },
       },

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.