@bitrise/bitkit 10.31.0 → 10.31.2

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/Input/Input.stories.tsx +1 -1
  3. package/src/Components/Form/Input/Input.theme.ts +0 -3
  4. package/src/Components/Form/Input/Input.tsx +16 -7
  5. package/src/tsconfig.tsbuildinfo +1 -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": "10.31.0",
4
+ "version": "10.31.2",
5
5
  "repository": "git@github.com:bitrise-io/bitkit.git",
6
6
  "main": "src/index.ts",
7
7
  "license": "UNLICENSED",
package/src/Components/Form/Input/Input.stories.tsx CHANGED
@@ -35,7 +35,7 @@ export const WithElement = {
35
35
  args: {
36
36
  isDisabled: true,
37
37
  label: 'With additional element (Like IconButton)',
38
- rightElement: (
38
+ rightAddon: (
39
39
  <IconButton aria-label="Copy to clipboard" borderLeftRadius="0" iconName="Duplicate" variant="secondary">
40
40
  eee
41
41
  </IconButton>
package/src/Components/Form/Input/Input.theme.ts CHANGED
@@ -29,9 +29,6 @@ const InputTheme = defineStyle({
29
29
  borderColor: 'red.50',
30
30
  },
31
31
  },
32
- leftElement: {
33
- background: 'red',
34
- },
35
32
  },
36
33
  });
37
34
 
package/src/Components/Form/Input/Input.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactNode, Ref } from 'react';
1
+ import { Fragment, ReactNode, Ref } from 'react';
2
2
  import {
3
3
  FormControl,
4
4
  FormControlProps,
@@ -10,7 +10,9 @@ import {
10
10
  forwardRef,
11
11
  InputGroup,
12
12
  InputLeftElement,
13
+ InputRightAddon,
13
14
  InputRightElement,
15
+ SystemStyleObject,
14
16
  } from '@chakra-ui/react';
15
17
  import Icon, { TypeIconName } from '../../Icon/Icon';
16
18
 
@@ -40,7 +42,7 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
40
42
  inputRef?: Ref<HTMLInputElement>;
41
43
  label?: ReactNode;
42
44
  leftIconName?: TypeIconName;
43
- rightElement?: ReactNode;
45
+ rightAddon?: ReactNode;
44
46
  rightIconName?: TypeIconName;
45
47
  }
46
48
 
@@ -69,7 +71,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
69
71
  step,
70
72
  onBlur,
71
73
  onChange,
72
- rightElement,
74
+ rightAddon,
73
75
  rightIconName,
74
76
  name,
75
77
  role,
@@ -103,10 +105,17 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
103
105
  type,
104
106
  value,
105
107
  };
108
+
109
+ let InputWrapper: any = Fragment;
110
+ const inputWrapperProps: SystemStyleObject = {};
111
+ if (leftIconName || rightAddon || rightIconName) {
112
+ InputWrapper = InputGroup;
113
+ inputWrapperProps.zIndex = 0;
114
+ }
106
115
  return (
107
116
  <FormControl {...formControlProps}>
108
117
  {label && <FormLabel>{label}</FormLabel>}
109
- <InputGroup>
118
+ <InputWrapper {...inputWrapperProps}>
110
119
  {leftIconName && (
111
120
  <InputLeftElement margin="12px" pointerEvents="none">
112
121
  <Icon name={leftIconName} />
@@ -117,13 +126,13 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
117
126
  paddingRight={rightIconName ? '43px' : '11px'}
118
127
  {...inputProps}
119
128
  />
120
- {rightElement && <InputRightElement>{rightElement}</InputRightElement>}
121
- {!rightElement && rightIconName && (
129
+ {rightAddon && <InputRightAddon>{rightAddon}</InputRightAddon>}
130
+ {!rightAddon && rightIconName && (
122
131
  <InputRightElement margin="12px" pointerEvents="none">
123
132
  <Icon name={rightIconName} />
124
133
  </InputRightElement>
125
134
  )}
126
- </InputGroup>
135
+ </InputWrapper>
127
136
  {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
128
137
  {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
129
138
  </FormControl>