use tooltip instead of title + grey background

fix eslint rule
checkmarble · Jul 12, 2023 · d262b43 · d262b43
1 parent f91535e
commit d262b43
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 20 deletions.
diff --git a/...s/app-builder/src/routes/__builder/scenarios/$scenarioId/i/$iterationId/edit/decision.tsx b/...s/app-builder/src/routes/__builder/scenarios/$scenarioId/i/$iterationId/edit/decision.tsx
@@ -11,7 +11,7 @@ import { DevTool } from '@hookform/devtools';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { type ActionArgs, json } from '@remix-run/node';
 import { useSubmit } from '@remix-run/react';
-import { Button, Input } from '@ui-design-system';
+import { Button, Input, Tooltip } from '@ui-design-system';
 import { type Namespace } from 'i18next';
 import { Form, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
@@ -125,13 +125,17 @@ export default function Decision() {
         <Outcome border="square" size="big" outcome="approve" />
         <div className="flex flex-row items-center gap-1 lg:gap-2">
           {t('scenarios:decision.score_based.approve_condition')}
-          <Input
-            title={hoverLabel}
-            {...register('thresholds.0')}
-            type="number"
-            className="relative w-fit"
-            disabled={!isEditable}
-          />
+          <Tooltip.Default
+            content={hoverLabel}
+            open={isEditable ? false : undefined}
+          >
+            <Input
+              {...register('thresholds.0')}
+              type="number"
+              className="relative w-fit"
+              disabled={!isEditable}
+            />
+          </Tooltip.Default>
         </div>
 
         <Outcome border="square" size="big" outcome="review" />
@@ -140,17 +144,26 @@ export default function Decision() {
         <Outcome border="square" size="big" outcome="decline" />
         <div className="flex flex-row items-center gap-1 lg:gap-2">
           {t('scenarios:decision.score_based.decline_condition')}
-          <Input
-            title={hoverLabel}
-            className="relative w-fit"
-            {...register('thresholds.1')}
-            type="number"
-            disabled={!isEditable}
-          />
+          <Tooltip.Default
+            content={hoverLabel}
+            open={isEditable ? false : undefined}
+          >
+            <Input
+              className="relative w-fit"
+              {...register('thresholds.1')}
+              type="number"
+              disabled={!isEditable}
+            />
+          </Tooltip.Default>
         </div>
-        <Button type="submit" title={hoverLabel} disabled={!isEditable}>
-          Submit
-        </Button>
+        <Tooltip.Default
+          content={hoverLabel}
+          open={isEditable ? false : undefined}
+        >
+          <Button type="submit" title={hoverLabel} disabled={!isEditable}>
+            Submit
+          </Button>
+        </Tooltip.Default>
         {errors.thresholds?.message && (
           <div className="bg-grey-00 text-s text-red-100">
             {errors.thresholds?.message}

diff --git a/packages/app-builder/src/services/editor/identifiers.tsx b/packages/app-builder/src/services/editor/identifiers.tsx
@@ -3,9 +3,10 @@ import { createSimpleContext } from '@app-builder/utils/create-context';
 
 function getIdentifierDisplayName(identifiers: AstNode) {
   switch (identifiers.name) {
-    case 'DatabaseAccess':
+    case 'DatabaseAccess': {
       const { path, fieldName } = identifiers.namedChildren;
       return [...path.constant, fieldName.constant].join('.');
+    }
     default:
       return undefined;
   }

diff --git a/packages/ui-design-system/src/Input/Input.tsx b/packages/ui-design-system/src/Input/Input.tsx
@@ -17,7 +17,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         <input
           ref={ref}
           className={clsx(
-            'bg-grey-00 border-grey-10 text-s text-grey-100 placeholder:text-grey-50 peer block h-full w-full rounded border px-2 font-medium outline-none focus:border-purple-100',
+            'bg-grey-00 border-grey-10 text-s text-grey-100 placeholder:text-grey-50 disabled:bg-grey-02 peer block h-full w-full rounded border px-2 font-medium outline-none focus:border-purple-100',
             startAdornment && 'pl-10',
             endAdornment && 'pr-10'
           )}