@ui5/webcomponents-fiori 0.0.0-e7dd012d7 → 0.0.0-e818f286e

package/src/NotificationListItem.hbs

@@ -5,11 +5,9 @@
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@click="{{_onclick}}"
-	role="option"
+	role="listitem"
 	tabindex="{{_tabIndex}}"
-	dir="{{effectiveDir}}"
 	aria-labelledby="{{ariaLabelledBy}}"
-	style="list-style-type: none;"
 >
 	<div class="ui5-nli-actions">
 		{{#if showOverflow}}
@@ -18,7 +16,8 @@
 				design="Transparent"
 				@click="{{_onBtnOverflowClick}}"
 				class="ui5-nli-overflow-btn"
-				title="{{overflowBtnTitle}}"
+				tooltip="{{overflowBtnAccessibleName}}"
+				aria-label="{{overflowBtnAccessibleName}}"
 			></ui5-button>
 		{{else}}
 			{{#each standardActions}}
@@ -40,14 +39,15 @@
 				icon="decline"
 				design="Transparent"
 				@click="{{_onBtnCloseClick}}"
-				title="{{closeBtnTitle}}"
+				tooltip="{{closeBtnAccessibleName}}"
+				aria-label="{{closeBtnAccessibleName}}"
 				close-btn
 			></ui5-button>
 		{{/if}}
 	</div>
 
-	<div class="ui5-nli-content {{classes.content}}">
-		<div class="ui5-nli-heading">
+	<div class="ui5-nli-content">
+		<div class="ui5-nli-title-text-wrapper">
 			{{#if hasPriority}}
 				<ui5-icon
 					class="ui5-prio-icon ui5-prio-icon--{{priorityIcon}}"
@@ -55,8 +55,8 @@
 				</ui5-icon>
 			{{/if}}
 
-			<div id="{{_id}}-heading" class="ui5-nli-title" part="heading">
-				{{heading}}
+			<div id="{{_id}}-title-text" class="ui5-nli-title-text" part="title-text">
+				{{titleText}}
 			</div>
 		</div>
 
@@ -70,7 +70,7 @@
 			{{#each footerItems}}
 				<slot name="{{slotName}}"></slot>
 				{{#if showDivider}}
-					<div class="ui5-nli-footer-divider"></div>
+					<div class="ui5-nli-footer-divider" aria-hidden="true">·</div>
 				{{/if}}
 			{{/each}}
 
@@ -94,6 +94,12 @@
 	</div>
 
 	{{#if busy}}
-		<ui5-busyindicator active size="Medium" class="ui5-nli-busy"></ui5-busyindicator>
+		<ui5-busy-indicator
+				delay="{{busyDelay}}"
+				active
+				size="Medium"
+				class="ui5-nli-busy"
+				data-sap-focus-ref
+		></ui5-busy-indicator>
 	{{/if}}
 </li>

package/src/NotificationListItem.js

@@ -1,7 +1,5 @@
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { fetchI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 
 import Priority from "@ui5/webcomponents/dist/types/Priority.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
@@ -9,6 +7,7 @@ import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import Link from "@ui5/webcomponents/dist/Link.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
 import NotificationListItemBase from "./NotificationListItemBase.js";
 
 // Texts
@@ -31,8 +30,6 @@ import NotificationListItemTemplate from "./generated/templates/NotificationList
 // Styles
 import NotificationListItemCss from "./generated/themes/NotificationListItem.css.js";
 
-const MAX_WRAP_HEIGHT = 32; // px.
-
 /**
  * @public
  */
@@ -43,35 +40,24 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
 
 		/**
-		 * Defines if the <code>heading</code> and <code>description</code> should wrap,
+		 * Defines if the <code>titleText</code> and <code>description</code> should wrap,
 		 * they truncate by default.
 		 *
 		 * <br><br>
-		 * <b>Note:</b> by default the <code>heading</code> and <code>decription</code>,
+		 * <b>Note:</b> by default the <code>titleText</code> and <code>decription</code>,
 		 * and a <code>ShowMore/Less</code> button would be displayed.
-         * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		wrap: {
-			type: Boolean,
-		},
-
-		/**
-		 * Defines if the <code>notification</code> is new or has been already read.
-		 * <br><br>
-		 * <b>Note:</b> if set to <code>false</code> the <code>heading</code> has bold font,
-		 * if set to true - it has a normal font.
-		 * @type {boolean}
-		 * @defaultvalue false
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
 		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		read: {
-			type: Boolean,
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
 		},
 
 		/**
-		 * Defines the state of the <code>heading</code> and <code>description</code>,
+		 * Defines the state of the <code>titleText</code> and <code>description</code>,
 		 * if less or more information is displayed.
 		 * @private
 		 */
@@ -94,8 +80,12 @@ const metadata = {
 		 *
 		 * <br><br>
 		 * <b>Note:</b> Consider using the <code>ui5-avatar</code> to display icons, initials or images.
+		 * <br>
+		 * <b>Note:</b>In order to be complaint with the UX guidlines and for best experience,
+		 * we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the <code>ui5-avatar</code>
+		 * you can set its <code>size</code> property to <code>XS</code> to get the required size - <code>&lt;ui5-avatar size="XS">&lt;/ui5-avatar></code>.
 		 *
-		 * @type {HTMLElement}
+		 * @type {sap.ui.webcomponents.main.IAvatar}
 		 * @slot
 		 * @public
 		 */
@@ -104,14 +94,13 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the elements, dipalyed in the footer of the of the <code>ui5-li-notification</code>.
+		 * Defines the elements, displayed in the footer of the of the component.
 		 * @type {HTMLElement[]}
 		 * @slot
 		 * @public
 		 */
 		footnotes: {
 			type: HTMLElement,
-			propertyName: "footnotes",
 			individualSlots: true,
 		},
 
@@ -120,10 +109,10 @@ const metadata = {
 		 * usually a description of the notification.
 		 *
 		 * <br><br>
-		 * <b>Note:</b> Аlthough this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 		 *
 		 * @type {Node[]}
-		 * @slot
+		 * @slot description
 		 * @public
 		 */
 		"default": {
@@ -143,41 +132,51 @@ const metadata = {
  * The <code>ui5-li-notification</code> is a type of list item, meant to display notifications.
  * <br>
  *
- * The component has a rich set of various properties that allows the user to set <code>avatar</code>, <code>heading</code>, descriptive <code>content</code>
+ * The component has a rich set of various properties that allows the user to set <code>avatar</code>, <code>titleText</code>, descriptive <code>content</code>
  * and <code>footnotes</code> to fully describe a notification.
  * <br>
  *
  * The user can:
  * <ul>
  * <li>display a <code>Close</code> button</li>
- * <li>can control whether the <code>heading</code> and <code>description</code> should wrap or truncate
+ * <li>can control whether the <code>titleText</code> and <code>description</code> should wrap or truncate
  * and display a <code>ShowMore</code> button to switch between less and more information</li>
- * <li>add custom actions by using the <code>ui5-notification-overflow-action</code> component</li>
+ * <li>add custom actions by using the <code>ui5-notification-action</code> component</li>
  * </ul>
  *
  * <h3>Usage</h3>
  * The component can be used in a standard <code>ui5-list</code>.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-li-notification</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>title-text - Used to style the titleText of the notification list item</li>
+ * </ul>
+ *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/NotificationListItem.js";</code>
+ * <code>import "@ui5/webcomponents/dist/NotificationListItem.js";</code>
  * <br>
- * <code>import @ui5/webcomponents/dist/NotificationOverflowAction.js";</code> (optional)
+ * <code>import "@ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.fiori.NotificationListItem
  * @extends NotificationListItemBase
  * @tagname ui5-li-notification
- * @appenddocs NotificationOverflowAction
+ * @appenddocs NotificationAction
  * @since 1.0.0-rc.8
+ * @implements sap.ui.webcomponents.fiori.INotificationListItem, sap.ui.webcomponents.main.IListItem
  * @public
  */
 class NotificationListItem extends NotificationListItemBase {
 	constructor() {
 		super();
 
-		// the heading overflow height
-		this._headingOverflowHeight = 0;
+		// the titleText overflow height
+		this._titleTextOverflowHeight = 0;
 
 		// the description overflow height
 		this._descOverflowHeight = 0;
@@ -208,10 +207,6 @@ class NotificationListItem extends NotificationListItemBase {
 		];
 	}
 
-	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents-fiori");
-	}
-
 	onEnterDOM() {
 		ResizeHandler.register(this, this.onResizeBind);
 	}
@@ -230,22 +225,22 @@ class NotificationListItem extends NotificationListItemBase {
 
 	get showMoreText() {
 		if (this._showMorePressed) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_LESS);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_LESS);
 		}
 
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_MORE);
+		return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_MORE);
 	}
 
-	get overflowBtnTitle() {
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);
+	get overflowBtnAccessibleName() {
+		return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);
 	}
 
-	get closeBtnTitle() {
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
+	get closeBtnAccessibleName() {
+		return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
 	}
 
 	get hideShowMore() {
-		if (!this.wrap && this._showMore) {
+		if (this.wrappingType === WrappingType.None && this._showMore) {
 			return undefined;
 		}
 
@@ -256,30 +251,26 @@ class NotificationListItem extends NotificationListItemBase {
 		return this.shadowRoot.querySelector(".ui5-nli-description");
 	}
 
-	get headingDOM() {
-		return this.shadowRoot.querySelector(".ui5-nli-title");
+	get titleTextDOM() {
+		return this.shadowRoot.querySelector(".ui5-nli-title-text");
 	}
 
-	get headingHeight() {
-		return this.headingDOM.offsetHeight;
+	get titleTextHeight() {
+		return this.titleTextDOM.offsetHeight;
 	}
 
 	get descriptionHeight() {
 		return this.descriptionDOM.offsetHeight;
 	}
 
-	get headingOverflows() {
-		const heading = this.headingDOM;
+	get titleTextOverflows() {
+		const titleText = this.titleTextDOM;
 
-		if (!heading) {
+		if (!titleText) {
 			return false;
 		}
 
-		if (isIE()) {
-			return heading.scrollHeight > MAX_WRAP_HEIGHT;
-		}
-
-		return heading.offsetHeight < heading.scrollHeight;
+		return titleText.offsetHeight < titleText.scrollHeight;
 	}
 
 	get descriptionOverflows() {
@@ -289,10 +280,6 @@ class NotificationListItem extends NotificationListItemBase {
 			return false;
 		}
 
-		if (isIE()) {
-			return description.scrollHeight > MAX_WRAP_HEIGHT;
-		}
-
 		return description.offsetHeight < description.scrollHeight;
 	}
 
@@ -309,8 +296,8 @@ class NotificationListItem extends NotificationListItemBase {
 		const id = this._id;
 		const ids = [];
 
-		if (this.hasHeading) {
-			ids.push(`${id}-heading`);
+		if (this.hasTitleText) {
+			ids.push(`${id}-title-text`);
 		}
 		if (this.hasDesc) {
 			ids.push(`${id}-description`);
@@ -327,34 +314,26 @@ class NotificationListItem extends NotificationListItemBase {
 
 	get priorityText() {
 		if (this.priority === Priority.High) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT);
 		}
 
 		if (this.priority === Priority.Medium) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT);
 		}
 
 		if (this.priority === Priority.Low) {
-			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);
+			return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT);
 		}
 
 		return "";
 	}
 
 	get accInvisibleText() {
-		const notifcationTxt = this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_TXT);
-		const readTxt = this.read ? this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_READ) : this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
+		const notificationText = NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_TXT);
+		const readText = this.read ? NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ) : NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
 		const priorityText = this.priorityText;
 
-		return `${notifcationTxt} ${readTxt} ${priorityText}`;
-	}
-
-	get classes() {
-		return {
-			content: {
-				"ui5-nli-content--ie": isIE(),
-			},
-		};
+		return `${notificationText} ${readText} ${priorityText}`;
 	}
 
 	/**
@@ -404,23 +383,23 @@ class NotificationListItem extends NotificationListItemBase {
 	}
 
 	onResize() {
-		if (this.wrap) {
+		if (this.wrappingType === WrappingType.Normal) {
 			this._showMore = false;
 			return;
 		}
 
-		const headingWouldOverflow = this.headingHeight > this._headingOverflowHeight;
-		const descWouldOverflow = this.descriptionHeight > this._descOverflowHeight;
-		const overflows = headingWouldOverflow || descWouldOverflow;
+		const titleTextWouldOverflow = this.titleTextHeight > this._titleTextOverflowHeight;
+		const descWouldOverflow = this.hasDesc && this.descriptionHeight > this._descOverflowHeight;
+		const overflows = titleTextWouldOverflow || descWouldOverflow;
 
 		if (this._showMorePressed && overflows) {
 			this._showMore = true;
 			return;
 		}
 
-		if (this.headingOverflows || this.descriptionOverflows) {
-			this._headingOverflowHeight = this.headingHeight;
-			this._descOverflowHeight = this.descriptionHeight;
+		if (this.titleTextOverflows || this.descriptionOverflows) {
+			this._titleTextOverflowHeight = this.titleTextHeight;
+			this._descOverflowHeight = this.hasDesc ? this.descriptionHeight : 0;
 			this._showMore = true;
 			return;
 		}

package/src/NotificationListItemBase.js

@@ -1,7 +1,7 @@
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-
 import ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import Priority from "@ui5/webcomponents/dist/types/Priority.js";
 
 // Icons
@@ -12,10 +12,10 @@ import "@ui5/webcomponents-icons/dist/message-warning.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
 
 // Templates
-import NotifactionOverflowActionsPopoverTemplate from "./generated/templates/NotifactionOverflowActionsPopoverTemplate.lit.js";
+import NotificationOverflowActionsPopoverTemplate from "./generated/templates/NotificationOverflowActionsPopoverTemplate.lit.js";
 
 // Styles
-import NotifactionOverflowActionsPopoverCss from "./generated/themes/NotifactionOverflowActionsPopover.css.js";
+import NotificationOverflowActionsPopoverCss from "./generated/themes/NotificationOverflowActionsPopover.css.js";
 
 /**
  * @public
@@ -25,17 +25,24 @@ const metadata = {
 	properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
 
 		/**
-		 * Defines the <code>heading</code> of the item.
+		 * Defines the <code>titleText</code> of the item.
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 */
-		heading: {
+		titleText: {
 			type: String,
 		},
 
 		/**
 		 * Defines the <code>priority</code> of the item.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code></li>
+		 * <li><code>Low</code></li>
+		 * <li><code>Medium</code></li>
+		 * <li><code>High</code></li>
+		 * </ul>
 		 * @type {Priority}
 		 * @defaultvalue "None"
 		 * @public
@@ -55,6 +62,19 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines if the <code>notification</code> is new or has been already read.
+		 * <br><br>
+		 * <b>Note:</b> if set to <code>false</code> the <code>titleText</code> has bold font,
+		 * if set to true - it has a normal font.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		read: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines if a busy indicator would be displayed over the item.
 		 * @type {boolean}
@@ -65,15 +85,27 @@ const metadata = {
 		busy: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
+		 *
+		 * @type {Integer}
+		 * @defaultValue 1000
+		 * @public
+		 */
+		busyDelay: {
+			type: Integer,
+			defaultValue: 1000,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
 
 		/**
 		 * Defines the actions, displayed in the top-right area.
 		 * <br><br>
-		 * <b>Note:</b> use the <code>ui5-notification-overflow-action</code> component.
+		 * <b>Note:</b> use the <code>ui5-notification-action</code> component.
 		 *
-		 * @type {HTMLElement}
+		 * @type {sap.ui.webcomponents.fiori.INotificationAction[]}
 		 * @slot
 		 * @public
 		 */
@@ -104,26 +136,20 @@ const metadata = {
  * @extends ListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
- * @appenddocs NotificationOverflowAction
+ * @appenddocs NotificationAction
  * @public
  */
 class NotificationListItemBase extends ListItemBase {
-	constructor() {
-		super();
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
-	}
-
 	static get metadata() {
 		return metadata;
 	}
 
 	static get staticAreaTemplate() {
-		return NotifactionOverflowActionsPopoverTemplate;
+		return NotificationOverflowActionsPopoverTemplate;
 	}
 
 	static get staticAreaStyles() {
-		return NotifactionOverflowActionsPopoverCss;
+		return NotificationOverflowActionsPopoverCss;
 	}
 
 	static priorityIconsMappings() {
@@ -134,8 +160,8 @@ class NotificationListItemBase extends ListItemBase {
 		};
 	}
 
-	get hasHeading() {
-		return !!this.heading.length;
+	get hasTitleText() {
+		return !!this.titleText.length;
 	}
 
 	get hasPriority() {
@@ -224,7 +250,7 @@ class NotificationListItemBase extends ListItemBase {
 
 	async openOverflow() {
 		const overflowPopover = await this.getOverflowPopover();
-		overflowPopover.openBy(this.overflowButtonDOM);
+		overflowPopover.showAt(this.overflowButtonDOM);
 	}
 
 	async closeOverflow() {
@@ -236,6 +262,10 @@ class NotificationListItemBase extends ListItemBase {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector(".ui5-notification-overflow-popover");
 	}
+
+	static async onDefine() {
+		NotificationListItemBase.i18nFioriBundle = await getI18nBundle("@ui5/webcomponents-fiori");
+	}
 }
 
 export default NotificationListItemBase;

package/src/{NotifactionOverflowActionsPopover.hbs → NotificationOverflowActionsPopover.hbs}

@@ -2,7 +2,7 @@
 	class="ui5-notification-overflow-popover"
 	placement-type="Bottom"
 	horizontal-align="Right"
-	no-arrow
+	hide-arrow
 >
 	<div class="ui5-notification-overflow-list">
 		{{#each overflowActions}}

package/src/Page.hbs

@@ -0,0 +1,15 @@
+<div class="ui5-page-root">
+	<header
+		class="ui5-page-header-root"
+		id="ui5-page-header">
+		<slot name="header"></slot>
+	</header>
+
+	<section part="content" class="ui5-page-content-root" style="{{styles.content}}">
+		<slot></slot>
+	</section>
+
+	<footer class="ui5-page-footer-root" style="{{styles.footer}}">
+		<slot name="footer"></slot>
+	</footer>
+</div>