@bitrise/bitkit 12.38.0 → 12.39.0

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Form/Form.theme.ts +0 -1
  3. package/src/Components/Form/Input/Input.tsx +19 -2
  4. package/src/Components/Form/Textarea/Textarea.tsx +19 -2
  5. package/src/Components/Sidebar/SidebarItem.theme.ts +2 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit",
3
3
  "description": "Bitrise React component library",
4
- "version": "12.38.0",
4
+ "version": "12.39.0",
5
5
  "repository": "git@github.com:bitrise-io/bitkit.git",
6
6
  "main": "src/index.ts",
7
7
  "license": "UNLICENSED",
package/src/Components/Form/Form.theme.ts CHANGED
@@ -23,7 +23,6 @@ const FormTheme = {
23
23
  },
24
24
  FormLabel: {
25
25
  baseStyle: {
26
- marginBottom: '4',
27
26
  fontSize: '2',
28
27
  fontWeight: 'bold',
29
28
  } as ComponentStyleConfig,
package/src/Components/Form/Input/Input.tsx CHANGED
@@ -18,6 +18,7 @@ import { TypeColors } from '../../../Foundations/Colors/Colors';
18
18
  import Icon, { TypeIconName } from '../../Icon/Icon';
19
19
  import Text from '../../Text/Text';
20
20
  import Box from '../../Box/Box';
21
+ import Tooltip, { TooltipProps } from '../../Tooltip/Tooltip';
21
22
 
22
23
  type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
23
24
  type UsedChakraInputProps = Pick<
@@ -40,6 +41,8 @@ type UsedChakraInputProps = Pick<
40
41
  export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
41
42
  'data-testid'?: string;
42
43
  errorText?: ReactNode;
44
+ infoText?: string;
45
+ infoTooltipProps?: TooltipProps;
43
46
  isLoading?: boolean;
44
47
  helperText?: ReactNode;
45
48
  inputRef?: Ref<HTMLInputElement>;
@@ -64,6 +67,8 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
64
67
  errorText,
65
68
  helperText,
66
69
  isDisabled,
70
+ infoText,
71
+ infoTooltipProps,
67
72
  inputRef,
68
73
  inputStyle,
69
74
  isInvalid,
@@ -138,7 +143,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
138
143
 
139
144
  return (
140
145
  <FormControl {...formControlProps}>
141
- <Box display="flex" justifyContent="space-between">
146
+ <Box display="flex" gap="4" alignItems="center" marginBlockEnd="4">
142
147
  {label && (
143
148
  <FormLabel
144
149
  requiredIndicator={null as any}
@@ -151,8 +156,20 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
151
156
  {label}
152
157
  </FormLabel>
153
158
  )}
159
+ {!!infoText && (
160
+ <Tooltip label={infoText} placement="right" {...infoTooltipProps}>
161
+ <Icon color="neutral.50" name="Info" size="16" />
162
+ </Tooltip>
163
+ )}
164
+
154
165
  {withCounter && maxLength && (
155
- <Text as="span" size="2" color="neutral.40" sx={{ fontVariantNumeric: 'tabular-nums' }}>
166
+ <Text
167
+ as="span"
168
+ size="2"
169
+ color="neutral.40"
170
+ sx={{ fontVariantNumeric: 'tabular-nums' }}
171
+ marginInlineStart="auto"
172
+ >
156
173
  {valueLength}/{maxLength}
157
174
  </Text>
158
175
  )}
package/src/Components/Form/Textarea/Textarea.tsx CHANGED
@@ -11,6 +11,8 @@ import {
11
11
  } from '@chakra-ui/react';
12
12
  import Text from '../../Text/Text';
13
13
  import Box from '../../Box/Box';
14
+ import Icon from '../../Icon/Icon';
15
+ import Tooltip, { TooltipProps } from '../../Tooltip/Tooltip';
14
16
 
15
17
  type UsedFormControlProps = Omit<FormControlProps, 'label' | 'onBlur' | 'onChange'>;
16
18
  type UsedChakraTextProps = Pick<
@@ -21,6 +23,8 @@ type UsedChakraTextProps = Pick<
21
23
  export interface TextareaProps extends UsedFormControlProps, UsedChakraTextProps {
22
24
  'data-testid'?: string;
23
25
  errorText?: string;
26
+ infoText?: string;
27
+ infoTooltipProps?: TooltipProps;
24
28
  isLoading?: boolean;
25
29
  helperText?: string;
26
30
  label?: ReactNode;
@@ -41,6 +45,8 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
41
45
  'data-testid': dataTestid,
42
46
  errorText,
43
47
  helperText,
48
+ infoText,
49
+ infoTooltipProps,
44
50
  isDisabled,
45
51
  isInvalid,
46
52
  isLoading,
@@ -90,7 +96,7 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
90
96
  return (
91
97
  <FormControl {...formControlProps}>
92
98
  {label && (
93
- <Box display="flex" justifyContent="space-between">
99
+ <Box display="flex" gap="4" alignItems="center" marginBlockEnd="4">
94
100
  <FormLabel
95
101
  requiredIndicator={null as any}
96
102
  optionalIndicator={
@@ -101,8 +107,19 @@ const Textarea = forwardRef<TextareaProps, 'div'>((props, ref) => {
101
107
  >
102
108
  {label}
103
109
  </FormLabel>
110
+ {!!infoText && (
111
+ <Tooltip label={infoText} placement="right" {...infoTooltipProps}>
112
+ <Icon color="neutral.50" name="Info" size="16" />
113
+ </Tooltip>
114
+ )}
104
115
  {withCounter && maxLength && (
105
- <Text as="span" size="2" color="neutral.40" sx={{ fontVariantNumeric: 'tabular-nums' }}>
116
+ <Text
117
+ as="span"
118
+ size="2"
119
+ color="neutral.40"
120
+ sx={{ fontVariantNumeric: 'tabular-nums' }}
121
+ marginInlineStart="auto"
122
+ >
106
123
  {valueLength}/{maxLength}
107
124
  </Text>
108
125
  )}
package/src/Components/Sidebar/SidebarItem.theme.ts CHANGED
@@ -25,9 +25,10 @@ const SidebarItemTheme = itemHelpers.defineMultiStyleConfig({
25
25
  variants: {
26
26
  disabled: {
27
27
  link: {
28
- color: 'neutral.60',
28
+ color: 'neutral.80',
29
29
  _hover: { bg: 'unset' },
30
30
  _active: { bg: 'unset' },
31
+ cursor: 'not-allowed',
31
32
  },
32
33
  },
33
34
  selected: {