From da1dddc29cee35fe40d95d8e2665dda4a018d9c4 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Fri, 27 Sep 2024 11:02:24 +0300 Subject: [PATCH] fix(ui5-notification-list-group): group header hight is shorter when collapsed There was too much space between collapsed group headers Fixes: #9911 --- .../fiori/src/themes/NotificationListGroupItem.css | 10 ++++++++++ .../themes/base/NotificationListItem-parameters.css | 1 + 2 files changed, 11 insertions(+) diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css index fb5eea563d5c..0155a5df9886 100644 --- a/packages/fiori/src/themes/NotificationListGroupItem.css +++ b/packages/fiori/src/themes/NotificationListGroupItem.css @@ -41,6 +41,10 @@ cursor: pointer; } +.ui5-nli-group-header[aria-expanded="false"] { + height: 2.75rem; +} + /* The focus is on the whole group but should be visualized on the Group Header */ :host([desktop]) .ui5-nli-focusable.ui5-nli-group-root:focus .ui5-nli-group-header::before, .ui5-nli-focusable.ui5-nli-group-root:focus-visible .ui5-nli-group-header::before { @@ -54,6 +58,12 @@ pointer-events: none; } +:host([desktop]) .ui5-nli-focusable.ui5-nli-group-root:focus .ui5-nli-group-header[aria-expanded="false"]::before, +.ui5-nli-focusable.ui5-nli-group-root:focus-visible .ui5-nli-group-header[aria-expanded="false"]::before { + top: var(--_ui5-notification_group_header-margin_collapsed); + bottom: var(--_ui5-notification_group_header-margin_collapsed); +} + .ui5-nli-group-toggle-icon { min-width: 1rem; min-height: 1rem; diff --git a/packages/fiori/src/themes/base/NotificationListItem-parameters.css b/packages/fiori/src/themes/base/NotificationListItem-parameters.css index afa0a68c1f4b..f0d5947efb71 100644 --- a/packages/fiori/src/themes/base/NotificationListItem-parameters.css +++ b/packages/fiori/src/themes/base/NotificationListItem-parameters.css @@ -2,6 +2,7 @@ --_ui5-notification_item-border-radius: 0px; --_ui5-notification_group_header-border-bottom-width: 0.0625rem; --_ui5-notification_group_header-margin: 0px; + --_ui5-notification_group_header-margin_collapsed: 0.05rem; --_ui5-notification_group_header-padding: 1rem 0.5rem; --_ui5-notification_item-state-icon-padding: 0.625rem; --_ui5-notification_item-border-bottom: var(--ui5-listitem-border-bottom);