refactor: css only decision

gravity-ui · Oct 10, 2024 · 4c2632a · 4c2632a
1 parent 96d0147
commit 4c2632a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -116,8 +116,10 @@ $blockButton: '.#{variables.$ns}select-control__button';
         @include mixins.button-reset();
         @include mixins.pin($blockButton, ('::before', '::after'), var(--_--border-radius));
 
-        display: inline-flex;
+        display: inline-grid;
+        grid-template-columns: auto auto;
         align-items: center;
+        justify-content: flex-start;
         overflow: hidden;
         width: 100%;
         height: 100%;
@@ -209,11 +211,6 @@ $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();

diff --git a/src/components/Select/components/SelectControl/SelectControl.tsx b/src/components/Select/components/SelectControl/SelectControl.tsx
@@ -201,17 +201,15 @@ export const SelectControl = React.forwardRef<HTMLButtonElement, ControlProps>((
                     tabIndex={0}
                     {...triggerProps}
                 >
-                    <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>
+                    {label && <span className={selectControlBlock('label')}>{label}</span>}
+                    {showPlaceholder && (
+                        <span className={selectControlBlock('placeholder')}>{placeholder}</span>
+                    )}
+                    {showOptionsText && (
+                        <span className={selectControlBlock('option-text')}>
+                            {selectedOptionsContent}
+                        </span>
+                    )}
                 </button>
                 {renderCounterComponent()}
                 {renderClearIcon({})}