From ce75de8899488f0e98a4c0d4e10a593d44b6fe61 Mon Sep 17 00:00:00 2001 From: Kyzyl-ool Kezhik Date: Thu, 21 Mar 2024 15:20:52 +0100 Subject: [PATCH] feat: improve focus outline styles for text/select inputs (#1318) --- src/components/Select/README.md | 6 +++++ .../SelectControl/SelectControl.scss | 8 +++++++ src/components/controls/TextArea/README.md | 21 +++++++++-------- .../controls/TextArea/TextArea.scss | 11 +++++++++ src/components/controls/TextInput/README.md | 23 ++++++++++--------- .../controls/TextInput/TextInput.scss | 12 ++++++++++ 6 files changed, 60 insertions(+), 21 deletions(-) diff --git a/src/components/Select/README.md b/src/components/Select/README.md index c630946149..ad66ff2cdd 100644 --- 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 index b32c0b3ae2..97448bc89a 100644 --- 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 index 410e35fb36..40324ee213 100644 --- 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 index 40ced40988..c56e0c9058 100644 --- 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 index 4d08cdc9cb..9ebce52aab 100644 --- 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 index a3dd904de3..b02571d607 100644 --- 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); + } } } }