feat: improve focus outline styles for text/select inputs (#1318)

gravity-ui · Mar 21, 2024 · ce75de8 · ce75de8
1 parent caf4840
commit ce75de8
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 21 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-focus-outline-color` | Outline color if focused (by default not presented) |
diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss
@@ -81,6 +81,7 @@ $blockButton: '.#{variables.$ns}select-control__button';
 }
 
 #{$block} {
+    --_--focus-outline-color: var(--g-select-focus-outline-color);
     @include mixins.button-reset();
 
     position: relative;
@@ -167,6 +168,8 @@ $blockButton: '.#{variables.$ns}select-control__button';
         }
 
         &_error::before {
+            --_--focus-outline-color: var(--g-color-line-danger);
+
             border-color: var(--g-color-line-danger);
         }
 
@@ -195,6 +198,11 @@ $blockButton: '.#{variables.$ns}select-control__button';
         &:not(&_error):not(&_view_clear):focus-visible::before {
             border-color: var(--g-color-line-generic-active);
         }
+
+        &:focus-visible::before {
+            outline: 2px solid var(--g-select-focus-outline-color, var(--_--focus-outline-color));
+            outline-offset: -1px;
+        }
     }
 
     &:not(&_disabled):not(&_no-active):active {

diff --git a/src/components/controls/TextArea/README.md b/src/components/controls/TextArea/README.md
@@ -217,13 +217,14 @@ LANDING_BLOCK-->
 
 ## CSS API
 
-| Name                                | Description             |
-| :---------------------------------- | :---------------------- |
-| `--g-text-area-text-color`          | Text color              |
-| `--g-text-area-placeholder-color`   | Placeholder color       |
-| `--g-text-area-background-color`    | Background color        |
-| `--g-text-area-border-radius`       | Border radius           |
-| `--g-text-area-border-width`        | Border width            |
-| `--g-text-area-border-color`        | Border color            |
-| `--g-text-area-border-color-hover`  | Border color if hovered |
-| `--g-text-area-border-color-active` | Border color if active  |
+| Name                                | Description                                         |
+| :---------------------------------- | :-------------------------------------------------- |
+| `--g-text-area-text-color`          | Text color                                          |
+| `--g-text-area-placeholder-color`   | Placeholder color                                   |
+| `--g-text-area-background-color`    | Background color                                    |
+| `--g-text-area-border-radius`       | Border radius                                       |
+| `--g-text-area-border-width`        | Border width                                        |
+| `--g-text-area-border-color`        | Border color                                        |
+| `--g-text-area-border-color-hover`  | Border color if hovered                             |
+| `--g-text-area-border-color-active` | Border color if active                              |
+| `--g-text-area-focus-outline-color` | Outline color if focused (by default not presented) |
diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss
@@ -13,6 +13,7 @@ $block: '.#{variables.$ns}text-area';
     --_--clear-offset: calc(
         var(--g-text-area-border-width, #{control-variables.$border-width}) + 1px
     );
+    --_--focus-outline-color: var(--g-text-area-focus-outline-color);
 
     display: inline-block;
     width: 100%;
@@ -34,6 +35,8 @@ $block: '.#{variables.$ns}text-area';
 
         &:focus-within {
             border-color: var(--g-text-area-border-color-active, var(--_--border-color-active));
+            outline: 2px solid var(--g-text-area-focus-outline-color, var(--_--focus-outline-color));
+            outline-offset: -1px;
         }
     }
 
@@ -187,6 +190,10 @@ $block: '.#{variables.$ns}text-area';
                     &:focus-within {
                         border-color: var(--g-color-line-danger);
                     }
+
+                    &:focus-within {
+                        --_--focus-outline-color: var(--g-color-line-danger);
+                    }
                 }
             }
 
@@ -197,6 +204,10 @@ $block: '.#{variables.$ns}text-area';
                     &:focus-within {
                         border-block-end: 1px solid var(--g-color-line-danger);
                     }
+
+                    &:focus-within {
+                        --_--focus-outline-color: var(--g-color-line-danger);
+                    }
                 }
             }
         }

diff --git a/src/components/controls/TextInput/README.md b/src/components/controls/TextInput/README.md
@@ -271,14 +271,15 @@ LANDING_BLOCK-->
 
 ## CSS API
 
-| Name                                 | Description             |
-| :----------------------------------- | :---------------------- |
-| `--g-text-input-text-color`          | Text color              |
-| `--g-text-input-label-color`         | Label color             |
-| `--g-text-input-placeholder-color`   | Placeholder color       |
-| `--g-text-input-background-color`    | Background color        |
-| `--g-text-input-border-radius`       | Border radius           |
-| `--g-text-input-border-width`        | Border width            |
-| `--g-text-input-border-color`        | Border color            |
-| `--g-text-input-border-color-hover`  | Border color if hovered |
-| `--g-text-input-border-color-active` | Border color if active  |
+| Name                                 | Description                                         |
+| :----------------------------------- | :-------------------------------------------------- |
+| `--g-text-input-text-color`          | Text color                                          |
+| `--g-text-input-label-color`         | Label color                                         |
+| `--g-text-input-placeholder-color`   | Placeholder color                                   |
+| `--g-text-input-background-color`    | Background color                                    |
+| `--g-text-input-border-radius`       | Border radius                                       |
+| `--g-text-input-border-width`        | Border width                                        |
+| `--g-text-input-border-color`        | Border color                                        |
+| `--g-text-input-border-color-hover`  | Border color if hovered                             |
+| `--g-text-input-border-color-active` | Border color if active                              |
+| `--g-text-input-focus-outline-color` | Outline color if focused (by default not presented) |
diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
@@ -92,6 +92,7 @@ $block: '.#{variables.$ns}text-input';
     --_--placeholder-color: var(--g-color-text-hint);
     --_--background-color: transparent;
     --_--border-width: #{control-variables.$border-width};
+    --_--focus-outline-color: var(--g-text-input-focus-outline-color);
 
     display: inline-block;
     width: 100%;
@@ -118,6 +119,9 @@ $block: '.#{variables.$ns}text-input';
 
         &:focus-within {
             border-color: var(--g-text-input-border-color-active, var(--_--border-color-active));
+            outline: 2px solid
+                var(--g-text-input-focus-outline-color, var(--_--focus-outline-color));
+            outline-offset: -1px;
         }
     }
 
@@ -380,6 +384,10 @@ $block: '.#{variables.$ns}text-input';
                     &:focus-within {
                         border-color: var(--g-color-line-danger);
                     }
+
+                    &:focus-within {
+                        --_--focus-outline-color: var(--g-color-line-danger);
+                    }
                 }
             }
 
@@ -390,6 +398,10 @@ $block: '.#{variables.$ns}text-input';
                     &:focus-within {
                         border-block-end: 1px solid var(--g-color-line-danger);
                     }
+
+                    &:focus-within {
+                        --_--focus-outline-color: var(--g-color-line-danger);
+                    }
                 }
             }
         }