chore: update KeyInput

taskany-inc · May 21, 2024 · 91a4d76 · 91a4d76
1 parent 65a6bf0
commit 91a4d76
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/KeyInput/KeyInput.tsx b/src/components/KeyInput/KeyInput.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useRef, useState } from 'react';
-import { Button, KeyCode, useKeyboard, Popup } from '@taskany/bricks';
-import { FormControl, FormControlInput, Text } from '@taskany/bricks/harmony';
+import { KeyCode, useKeyboard } from '@taskany/bricks';
+import { FormControl, FormControlInput, Button, Tooltip } from '@taskany/bricks/harmony';
 
 import { keyPredictor } from '../../utils/keyPredictor';
 import {
@@ -122,18 +122,19 @@ const KeyInput: React.FC<KeyInputProps> = ({
                 )}
             </span>
 
-            <Popup
+            <Tooltip
+                arrow
+                offset={[0, 8]}
+                minWidth={200}
+                maxWidth={250}
                 placement="left"
                 visible={(Boolean(tooltip) || error) && popupVisible}
-                view={available === true && !error ? 'primary' : 'danger'}
                 reference={popupRef}
-                interactive
-                minWidth={200}
-                maxWidth={250}
+                view={available === true && !error ? 'success' : 'danger'}
                 {...(available === true && !error ? projectKeyPredictorHint.attr : projectKeyPredictorError.attr)}
             >
-                <Text size="s">{error?.message || tooltip}</Text>
-            </Popup>
+                {error?.message || tooltip}
+            </Tooltip>
         </>
     );
 };

diff --git a/src/utils/domObjects.ts b/src/utils/domObjects.ts
@@ -23,8 +23,8 @@ export const projectCancelButton = projectCreateForm.add('cancelButton');
 export const projectSubmitButton = projectCreateForm.add('submitButton');
 export const projectKeyPredictor = projectCreateForm.add('keyPredictor');
 export const projectKeyPredictorInput = projectCreateForm.add('keyPredictorInput');
-export const projectKeyPredictorHint = projectCreateForm.add('keyPredictorHint');
-export const projectKeyPredictorError = projectCreateForm.add('keyPredictorError');
+export const projectKeyPredictorHint = DO('keyPredictorHint');
+export const projectKeyPredictorError = DO('keyPredictorError');
 
 export const pageHeader = DO('pageHeader');
 export const pageTitle = pageHeader.add('title');