fix(dropdown-filter): refactor dropdown filter styles for improved layout

Author: samuelreichert

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid-dropdown-filter.scss

@@ -50,10 +50,11 @@ $root: ".widget-dropdown-filter";
     --wdf-tag-padding: var(--wdf-spacing-tiny) var(--dropdown-outer-spacing, 10px);
 
     &.form-control {
-        padding: 0;
-        position: relative;
-        display: grid;
+        display: flex;
         min-width: 65px;
+        padding-block: var(--wdf-button-spacing);
+        padding-inline-end: var(--wdf-button-spacing);
+        padding-inline-start: var(--wdf-button-spacing);
     }
 
     &-popover {
@@ -107,7 +108,9 @@ $root: ".widget-dropdown-filter";
 
     &-input {
         border: none;
+        flex: 1;
         margin: 0;
+        min-width: 50px;
         padding: 0;
     }
 
@@ -119,27 +122,29 @@ $root: ".widget-dropdown-filter";
 
     &-input,
     &-toggle {
-        text-align: start;
+        color: var(--wdf-color);
+        font-weight: normal;
         overflow: hidden;
-        white-space: nowrap;
+        text-align: start;
         text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     &-clear {
-        position: absolute;
-        padding: 3px 6px;
+        @include btn-with-cross;
+        align-items: center;
         align-self: center;
-        justify-self: end;
         display: flex;
-        margin-inline-end: var(--wdf-clear-margin);
-        border-inline-end: 1px solid var(--gray, #787d87);
-        @include btn-with-cross;
-    }
+        flex-shrink: 0;
+        justify-self: end;
+        margin-inline-end: var(--wdf-spacing);
+        padding: 3px 6px;
+        position: relative;
 
-    &-toggle,
-    &-input {
-        color: var(--wdf-color);
-        font-weight: normal;
+        &:has(+ #{$root}-state-icon),
+        &:has(+ #{$root}-toggle) {
+            border-inline-end: 1px solid var(--gray, #787d87);
+        }
     }
 
     &-state-icon {
@@ -151,10 +156,12 @@ $root: ".widget-dropdown-filter";
 
     &-input-container {
         display: flex;
-        gap: var(--wdf-spacing);
         flex-flow: row wrap;
+        flex: 1;
         min-width: 0;
         overflow: hidden;
+        padding: 0;
+        position: relative;
     }
 
     &-remove-icon {
@@ -171,6 +178,16 @@ $root: ".widget-dropdown-filter";
         inset-block: var(--wdf-button-spacing);
         width: 1px;
     }
+
+    &-state-icon,
+    &-toggle {
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        justify-content: center;
+        padding-inline-end: 0;
+        padding-inline-start: 0;
+    }
 }
 
 :where([data-highlighted]) #{$root}-checkbox:not(:checked)::after {
@@ -181,23 +198,22 @@ $root: ".widget-dropdown-filter";
 /* Select variant */
 :where(#{$root}.variant-select) {
     #{$root}-toggle {
-        padding-block: var(--wdf-button-spacing);
-        padding-inline-start: var(--wdf-button-spacing);
-        padding-inline-end: var(--wdf-toggle-inline-end);
-    }
-
-    &:has(#{$root}-clear) #{$root}-toggle {
-        padding-block: var(--wdf-button-spacing);
-        padding-inline-start: var(--wdf-button-spacing);
-        padding-inline-end: var(--wdf-toggle-inline-end-clearable);
+        flex: 1;
+        justify-content: flex-start;
+        padding-inline-start: 0;
     }
 
     #{$root}-state-icon {
-        position: absolute;
         align-self: center;
+        box-sizing: content-box;
         justify-self: end;
         pointer-events: none;
-        margin-inline-end: var(--wdf-button-spacing);
+    }
+
+    #{$root}-input-container {
+        border: none;
+        background-color: transparent;
+        margin: 0;
     }
 }
 
@@ -210,112 +226,63 @@ $root: ".widget-dropdown-filter";
 
 /* Combobox variant */
 :where(#{$root}.variant-combobox) {
-    & {
-        grid-template-columns: 1fr var(--wdf-toggle-width);
-    }
-
     #{$root}-input {
         border-radius: inherit;
-        padding-block: var(--wdf-button-spacing);
-        padding-inline-start: var(--wdf-button-spacing);
+        padding-inline-start: 0;
         padding-inline-end: 0;
     }
-
-    &:has(#{$root}-clear) #{$root}-input {
-        padding-inline-end: var(--wdf-clear-width);
-    }
-
-    #{$root}-toggle {
-        padding-block: var(--wdf-button-spacing);
-        padding-inline-start: 4px;
-        padding-inline-end: var(--wdf-button-spacing);
-        display: flex;
-        align-items: center;
-    }
 }
 
 /* Tag Picker variant */
 :where(#{$root}.variant-tag-picker) {
-    & {
-        grid-template-columns: 1fr var(--wdf-toggle-width);
-    }
-
-    #{$root}-input-container {
-        padding-block: var(--wdf-button-spacing);
-        padding-inline-start: var(--wdf-button-spacing);
-        padding-inline-end: 0;
-    }
-
-    &:has(#{$root}-clear) #{$root}-input-container {
-        padding-inline-end: var(--wdf-clear-width);
-    }
-
     #{$root}-selected-item {
+        align-items: center;
+        background-color: var(--color-primary-lighter, #e6eaff);
+        border-radius: 26px;
         color: #000;
-        font-size: var(--font-size-small, 12px);
-        line-height: 1.334;
         display: inline-flex;
         flex-flow: row nowrap;
-        border-radius: 26px;
+        font-size: var(--font-size-small, 12px);
+        gap: 8px;
         justify-content: center;
+        line-height: 1.334;
         padding: var(--wdf-tag-padding);
-        align-items: center;
-        gap: 8px;
-        background-color: var(--color-primary-lighter, #e6eaff);
         &:focus-visible {
             outline: var(--brand-primary, #264ae5) auto 1px;
         }
     }
 
     #{$root}-input {
-        width: initial;
         flex-basis: 0;
-        min-width: 75px;
+        min-width: 50px;
+        width: initial;
     }
 
     #{$root}-clear {
         border-color: transparent;
     }
-
-    #{$root}-toggle {
-        padding-block: var(--wdf-button-spacing);
-        padding-inline-start: 4px;
-        padding-inline-end: var(--wdf-button-spacing);
-        display: flex;
-        align-items: center;
-    }
 }
 
 /* Tag Picker variant text */
 :where(#{$root}.variant-tag-picker-text) {
-    & {
-        grid-template-columns: 1fr var(--wdf-toggle-width);
-    }
-
-    #{$root}-input-container {
-        padding-block: var(--wdf-button-spacing);
-        padding-inline-start: var(--wdf-button-spacing);
-        padding-inline-end: 0;
-    }
-
-    &:has(#{$root}-clear) #{$root}-input-container {
-        padding-inline-end: var(--wdf-clear-width);
-    }
-
     #{$root}-selected-item {
-        display: inline-flex;
-        align-items: center;
-        color: var(--wdf-color);
         border-radius: 2px;
+        color: var(--wdf-color);
+        display: none;
+        overflow: hidden;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        top: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        z-index: 0;
 
         &:focus-visible {
             outline: var(--brand-primary, #264ae5) solid 1px;
             outline-offset: 2px;
         }
-
-        &:has(+ #{$root}-selected-item)::after {
-            content: ",";
-        }
     }
 
     #{$root}-remove-icon {
@@ -327,20 +294,24 @@ $root: ".widget-dropdown-filter";
     }
 
     #{$root}-input {
-        width: initial;
-        flex-basis: 0;
         min-width: 75px;
-    }
+        opacity: 0;
+        width: 100%;
+        z-index: 1;
 
-    #{$root}-clear {
-        border-color: transparent;
-    }
+        &:focus {
+            opacity: 1;
+        }
 
-    #{$root}-toggle {
-        padding-block: var(--wdf-button-spacing);
-        padding-inline-start: 4px;
-        padding-inline-end: var(--wdf-button-spacing);
-        display: flex;
-        align-items: center;
+        &:placeholder-shown,
+        &:not(:focus) {
+            & + #{$root}-selected-item {
+                display: block;
+            }
+        }
+
+        &:not(:has(+ #{$root}-selected-item)) {
+            opacity: 1;
+        }
     }
 }