From 6063d1b9896ea205c9b31b6c040eeb0cfb6ae388 Mon Sep 17 00:00:00 2001 From: Konstantin Gogov <68374332+kgogov@users.noreply.github.com> Date: Thu, 27 Jun 2024 21:38:33 +0300 Subject: [PATCH] fix(ui5-checkbox): adjust focus outline in wrapped mode This commit adjusts the focus outline in wrapped mode for the CheckBox component. It address the initial concern that the focus outline was out of place in compact density mode, but also improves the overall focus outline in all density modes. Themes that were checked: - sap_horizon - sap_horizon_dark - sap_horizon_hcb - sap_horizon_hcw - sap_fiori_3 - sap_fiori_3_dark - sap_fiori_3_hcb - sap_fiori_3_hcw - sap_belize --- packages/main/src/themes/CheckBox.css | 2 +- packages/main/src/themes/base/CheckBox-parameters.css | 3 +-- packages/main/src/themes/base/sizes-parameters.css | 3 +-- .../main/src/themes/sap_fiori_3/CheckBox-parameters.css | 1 - .../main/src/themes/sap_fiori_3/parameters-bundle.css | 2 +- packages/main/src/themes/sap_fiori_3/sizes-parameters.css | 8 ++++++++ .../src/themes/sap_fiori_3_dark/CheckBox-parameters.css | 1 - .../src/themes/sap_fiori_3_dark/parameters-bundle.css | 2 +- .../main/src/themes/sap_fiori_3_dark/sizes-parameters.css | 8 ++++++++ .../main/src/themes/sap_horizon/CheckBox-parameters.css | 3 ++- packages/main/src/themes/sap_horizon/sizes-parameters.css | 4 ++++ .../src/themes/sap_horizon_dark/CheckBox-parameters.css | 2 ++ .../main/src/themes/sap_horizon_dark/sizes-parameters.css | 4 ++++ .../src/themes/sap_horizon_hcb/CheckBox-parameters.css | 2 ++ .../main/src/themes/sap_horizon_hcb/sizes-parameters.css | 5 +++++ .../src/themes/sap_horizon_hcw/CheckBox-parameters.css | 3 +++ .../main/src/themes/sap_horizon_hcw/sizes-parameters.css | 5 +++++ 17 files changed, 48 insertions(+), 10 deletions(-) create mode 100644 packages/main/src/themes/sap_fiori_3/sizes-parameters.css create mode 100644 packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css index d9b30976c711..316889db5ed9 100644 --- a/packages/main/src/themes/CheckBox.css +++ b/packages/main/src/themes/CheckBox.css @@ -62,7 +62,7 @@ } :host([wrapping-type="Normal"]) .ui5-checkbox-root:focus::before { - bottom: var(--_ui5_checkbox_wrapped_focus_left_top_bottom_position); + inset-block-end: var(--_ui5_checkbox_wrapped_focus_inset_block_end); } /* value states */ diff --git a/packages/main/src/themes/base/CheckBox-parameters.css b/packages/main/src/themes/base/CheckBox-parameters.css index e8755bc06602..3e9bec872049 100644 --- a/packages/main/src/themes/base/CheckBox-parameters.css +++ b/packages/main/src/themes/base/CheckBox-parameters.css @@ -41,12 +41,11 @@ --_ui5_checkbox_inner_background: var(--sapField_Background); --_ui5_checkbox_wrapped_focus_padding: .375rem; --_ui5_checkbox_wrapped_content_margin_top: .125rem; ---_ui5_checkbox_wrapped_focus_left_top_bottom_position: .5625rem; +--_ui5_checkbox_wrapped_focus_inset_block_end: .5625rem; --_ui5_checkbox_compact_wrapper_padding: .5rem; --_ui5_checkbox_compact_width_height: 2rem; --_ui5_checkbox_compact_inner_size: 1rem; --_ui5_checkbox_compact_focus_position: .375rem; ---_ui5_checkbox_compact_wrapped_label_margin_top: -1px; --_ui5_checkbox_label_color: var(--sapContent_LabelColor); --_ui5_checkbox_label_offset: var(--_ui5_checkbox_wrapper_padding); --_ui5_checkbox_disabled_label_color: var(--sapContent_LabelColor); diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 15f9c9286d83..871147086957 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -177,8 +177,7 @@ /* CheckBox */ --_ui5_checkbox_root_side_padding: var(--_ui5_checkbox_wrapped_focus_padding); - --_ui5_checkbox_wrapped_content_margin_top: var(--_ui5_checkbox_compact_wrapped_label_margin_top); - --_ui5_checkbox_wrapped_focus_left_top_bottom_position: var(--_ui5_checkbox_compact_focus_position); + --_ui5_checkbox_wrapped_focus_inset_block_end: .25rem; --_ui5_checkbox_width_height: var(--_ui5_checkbox_compact_width_height); --_ui5_checkbox_wrapper_padding: var(--_ui5_checkbox_compact_wrapper_padding); --_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position); diff --git a/packages/main/src/themes/sap_fiori_3/CheckBox-parameters.css b/packages/main/src/themes/sap_fiori_3/CheckBox-parameters.css index 2e914de2bbe6..b289ebf3bee1 100644 --- a/packages/main/src/themes/sap_fiori_3/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/CheckBox-parameters.css @@ -9,5 +9,4 @@ --_ui5_checkbox_wrapped_content_margin_top: 0; --_ui5_checkbox_wrapped_focus_padding: .5rem; --_ui5_checkbox_inner_readonly_border: 1px solid var(--sapField_ReadOnly_BorderColor); - --_ui5_checkbox_compact_wrapped_label_margin_top: -0.125rem; } diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css index a1169eb56892..5481e71e5368 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -55,5 +55,5 @@ @import "./MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; @import "../base/StepInput-parameters.css"; -@import "../base/sizes-parameters.css"; +@import "./sizes-parameters.css"; @import "../base/rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3/sizes-parameters.css new file mode 100644 index 000000000000..61809fc0ab11 --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3/sizes-parameters.css @@ -0,0 +1,8 @@ +@import "../base/sizes-parameters.css"; + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + /* CheckBox */ + --_ui5_checkbox_wrapped_focus_inset_block_end: .375rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_dark/CheckBox-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/CheckBox-parameters.css index 2e914de2bbe6..b289ebf3bee1 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_dark/CheckBox-parameters.css @@ -9,5 +9,4 @@ --_ui5_checkbox_wrapped_content_margin_top: 0; --_ui5_checkbox_wrapped_focus_padding: .5rem; --_ui5_checkbox_inner_readonly_border: 1px solid var(--sapField_ReadOnly_BorderColor); - --_ui5_checkbox_compact_wrapped_label_margin_top: -0.125rem; } diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css index dc2dceac8209..db92c2064b1f 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css @@ -54,5 +54,5 @@ @import "./MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; @import "../base/StepInput-parameters.css"; -@import "../base/sizes-parameters.css"; +@import "./sizes-parameters.css"; @import "../base/rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css new file mode 100644 index 000000000000..61809fc0ab11 --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3_dark/sizes-parameters.css @@ -0,0 +1,8 @@ +@import "../base/sizes-parameters.css"; + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + /* CheckBox */ + --_ui5_checkbox_wrapped_focus_inset_block_end: .375rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css index f16fbe99648e..37fcf89ede36 100644 --- a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css @@ -40,5 +40,6 @@ --_ui5_checkbox_focus_position: 0.3125rem; --_ui5_checkbox_focus_border_radius: 0.5rem; --_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position); - --_ui5_checkbox_wrapped_focus_left_top_bottom_position: 0.1875rem; + --_ui5_checkbox_wrapped_focus_inset_block_end: var(--_ui5_checkbox_focus_position); + --_ui5_checkbox_wrapped_content_margin_top: 0; } diff --git a/packages/main/src/themes/sap_horizon/sizes-parameters.css b/packages/main/src/themes/sap_horizon/sizes-parameters.css index e44de699c0af..62f0f965433d 100644 --- a/packages/main/src/themes/sap_horizon/sizes-parameters.css +++ b/packages/main/src/themes/sap_horizon/sizes-parameters.css @@ -49,6 +49,10 @@ --_ui5_color-palette-item-after-focus-offset: -0.125rem; --_ui5_color_picker_slider_container_margin_top: -9px; + /* CheckBox */ + --_ui5_checkbox_wrapped_focus_inset_block_end: 0.125rem; + --_ui5_checkbox_wrapped_content_margin_top: 0.125rem; + /* DayPicker */ --_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem; --_ui5_daypicker_specialday_focused_top: 1.3125rem; diff --git a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css index f55e190b54ea..37fcf89ede36 100644 --- a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css @@ -40,4 +40,6 @@ --_ui5_checkbox_focus_position: 0.3125rem; --_ui5_checkbox_focus_border_radius: 0.5rem; --_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position); + --_ui5_checkbox_wrapped_focus_inset_block_end: var(--_ui5_checkbox_focus_position); + --_ui5_checkbox_wrapped_content_margin_top: 0; } diff --git a/packages/main/src/themes/sap_horizon_dark/sizes-parameters.css b/packages/main/src/themes/sap_horizon_dark/sizes-parameters.css index 7b39167ea011..e111eab2b878 100644 --- a/packages/main/src/themes/sap_horizon_dark/sizes-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/sizes-parameters.css @@ -46,6 +46,10 @@ --_ui5_color-palette-item-after-focus-offset: -0.125rem; --_ui5_color_picker_slider_container_margin_top: -9px; + /* CheckBox */ + --_ui5_checkbox_wrapped_focus_inset_block_end: 0.125rem; + --_ui5_checkbox_wrapped_content_margin_top: 0.125rem; + /* DayPicker */ --_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem; --_ui5_daypicker_specialday_focused_top: 1.3125rem; diff --git a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css index a68df893dd86..ae85489d6c51 100644 --- a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css @@ -42,4 +42,6 @@ --_ui5_checkbox_focus_position: 0.3125rem; --_ui5_checkbox_focus_border_radius: 0.5rem; --_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position); + --_ui5_checkbox_wrapped_focus_inset_block_end: var(--_ui5_checkbox_focus_position); + --_ui5_checkbox_wrapped_content_margin_top: 0; } diff --git a/packages/main/src/themes/sap_horizon_hcb/sizes-parameters.css b/packages/main/src/themes/sap_horizon_hcb/sizes-parameters.css index 752bd82c54aa..2dd47825a233 100644 --- a/packages/main/src/themes/sap_horizon_hcb/sizes-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/sizes-parameters.css @@ -7,6 +7,11 @@ --_ui5_split_button_text_button_width: 2.25rem; --_ui5_color_picker_slider_container_margin_top: -10px; + /* CheckBox */ + --_ui5_checkbox_focus_position: 0.3125rem; + --_ui5_checkbox_wrapped_focus_inset_block_end: 0.125rem; + --_ui5_checkbox_wrapped_content_margin_top: 0.125rem; + /* DayPicker */ --_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem; --_ui5_daypicker_specialday_focused_top: 1.3125rem; diff --git a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css index a68df893dd86..420c6737ac03 100644 --- a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css @@ -42,4 +42,7 @@ --_ui5_checkbox_focus_position: 0.3125rem; --_ui5_checkbox_focus_border_radius: 0.5rem; --_ui5_checkbox_right_focus_distance: var(--_ui5_checkbox_focus_position); + --_ui5_checkbox_wrapped_focus_inset_block_end: var(--_ui5_checkbox_focus_position); + --_ui5_checkbox_wrapped_content_margin_top: 0; + } diff --git a/packages/main/src/themes/sap_horizon_hcw/sizes-parameters.css b/packages/main/src/themes/sap_horizon_hcw/sizes-parameters.css index 752bd82c54aa..2dd47825a233 100644 --- a/packages/main/src/themes/sap_horizon_hcw/sizes-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/sizes-parameters.css @@ -7,6 +7,11 @@ --_ui5_split_button_text_button_width: 2.25rem; --_ui5_color_picker_slider_container_margin_top: -10px; + /* CheckBox */ + --_ui5_checkbox_focus_position: 0.3125rem; + --_ui5_checkbox_wrapped_focus_inset_block_end: 0.125rem; + --_ui5_checkbox_wrapped_content_margin_top: 0.125rem; + /* DayPicker */ --_ui5_daypicker_selected_item_now_special_day_top: 1.5625rem; --_ui5_daypicker_specialday_focused_top: 1.3125rem;