+
{showIcon && }
{message}
+ {status === 'info' && (
+
+ )}
);
};
diff --git a/ui-core/src/stories/Input.stories.tsx b/ui-core/src/stories/Input.stories.tsx
index aa869bec..27884955 100644
--- a/ui-core/src/stories/Input.stories.tsx
+++ b/ui-core/src/stories/Input.stories.tsx
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
import { ChevronDown, X } from '@osrd-project/ui-icons';
import type { Meta, StoryObj } from '@storybook/react';
import '@osrd-project/ui-core/dist/theme.css';
import Input from '../components/inputs/Input';
+import { type StatusWithMessage } from '../components/inputs/StatusMessage';
const meta: Meta
= {
component: Input,
@@ -173,6 +174,80 @@ 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 TooltipInfoInput: Story = {
+ args: {
+ label: 'Name',
+ type: 'text',
+ required: true,
+ value: 'Michel Sardou',
+ },
+ decorators: [
+ function Component(Story, ctx) {
+ const [status, setStatus] = useState({
+ tooltip: 'right',
+ status: 'info',
+ message: '“Michel Sardou” can’t be used',
+ });
+ return (
+ setStatus(undefined),
+ }}
+ />
+ );
+ },
+ ],
+};
+
+export const TwoTooltipErrorInput: Story = {
+ decorators: [
+ (Story) => (
+
+
+
+
+ ),
+ ],
+};
+
export const ErrorWithoutMessageInput: Story = {
args: {
label: 'Name',
diff --git a/ui-core/src/styles/inputs/fieldWrapper.css b/ui-core/src/styles/inputs/fieldWrapper.css
index cd8112c3..9ad562b8 100644
--- a/ui-core/src/styles/inputs/fieldWrapper.css
+++ b/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;
}
diff --git a/ui-core/src/styles/inputs/statusMessage.css b/ui-core/src/styles/inputs/statusMessage.css
index b6d46948..83bd561a 100644
--- a/ui-core/src/styles/inputs/statusMessage.css
+++ b/ui-core/src/styles/inputs/statusMessage.css
@@ -31,3 +31,84 @@
}
}
}
+
+.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-inline: 12px;
+ z-index: 10;
+
+ .status-close {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ color: theme('colors.info.30');
+ &:hover {
+ color: theme('colors.info.80');
+ }
+ }
+
+ &.loading {
+ background-color: theme('colors.white.25');
+ }
+
+ &.success {
+ background-color: theme('colors.success.5');
+ }
+
+ &.error {
+ background-color: theme('colors.error.5');
+ }
+
+ &.info {
+ background-color: theme('colors.info.5');
+ padding-inline: 12px 32px;
+ }
+
+ &.warning {
+ background-color: theme('colors.warning.5');
+ }
+
+ &.tooltip-left {
+ left: 8px;
+ }
+
+ &.tooltip-right {
+ right: 8px;
+ }
+
+ .status-message {
+ font-weight: 600;
+ padding-block: 6px 10px;
+
+ &.success {
+ color: theme('colors.success.60');
+ }
+
+ &.error {
+ color: theme('colors.error.60');
+ }
+
+ &.info {
+ color: theme('colors.info.60');
+ }
+
+ &.warning {
+ color: theme('colors.warning.60');
+ }
+ }
+}