feat(TreeSelect): rework popup border radius (#1456)

Co-authored-by: Alexandr Isaev <[email protected]>
gravity-ui · Mar 29, 2024 · 0cf2f95 · 0cf2f95
1 parent bdab522
commit 0cf2f95
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/src/components/TreeSelect/TreeSelect.scss b/src/components/TreeSelect/TreeSelect.scss
@@ -11,8 +11,23 @@ $block: '.#{variables.$ns}tree-select';
 
     &__popup {
         padding: 4px 0;
-        border-radius: 6px;
         overflow: hidden;
+
+        &_size_s {
+            border-radius: var(--g-list-container-border-radius, 5px);
+        }
+
+        &_size_m {
+            border-radius: var(--g-list-container-border-radius, 6px);
+        }
+
+        &_size_l {
+            border-radius: var(--g-list-container-border-radius, 8px);
+        }
+
+        &_size_xl {
+            border-radius: var(--g-list-container-border-radius, 10px);
+        }
     }
 
     &__list {

diff --git a/src/components/TreeSelect/TreeSelect.tsx b/src/components/TreeSelect/TreeSelect.tsx
@@ -228,7 +228,7 @@ export const TreeSelect = React.forwardRef(function TreeSelect<T>(
             {togglerNode}
             <SelectPopup
                 ref={controlWrapRef}
-                className={b('popup', popupClassName)}
+                className={b('popup', {size}, popupClassName)}
                 controlRef={controlRef}
                 width={popupWidth}
                 placement={placement}

diff --git a/src/components/useList/components/ListItemView/ListItemView.scss b/src/components/useList/components/ListItemView/ListItemView.scss
@@ -30,10 +30,10 @@ $block: '.#{variables.$ns}list-item-view';
         border-radius: var(--g-list-item-border-radius, 3px);
     }
     &_radius_m {
-        border-radius: var(--g-list-item-border-radius, 6px);
+        border-radius: var(--g-list-item-border-radius, 5px);
     }
     &_radius_l {
-        border-radius: var(--g-list-item-border-radius, 8px);
+        border-radius: var(--g-list-item-border-radius, 6px);
     }
     &_radius_xl {
         border-radius: var(--g-list-item-border-radius, 8px);