@bitrise/bitkit 10.29.0-alpha-input.1 → 10.29.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.29.0-alpha-input.1",
+  "version": "10.29.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -22,7 +22,6 @@
   "dependencies": {
     "@chakra-ui/react": "^2.2.4",
     "@chakra-ui/react-utils": "^2.0.1",
-    "@chakra-ui/styled-system": "^2.3.1",
     "@chakra-ui/utils": "^2.0.4",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",

package/src/Components/Dropdown/Dropdown.tsx

@@ -1,8 +1,15 @@
 import React, { cloneElement, forwardRef, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { chakra, ChakraProps, useControllableState, useMultiStyleConfig } from '@chakra-ui/react';
+import {
+  chakra,
+  ChakraProps,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  useControllableState,
+  useMultiStyleConfig,
+} from '@chakra-ui/react';
 import { FloatingFocusManager, UseFloatingProps } from '@floating-ui/react-dom-interactions';
-import { TypeIconName } from '../Icon/Icon';
-import Input from '../Form/Input/Input';
+import Icon, { TypeIconName } from '../Icon/Icon';
 import { DropdownEventArgs, DropdownProvider, useDropdownContext, useDropdownStyles } from './Dropdown.context';
 import { DropdownOption, DropdownGroup, DropdownDetailedOption, DropdownOptionProps } from './DropdownOption';
 import DropdownButton from './DropdownButton';
@@ -48,17 +55,21 @@ const DropdownSearch = ({
     [searchOnSubmit],
   );
   return (
-    <Input
-      onKeyDown={onKeyDown}
-      inputRef={searchRef}
-      role="search"
-      aria-label={placeholder}
-      placeholder={placeholder}
-      value={value}
-      onChange={onChangeCB}
-      leftIconName="Magnifier"
-      sx={search}
-    />
+    <InputGroup sx={search}>
+      <InputLeftElement pointerEvents="none">
+        <Icon aria-hidden color="neutral.60" size="24" name="Magnifier" />
+      </InputLeftElement>
+      <Input
+        onKeyDown={onKeyDown}
+        ref={searchRef}
+        role="search"
+        aria-label={placeholder}
+        width="100%"
+        placeholder={placeholder}
+        value={value}
+        onChange={onChangeCB}
+      />
+    </InputGroup>
   );
 };
 export { DropdownOption, DropdownGroup, DropdownSearch, NoResultsFound, DropdownDetailedOption };

package/src/Components/Fade/Fade.stories.tsx

@@ -0,0 +1,5 @@
+import { ComponentMeta } from '@storybook/react';
+import Fade from './Fade';
+
+export default { component: Fade, args: { children: 'test content', in: false } } as ComponentMeta<typeof Fade>;
+export const Default = {};

package/src/Components/Fade/Fade.tsx

@@ -0,0 +1,4 @@
+import { Fade, FadeProps } from '@chakra-ui/react';
+
+export type { FadeProps };
+export default Fade;

package/src/Components/Form/Textarea/Textarea.theme.ts

@@ -1,11 +1,36 @@
-import { defineStyle } from '@chakra-ui/styled-system';
-import InputTheme from '../Input/Input.theme';
+import type { ComponentStyleConfig } from '@chakra-ui/theme';
 
-const TextareaTheme = defineStyle({
+const TextareaTheme: ComponentStyleConfig = {
   baseStyle: {
-    ...InputTheme.baseStyle?.field,
+    width: '100%',
     minHeight: '96',
+    padding: '16',
+    background: 'neutral.100',
+    border: '1px solid',
+    borderColor: 'neutral.90',
+    borderRadius: '4',
+    boxShadow: 'inner',
+    outline: 0,
+    appearance: 'none',
+    lineHeight: 'short',
+    verticalAlign: 'top',
+    transition: '200ms',
+    _placeholder: {
+      fontStyle: 'italic',
+    },
+    _disabled: {
+      background: 'neutral.93',
+      cursor: 'not-allowed',
+    },
+    _focusVisible: {
+      boxShadow: 'formFocus',
+      borderColor: 'purple.50',
+    },
+    _invalid: {
+      color: 'red.50',
+      borderColor: 'red.50',
+    },
   },
-});
+};
 
 export default TextareaTheme;

package/src/Components/Input/Input.theme.ts

@@ -0,0 +1,20 @@
+import { SystemStyleObject } from '@chakra-ui/react';
+
+const InputTheme = {
+  baseStyle: {
+    field: <SystemStyleObject>{
+      height: '48',
+      borderRadius: '4',
+      borderStyle: 'solid',
+      borderColor: 'neutral.90',
+      borderWidth: '1px',
+      boxShadow: 'inner',
+      _focusVisible: {
+        boxShadow: 'outline',
+        outline: 'none',
+      },
+    },
+  },
+};
+
+export default InputTheme;

package/src/index.ts

@@ -202,8 +202,5 @@ export { default as Collapse } from './Components/Collapse/Collapse';
 export type { TextareaProps } from './Components/Form/Textarea/Textarea';
 export { default as Textarea } from './Components/Form/Textarea/Textarea';
 
-export type { InputProps } from './Components/Form/Input/Input';
-export { default as Input } from './Components/Form/Input/Input';
-
-export type { FormLabelProps } from './Components/Form/FormLabel/FormLabel';
-export { default as FormLabel } from './Components/Form/FormLabel/FormLabel';
+export type { FadeProps } from './Components/Fade/Fade';
+export { default as Fade } from './Components/Fade/Fade';

package/src/old.ts

@@ -18,6 +18,9 @@ export { default as DatePicker } from './Old/DatePicker/DatePicker';
 export type { Props as FlexProps } from './Old/Flex/Flex';
 export { default as Flex } from './Old/Flex/Flex';
 
+export type { Props as InputProps } from './Old/Input/Input';
+export { default as Input } from './Old/Input/Input';
+
 export type { Props as InputContainerProps } from './Old/Input/InputContainer';
 export { default as InputContainer } from './Old/Input/InputContainer';
 
@@ -44,9 +47,3 @@ export { default as Skeleton } from './Old/Skeleton/Skeleton';
 
 export type { Props as SkeletonBoxProps } from './Old/Skeleton/SkeletonBox';
 export { default as SkeletonBox } from './Old/Skeleton/SkeletonBox';
-
-export type { Props as VisibilityProps } from './Old/Visibility/Visibility';
-export { default as Visibility } from './Old/Visibility/Visibility';
-
-export type { Props as VisibilityContainerProps } from './Old/Visibility/VisibilityContainer';
-export { default as VisibilityContainer } from './Old/Visibility/VisibilityContainer';

package/src/theme.ts

@@ -14,7 +14,7 @@ import List from './Components/List/List.theme';
 import Menu from './Components/Menu/Menu.theme';
 import Radio from './Components/Form/Radio/Radio.theme';
 import Select from './Components/Select/Select.theme';
-import Input from './Components/Form/Input/Input.theme';
+import Input from './Components/Input/Input.theme';
 import Dropdown from './Components/Dropdown/Dropdown.theme';
 import Tabs from './Components/Tabs/Tabs.theme';
 import Text from './Components/Text/Text.theme';