Set error message not absolute (#12802)

Before
<img width="485" alt="Capture d’écran 2025-06-23 à 18 52 50"
src="https://github.com/user-attachments/assets/19c60cd1-f241-4419-9d03-d16d019f2c04"
/>

After
<img width="485" alt="Capture d’écran 2025-06-23 à 18 48 01"
src="https://github.com/user-attachments/assets/85b68984-11e0-456b-aacb-5a0661818b9c"
/>
<img width="485" alt="Capture d’écran 2025-06-23 à 18 48 38"
src="https://github.com/user-attachments/assets/7380d537-e8d0-411c-b4f8-7b38b6550e20"
/>
This commit is contained in:
Thomas Trompette
2025-06-23 19:08:40 +02:00
committed by GitHub
parent 7ff2f32438
commit f05da75bb5
2 changed files with 8 additions and 4 deletions

View File

@ -4,7 +4,6 @@ import { FormFieldInputRowContainer } from '@/object-record/record-field/form-ty
import { VariableChipStandalone } from '@/object-record/record-field/form-types/components/VariableChipStandalone';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { TextInput } from '@/ui/field/input/components/TextInput';
import { InputErrorHelper } from '@/ui/input/components/InputErrorHelper';
import { InputHint } from '@/ui/input/components/InputHint';
import { InputLabel } from '@/ui/input/components/InputLabel';
import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
@ -114,6 +113,8 @@ export const FormNumberFieldInput = ({
onChange(variableName);
};
const error = errorMessage ?? errorFromProps;
return (
<FormFieldInputContainer>
{label ? <InputLabel htmlFor={inputId}>{label}</InputLabel> : null}
@ -154,7 +155,7 @@ export const FormNumberFieldInput = ({
</FormFieldInputRowContainer>
{hint ? <InputHint>{hint}</InputHint> : null}
<InputErrorHelper>{errorMessage ?? errorFromProps}</InputErrorHelper>
{error && <InputHint danger>{error}</InputHint>}
</FormFieldInputContainer>
);
};

View File

@ -1,7 +1,10 @@
import styled from '@emotion/styled';
const StyledInputHint = styled.div`
color: ${({ theme }) => theme.font.color.light};
const StyledInputHint = styled.div<{
danger?: boolean;
}>`
color: ${({ danger, theme }) =>
danger ? theme.font.color.danger : theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.regular};
margin-top: ${({ theme }) => theme.spacing(0.5)};