Issue #3116377 by justafish, ravi.shankar, idebr, komalk, sauravk,...

Issue #3116377 by justafish, ravi.shankar, idebr, komalk, sauravk, swatichouhan012, KondratievaS, kiran.kadam911, priyanka.sahni, lauriii, volkerk, Abhijith S, djsagar, ckrina, Indrajith KB, mmd: Autocomplete input in views exposed filters does not align with select and text inputs

core/themes/claro/css/base/variables.css

@@ -15,7 +15,7 @@
    */
   /*
    * Typography.
-   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+   */ /* 18px */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
   /**
    * Spaces.
    */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */

core/themes/claro/css/base/variables.pcss.css

@@ -47,6 +47,7 @@
   --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   --line-height: 1.5;
   --line-height-heading: 1.3;
+  --line-height-form-label: calc(18rem / 16); /* 18px */
   --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
   --font-size-h1: 2.027rem; /* ~32px */
   --font-size-h2: 1.802rem; /* ~29px */

core/themes/claro/css/components/autocomplete-loading.module.css

@@ -79,7 +79,6 @@ _:-ms-fullscreen,
   position: relative;
   display: inline-block;
   max-width: 100%;
-  margin: 0.25rem 0;
 }
 
 .claro-autocomplete__message {

core/themes/claro/css/components/autocomplete-loading.module.pcss.css

@@ -64,7 +64,6 @@ _:-ms-fullscreen,
   position: relative;
   display: inline-block;
   max-width: 100%;
-  margin: 0.25rem 0;
 }
 .claro-autocomplete__message {
   position: absolute;

core/themes/claro/css/components/form.css

@@ -55,7 +55,7 @@ tr .form-item,
   margin-bottom: 0.25rem; /* 4px */
   font-size: 0.889rem; /* ~14px */
   font-weight: bold;
-  line-height: 1.125rem; /* 18px */
+  line-height: 1.125rem;
 }
 
 .form-item__label--multiple-value-form {

core/themes/claro/css/components/form.pcss.css

@@ -40,7 +40,7 @@ tr .form-item,
   margin-bottom: calc(var(--space-xs) / 2); /* 4px */
   font-size: var(--font-size-s); /* ~14px */
   font-weight: bold;
-  line-height: calc(18rem / 16); /* 18px */
+  line-height: var(--line-height-form-label);
 }
 .form-item__label--multiple-value-form {
   margin-top: 0;

core/themes/claro/css/components/views-exposed-form.css

@@ -27,7 +27,6 @@
 .views-exposed-form.views-exposed-form {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-end;
   margin-top: 1.5rem;
   margin-bottom: 1.5rem;
   padding: 0.5rem 1.5rem 1.5rem 1.5rem;
@@ -42,6 +41,7 @@
 }
 
 .views-exposed-form__item.views-exposed-form__item {
+  max-width: 100%;
   margin: 0.75rem 0.5rem 0 0; /* LTR */
 }
 
@@ -60,6 +60,7 @@
 }
 
 .views-exposed-form__item--actions.views-exposed-form__item--actions .button {
+  margin-top: 0;
   margin-bottom: 0;
 }
 
@@ -70,3 +71,9 @@
 [dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child {
   margin-left: 0;
 }
+
+.views-exposed-form .form-item--no-label,
+.views-exposed-form__item.views-exposed-form__item.views-exposed-form__item--actions {
+  /* Line height of a label + existing margin for the element + margin for label */
+  margin-top: 2.375rem;
+}

core/themes/claro/css/components/views-exposed-form.pcss.css

@@ -22,7 +22,6 @@
 .views-exposed-form.views-exposed-form {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-end;
   margin-top: var(--space-l);
   margin-bottom: var(--space-l);
   padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
@@ -36,6 +35,7 @@
 }
 
 .views-exposed-form__item.views-exposed-form__item {
+  max-width: 100%;
   margin: var(--space-s) var(--space-xs) 0 0; /* LTR */
 }
 [dir="rtl"] .views-exposed-form__item.views-exposed-form__item {
@@ -52,6 +52,7 @@
 }
 
 .views-exposed-form__item--actions.views-exposed-form__item--actions .button {
+  margin-top: 0;
   margin-bottom: 0;
 }
 
@@ -61,3 +62,9 @@
 [dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child {
   margin-left: 0;
 }
+
+.views-exposed-form .form-item--no-label,
+.views-exposed-form__item.views-exposed-form__item.views-exposed-form__item--actions {
+  /* Line height of a label + existing margin for the element + margin for label */
+  margin-top: calc(var(--line-height-form-label) + var(--space-s) + var(--space-xs));
+}