feat(ui5-li-notification): adjust focus styles to sap_horizon (#4228)

GerganaKremenska · web-flow · commit 1f681d01df0b · 2021-11-03T07:08:48.000+02:00
diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css
@@ -1,6 +1,10 @@
 @import "./NotificationListItemBase.css";
 @import "./NotificationPrioIcon.css";
 
+:host {
+	--_ui5-notification_item-border-raius: 0px;
+}
+
 :host(:not([collapsed])) .ui5-nli-group-toggle-btn {
 	transform: rotate(90deg);
 }
diff --git a/packages/fiori/src/themes/NotificationListItem.css b/packages/fiori/src/themes/NotificationListItem.css
@@ -43,6 +43,25 @@
 :host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-description  {
 	max-height: inherit;
 }
+
+:host(:first-of-type) {
+	border-top-left-radius: var(--_ui5-notification_item-border-raius);
+	border-top-right-radius: var(--_ui5-notification_item-border-raius);
+}
+
+:host(:last-of-type) {
+	border-bottom-left-radius: var(--_ui5-notification_item-border-raius);
+	border-bottom-right-radius: var(--_ui5-notification_item-border-raius);
+}
+
+:host(:first-of-type) .ui5-nli-focusable:after {
+	border-top-left-radius: var(--_ui5-notification_item-border-raius);
+	border-top-right-radius: var(--_ui5-notification_item-border-raius);
+}
+:host(:last-of-type) .ui5-nli-focusable:after {
+	border-bottom-left-radius: var(--_ui5-notification_item-border-raius);
+	border-bottom-right-radius: var(--_ui5-notification_item-border-raius);
+}
 /* End */
 
 .ui5-nli-root {
diff --git a/packages/fiori/src/themes/NotificationListItemBase.css b/packages/fiori/src/themes/NotificationListItemBase.css
@@ -18,7 +18,7 @@
 
 :host([focused]) .ui5-nli-focusable:after {
 	content: "";
-	border: var(--_ui5_listitembase_focus_width) dotted var(--sapContent_FocusColor);
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	position: absolute;
 	top: 0;
 	right: 0;
diff --git a/packages/fiori/src/themes/base/NotificationListItem-parameters.css b/packages/fiori/src/themes/base/NotificationListItem-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5-notification_item-border-raius: 0px;
+}
diff --git a/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css b/packages/fiori/src/themes/sap_horizon/NotificationListItem-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5-notification_item-border-raius: 0.75rem;
+}
diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
@@ -5,4 +5,5 @@
 @import "../base/ProductSwitchItem-parameters.css";
 @import "./TimelineItem-parameters.css";
 @import "../base/UploadCollection-parameters.css";
-@import "./WizardTab-parameters.css";
+@import "./WizardTab-parameters.css";
+@import "./NotificationListItem-parameters.css";
diff --git a/packages/fiori/test/pages/NotificationListItem.html b/packages/fiori/test/pages/NotificationListItem.html
@@ -125,7 +125,7 @@ <h3>Events on ui5-list level</h3>
 
 	<br><br>
 
-	<ui5-list id="notificationList2" header-text="Notifications titleText and content 'wraps'">
+	<ui5-list id="notificationList2">
 
 		<ui5-li-notification
 			show-close

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+:root {`
	`2`	`+ --_ui5-notification_item-border-raius: 0px;`
	`3`	`+}`