front: fix pr comments

Signed-off-by: Egor Berezovskiy <[email protected]>
OpenRailAssociation · Dec 20, 2024 · c7454b3 · c7454b3
1 parent bb7bba0
commit c7454b3
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 53 deletions.
diff --git a/ui-core/src/components/inputs/FieldWrapper.tsx b/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'}
           />

diff --git a/ui-core/src/components/inputs/Input.tsx b/ui-core/src/components/inputs/Input.tsx
@@ -67,6 +67,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       readOnly = false,
       statusWithMessage,
       inputFieldWrapperClassname = '',
+      statusIconPosition,
       small = false,
       withIcons = [],
       onKeyUp,
@@ -86,7 +87,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         disabled={disabled}
         required={required}
         small={small}
-        statusIconPosition="before-status-message"
+        statusIconPosition={statusIconPosition}
         className={cx('input-field-wrapper', inputFieldWrapperClassname)}
       >
         <div

diff --git a/ui-core/src/components/inputs/StatusMessage.tsx b/ui-core/src/components/inputs/StatusMessage.tsx
@@ -30,6 +30,8 @@ const StatusMessage = ({ statusWithMessage, showIcon, small }: StatusMessageProp
         'status-message-wrapper-tooltip': tooltip,
         'tooltip-left': tooltip === 'left',
         'tooltip-right': tooltip === 'right',
+        small,
+        [status]: status,
       })}
     >
       {showIcon && <InputStatusIcon status={status} small={small} />}

diff --git a/ui-core/src/stories/Input.stories.tsx b/ui-core/src/stories/Input.stories.tsx
@@ -172,7 +172,23 @@ 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',
+    },
+    statusIconPosition: 'before-status-message',
+  },
+};
+
+export const TwoTooltipErrorInput: Story = {
   decorators: [
     (Story) => (
       <div style={{ display: 'flex', flexDirection: 'row', gap: '20px' }}>

diff --git a/ui-core/src/styles/inputs/fieldWrapper.css b/ui-core/src/styles/inputs/fieldWrapper.css
@@ -1,7 +1,3 @@
-:root {
-  --tooltip-transition-duration: 0.2s;
-}
-
 .feed-back {
   border-radius: 0.5rem;
   position: relative;
@@ -32,53 +28,5 @@
         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;
   }
 }
diff --git a/ui-core/src/styles/inputs/statusMessage.css b/ui-core/src/styles/inputs/statusMessage.css
@@ -31,3 +31,60 @@
     }
   }
 }
+
+.status-message-wrapper-tooltip {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  width: 320px;
+  top: 74px;
+  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;
+  padding: 6px 12px 10px;
+  min-height: 64px;
+  z-index: 10;
+
+  &.small {
+    top: 58px;
+  }
+
+  &.error {
+    background-color: theme('colors.error.5');
+  }
+
+  &.info {
+    background-color: theme('colors.info.5');
+  }
+
+  &.warning {
+    background-color: theme('colors.warning.5');
+  }
+
+  &.tooltip-left {
+    left: -5px;
+  }
+
+  &.tooltip-right {
+    right: -5px;
+  }
+
+  .status-message {
+    font-weight: 600;
+    text-align: left;
+
+    &.error {
+      color: theme('colors.error.60');
+    }
+
+    &.info {
+      color: theme('colors.info.60');
+    }
+
+    &.warning {
+      color: theme('colors.warning.60');
+    }
+  }
+}