front: ui-core input tooltip status messages

Signed-off-by: Egor Berezovskiy <[email protected]>

Author: Wadjetz

ui-core/src/components/inputs/Input.tsx

@@ -86,6 +86,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         disabled={disabled}
         required={required}
         small={small}
+        statusIconPosition="before-status-message"
         className={cx('input-field-wrapper', inputFieldWrapperClassname)}
       >
         <div

ui-core/src/components/inputs/StatusMessage.tsx

@@ -5,8 +5,10 @@ import cx from 'classnames';
 import InputStatusIcon from './InputStatusIcon';
 
 export type Status = 'success' | 'info' | 'error' | 'warning' | 'loading';
+export type TooltipType = 'left' | 'right';
 
 export type StatusWithMessage = {
+  tooltip?: TooltipType;
   status: Status;
   message?: string;
 };
@@ -18,11 +20,18 @@ export type StatusMessageProps = {
 };
 
 const StatusMessage = ({ statusWithMessage, showIcon, small }: StatusMessageProps) => {
-  const { status, message } = statusWithMessage;
+  const { tooltip, status, message } = statusWithMessage;
   if (message === undefined) return null;
 
   return (
-    <div className="status-message-wrapper">
+    <div
+      className={cx({
+        'status-message-wrapper': !tooltip,
+        'status-message-wrapper-tooltip': tooltip,
+        'tooltip-left': tooltip === 'left',
+        'tooltip-right': tooltip === 'right',
+      })}
+    >
       {showIcon && <InputStatusIcon status={status} small={small} />}
       <span className={cx('status-message', { [status]: status })}>{message}</span>
     </div>

ui-core/src/stories/Input.stories.tsx

@@ -172,6 +172,40 @@ export const ErrorInput: Story = {
     },
   },
 };
+export const TooltipErrorInput: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ display: 'flex', flexDirection: 'row', gap: '20px' }}>
+        <Story
+          args={{
+            label: 'Name',
+            type: 'text',
+            value: 'Michel Sardou',
+            statusWithMessage: {
+              tooltip: 'left',
+              status: 'error',
+              message: 'Michel Sardou can’t be used',
+            },
+            statusIconPosition: 'before-status-message',
+          }}
+        />
+        <Story
+          args={{
+            label: 'Name',
+            type: 'text',
+            value: 'Jean-Michel Halleurt',
+            statusWithMessage: {
+              tooltip: 'right',
+              status: 'error',
+              message: 'Jean-Michel Halleurt can’t be used with a very very very  very very very very very very long message',
+            },
+            statusIconPosition: 'before-status-message',
+          }}
+        />
+      </div>
+    ),
+  ],
+};
 
 export const ErrorWithoutMessageInput: Story = {
   args: {

ui-core/src/styles/inputs/fieldWrapper.css

@@ -1,23 +1,28 @@
+:root {
+  --tooltip-transition-duration: 0.2s;
+}
+
 .feed-back {
   border-radius: 0.5rem;
   position: relative;
   padding: 0.625rem 0.813rem 1rem 1rem;
 
-  &.info {
+  &.info:not(:has(.status-message-wrapper-tooltip)) {
     @apply bg-info-5;
   }
 
-  &.warning {
+  &.warning:not(:has(.status-message-wrapper-tooltip)) {
     @apply bg-warning-5;
   }
 
-  &.error {
+  &.error:not(:has(.status-message-wrapper-tooltip)) {
     @apply bg-error-5;
   }
 
   .custom-field {
     display: flex;
     flex-direction: column;
+    position: relative;
 
     .field-and-status-icon,
     .field-wrapper-status-message {
@@ -28,5 +33,53 @@
         margin-left: 0.563rem;
       }
     }
+
+    input:focus:has(.status-message-wrapper-tooltip) .status-message-wrapper-tooltip {
+      z-index: 2;
+    }
+
+    .status-message-wrapper-tooltip {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      width: 320px;
+      top: 60px;
+      gap: 12px;
+      border-radius: 8px;
+      box-shadow:
+        0px 10px 20px 0px rgba(0, 0, 0, 0.2),
+        0px 1px 0px rgba(255, 255, 255, 0.6) inset;
+      background-color: theme('colors.error.5');
+      opacity: 1;
+      padding: 8px 12px;
+      min-height: 64px;
+
+      z-index: 10;
+      transition: var(--tooltip-transition-duration) ease;
+
+      .status-message {
+        opacity: 1;
+        color: theme('colors.error.60');
+        font-size: 16px;
+        font-weight: 600;
+        font-style: SemiBold;
+        letter-spacing: 0px;
+        text-align: left;
+        line-height: 24px;
+      }
+    }
+    .tooltip-left {
+      left: -5px;
+    }
+
+    .tooltip-right {
+      right: -5px;
+    }
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --tooltip-transition-duration: 0s;
   }
 }