fix(Select): do not reserve space for clear if empty (#1956)

gravity-ui · Nov 20, 2024 · 11dd537 · 11dd537
1 parent 2e7f2c7
commit 11dd537
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 21 deletions.
diff --git a/src/components/Select/components/SelectClear/SelectClear.scss b/src/components/Select/components/SelectClear/SelectClear.scss
@@ -10,6 +10,7 @@ $block: '.#{variables.$ns}select-clear';
     align-items: center;
     margin-inline-start: auto;
     z-index: 1;
+    flex-shrink: 0;
 
     &:focus-visible {
         border: 1px solid var(--g-color-line-generic-active);

diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -48,22 +48,6 @@ $blockButton: '.#{variables.$ns}select-control__button';
     }
 }
 
-@mixin block_clear_reserved_width() {
-    // reserving place for clear icon to fix width changing on displaying clear
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_s & {
-        padding-inline-end: calc(#{variables.$s-height} + var(--_--text-right-padding));
-    }
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_m & {
-        padding-inline-end: calc(#{variables.$m-height} + var(--_--text-right-padding));
-    }
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_l & {
-        padding-inline-end: calc(#{variables.$l-height} + var(--_--text-right-padding));
-    }
-    #{$block}_has-clear:not(#{$block}_has-value)#{$block}_size_xl & {
-        padding-inline-end: calc(#{variables.$xl-height} + var(--_--text-right-padding));
-    }
-}
-
 @mixin block_clear_reserved_disabled_width() {
     // reserving place for clear icon to fix width changing on displaying clear for disabled select
     #{$block}_has-clear#{$block}_size_s #{$blockButton}_disabled & {
@@ -222,17 +206,16 @@ $blockButton: '.#{variables.$ns}select-control__button';
     &__placeholder,
     &__option-text {
         @include mixins.overflow-ellipsis();
-        @include block_clear_reserved_disabled_width();
 
         padding-inline-end: var(--_--text-right-padding);
     }
 
+    &__option-text {
+        @include block_clear_reserved_disabled_width();
+    }
+
     &__placeholder {
         color: var(--g-color-text-hint);
-
-        #{$blockButton}:not(#{$blockButton}_disabled) & {
-            @include block_clear_reserved_width();
-        }
     }
 
     &__chevron-icon {