feat: new css for select controls

gravity-ui · Jul 3, 2024 · f47d473 · f47d473
1 parent 8bff882
commit f47d473
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -209,14 +209,16 @@ $blockButton: '.#{variables.$ns}select-control__button';
         transform: scale(0.96);
     }
 
+    &__content-container {
+        display: grid;
+        grid-template-columns: auto auto;
+    }
+
     &__label {
         @include mixins.text-accent;
         @include mixins.overflow-ellipsis();
 
-        flex-shrink: 0;
-        max-width: 50%;
         margin-inline-end: 4px;
-        white-space: nowrap;
     }
 
     &__placeholder,

diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -190,15 +190,17 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
                     data-qa={qa}
                     title={title}
                 >
-                    {label && <span className={selectControlBlock('label')}>{label}</span>}
-                    {showPlaceholder && (
-                        <span className={selectControlBlock('placeholder')}>{placeholder}</span>
-                    )}
-                    {showOptionsText && (
-                        <span className={selectControlBlock('option-text')}>
-                            {selectedOptionsContent}
-                        </span>
-                    )}
+                    <div className={selectControlBlock('content-container')}>
+                        {label && <span className={selectControlBlock('label')}>{label}</span>}
+                        {showPlaceholder && (
+                            <span className={selectControlBlock('placeholder')}>{placeholder}</span>
+                        )}
+                        {showOptionsText && (
+                            <span className={selectControlBlock('option-text')}>
+                                {selectedOptionsContent}
+                            </span>
+                        )}
+                    </div>
                 </button>
                 {renderCounterComponent()}
                 {renderClearIcon({})}