Merge branch 'action-redesign/helper-text-placement' of https://githu…

…b.com/appsmithorg/appsmith into action-redesign/anthropic
appsmithorg · Aug 21, 2024 · 57f51bb · 57f51bb
2 parents e2e5c41 + dd2b3cd
commit 57f51bb
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx b/app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx
@@ -8,8 +8,8 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
     //SWITCH and CHECKBOX display label text and form input aligned side by side
     props?.config?.controlType !== "SWITCH" &&
     props?.config?.controlType !== "CHECKBOX"
-      ? "block;"
-      : "inline-block;"}
+      ? "block"
+      : "inline-block"};
   font-weight: normal;
   color: var(--ads-v2-color-fg-muted);
   font-size: 12px;
@@ -19,7 +19,12 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
     props?.config?.controlType !== "CHECKBOX"
       ? "1px"
       : "0px"};
-  margin-top: 5px;
+  margin-top: ${(props) =>
+    //SWITCH and CHECKBOX display label text and form input aligned side by side but not for others
+    props?.config?.controlType === "SWITCH" ||
+    props?.config?.controlType === "CHECKBOX"
+      ? "0px"
+      : "5px"};
   margin-bottom: ${(props) =>
     //SWITCH and CHECKBOX display label text and form input aligned side by side but not for others
     props?.config?.controlType !== "SWITCH" &&
@@ -30,15 +35,15 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
 `;
 
 const FormSubtitleText = styled.span<{ config?: ControlProps }>`
-display: ${(props) =>
-  //SWITCH and CHECKBOX display label text and form input aligned side by side
-  props?.config?.controlType !== "SWITCH" &&
-  props?.config?.controlType !== "CHECKBOX"
-    ? "block;"
-    : "inline;"}
-font-weight: normal;
-color: var(--ads-v2-color-fg-muted);
-font-size: 12px;
+  display: ${(props) =>
+    //SWITCH and CHECKBOX display label text and form input aligned side by side
+    props?.config?.controlType !== "SWITCH" &&
+    props?.config?.controlType !== "CHECKBOX"
+      ? "block"
+      : "inline"};
+  font-weight: normal;
+  color: var(--ads-v2-color-fg-muted);
+  font-size: 12px;
 `;
 
 //Styled help text, intended to be used with Form Fields

diff --git a/app/client/src/pages/Editor/FormConfig.tsx b/app/client/src/pages/Editor/FormConfig.tsx
@@ -68,6 +68,12 @@ interface FormConfigProps extends FormControlProps {
   changesViewType: boolean;
 }
 
+const controlsWithSubtitleInTop = [
+  "ARRAY_FIELD",
+  "WHERE_CLAUSE",
+  "QUERY_DYNAMIC_TEXT",
+];
+
 // top contains label, subtitle, urltext, tooltip, display type
 // bottom contains the info and error text
 // props.children will render the form element
@@ -177,6 +183,7 @@ function renderFormConfigTop(props: {
   changesViewType: boolean;
 }) {
   const {
+    controlType,
     encrypted,
     isRequired,
     label,
@@ -186,16 +193,21 @@ function renderFormConfigTop(props: {
     url,
     urlText,
   } = { ...props.config };
+  const shouldRenderSubtitle =
+    subtitle && controlsWithSubtitleInTop.includes(controlType);
   return (
     <div className="form-config-top" key={props.config.label}>
       {!nestedFormControl && // if the form control is a nested form control hide its label
-        (label?.length > 0 || encrypted || tooltipText || subtitle) && (
+        (label?.length > 0 ||
+          encrypted ||
+          tooltipText ||
+          shouldRenderSubtitle) && (
           <>
             <FlexWrapper>
               <FormLabel
                 config={props.config}
                 extraStyles={{
-                  marginBottom: !!subtitle && "0px",
+                  marginBottom: shouldRenderSubtitle && "0px",
                   minWidth: !!props.changesViewType && "unset",
                 }}
               >
@@ -238,7 +250,7 @@ function renderFormConfigTop(props: {
                 />
               )}
             </FlexWrapper>
-            {subtitle && (
+            {shouldRenderSubtitle && (
               <FormInfoText config={props.config}>{subtitle}</FormInfoText>
             )}
           </>
@@ -256,9 +268,12 @@ function renderFormConfigBottom(props: {
   config: ControlProps;
   configErrors?: EvaluationError[];
 }) {
-  const { controlType, info } = { ...props.config };
+  const { controlType, info, subtitle } = { ...props.config };
   return (
     <>
+      {subtitle && !controlsWithSubtitleInTop.includes(controlType) && (
+        <FormInfoText config={props.config}>{subtitle}</FormInfoText>
+      )}
       {info && (
         <FormInputHelperText
           addMarginTop={controlType === "CHECKBOX" ? "8px" : "2px"} // checkboxes need a higher margin top than others form control types