@bitrise/bitkit 10.31.0 → 10.31.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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/Components/Form/Form.theme.ts +3 -0
  3. package/src/Components/Form/Input/Input.stories.tsx +1 -1
  4. package/src/Components/Form/Input/Input.theme.ts +0 -3
  5. package/src/Components/Form/Input/Input.tsx +10 -7
  6. 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.1",
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
@@ -3,6 +3,9 @@ import type { ComponentStyleConfig } from '@chakra-ui/theme';
3
3
  const FormTheme = {
4
4
  Form: {
5
5
  baseStyle: {
6
+ container: {
7
+ zIndex: 0,
8
+ },
6
9
  helperText: {
7
10
  fontSize: '2',
8
11
  lineHeight: '2',
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,6 +10,7 @@ import {
10
10
  forwardRef,
11
11
  InputGroup,
12
12
  InputLeftElement,
13
+ InputRightAddon,
13
14
  InputRightElement,
14
15
  } from '@chakra-ui/react';
15
16
  import Icon, { TypeIconName } from '../../Icon/Icon';
@@ -40,7 +41,7 @@ export interface InputProps extends UsedFormControlProps, UsedChakraInputProps {
40
41
  inputRef?: Ref<HTMLInputElement>;
41
42
  label?: ReactNode;
42
43
  leftIconName?: TypeIconName;
43
- rightElement?: ReactNode;
44
+ rightAddon?: ReactNode;
44
45
  rightIconName?: TypeIconName;
45
46
  }
46
47
 
@@ -69,7 +70,7 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
69
70
  step,
70
71
  onBlur,
71
72
  onChange,
72
- rightElement,
73
+ rightAddon,
73
74
  rightIconName,
74
75
  name,
75
76
  role,
@@ -103,10 +104,12 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
103
104
  type,
104
105
  value,
105
106
  };
107
+
108
+ const InputWrapper = leftIconName || rightAddon || rightIconName ? InputGroup : Fragment;
106
109
  return (
107
110
  <FormControl {...formControlProps}>
108
111
  {label && <FormLabel>{label}</FormLabel>}
109
- <InputGroup>
112
+ <InputWrapper>
110
113
  {leftIconName && (
111
114
  <InputLeftElement margin="12px" pointerEvents="none">
112
115
  <Icon name={leftIconName} />
@@ -117,13 +120,13 @@ const Input = forwardRef<InputProps, 'div'>((props, ref) => {
117
120
  paddingRight={rightIconName ? '43px' : '11px'}
118
121
  {...inputProps}
119
122
  />
120
- {rightElement && <InputRightElement>{rightElement}</InputRightElement>}
121
- {!rightElement && rightIconName && (
123
+ {rightAddon && <InputRightAddon>{rightAddon}</InputRightAddon>}
124
+ {!rightAddon && rightIconName && (
122
125
  <InputRightElement margin="12px" pointerEvents="none">
123
126
  <Icon name={rightIconName} />
124
127
  </InputRightElement>
125
128
  )}
126
- </InputGroup>
129
+ </InputWrapper>
127
130
  {errorText && <FormErrorMessage as="p">{errorText}</FormErrorMessage>}
128
131
  {helperText && <FormHelperText as="p">{helperText}</FormHelperText>}
129
132
  </FormControl>