fix(Select): revert #1694 changes (#1887)

gravity-ui · Oct 8, 2024 · 523caf8 · 523caf8
1 parent 434ce7f
commit 523caf8
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 4 deletions.
diff --git a/...t.tsx-snapshots/Select-control-with-parent-flex-basis-0-dark-chromium-linux.png b/...t.tsx-snapshots/Select-control-with-parent-flex-basis-0-dark-chromium-linux.png
diff --git a/...est.tsx-snapshots/Select-control-with-parent-flex-basis-0-dark-webkit-linux.png b/...est.tsx-snapshots/Select-control-with-parent-flex-basis-0-dark-webkit-linux.png
diff --git a/....tsx-snapshots/Select-control-with-parent-flex-basis-0-light-chromium-linux.png b/....tsx-snapshots/Select-control-with-parent-flex-basis-0-light-chromium-linux.png
diff --git a/...st.tsx-snapshots/Select-control-with-parent-flex-basis-0-light-webkit-linux.png b/...st.tsx-snapshots/Select-control-with-parent-flex-basis-0-light-webkit-linux.png
diff --git a/src/components/Select/__tests__/Select.visual.test.tsx b/src/components/Select/__tests__/Select.visual.test.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {test} from '~playwright/core';
+
+import {Select} from '../index';
+import type {SelectOption} from '../index';
+
+test.describe('Select', {tag: '@Select'}, () => {
+    test('control-with-parent-flex-basis-0', async ({mount, expectScreenshot}) => {
+        const options: SelectOption[] = [{value: '1', content: 'Value 1'}];
+        await mount(
+            <div style={{display: 'flex'}}>
+                <div style={{flex: '0 0'}}>
+                    <Select value={['1']} options={options} />
+                </div>
+            </div>,
+        );
+        await expectScreenshot();
+    });
+});
diff --git a/src/components/Select/components/SelectClear/SelectClear.scss b/src/components/Select/components/SelectClear/SelectClear.scss
@@ -10,7 +10,6 @@ $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
@@ -116,10 +116,8 @@ $blockButton: '.#{variables.$ns}select-control__button';
         @include mixins.button-reset();
         @include mixins.pin($blockButton, ('::before', '::after'), var(--_--border-radius));
 
-        display: inline-grid;
-        grid-template-columns: auto auto;
+        display: inline-flex;
         align-items: center;
-        justify-content: flex-start;
         overflow: hidden;
         width: 100%;
         height: 100%;
@@ -215,7 +213,10 @@ $blockButton: '.#{variables.$ns}select-control__button';
         @include mixins.text-accent;
         @include mixins.overflow-ellipsis();
 
+        flex-shrink: 0;
+        max-width: 50%;
         margin-inline-end: 4px;
+        white-space: nowrap;
     }
 
     &__placeholder,