From da1dddc29cee35fe40d95d8e2665dda4a018d9c4 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Fri, 27 Sep 2024 11:02:24 +0300 Subject: [PATCH 1/3] 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); From efb303aa3f563eaa1364a962bc42ad0d1797d9cb Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Mon, 7 Oct 2024 19:19:48 +0300 Subject: [PATCH 2/3] fix(ui5-notification-list-group): group header hight is shorter when collapsed Fixes jumping header --- packages/fiori/src/NotificationListGroupItem.hbs | 1 + packages/fiori/src/NotificationListGroupItem.ts | 4 ++++ .../fiori/src/themes/NotificationListGroupItem.css | 14 +++++++------- .../base/NotificationListItem-parameters.css | 2 +- .../NotificationListItem-parameters.css | 1 - .../NotificationListItem-parameters.css | 1 - .../NotificationListItem-parameters.css | 1 - .../NotificationListItem-parameters.css | 1 - 8 files changed, 13 insertions(+), 12 deletions(-) diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs index 5b4a6a10e976..51114d4cdb4a 100644 --- a/packages/fiori/src/NotificationListGroupItem.hbs +++ b/packages/fiori/src/NotificationListGroupItem.hbs @@ -22,6 +22,7 @@ @keydown="{{_onkeydown}}" role="button" aria-expanded="{{_ariaExpanded}}" + expanded="{{_expanded}}" aria-controls="{{_id}}-notificationsList" title="{{toggleIconAccessibleName}}"> Date: Thu, 10 Oct 2024 15:10:41 +0300 Subject: [PATCH 3/3] fix(ui5-notification-list-group): group header hight is shorter when collapsed Remove unnecessary getter --- packages/fiori/src/NotificationListGroupItem.hbs | 2 +- packages/fiori/src/NotificationListGroupItem.ts | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs index 51114d4cdb4a..2f76a034b41a 100644 --- a/packages/fiori/src/NotificationListGroupItem.hbs +++ b/packages/fiori/src/NotificationListGroupItem.hbs @@ -21,7 +21,7 @@ @click="{{_onHeaderToggleClick}}" @keydown="{{_onkeydown}}" role="button" - aria-expanded="{{_ariaExpanded}}" + aria-expanded="{{_expanded}}" expanded="{{_expanded}}" aria-controls="{{_id}}-notificationsList" title="{{toggleIconAccessibleName}}"> diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts index 3d2181d6418d..075c492b0812 100644 --- a/packages/fiori/src/NotificationListGroupItem.ts +++ b/packages/fiori/src/NotificationListGroupItem.ts @@ -188,10 +188,6 @@ class NotificationListGroupItem extends NotificationListItemBase { return ids.join(" "); } - get _ariaExpanded() { - return !this.collapsed; - } - get _expanded() { return !this.collapsed; }