From 77502f4710340b0de4d8537ba0479966f9839c65 Mon Sep 17 00:00:00 2001
From: Ariya Hidayat <ariya@metabase.com>
Date: Fri, 6 May 2022 08:06:53 -0700
Subject: [PATCH] Fix toggle button alignment (#22464)
---
frontend/src/metabase/components/form/FormField.jsx | 2 ++
frontend/src/metabase/components/form/FormField.styled.jsx | 6 ++++++
2 files changed, 8 insertions(+)
diff --git a/frontend/src/metabase/components/form/FormField.jsx b/frontend/src/metabase/components/form/FormField.jsx
index b2991a05b6e..d72130c9045 100644
--- a/frontend/src/metabase/components/form/FormField.jsx
+++ b/frontend/src/metabase/components/form/FormField.jsx
@@ -76,6 +76,7 @@ function FormField(props) {
};
const formFieldId = `formField-${name.replace(ALL_DOT_CHARS, "-")}`;
+ const isToggle = formField?.type === "boolean";
if (!visited || active) {
// if the field hasn't been visited or is currently active then don't show the error
@@ -98,6 +99,7 @@ function FormField(props) {
id={`${name}-label`}
htmlFor={name}
horizontal={horizontal}
+ standAlone={isToggle && align === "right" && !description}
>
{title}
{error && <span className="text-error">: {error}</span>}
diff --git a/frontend/src/metabase/components/form/FormField.styled.jsx b/frontend/src/metabase/components/form/FormField.styled.jsx
index 31516a432e5..a8bc2f1bcbb 100644
--- a/frontend/src/metabase/components/form/FormField.styled.jsx
+++ b/frontend/src/metabase/components/form/FormField.styled.jsx
@@ -17,6 +17,11 @@ export const Label = styled.label`
css`
margin-right: auto;
`}
+ ${props =>
+ props.standAlone &&
+ css`
+ margin-top: 0.8em;
+ `}
`;
Label.defaultProps = { className: "Form-label" };
@@ -38,6 +43,7 @@ export const InfoLabel = styled.span`
`;
export const FieldContainer = styled.div`
+ width: 100%;
margin-right: ${props => (props.horizontal ? "1rem" : "")};
margin-left: ${props => (props.align === "left" ? "0.5rem" : "")};
`;
--
GitLab