front: ui-core input tooltip status messages

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

@@ -65,6 +65,7 @@ const FieldWrapper = ({
         {/* STATUS MESSAGE */}
         {statusWithMessage && (
           <StatusMessage
+            small={small}
             statusWithMessage={statusWithMessage}
             showIcon={statusIconPosition === 'before-status-message'}
           />

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
 import { Gear, CheckCircle, Info, Alert, Blocked } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 
 export type status = 'success' | 'info' | 'error' | 'warning' | 'loading';
@@ -16,7 +16,7 @@
   return (
     <span className={cx('status-icon', className, status)}>
       {status === 'loading' && <Gear size={size} />}
-      {status === 'info' && <Info size={size} />}
+      {status === 'info' && <Info variant="fill" size={size} />}
       {status === 'success' && <CheckCircle variant="fill" size={size} />}
       {status === 'warning' && <Alert variant="fill" size={size} />}
       {status === 'error' && <Blocked variant="fill" size={size} />}

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,19 @@ 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',
+        [status]: status,
+      })}
+    >
       {showIcon && <InputStatusIcon status={status} small={small} />}
       <span className={cx('status-message', { [status]: status })}>{message}</span>
     </div>

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

@@ -173,6 +173,53 @@ export const ErrorInput: Story = {
   },
 };
 
+export const TooltipErrorInput: Story = {
+  args: {
+    label: 'Name',
+    type: 'text',
+    required: true,
+    value: 'Michel Sardou',
+    statusWithMessage: {
+      tooltip: 'right',
+      status: 'error',
+      message: '“Michel Sardou” can’t be used',
+    },
+  },
+};
+
+export const TwoTooltipErrorInput: 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',
+            },
+          }}
+        />
+        <Story
+          args={{
+            label: 'Name',
+            type: 'text',
+            value: 'Jean-Michel Halleurt',
+            statusWithMessage: {
+              tooltip: 'right',
+              status: 'error',
+              message: 'Jean-Michel Halleurt can’t be used',
+            },
+          }}
+        />
+      </div>
+    ),
+  ],
+};
+
 export const ErrorWithoutMessageInput: Story = {
   args: {
     label: 'Name',

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

@@ -1,17 +1,25 @@
 .feed-back {
+  --input-wrapper-padding: 3px;
+  --field-wrapper-padding-bottom: 16px;
+  --status-message-wrapper-tooltip--offset: 4px;
+
   border-radius: 0.5rem;
   position: relative;
   padding: 0.625rem 0.813rem 1rem 1rem;
 
-  &.info {
+  &.success:not(:has(.status-message-wrapper-tooltip)) {
+    @apply bg-success-5;
+  }
+
+  &.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;
   }
 

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

@@ -31,3 +31,66 @@
     }
   }
 }
+
+.status-message-wrapper-tooltip {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  width: 320px;
+  top: calc(
+    100% - var(--input-wrapper-padding) - var(--field-wrapper-padding-bottom) -
+      var(--status-message-wrapper-tooltip--offset)
+  );
+  gap: 12px;
+  border-radius: 8px;
+  box-shadow:
+    0 10px 20px 0 rgba(0, 0, 0, 0.2),
+    0 1px 0 rgba(255, 255, 255, 0.6) inset;
+  padding: 6px 12px 10px;
+  min-height: 64px;
+  z-index: 10;
+
+  &.success {
+    background-color: theme('colors.success.5');
+  }
+
+  &.error {
+    background-color: theme('colors.error.5');
+  }
+
+  &.info {
+    background-color: theme('colors.info.5');
+  }
+
+  &.warning {
+    background-color: theme('colors.warning.5');
+  }
+
+  &.tooltip-left {
+    left: 8px;
+  }
+
+  &.tooltip-right {
+    right: 8px;
+  }
+
+  .status-message {
+    font-weight: 600;
+
+    &.success {
+      color: theme('colors.success.60');
+    }
+
+    &.error {
+      color: theme('colors.error.60');
+    }
+
+    &.info {
+      color: theme('colors.info.60');
+    }
+
+    &.warning {
+      color: theme('colors.warning.60');
+    }
+  }
+}