feat: using outline styles for select

gravity-ui · Feb 8, 2024 · 1b1769d · 1b1769d
1 parent bb85877
commit 1b1769d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/components/Select/README.md b/src/components/Select/README.md
@@ -1123,3 +1123,9 @@ LANDING_BLOCK-->
 | errorMessage                                              | Error text                                                                                                                    | `string`                                 |                                                          |
 | errorPlacement                                            | Error placement                                                                                                               | `outside` `inside`                       | `outside`                                                |
 | validationState                                           | Validation state                                                                                                              | `"invalid"`                              |                                                          |
+
+## CSS API
+
+| Name                             | Description              |
+| :------------------------------- | :----------------------- |
+| `--g-select-outline-color-focus` | Outline color if focused |
diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -195,6 +195,14 @@ $blockButton: '.#{variables.$ns}select-control__button';
         &:not(&_error):not(&_view_clear):focus-visible::before {
             border-color: var(--g-color-line-generic-active);
         }
+
+        &:focus::before {
+            outline: 2px solid var(--g-select-outline-color-focus);
+            outline-offset: -1px;
+        }
+        &:focus:not(:focus-visible)::before {
+            outline: 0;
+        }
     }
 
     &:not(&_disabled):not(&_no-active):active {