refactor(ui5-notification-action): rename component (#2580)

Based on the feedback that NotificationOverflowAction is not completely matching its purpose and usage, as it can be both displayed within and out of the overflow popover of a notification item. We decided to rename it as follows: - rename `NotificationOverflowAction` -> `NotificationAction` - rename `ui5-notification-overflow-action` to `ui5-notification-action` BREAKING_CHANGE If you previously used `ui5-notification-overflow-action` and had the following import statement: ```js import "@ui5/webcomponents-fiori/dist/NotificationOverflowAction.js"; ``` now you have to use the `ui5-notification-action` tag and import the following module: ```js import "@ui5/webcomponents-fiori/dist/NotificationAction.js"; ```
SAP · Dec 16, 2020 · 10a6b92 · 10a6b92
1 parent a634532
commit 10a6b92
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 100 deletions.
diff --git a/docs/Public Module Imports.md b/docs/Public Module Imports.md
@@ -142,7 +142,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
 | Product Switch Item          | `ui5-product-switch-item`          | `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";`         |
 | Notification List Item       | `ui5-li-notifcation`               | `import "@ui5/webcomponents-fiori/dist/NotifcationListItem.js";`       |
 | Notification Group List Item | `ui5-li-notification-group`        | `import "@ui5/webcomponents-fiori/dist/NotifcationListGroupItem.js";`  |
-| Notification Overflow Action | `ui5-notification-overflow-action` | `import "@ui5/webcomponents-fiori/dist/NotificationOverflowAction.js";`|
+| Notification Action          | `ui5-notification-action`          | `import "@ui5/webcomponents-fiori/dist/NotificationAction.js";`        |
 | Timeline                     | `ui5-timeline`                     | `import "@ui5/webcomponents-fiori/dist/Timeline.js";`                  |
 | Timeline Item                | `ui5-timeline-item`                | comes with `ui5-timeline`                                              |
 | Upload Collection            | `ui5-upload-collection`            | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";`          |

diff --git a/packages/fiori/bundle.esm.js b/packages/fiori/bundle.esm.js
@@ -21,7 +21,7 @@ import UploadCollection from "./dist/UploadCollection.js";
 import UploadCollectionItem from "./dist/UploadCollectionItem.js";
 import NotificationListItem from "./dist/NotificationListItem.js"
 import NotificationListGroupItem from "./dist/NotificationListGroupItem.js";
-import NotificationOverflowAction from "./dist/NotificationOverflowAction.js";
+import NotificationAction from "./dist/NotificationAction.js";
 import Wizard from "./dist/Wizard.js";
 
 export default testAssets;
diff --git a/...s/fiori/src/NotificationOverflowAction.js → packages/fiori/src/NotificationAction.js b/...s/fiori/src/NotificationOverflowAction.js → packages/fiori/src/NotificationAction.js
@@ -5,10 +5,10 @@ import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
  * @public
  */
 const metadata = {
-	tag: "ui5-notification-overflow-action",
-	properties: /** @lends  sap.ui.webcomponents.fiori.NotificationOverflowAction.prototype */ {
+	tag: "ui5-notification-action",
+	properties: /** @lends  sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
 		/**
-		 * Defines the text of the <code>ui5-notification-overflow-action</code>.
+		 * Defines the text of the <code>ui5-notification-action</code>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
@@ -70,22 +70,22 @@ const metadata = {
 
 /**
  * @class
- * The <code>ui5-notification-overflow-action</code> represents an abstract action,
+ * The <code>ui5-notification-action</code> represents an abstract action,
  * used in the <code>ui5-li-notification</code> and the <code>ui5-li-notification-group</code> items.
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.NotificationOverflowAction
+ * @alias sap.ui.webcomponents.fiori.NotificationAction
  * @extends UI5Element
- * @tagname ui5-notification-overflow-action
+ * @tagname ui5-notification-action
  * @public
  */
-class NotificationOverflowAction extends UI5Element {
+class NotificationAction extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}
 }
 
-NotificationOverflowAction.define();
+NotificationAction.define();
 
-export default NotificationOverflowAction;
+export default NotificationAction;
diff --git a/packages/fiori/src/NotificationListGroupItem.js b/packages/fiori/src/NotificationListGroupItem.js
@@ -93,7 +93,7 @@ const metadata = {
  * <li><code>Toggle</code> button to expand and collapse the group</li>
  * <li><code>Priority</code> icon to display the priority of the group</li>
  * <li><code>Heading</code> to entitle the group</li>
- * <li>Custom actions - with the use of <code>ui5-notification-overflow-action</code></li>
+ * <li>Custom actions - with the use of <code>ui5-notification-action</code></li>
  * <li>Items of the group</li>
  * </ul>
  *
@@ -104,14 +104,14 @@ const metadata = {
  *
  * <code>import @ui5/webcomponents/dist/NotificationListGroupItem.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.NotificationListGroupItem
  * @extends NotificationListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
- * @appenddocs NotificationOverflowAction
+ * @appenddocs NotificationAction
  * @public
  */
 class NotificationListGroupItem extends NotificationListItemBase {

diff --git a/packages/fiori/src/NotificationListItem.js b/packages/fiori/src/NotificationListItem.js
@@ -152,7 +152,7 @@ const metadata = {
  * <li>display a <code>Close</code> button</li>
  * <li>can control whether the <code>heading</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>
@@ -162,13 +162,13 @@ const metadata = {
  *
  * <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
  * @public
  */

diff --git a/packages/fiori/src/NotificationListItemBase.js b/packages/fiori/src/NotificationListItemBase.js
@@ -71,7 +71,7 @@ const metadata = {
 		/**
 		 * 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}
 		 * @slot
@@ -104,7 +104,7 @@ const metadata = {
  * @extends ListItemBase
  * @tagname ui5-li-notification-group
  * @since 1.0.0-rc.8
- * @appenddocs NotificationOverflowAction
+ * @appenddocs NotificationAction
  * @public
  */
 class NotificationListItemBase extends ListItemBase {

diff --git a/packages/fiori/test/pages/NotificationListGroupItem.html b/packages/fiori/test/pages/NotificationListGroupItem.html
@@ -65,8 +65,8 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">Office Notifications</span>
 				<span slot="footnotes">3 Days</span>
 
-				<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
-				<ui5-notification-overflow-action icon="message-error" text="Reject" slot="actions"></ui5-notification-overflow-action>
+				<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+				<ui5-notification-action icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
 
 			<ui5-li-notification
@@ -80,7 +80,7 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">Office Notifications</span>
 				<span slot="footnotes">3 Days</span>
 
-				<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
+				<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
 
 			<ui5-li-notification
@@ -94,11 +94,11 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">Office Notifications</span>
 				<span slot="footnotes">3 Days</span>
 
-				<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
+				<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
 
-			<ui5-notification-overflow-action icon="accept" text="Accept All" slot="actions"></ui5-notification-overflow-action>
-			<ui5-notification-overflow-action icon="message-error" text="Reject All" slot="actions"></ui5-notification-overflow-action>
+			<ui5-notification-action icon="accept" text="Accept All" slot="actions"></ui5-notification-action>
+			<ui5-notification-action icon="message-error" text="Reject All" slot="actions"></ui5-notification-action>
 		</ui5-li-notification-group>
 
 		<ui5-li-notification-group
@@ -119,7 +119,7 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">Office Notifications</span>
 				<span slot="footnotes">3 Days</span>
 
-				<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
+				<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
 
 			<ui5-li-notification
@@ -133,7 +133,7 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">Office Notifications</span>
 				<span slot="footnotes">3 Days</span>
 
-				<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
+				<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
 
 			<ui5-li-notification
@@ -147,7 +147,7 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">Office Notifications</span>
 				<span slot="footnotes">3 Days</span>
 
-				<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
+				<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
 		</ui5-li-notification-group>
 
@@ -198,7 +198,7 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">3 Days</span>
 			</ui5-li-notification>
 
-			<ui5-notification-overflow-action id="btnMakeGroupBusy"icon="accept" text="Accept All" slot="actions"></ui5-notification-overflow-action>
+			<ui5-notification-action id="btnMakeGroupBusy"icon="accept" text="Accept All" slot="actions"></ui5-notification-action>
 		</ui5-li-notification-group>
 	</ui5-list>
 
@@ -225,8 +225,8 @@ <h3>Events on ui5-list level</h3>
 					<span slot="footnotes">2 Days</span>
 					<span slot="footnotes">Other stuff</span>
 
-					<ui5-notification-overflow-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
-					<ui5-notification-overflow-action id="rejectBtnInPopover" icon="message-error" text="Reject" slot="actions"></ui5-notification-overflow-action>
+					<ui5-notification-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+					<ui5-notification-action id="rejectBtnInPopover" icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
 				</ui5-li-notification>
 
 				<ui5-li-notification
@@ -241,7 +241,7 @@ <h3>Events on ui5-list level</h3>
 					<span slot="footnotes">Office Notifications</span>
 					<span slot="footnotes">3 Days</span>
 
-					<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
+					<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 				</ui5-li-notification>
 
 			</ui5-li-notification-group>
@@ -262,8 +262,8 @@ <h3>Events on ui5-list level</h3>
 					<span slot="footnotes">Patricia Clarck</span>
 					<span slot="footnotes">3 Days</span>
 
-					<ui5-notification-overflow-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-overflow-action>
-					<ui5-notification-overflow-action icon="message-error" text="Reject All Requested Information" slot="actions"></ui5-notification-overflow-action>
+					<ui5-notification-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-action>
+					<ui5-notification-action icon="message-error" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
 				</ui5-li-notification>
 
 				<ui5-li-notification
@@ -275,7 +275,7 @@ <h3>Events on ui5-list level</h3>
 					<span slot="footnotes">John SMith</span>
 					<span slot="footnotes">3 Days</span>
 
-					<ui5-notification-overflow-action icon="message-error" text="Reject" slot="actions"></ui5-notification-overflow-action>
+					<ui5-notification-action icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
 				</ui5-li-notification>
 			</ui5-li-notification-group>
 		</ui5-list>

diff --git a/packages/fiori/test/pages/NotificationListItem.html b/packages/fiori/test/pages/NotificationListItem.html
@@ -62,14 +62,14 @@ <h3>Events on ui5-list level</h3>
 			<span slot="footnotes">2 Days</span>
 			<span slot="footnotes">Other stuff</span>
 
-			<ui5-notification-overflow-action id="acceptBtn" icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
-			<ui5-notification-overflow-action
+			<ui5-notification-action id="acceptBtn" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+			<ui5-notification-action
 				id="rejectBtn"
 				icon="message-error"
 				text="Reject"
 				slot="actions"
 				design="Negative"
-			></ui5-notification-overflow-action>
+			></ui5-notification-action>
 		</ui5-li-notification>
 
 		<ui5-li-notification
@@ -83,7 +83,7 @@ <h3>Events on ui5-list level</h3>
 			<span slot="footnotes">Office Notifications</span>
 			<span slot="footnotes">3 Days</span>
 
-			<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
+			<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 		</ui5-li-notification>
 
 		<ui5-li-notification
@@ -96,8 +96,8 @@ <h3>Events on ui5-list level</h3>
 			<span slot="footnotes">Patricia Clarck</span>
 			<span slot="footnotes">3 Days</span>
 
-			<ui5-notification-overflow-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-overflow-action>
-			<ui5-notification-overflow-action icon="decline" design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-overflow-action>
+			<ui5-notification-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-action>
+			<ui5-notification-action icon="decline" design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
 		</ui5-li-notification>
 
 		<ui5-li-notification heading="New order (#2523)">
@@ -106,14 +106,14 @@ <h3>Events on ui5-list level</h3>
 			<span slot="footnotes">John SMith</span>
 			<span slot="footnotes">3 Days</span>
 
-			<ui5-notification-overflow-action
+			<ui5-notification-action
 				icon="message-error"
 				design="Negative"
 				text="Reject"
 				slot="actions">
-			</ui5-notification-overflow-action>
+			</ui5-notification-action>
 
-			<ui5-notification-overflow-action icon="decline" disabled design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-overflow-action>
+			<ui5-notification-action icon="decline" disabled design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
 		</ui5-li-notification>
 	</ui5-list>
 
@@ -183,14 +183,14 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">2 Days</span>
 				<span slot="footnotes">Other stuff</span>
 
-				<ui5-notification-overflow-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
-				<ui5-notification-overflow-action
+				<ui5-notification-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
+				<ui5-notification-action
 					id="rejectBtnInPopover"
 					icon="message-error"
 					text="Reject"
 					design="Negative"
 					slot="actions">
-				</ui5-notification-overflow-action>
+				</ui5-notification-action>
 			</ui5-li-notification>
 
 			<ui5-li-notification
@@ -204,7 +204,7 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">Office Notifications</span>
 				<span slot="footnotes">3 Days</span>
 
-				<ui5-notification-overflow-action id="acceptBtn2InPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
+				<ui5-notification-action id="acceptBtn2InPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
 
 			<ui5-li-notification
@@ -217,8 +217,8 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">Patricia Clarck</span>
 				<span slot="footnotes">3 Days</span>
 
-				<ui5-notification-overflow-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-overflow-action>
-				<ui5-notification-overflow-action icon="decline" design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-overflow-action>
+				<ui5-notification-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-action>
+				<ui5-notification-action icon="decline" design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
 
 			<ui5-li-notification heading="New order (#2523)">
@@ -227,7 +227,7 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">John SMith</span>
 				<span slot="footnotes">3 Days</span>
 
-				<ui5-notification-overflow-action icon="message-error" design="Negative" text="Reject" slot="actions"></ui5-notification-overflow-action>
+				<ui5-notification-action icon="message-error" design="Negative" text="Reject" slot="actions"></ui5-notification-action>
 			</ui5-li-notification>
 		</ui5-list>
 	</ui5-popover>