refactor: optimized code to render dependent dropdown better

freshworks · Nov 16, 2023 · 982dfb4 · 982dfb4
1 parent 68dc8e7
commit 982dfb4
Show file tree

Hide file tree

Showing 4 changed files with 277 additions and 166 deletions.
diff --git a/...ons-extended/custom-objects/src/components/form-builder/components/fb-field-dropdown.scss b/...ons-extended/custom-objects/src/components/form-builder/components/fb-field-dropdown.scss
@@ -59,6 +59,8 @@ $warning-color: $color-casablanca-300;
 }
 
 .fb-field-dependent {
+  width: calc(100% - 50px);
+
   .fb-field-dropdown-label-dependent-field {
     font-size: 14px;
     line-height: 21px;
@@ -71,14 +73,14 @@ $warning-color: $color-casablanca-300;
   }
 
   .spacing-bottom-1 {
-    margin-block-start: 20px;
+    margin-block-start: 0px;
   }
 
   .spacing-bottom-2 {
-    margin-block-start: 40px;
+    margin-block-start: 20px;
   }
 
   .spacing-bottom-3 {
-    margin-block-start: 60px;
+    margin-block-start: 40px;
   }
 }
diff --git a/.../crayons-extended/custom-objects/src/components/form-builder/components/field-editor.scss b/.../crayons-extended/custom-objects/src/components/form-builder/components/field-editor.scss
@@ -26,10 +26,6 @@
     div {
       width: 100%;
     }
-
-    fw-fb-field-dropdown {
-      width: 270px;
-    }
   }
 }
 
@@ -434,6 +430,22 @@
       flex-direction: column;
     }
   }
+
+  &-content-label-interalName {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &-content-label {
+    text-transform: uppercase;
+    color: $color-elephant-900;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 20px;
+    margin-block-end: 8px;
+    display: block;
+  }
 }
 
 .fw-field-editor-delete-modal-content {