@bitrise/bitkit 13.59.0 → 13.59.1-alpha.1

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Form/Checkbox/Checkbox.tsx +66 -2
  3. package/src/Components/Form/Radio/Radio.tsx +68 -6
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit",
3
3
  "description": "Bitrise React component library",
4
- "version": "13.59.0",
4
+ "version": "13.59.1-alpha.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
package/src/Components/Form/Checkbox/Checkbox.tsx CHANGED
@@ -1,8 +1,13 @@
1
+ import { ReactNode, Ref } from 'react';
1
2
  import {
2
3
  Checkbox as ChakraCheckbox,
3
4
  CheckboxProps as ChakraCheckboxProps,
4
5
  CheckboxIconProps,
5
6
  forwardRef,
7
+ FormControl,
8
+ FormHelperText,
9
+ FormErrorMessage,
10
+ FormControlProps,
6
11
  } from '@chakra-ui/react';
7
12
  import Icon from '../../Icon/Icon';
8
13
 
@@ -10,8 +15,16 @@ type CheckboxInputProps = ChakraCheckboxProps['inputProps'] & {
10
15
  'data-testid'?: string;
11
16
  };
12
17
 
13
- export interface CheckboxProps extends Omit<ChakraCheckboxProps, 'icon' | 'iconColor' | 'iconSize' | 'inputProps'> {
18
+ export interface CheckboxProps
19
+ extends Omit<FormControlProps, 'icon' | 'iconColor' | 'iconSize' | 'inputProps' | 'value' | 'onChange'> {
14
20
  inputProps?: CheckboxInputProps;
21
+ helperText?: ReactNode;
22
+ errorText?: string;
23
+ value?: ChakraCheckboxProps['value'];
24
+ inputRef?: Ref<HTMLInputElement>;
25
+ isIndeterminate?: ChakraCheckboxProps['isIndeterminate'];
26
+ isChecked?: ChakraCheckboxProps['isChecked'];
27
+ onChange?: ChakraCheckboxProps['onChange'];
15
28
  }
16
29
 
17
30
  const CustomIcon = (props: CheckboxIconProps) => {
@@ -27,7 +40,58 @@ const CustomIcon = (props: CheckboxIconProps) => {
27
40
  * Checkbox component is used in forms when a user needs to select multiple values from several options.
28
41
  */
29
42
  const Checkbox = forwardRef<CheckboxProps, 'input'>((props, ref) => {
30
- return <ChakraCheckbox alignItems="flex-start" icon={<CustomIcon />} {...props} ref={ref} />;
43
+ const {
44
+ helperText,
45
+ isInvalid,
46
+ errorText,
47
+ autoFocus,
48
+ name,
49
+ onBlur,
50
+ role,
51
+ value,
52
+ inputRef,
53
+ inputProps,
54
+ children,
55
+ isIndeterminate,
56
+ isChecked,
57
+ onChange,
58
+ ...rest
59
+ } = props;
60
+
61
+ const formControlProps = {
62
+ isInvalid: isInvalid || !!errorText,
63
+ ref,
64
+ ...rest,
65
+ };
66
+
67
+ const checkboxProps: ChakraCheckboxProps = {
68
+ autoFocus,
69
+ children,
70
+ inputProps,
71
+ name,
72
+ onBlur,
73
+ role,
74
+ value,
75
+ isIndeterminate,
76
+ isChecked,
77
+ onChange,
78
+ };
79
+
80
+ return (
81
+ <FormControl {...formControlProps}>
82
+ <ChakraCheckbox icon={<CustomIcon />} {...checkboxProps} ref={inputRef} />
83
+ {errorText && (
84
+ <FormErrorMessage marginLeft="32" marginTop="0" as="p">
85
+ {errorText}
86
+ </FormErrorMessage>
87
+ )}
88
+ {!errorText && helperText && (
89
+ <FormHelperText marginLeft="32" marginTop="0" as="p">
90
+ {helperText}
91
+ </FormHelperText>
92
+ )}
93
+ </FormControl>
94
+ );
31
95
  });
32
96
 
33
97
  export default Checkbox;
package/src/Components/Form/Radio/Radio.tsx CHANGED
@@ -1,18 +1,80 @@
1
- import { forwardRef, Radio as ChakraRadio, RadioProps as ChakraRadioProps } from '@chakra-ui/react';
1
+ import { ReactNode, Ref } from 'react';
2
+ import {
3
+ forwardRef,
4
+ FormControl,
5
+ FormHelperText,
6
+ FormErrorMessage,
7
+ FormControlProps,
8
+ Radio as ChakraRadio,
9
+ RadioProps as ChakraRadioProps,
10
+ } from '@chakra-ui/react';
2
11
 
3
12
  type RadioInputProps = ChakraRadioProps['inputProps'] & {
4
13
  'data-testid'?: string;
5
14
  };
6
15
 
7
- export interface RadioProps extends Omit<ChakraRadioProps, 'inputProps'> {
16
+ export interface RadioProps
17
+ extends Omit<FormControlProps, 'icon' | 'iconColor' | 'iconSize' | 'inputProps' | 'value' | 'onChange'> {
8
18
  inputProps?: RadioInputProps;
19
+ helperText?: ReactNode;
20
+ errorText?: string;
21
+ value?: ChakraRadioProps['value'];
22
+ inputRef?: Ref<HTMLInputElement>;
23
+ isChecked?: ChakraRadioProps['isChecked'];
24
+ onChange?: ChakraRadioProps['onChange'];
9
25
  }
10
26
 
11
- /**
12
- * Radios are used when only one choice may be selected in a series of options.
13
- */
14
27
  const Radio = forwardRef<RadioProps, 'input'>((props, ref) => {
15
- return <ChakraRadio {...props} ref={ref} />;
28
+ const {
29
+ helperText,
30
+ isInvalid,
31
+ errorText,
32
+ autoFocus,
33
+ name,
34
+ onBlur,
35
+ role,
36
+ value,
37
+ inputRef,
38
+ inputProps,
39
+ children,
40
+ isChecked,
41
+ onChange,
42
+ ...rest
43
+ } = props;
44
+
45
+ const formControlProps = {
46
+ isInvalid: isInvalid || !!errorText,
47
+ ref,
48
+ ...rest,
49
+ };
50
+
51
+ const radioProps: ChakraRadioProps = {
52
+ autoFocus,
53
+ children,
54
+ inputProps,
55
+ name,
56
+ onBlur,
57
+ role,
58
+ value,
59
+ isChecked,
60
+ onChange,
61
+ };
62
+
63
+ return (
64
+ <FormControl {...formControlProps}>
65
+ <ChakraRadio {...radioProps} ref={inputRef} />
66
+ {errorText && (
67
+ <FormErrorMessage marginLeft="32" marginTop="0" as="p">
68
+ {errorText}
69
+ </FormErrorMessage>
70
+ )}
71
+ {!errorText && helperText && (
72
+ <FormHelperText marginLeft="32" marginTop="0" as="p">
73
+ {helperText}
74
+ </FormHelperText>
75
+ )}
76
+ </FormControl>
77
+ );
16
78
  });
17
79
 
18
80
  export default Radio;