fix: Boolean editable field not align properly (#1444)

This commit is contained in:
Jérémy M
2023-09-05 09:50:23 +02:00
committed by GitHub
parent 33c67214d6
commit 421066c4b8

View File

@ -13,10 +13,11 @@ import { FieldDefinition } from '../types/FieldDefinition';
import { FieldBooleanMetadata } from '../types/FieldMetadata'; import { FieldBooleanMetadata } from '../types/FieldMetadata';
const StyledEditableBooleanFieldContainer = styled.div` const StyledEditableBooleanFieldContainer = styled.div`
align-items: center;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
`; `;
const StyledBooleanFieldIcon = styled.div``;
const StyledEditableBooleanFieldValue = styled.div` const StyledEditableBooleanFieldValue = styled.div`
margin-left: ${({ theme }) => theme.spacing(1)}; margin-left: ${({ theme }) => theme.spacing(1)};
`; `;
@ -54,13 +55,11 @@ export function GenericEditableBooleanFieldDisplayMode() {
return ( return (
<StyledEditableBooleanFieldContainer onClick={toggleValue}> <StyledEditableBooleanFieldContainer onClick={toggleValue}>
<StyledBooleanFieldIcon> {fieldValue ? (
{fieldValue ? ( <IconCheck size={theme.icon.size.sm} />
<IconCheck size={theme.icon.size.sm} /> ) : (
) : ( <IconX size={theme.icon.size.sm} />
<IconX size={theme.icon.size.sm} /> )}
)}
</StyledBooleanFieldIcon>
<StyledEditableBooleanFieldValue> <StyledEditableBooleanFieldValue>
{fieldValue ? 'True' : 'False'} {fieldValue ? 'True' : 'False'}
</StyledEditableBooleanFieldValue> </StyledEditableBooleanFieldValue>