From a6af838f2e6a859358205fd6646824c3ba3d49c6 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Tue, 17 Dec 2024 14:44:11 +0200 Subject: [PATCH 1/2] fix(ui5-table): apply focus over whole row --- packages/compat/src/themes/TableRow.css | 38 ++++- .../src/themes/base/Table-parameters.css | 2 +- .../themes/sap_horizon/Table-parameters.css | 2 +- .../sap_horizon_dark/Table-parameters.css | 2 +- .../sap_horizon_hcb/Table-parameters.css | 2 +- .../sap_horizon_hcw/Table-parameters.css | 2 +- packages/main/src/themes/TableRow.css | 146 +++++++++--------- 7 files changed, 114 insertions(+), 80 deletions(-) diff --git a/packages/compat/src/themes/TableRow.css b/packages/compat/src/themes/TableRow.css index a5762deeece5..865130ff0b2e 100644 --- a/packages/compat/src/themes/TableRow.css +++ b/packages/compat/src/themes/TableRow.css @@ -1,4 +1,5 @@ :host { + --table-row-border-styles: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); display: contents; } @@ -11,12 +12,45 @@ background-color: var(--sapList_Background); color: var(--sapList_TextColor); border-top: 1px solid var(--sapList_BorderColor); + position: relative; +} + +/* FOCUS START */ +.ui5-table-row-root, +.ui5-table-popin-row { + position: relative; } .ui5-table-row-root:focus { - outline: var(--ui5_table_row_outline_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); - outline-offset: var(--ui5_table_focus_outline_offset); + outline: none +} + +.ui5-table-row-root:focus::after, +.ui5-table-row-root:focus ~ .ui5-table-popin-row::after { + position: absolute; + content: ""; + inset: var(--ui5_table_focus_outline_offset); + border: var(--table-row-border-styles); +} + +.ui5-table-row-root:has(+ .ui5-table-popin-row):focus::after { + bottom: 0; + border-bottom: none; +} + +.ui5-table-row-root:focus ~ .ui5-table-popin-row::after { + top: 0; + bottom: 0; + border-top: none; + border-bottom: none; +} + + +.ui5-table-row-root:focus ~ .ui5-table-popin-row:last-child:after { + top: 0; + border-bottom: var(--table-row-border-styles); } +/* FOCUS END */ .ui5-table-popin-row { background-color: var(--sapList_Background); diff --git a/packages/compat/src/themes/base/Table-parameters.css b/packages/compat/src/themes/base/Table-parameters.css index 3e41c35ac97b..f60956a86605 100644 --- a/packages/compat/src/themes/base/Table-parameters.css +++ b/packages/compat/src/themes/base/Table-parameters.css @@ -1,5 +1,5 @@ :root { - --ui5_table_focus_outline_offset: -0.125rem; + --ui5_table_focus_outline_offset: 0.125rem; --ui5_table_bottom_border: 1px solid var(--sapList_BorderColor); --ui5_table_header_row_outline_width: 1px; --ui5_table_multiselect_column_width: 2.75rem; diff --git a/packages/compat/src/themes/sap_horizon/Table-parameters.css b/packages/compat/src/themes/sap_horizon/Table-parameters.css index 0c4db7c9e47f..36b6a7234998 100644 --- a/packages/compat/src/themes/sap_horizon/Table-parameters.css +++ b/packages/compat/src/themes/sap_horizon/Table-parameters.css @@ -4,5 +4,5 @@ --ui5_table_header_row_outline_width: var(--sapContent_FocusWidth); --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); - --ui5_table_focus_outline_offset: -0.1875rem; + --ui5_table_focus_outline_offset: 0.1875rem; } \ No newline at end of file diff --git a/packages/compat/src/themes/sap_horizon_dark/Table-parameters.css b/packages/compat/src/themes/sap_horizon_dark/Table-parameters.css index 0c4db7c9e47f..36b6a7234998 100644 --- a/packages/compat/src/themes/sap_horizon_dark/Table-parameters.css +++ b/packages/compat/src/themes/sap_horizon_dark/Table-parameters.css @@ -4,5 +4,5 @@ --ui5_table_header_row_outline_width: var(--sapContent_FocusWidth); --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); - --ui5_table_focus_outline_offset: -0.1875rem; + --ui5_table_focus_outline_offset: 0.1875rem; } \ No newline at end of file diff --git a/packages/compat/src/themes/sap_horizon_hcb/Table-parameters.css b/packages/compat/src/themes/sap_horizon_hcb/Table-parameters.css index f2520e1a8e80..26a1ce44b539 100644 --- a/packages/compat/src/themes/sap_horizon_hcb/Table-parameters.css +++ b/packages/compat/src/themes/sap_horizon_hcb/Table-parameters.css @@ -4,6 +4,6 @@ --ui5_table_header_row_outline_width: 0.125rem; --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); - --ui5_table_focus_outline_offset: -0.25rem; + --ui5_table_focus_outline_offset: 0.25rem; --ui5_table_header_row_border_width: 0.1875rem; } \ No newline at end of file diff --git a/packages/compat/src/themes/sap_horizon_hcw/Table-parameters.css b/packages/compat/src/themes/sap_horizon_hcw/Table-parameters.css index f2520e1a8e80..26a1ce44b539 100644 --- a/packages/compat/src/themes/sap_horizon_hcw/Table-parameters.css +++ b/packages/compat/src/themes/sap_horizon_hcw/Table-parameters.css @@ -4,6 +4,6 @@ --ui5_table_header_row_outline_width: 0.125rem; --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); - --ui5_table_focus_outline_offset: -0.25rem; + --ui5_table_focus_outline_offset: 0.25rem; --ui5_table_header_row_border_width: 0.1875rem; } \ No newline at end of file diff --git a/packages/main/src/themes/TableRow.css b/packages/main/src/themes/TableRow.css index a2bcd93fb63a..1c5a409c07bc 100644 --- a/packages/main/src/themes/TableRow.css +++ b/packages/main/src/themes/TableRow.css @@ -1,73 +1,73 @@ -:host { - background: var(--sapList_Background); -} - -:host([position]) { - height: var(--row-height); - overflow: clip; -} - -:host([aria-selected=true]) { - background-color: var(--sapList_SelectionBackgroundColor); - border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor); -} - -:host([_interactive]) { - cursor: pointer; -} - -@media (hover: hover) { - :host([_interactive]:hover) { - background: var(--sapList_Hover_Background); - } - :host([_interactive][aria-selected=true]:hover) { - background: var(--sapList_Hover_SelectionBackground); - } -} - -:host([_interactive]:active), -:host([_interactive][_active]), -:host([_interactive][aria-selected=true]:active), -:host([_interactive][aria-selected=true][_active]) { - background: var(--sapList_Active_Background); -} - -#popin-cell { - align-content: initial; - flex-direction: column; - grid-column: 1 / -1; -} - -#navigated-cell { - position: relative; - overflow: visible; - grid-row: span 2; - min-width: 0; - padding: 0; - position: sticky; - right: 0; -} - -:dir(rtl)#navigated-cell { - left: 0; -} - -:host([navigated]) #navigated { - position: absolute; - inset: 0; - background-color: var(--sapList_SelectionBorderColor); -} - -:host([tabindex]:focus) #navigated { - transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1)); - bottom: 2px; - top: 3px; -} - -:host([tabindex]:focus) #navigated:dir(rtl) { - transform: translateX(var(--_ui5_table_navigated_cell_width)); -} - -:host([navigated]) #popin-cell { - grid-column: 1 / -2; -} +:host { + background: var(--sapList_Background); +} + +:host([position]) { + height: var(--row-height); + overflow: clip; +} + +:host([aria-selected=true]) { + background-color: var(--sapList_SelectionBackgroundColor); + border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor); +} + +:host([_interactive]) { + cursor: pointer; +} + +@media (hover: hover) { + :host([_interactive]:hover) { + background: var(--sapList_Hover_Background); + } + :host([_interactive][aria-selected=true]:hover) { + background: var(--sapList_Hover_SelectionBackground); + } +} + +:host([_interactive]:active), +:host([_interactive][_active]), +:host([_interactive][aria-selected=true]:active), +:host([_interactive][aria-selected=true][_active]) { + background: var(--sapList_Active_Background); +} + +#popin-cell { + align-content: initial; + flex-direction: column; + grid-column: 1 / -1; +} + +#navigated-cell { + position: relative; + overflow: visible; + grid-row: span 2; + min-width: 0; + padding: 0; + position: sticky; + right: 0; +} + +:dir(rtl)#navigated-cell { + left: 0; +} + +:host([navigated]) #navigated { + position: absolute; + inset: 0; + background-color: var(--sapList_SelectionBorderColor); +} + +:host([tabindex]:focus) #navigated { + transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1)); + bottom: 2px; + top: 3px; +} + +:host([tabindex]:focus) #navigated:dir(rtl) { + transform: translateX(var(--_ui5_table_navigated_cell_width)); +} + +:host([navigated]) #popin-cell { + grid-column: 1 / -2; +} From 05b89956cdd4bdd241f2323b323309f4ec8b4b87 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov Date: Tue, 17 Dec 2024 14:51:23 +0200 Subject: [PATCH 2/2] chore: fix build --- packages/compat/src/themes/TableRow.css | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/compat/src/themes/TableRow.css b/packages/compat/src/themes/TableRow.css index 865130ff0b2e..76412c20649f 100644 --- a/packages/compat/src/themes/TableRow.css +++ b/packages/compat/src/themes/TableRow.css @@ -27,6 +27,7 @@ .ui5-table-row-root:focus::after, .ui5-table-row-root:focus ~ .ui5-table-popin-row::after { + pointer-events: none; position: absolute; content: ""; inset: var(--ui5_table_focus_outline_offset);