feat: using outline styles for textarea textinput

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

Hide file tree

Showing 4 changed files with 27 additions and 21 deletions.
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-outline-color-focus` | Outline color if focused |
diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss
@@ -34,6 +34,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-outline-color-focus);
+            outline-offset: -1px;
         }
     }
 

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-outline-color-focus` | Outline color if focused |
diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss
@@ -97,6 +97,8 @@ $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-outline-color-focus);
+            outline-offset: -1px;
         }
     }