From 95ce79738fbe27bdba1e10b11ca8395a5fb0760c Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Thu, 10 Oct 2024 01:19:42 +0300 Subject: [PATCH 1/2] fix(ui5-split-button): adjust focus outline on keydown --- packages/main/src/themes/SplitButton.css | 18 ++++++++++++++++++ .../src/themes/base/SplitButton-parameters.css | 1 - 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/main/src/themes/SplitButton.css b/packages/main/src/themes/SplitButton.css index bc163d1a72f7..be2fdab3445a 100644 --- a/packages/main/src/themes/SplitButton.css +++ b/packages/main/src/themes/SplitButton.css @@ -111,6 +111,24 @@ border-color: var(--sapContent_ContrastFocusColor); } +:host([design="Emphasized"][desktop]) .ui5-split-button-root:focus-within .ui5-split-text-button[active]::part(button):after, +:host([design="Emphasized"]) .ui5-split-button-root:focus-visible .ui5-split-text-button[active]::part(button):after { + content: ""; + position: absolute; + box-sizing: border-box; + left: 0.0625rem; + top: 0.0625rem; + right: 0.0625rem; + bottom: 0.0625rem; + border: var(--_ui5_split_button_focused_border); + border-radius: var(--_ui5_split_button_focused_border_radius); +} + +:host([design="Emphasized"][desktop]) .ui5-split-button-root:has(.ui5-split-text-button[active]):after, +:host([design="Emphasized"]) .ui5-split-button-root:has(.ui5-split-text-button[active]):after { + border-color: transparent; +} + .ui5-split-button-root { display: inline-flex; position: relative; diff --git a/packages/main/src/themes/base/SplitButton-parameters.css b/packages/main/src/themes/base/SplitButton-parameters.css index 91decf73e176..deac98a6148c 100644 --- a/packages/main/src/themes/base/SplitButton-parameters.css +++ b/packages/main/src/themes/base/SplitButton-parameters.css @@ -41,7 +41,6 @@ --_ui5_split_text_button_emphasized_border_width: 0.0625rem; - --_ui5_split_text_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); --_ui5_split_text_button_emphasized_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); --_ui5_split_text_button_positive_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); From f2306e5dc9196a8de972a22abfffbd6f9483d958 Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Thu, 10 Oct 2024 10:12:17 +0300 Subject: [PATCH 2/2] fix: retrieve a newline character --- packages/main/src/themes/base/SplitButton-parameters.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/themes/base/SplitButton-parameters.css b/packages/main/src/themes/base/SplitButton-parameters.css index deac98a6148c..91decf73e176 100644 --- a/packages/main/src/themes/base/SplitButton-parameters.css +++ b/packages/main/src/themes/base/SplitButton-parameters.css @@ -41,6 +41,7 @@ --_ui5_split_text_button_emphasized_border_width: 0.0625rem; + --_ui5_split_text_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); --_ui5_split_text_button_emphasized_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); --_ui5_split_text_button_positive_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);