@bitrise/bitkit 12.96.0 → 12.98.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.96.0",
+  "version": "12.98.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Form/TagsInput/TagsInput.tsx

@@ -41,12 +41,6 @@ const TagsInput = ({
   ...rest
 }: TagsInputProps) => {
   const theme = useStyleConfig('TagsInput');
-  const keyupHandler: KeyboardEventHandler<HTMLInputElement> = (ev) => {
-    const target = ev.currentTarget;
-    if (ev.key === 'Backspace' && target.value.length === 0) {
-      onRemove(value[value.length - 1]);
-    }
-  };
   const addValues = (maybeValues: string) => {
     const newValue = maybeValues.split(separator).filter((item) => item && !item.match(/\s/) && !value.includes(item));
     if (newValue.length > 0) {
@@ -59,6 +53,8 @@ const TagsInput = ({
       ev.preventDefault();
       addValues(target.value);
       target.value = '';
+    } else if (ev.key === 'Backspace' && target.value.length === 0) {
+      onRemove(value[value.length - 1]);
     }
   };
   const pasteEventHandler: ClipboardEventHandler<HTMLInputElement> = (ev) => {
@@ -125,24 +121,15 @@ const TagsInput = ({
             {item}
           </Tag>
         ))}
-        {value.length === 0 && placeholder && (
-          <Text
-            color="sys.fg.subtle"
-            pointerEvents="none"
-            position="absolute"
-            sx={{ ':has(+ :focus-visible)': { display: 'none' } }}
-          >
-            {placeholder}
-          </Text>
-        )}
         <chakra.input
           _focusVisible={{ boxShadow: 'none' }}
           flexGrow="1"
+          height="26px"
           id={id}
           onBlur={blurHandler}
           onKeyDown={keydownHandler}
-          onKeyUp={keyupHandler}
           onPaste={pasteEventHandler}
+          placeholder={value.length === 0 ? placeholder : undefined}
         />
         {isInvalid && <Icon color="icon.negative" name="ErrorCircleFilled" position="absolute" right="16" />}
       </Box>

package/src/Components/Icons/16x16/Configure.tsx

@@ -0,0 +1,12 @@
+import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
+
+const Configure = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      d="M7.148 3.333A1.327 1.327 0 0 0 6 2.667c-.492 0-.918.269-1.148.666H2v1.334h2.852c.23.397.656.666 1.148.666.492 0 .917-.269 1.148-.666H14V3.333H7.148ZM10 6.667a1.33 1.33 0 0 0-1.149.666H2v1.334h6.851c.232.397.657.666 1.149.666s.917-.269 1.149-.666H14V7.333h-2.851A1.328 1.328 0 0 0 10 6.667Zm-5.101 4.666a1.33 1.33 0 0 1 2.202 0H14v1.334H7.193c-.216.442-.667.75-1.193.75s-.977-.308-1.193-.75H2v-1.334h2.899Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default Configure;

package/src/Components/Icons/16x16/index.ts

@@ -65,6 +65,7 @@ export { default as Code } from './Code';
 export { default as Coffee } from './Coffee';
 export { default as Commit } from './Commit';
 export { default as Conference } from './Conference';
+export { default as Configure } from './Configure';
 export { default as ConnectedAccounts } from './ConnectedAccounts';
 export { default as Cordova } from './Cordova';
 export { default as Cpu } from './Cpu';

package/src/Components/Icons/24x24/Configure.tsx

@@ -0,0 +1,12 @@
+import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
+
+const Configure = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      d="M10.723 5A1.99 1.99 0 0 0 9 4c-.738 0-1.376.404-1.722 1H3v2h4.278c.346.596.984 1 1.722 1a1.99 1.99 0 0 0 1.723-1H21V5H10.723ZM15 10c-.738 0-1.376.404-1.723 1H3v2h10.277c.347.596.985 1 1.723 1 .738 0 1.376-.404 1.723-1H21v-2h-4.277c-.347-.596-.985-1-1.723-1ZM7.348 17a1.994 1.994 0 0 1 3.304 0H21v2H10.79A1.993 1.993 0 0 1 9 20.125 1.993 1.993 0 0 1 7.21 19H3v-2h4.348Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default Configure;

package/src/Components/Icons/24x24/index.ts

@@ -65,6 +65,7 @@ export { default as Code } from './Code';
 export { default as Coffee } from './Coffee';
 export { default as Commit } from './Commit';
 export { default as Conference } from './Conference';
+export { default as Configure } from './Configure';
 export { default as ConnectedAccounts } from './ConnectedAccounts';
 export { default as Cordova } from './Cordova';
 export { default as Cpu } from './Cpu';

package/src/Foundations/Icons/figmaIcons.ts

@@ -61,16 +61,16 @@ export const figmaIcons: {
     { figmaToken: 'step-version-ok', iconName: 'StepVersionOk' },
   ],
   Computer: [
-    { figmaToken: 'cpu', iconName: 'Cpu' },
     { figmaToken: 'memory', iconName: 'Cache', tags: 'cache, ram' },
+    { figmaToken: 'configure', iconName: 'Configure' },
+    { figmaToken: 'cpu', iconName: 'Cpu' },
     { figmaToken: 'file-doc', iconName: 'FileDoc' },
     { figmaToken: 'file-pdf', iconName: 'FilePdf' },
     { figmaToken: 'file-plist', iconName: 'FilePlist' },
     { figmaToken: 'file-zip', iconName: 'FileZip' },
     { figmaToken: 'login', iconName: 'Login' },
     { figmaToken: 'logout', iconName: 'Logout' },
-    { figmaToken: 'configure', iconName: 'Filter', tags: 'configuration, preferences' },
-    { figmaToken: 'filter', iconName: '', tags: 'filtering, funnel' },
+    { figmaToken: 'filter', iconName: 'Filter', tags: 'configuration, preferences' },
     { figmaToken: 'copy', iconName: 'Duplicate', tags: 'clone, duplicate' },
     { figmaToken: 'download', iconName: 'Download' },
     { figmaToken: 'install', iconName: '' },