refactor(form): update form wrapper component

eea · Mar 4, 2022 · 0736ec7 · 0736ec7
1 parent 613b19d
commit 0736ec7
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 209 deletions.
diff --git a/src/ui/FormFieldWrapper/FormFieldWrapper.jsx b/src/ui/FormFieldWrapper/FormFieldWrapper.jsx
@@ -13,7 +13,7 @@ function FormFieldWrapper({
       inline
       error={error}
       required={required}
-      className="eea fieldWrapper"
+      className="eea field-wrapper"
     >
       <Grid>
         <Grid.Row verticalAlign="top">
@@ -23,10 +23,9 @@ function FormFieldWrapper({
             </Grid.Column>
           )}
           <Grid.Column
-            computer={columns === 1 ? '4' : '12'}
-            tablet="6"
+            computer={columns === 1 ? '11' : '12'}
+            tablet="10"
             mobile="12"
-            className={`eea fieldWrapper item`}
           >
             {children}
             {error && (

diff --git a/theme/themes/eea/collections/form.overrides b/theme/themes/eea/collections/form.overrides
@@ -2,134 +2,44 @@
          Theme Overrides
 *******************************/
 
-/* Chackbox label must be white on error without affecting @formErrorColor varible */
+/* Checkbox label must be white on error without affecting @formErrorColor variable */
 .ui.form .fields.error .field .checkbox label:after,
 .ui.form .field.error .checkbox label:after,
 .ui.form .fields.error .field .checkbox .box:after,
 .ui.form .field.error .checkbox .box:after {
   color: @formErrorLabelColor;
 }
 
-/******************************************************/
-
-.ui.form .inline.field {
+/* form field wrapper */
+.field-wrapper .ui.label {
+  padding: @fieldWrapperLabelPadding;
+  background: @fieldWrapperLabelBackground;
+  color: @fieldWrapperLabelColor;
+
+  /*
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  */
+}
+
+.field-wrapper .ui.message {
   margin: 0;
 }
 
-.ui.form .inline.field.help .wrapper {
-  border-bottom: none;
-}
-
-.ui.form .inline.field.help {
-  padding-bottom: @15px;
-}
-
-.ui.form .inline.field .help {
-  padding-top: @10px;
-  padding-bottom: @10px;
-  border-bottom: 1px solid @lightGreyBorderColor;
-}
-
-.ui.form p.help {
-  color: #878f93;
-  font-size: @14px;
-  font-weight: normal;
-  line-height: initial;
-}
-
-.ui.form .ui.input input:not([type]),
-.ui.form .ui.input input[type='date'],
-.ui.form .ui.input input[type='datetime-local'],
-.ui.form .ui.input input[type='email'],
-.ui.form .ui.input input[type='number'],
-.ui.form .ui.input input[type='password'],
-.ui.form .ui.input input[type='search'],
-.ui.form .ui.input input[type='tel'],
-.ui.form .ui.input input[type='time'],
-.ui.form .ui.input input[type='text'],
-.ui.form .ui.input input[type='file'],
-.ui.form .ui.input input[type='url'] {
-  height: 43px !important;
-  border-width: 0 0 @1px 0;
-  border-radius: 0;
-
-  &:focus {
-    border-radius: 0;
-  }
-}
-
-.ui.form .field > .selection.dropdown {
-  height: 60px;
-}
-
-.ui.form .DraftEditor-root {
-  border-bottom: @inputBorder;
-}
-
-// From the original, due to the wrapper around label
-.ui.form .field .wrapper > label {
-  display: block;
-  margin: @labelMargin;
-  color: @labelColor;
-  font-size: @labelFontSize;
-  font-weight: @labelFontWeight;
-  hyphens: auto;
-  text-transform: @labelTextTransform;
-}
-
-.ui.form .toolbar {
-  position: absolute;
-  z-index: 1;
-  top: 0;
-  right: 0;
-  display: flex;
-  height: 60px;
-  align-items: center;
-  margin-right: 1rem;
-
-  .item {
-    cursor: pointer;
-  }
-}
-
-.ui.form .field .ui.basic.button.delete-button {
-  padding: 0;
-  border: none;
-  margin-left: 10px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-
-  &:hover,
-  &:focus {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    color: #e40166 !important;
-  }
-}
-
-.ui.form .inline.field .link-form-container {
-  .wrapper {
-    display: flex;
-    border-bottom: 1px solid @lightGreyBorderColor;
-
-    .ui.input.input-anchorlink-theme {
-      vertical-align: unset;
-
-      input {
-        height: unset;
-      }
-    }
-  }
-}
-
-/* form field wrapper */
-
-.required.eea.fieldWrapper .ui.label::after {
+.required.eea.field-wrapper .ui.label::after {
   content: '*';
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
-  .required.eea.fieldWrapper {
+  .required.eea.field-wrapper {
     .row {
       &::after {
         content: '*';

diff --git a/theme/themes/eea/collections/form.variables b/theme/themes/eea/collections/form.variables
@@ -33,7 +33,8 @@
 @inputWidth: 100%;
 @inputFontSize: 1em;
 @inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding;
-@inputBorder: 1px solid @borderColor;
+@inputBorderColor : rgba(0, 0, 0, 0.32);
+@inputBorder: 1px solid @inputBorderColor;
 @inputBorderRadius: @absoluteBorderRadius;
 @inputColor: @textColor;
 @inputTransition:
@@ -194,3 +195,13 @@
 --------------------*/
 
 @inlineFieldsMargin: 0em 1em 0em 0em;
+
+/*-------------------
+    Field Wrapper
+--------------------*/
+
+@fieldWrapperLabelBackground: transparent;
+@fieldWrapperLabelColor: @textColor;
+@fieldWrapperLabelPadding: unit((@inputVerticalPadding + @1px), rem) 0;
+
+
diff --git a/theme/themes/eea/elements/input.overrides b/theme/themes/eea/elements/input.overrides
@@ -3,36 +3,32 @@
 *******************************/
 
 .ui.input {
-  max-width: @inputMaxWidth !important;
+  width: 100%;
+  max-width: @inputMaxWidth;
 }
 
 .ui.input.fluid {
-  max-width: 100% !important;
+  max-width: 100%;
 }
 
 .ui.input input {
-  width: 348px !important;
-  height: 43px !important;
-  border: @border !important;
-  border-radius: @borderRadius !important;
-  font-family: @pageFont !important;
-  font-weight: @inputFontWeight;
+  border: @border;
 
   &:active,
   &:focus {
-    border: 2px solid @green !important;
-    color: @black !important;
+    border: 1px solid @green;
+    color: @black;
   }
 }
 
 .required.field {
   .ui.labeled.input::after {
-    content: '*' !important;
+    content: '*';
   }
 }
 
 .ui.input.error input {
-  border: 2px solid @negativeBorderColor !important;
+  border: 2px solid @negativeBorderColor;
 }
 
 .ui.labeled.input .ui.label.label {
@@ -45,13 +41,11 @@
 
 textarea {
   border: @border !important;
-  border-radius: @borderRadius !important;
-  font-family: @pageFont !important;
-  font-weight: @inputFontWeight;
+  border-radius: @borderRadius;
 
   &:active,
   &:focus {
-    border: 2px solid @deepBlue !important;
+    border: 2px solid @deepBlue;
   }
 }
 

diff --git a/theme/themes/eea/globals/site.variables b/theme/themes/eea/globals/site.variables
@@ -83,7 +83,7 @@
 @inputBackground        : @white;
 @inputVerticalPadding   : @relative12px;
 /* This adjusts the default form input across all elements */
-@inputHorizontalPadding : 0;
+@inputHorizontalPadding : @relative18px;
 @inputPadding           : @inputVerticalPadding @inputHorizontalPadding;
 
 /* Input Text Color */
@@ -103,7 +103,7 @@
 @focusedFormBorderColor: #85B7D9;
 
 /* Used on dropdowns, other larger blocks */
-@focusedFormMutedBorderColor: #96C8DA;
+@focusedFormMutedBorderColor: @secondaryColor;
 
 /*-------------------
         Sizes
@@ -459,7 +459,7 @@
 
 /* Negative */
 @negativeColor           : @red;
-@negativeBackgroundColor : #FEEFEF;
+@negativeBackgroundColor : @white;
 @negativeBorderColor     : @red; //#FEEFEF;
 @negativeHeaderColor     : @red;
 @negativeTextColor       : @red;