From cbde44de4e3a1597c473892df23c946331f6402d Mon Sep 17 00:00:00 2001
From: Alexander Polyankin <alexander.polyankin@metabase.com>
Date: Fri, 17 Feb 2023 15:00:24 +0200
Subject: [PATCH] Fix form field alignment for checkboxes (#28403)
---
.../core/components/FormField/FormField.styled.tsx | 5 ++++-
.../src/metabase/core/components/FormField/FormField.tsx | 7 ++++++-
2 files changed, 10 insertions(+), 2 deletions(-)
diff --git a/frontend/src/metabase/core/components/FormField/FormField.styled.tsx b/frontend/src/metabase/core/components/FormField/FormField.styled.tsx
index bb714221b04..3957153fba2 100644
--- a/frontend/src/metabase/core/components/FormField/FormField.styled.tsx
+++ b/frontend/src/metabase/core/components/FormField/FormField.styled.tsx
@@ -72,13 +72,16 @@ export const FieldInfoLabel = styled.div`
`;
export interface FieldRootProps {
+ alignment: FieldAlignment;
orientation: FieldOrientation;
}
export const FieldRoot = styled.div<FieldRootProps>`
display: ${props => props.orientation === "horizontal" && "flex"};
justify-content: ${props =>
- props.orientation === "horizontal" && "space-between"};
+ props.alignment === "end" &&
+ props.orientation === "horizontal" &&
+ "space-between"};
margin-bottom: 1.25rem;
&:focus-within {
diff --git a/frontend/src/metabase/core/components/FormField/FormField.tsx b/frontend/src/metabase/core/components/FormField/FormField.tsx
index cd1cd2dc48e..7cf5c83f90b 100644
--- a/frontend/src/metabase/core/components/FormField/FormField.tsx
+++ b/frontend/src/metabase/core/components/FormField/FormField.tsx
@@ -45,7 +45,12 @@ const FormField = forwardRef(function FormField(
const hasError = Boolean(error);
return (
- <FieldRoot {...props} ref={ref} orientation={orientation}>
+ <FieldRoot
+ {...props}
+ ref={ref}
+ alignment={alignment}
+ orientation={orientation}
+ >
{alignment === "start" && children}
{(title || description) && (
<FieldCaption alignment={alignment} orientation={orientation}>
--
GitLab