From 6d45d1f8610d298ad858daf7085f4d157bc1c0a3 Mon Sep 17 00:00:00 2001 From: Kezhik Kyzyl-ool Date: Wed, 7 Feb 2024 16:29:37 +0100 Subject: [PATCH 1/7] feat: using outline styles for textarea textinput --- src/components/controls/TextArea/README.md | 21 +++++++++-------- .../controls/TextArea/TextArea.scss | 2 ++ src/components/controls/TextInput/README.md | 23 ++++++++++--------- .../controls/TextInput/TextInput.scss | 2 ++ 4 files changed, 27 insertions(+), 21 deletions(-) diff --git a/src/components/controls/TextArea/README.md b/src/components/controls/TextArea/README.md index 410e35fb36..7f7d7ade15 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-outline-color-focus` | Outline color if focused | diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss index 40ced40988..6d9ee3a64c 100644 --- 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 index 4d08cdc9cb..65f343ceb0 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-outline-color-focus` | Outline color if focused | diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss index a3dd904de3..daae183ce5 100644 --- a/src/components/controls/TextInput/TextInput.scss +++ b/src/components/controls/TextInput/TextInput.scss @@ -118,6 +118,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; } } From 885caa00995d6653c17c32c29bce80c9bf320579 Mon Sep 17 00:00:00 2001 From: Kezhik Kyzyl-ool Date: Wed, 7 Feb 2024 16:36:01 +0100 Subject: [PATCH 2/7] feat: using outline styles for select --- src/components/Select/README.md | 6 ++++++ .../Select/components/SelectControl/SelectControl.scss | 8 ++++++++ 2 files changed, 14 insertions(+) diff --git a/src/components/Select/README.md b/src/components/Select/README.md index c630946149..0e7d400e10 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-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 index b32c0b3ae2..a56a9cb440 100644 --- 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 { From 3b40c57be023904da832004017640feab6b75cc7 Mon Sep 17 00:00:00 2001 From: Kezhik Kyzyl-ool Date: Thu, 8 Feb 2024 10:04:23 +0100 Subject: [PATCH 3/7] fix: change css variables names --- src/components/Select/README.md | 2 +- .../Select/components/SelectControl/SelectControl.scss | 2 +- src/components/controls/TextArea/README.md | 2 +- src/components/controls/TextArea/TextArea.scss | 2 +- src/components/controls/TextInput/README.md | 2 +- src/components/controls/TextInput/TextInput.scss | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Select/README.md b/src/components/Select/README.md index 0e7d400e10..b213d7f51d 100644 --- a/src/components/Select/README.md +++ b/src/components/Select/README.md @@ -1128,4 +1128,4 @@ LANDING_BLOCK--> | Name | Description | | :------------------------------- | :----------------------- | -| `--g-select-outline-color-focus` | Outline color if focused | +| `--g-select-focus-outline-color` | Outline color if focused | diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss index a56a9cb440..f5bcc6a0cd 100644 --- a/src/components/Select/components/SelectControl/SelectControl.scss +++ b/src/components/Select/components/SelectControl/SelectControl.scss @@ -197,7 +197,7 @@ $blockButton: '.#{variables.$ns}select-control__button'; } &:focus::before { - outline: 2px solid var(--g-select-outline-color-focus); + outline: 2px solid var(--g-select-focus-outline-color); outline-offset: -1px; } &:focus:not(:focus-visible)::before { diff --git a/src/components/controls/TextArea/README.md b/src/components/controls/TextArea/README.md index 7f7d7ade15..420c83bf3f 100644 --- a/src/components/controls/TextArea/README.md +++ b/src/components/controls/TextArea/README.md @@ -227,4 +227,4 @@ LANDING_BLOCK--> | `--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 | +| `--g-text-area-focus-outline-color` | Outline color if focused | diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss index 6d9ee3a64c..be72f848ee 100644 --- a/src/components/controls/TextArea/TextArea.scss +++ b/src/components/controls/TextArea/TextArea.scss @@ -34,7 +34,7 @@ $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: 2px solid var(--g-text-area-focus-outline-color); outline-offset: -1px; } } diff --git a/src/components/controls/TextInput/README.md b/src/components/controls/TextInput/README.md index 65f343ceb0..a9ebfd212e 100644 --- a/src/components/controls/TextInput/README.md +++ b/src/components/controls/TextInput/README.md @@ -282,4 +282,4 @@ LANDING_BLOCK--> | `--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 | +| `--g-text-input-focus-outline-color` | Outline color if focused | diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss index daae183ce5..d716f914c3 100644 --- a/src/components/controls/TextInput/TextInput.scss +++ b/src/components/controls/TextInput/TextInput.scss @@ -118,7 +118,7 @@ $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: 2px solid var(--g-text-input-focus-outline-color); outline-offset: -1px; } } From 5f9df1f18b8b633de10a1faef412313e89b53336 Mon Sep 17 00:00:00 2001 From: Kezhik Kyzyl-ool Date: Mon, 4 Mar 2024 15:17:18 +0100 Subject: [PATCH 4/7] feat: outline on error --- .../Select/components/SelectControl/SelectControl.scss | 1 + src/components/controls/TextArea/TextArea.scss | 8 ++++++++ src/components/controls/TextInput/TextInput.scss | 8 ++++++++ 3 files changed, 17 insertions(+) diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss index f5bcc6a0cd..14bf07aa96 100644 --- a/src/components/Select/components/SelectControl/SelectControl.scss +++ b/src/components/Select/components/SelectControl/SelectControl.scss @@ -168,6 +168,7 @@ $blockButton: '.#{variables.$ns}select-control__button'; &_error::before { border-color: var(--g-color-line-danger); + --g-select-focus-outline-color: var(--g-color-line-danger); } &:hover::after { diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss index be72f848ee..ed36663828 100644 --- a/src/components/controls/TextArea/TextArea.scss +++ b/src/components/controls/TextArea/TextArea.scss @@ -189,6 +189,10 @@ $block: '.#{variables.$ns}text-area'; &:focus-within { border-color: var(--g-color-line-danger); } + + &:focus-within { + --g-text-area-focus-outline-color: var(--g-color-line-danger); + } } } @@ -199,6 +203,10 @@ $block: '.#{variables.$ns}text-area'; &:focus-within { border-block-end: 1px solid var(--g-color-line-danger); } + + &:focus-within { + --g-text-area-focus-outline-color: var(--g-color-line-danger); + } } } } diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss index d716f914c3..20f0adb1e7 100644 --- a/src/components/controls/TextInput/TextInput.scss +++ b/src/components/controls/TextInput/TextInput.scss @@ -382,6 +382,10 @@ $block: '.#{variables.$ns}text-input'; &:focus-within { border-color: var(--g-color-line-danger); } + + &:focus-within { + --g-text-input-focus-outline-color: var(--g-color-line-danger); + } } } @@ -392,6 +396,10 @@ $block: '.#{variables.$ns}text-input'; &:focus-within { border-block-end: 1px solid var(--g-color-line-danger); } + + &:focus-within { + --g-text-input-focus-outline-color: var(--g-color-line-danger); + } } } } From 50171b18b74c2b0320aa4ce56004d0a5f7fc4815 Mon Sep 17 00:00:00 2001 From: Kezhik Kyzyl-ool Date: Thu, 14 Mar 2024 10:17:39 +0100 Subject: [PATCH 5/7] fix: using public / private pair of css variables --- .../Select/components/SelectControl/SelectControl.scss | 6 ++++-- src/components/controls/TextArea/TextArea.scss | 7 ++++--- src/components/controls/TextInput/TextInput.scss | 8 +++++--- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss index 14bf07aa96..3344d512ea 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,8 +168,9 @@ $blockButton: '.#{variables.$ns}select-control__button'; } &_error::before { + --_--focus-outline-color: var(--g-color-line-danger); + border-color: var(--g-color-line-danger); - --g-select-focus-outline-color: var(--g-color-line-danger); } &:hover::after { @@ -198,7 +200,7 @@ $blockButton: '.#{variables.$ns}select-control__button'; } &:focus::before { - outline: 2px solid var(--g-select-focus-outline-color); + outline: 2px solid var(--g-select-focus-outline-color, var(--_--focus-outline-color)); outline-offset: -1px; } &:focus:not(:focus-visible)::before { diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss index ed36663828..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,7 +35,7 @@ $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); + outline: 2px solid var(--g-text-area-focus-outline-color, var(--_--focus-outline-color)); outline-offset: -1px; } } @@ -191,7 +192,7 @@ $block: '.#{variables.$ns}text-area'; } &:focus-within { - --g-text-area-focus-outline-color: var(--g-color-line-danger); + --_--focus-outline-color: var(--g-color-line-danger); } } } @@ -205,7 +206,7 @@ $block: '.#{variables.$ns}text-area'; } &:focus-within { - --g-text-area-focus-outline-color: var(--g-color-line-danger); + --_--focus-outline-color: var(--g-color-line-danger); } } } diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss index 20f0adb1e7..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,7 +119,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-focus-outline-color); + outline: 2px solid + var(--g-text-input-focus-outline-color, var(--_--focus-outline-color)); outline-offset: -1px; } } @@ -384,7 +386,7 @@ $block: '.#{variables.$ns}text-input'; } &:focus-within { - --g-text-input-focus-outline-color: var(--g-color-line-danger); + --_--focus-outline-color: var(--g-color-line-danger); } } } @@ -398,7 +400,7 @@ $block: '.#{variables.$ns}text-input'; } &:focus-within { - --g-text-input-focus-outline-color: var(--g-color-line-danger); + --_--focus-outline-color: var(--g-color-line-danger); } } } From c922fcf70d94d5e073493955465068ba66a6eb0c Mon Sep 17 00:00:00 2001 From: Kezhik Kyzyl-ool Date: Thu, 21 Mar 2024 13:40:08 +0100 Subject: [PATCH 6/7] fix: use raw :focus-visible pseudoselector --- .../Select/components/SelectControl/SelectControl.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Select/components/SelectControl/SelectControl.scss b/src/components/Select/components/SelectControl/SelectControl.scss index 3344d512ea..97448bc89a 100644 --- a/src/components/Select/components/SelectControl/SelectControl.scss +++ b/src/components/Select/components/SelectControl/SelectControl.scss @@ -199,13 +199,10 @@ $blockButton: '.#{variables.$ns}select-control__button'; border-color: var(--g-color-line-generic-active); } - &:focus::before { + &:focus-visible::before { outline: 2px solid var(--g-select-focus-outline-color, var(--_--focus-outline-color)); outline-offset: -1px; } - &:focus:not(:focus-visible)::before { - outline: 0; - } } &:not(&_disabled):not(&_no-active):active { From c566f265c80ce7b4faf3868aa80b79bc329732bc Mon Sep 17 00:00:00 2001 From: Kezhik Kyzyl-ool Date: Thu, 21 Mar 2024 15:05:32 +0100 Subject: [PATCH 7/7] docs: additional clarification --- src/components/Select/README.md | 6 +++--- src/components/controls/TextArea/README.md | 22 +++++++++---------- src/components/controls/TextInput/README.md | 24 ++++++++++----------- 3 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/components/Select/README.md b/src/components/Select/README.md index b213d7f51d..ad66ff2cdd 100644 --- a/src/components/Select/README.md +++ b/src/components/Select/README.md @@ -1126,6 +1126,6 @@ LANDING_BLOCK--> ## CSS API -| Name | Description | -| :------------------------------- | :----------------------- | -| `--g-select-focus-outline-color` | Outline color if focused | +| Name | Description | +| :------------------------------- | :-------------------------------------------------- | +| `--g-select-focus-outline-color` | Outline color if focused (by default not presented) | diff --git a/src/components/controls/TextArea/README.md b/src/components/controls/TextArea/README.md index 420c83bf3f..40324ee213 100644 --- a/src/components/controls/TextArea/README.md +++ b/src/components/controls/TextArea/README.md @@ -217,14 +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 | -| `--g-text-area-focus-outline-color` | Outline color if focused | +| 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/TextInput/README.md b/src/components/controls/TextInput/README.md index a9ebfd212e..9ebce52aab 100644 --- a/src/components/controls/TextInput/README.md +++ b/src/components/controls/TextInput/README.md @@ -271,15 +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 | -| `--g-text-input-focus-outline-color` | Outline color if focused | +| 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) |