Skip to content

Commit 10a6b92

Browse files
ilhan007ilhan007
authored
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"; ```
1 parent a634532 commit 10a6b92

11 files changed

+100
-100
lines changed

‎docs/Public Module Imports.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ For API documentation and samples, please check the [UI5 Web Components Playgrou
142142
| Product Switch Item | `ui5-product-switch-item` | `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";` |
143143
| Notification List Item | `ui5-li-notifcation` | `import "@ui5/webcomponents-fiori/dist/NotifcationListItem.js";` |
144144
| Notification Group List Item | `ui5-li-notification-group` | `import "@ui5/webcomponents-fiori/dist/NotifcationListGroupItem.js";` |
145-
| Notification Overflow Action | `ui5-notification-overflow-action` | `import "@ui5/webcomponents-fiori/dist/NotificationOverflowAction.js";`|
145+
| Notification Action | `ui5-notification-action` | `import "@ui5/webcomponents-fiori/dist/NotificationAction.js";` |
146146
| Timeline | `ui5-timeline` | `import "@ui5/webcomponents-fiori/dist/Timeline.js";` |
147147
| Timeline Item | `ui5-timeline-item` | comes with `ui5-timeline` |
148148
| Upload Collection | `ui5-upload-collection` | `import "@ui5/webcomponents-fiori/dist/UploadCollection.js";` |

‎packages/fiori/bundle.esm.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import UploadCollection from "./dist/UploadCollection.js";
2121
import UploadCollectionItem from "./dist/UploadCollectionItem.js";
2222
import NotificationListItem from "./dist/NotificationListItem.js"
2323
import NotificationListGroupItem from "./dist/NotificationListGroupItem.js";
24-
import NotificationOverflowAction from "./dist/NotificationOverflowAction.js";
24+
import NotificationAction from "./dist/NotificationAction.js";
2525
import Wizard from "./dist/Wizard.js";
2626

2727
export default testAssets;

‎packages/fiori/src/NotificationOverflowAction.js renamed to ‎packages/fiori/src/NotificationAction.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import ButtonDesign from "@ui5/webcomponents/dist/types/ButtonDesign.js";
55
* @public
66
*/
77
const metadata = {
8-
tag: "ui5-notification-overflow-action",
9-
properties: /** @lends sap.ui.webcomponents.fiori.NotificationOverflowAction.prototype */ {
8+
tag: "ui5-notification-action",
9+
properties: /** @lends sap.ui.webcomponents.fiori.NotificationAction.prototype */ {
1010
/**
11-
* Defines the text of the <code>ui5-notification-overflow-action</code>.
11+
* Defines the text of the <code>ui5-notification-action</code>.
1212
*
1313
* @type {string}
1414
* @defaultvalue ""
@@ -70,22 +70,22 @@ const metadata = {
7070

7171
/**
7272
* @class
73-
* The <code>ui5-notification-overflow-action</code> represents an abstract action,
73+
* The <code>ui5-notification-action</code> represents an abstract action,
7474
* used in the <code>ui5-li-notification</code> and the <code>ui5-li-notification-group</code> items.
7575
*
7676
* @constructor
7777
* @author SAP SE
78-
* @alias sap.ui.webcomponents.fiori.NotificationOverflowAction
78+
* @alias sap.ui.webcomponents.fiori.NotificationAction
7979
* @extends UI5Element
80-
* @tagname ui5-notification-overflow-action
80+
* @tagname ui5-notification-action
8181
* @public
8282
*/
83-
class NotificationOverflowAction extends UI5Element {
83+
class NotificationAction extends UI5Element {
8484
static get metadata() {
8585
return metadata;
8686
}
8787
}
8888

89-
NotificationOverflowAction.define();
89+
NotificationAction.define();
9090

91-
export default NotificationOverflowAction;
91+
export default NotificationAction;

‎packages/fiori/src/NotificationListGroupItem.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const metadata = {
9393
* <li><code>Toggle</code> button to expand and collapse the group</li>
9494
* <li><code>Priority</code> icon to display the priority of the group</li>
9595
* <li><code>Heading</code> to entitle the group</li>
96-
* <li>Custom actions - with the use of <code>ui5-notification-overflow-action</code></li>
96+
* <li>Custom actions - with the use of <code>ui5-notification-action</code></li>
9797
* <li>Items of the group</li>
9898
* </ul>
9999
*
@@ -104,14 +104,14 @@ const metadata = {
104104
*
105105
* <code>import @ui5/webcomponents/dist/NotificationListGroupItem.js";</code>
106106
* <br>
107-
* <code>import @ui5/webcomponents/dist/NotificationOverflowAction.js";</code> (optional)
107+
* <code>import @ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
108108
* @constructor
109109
* @author SAP SE
110110
* @alias sap.ui.webcomponents.fiori.NotificationListGroupItem
111111
* @extends NotificationListItemBase
112112
* @tagname ui5-li-notification-group
113113
* @since 1.0.0-rc.8
114-
* @appenddocs NotificationOverflowAction
114+
* @appenddocs NotificationAction
115115
* @public
116116
*/
117117
class NotificationListGroupItem extends NotificationListItemBase {

‎packages/fiori/src/NotificationListItem.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ const metadata = {
152152
* <li>display a <code>Close</code> button</li>
153153
* <li>can control whether the <code>heading</code> and <code>description</code> should wrap or truncate
154154
* and display a <code>ShowMore</code> button to switch between less and more information</li>
155-
* <li>add custom actions by using the <code>ui5-notification-overflow-action</code> component</li>
155+
* <li>add custom actions by using the <code>ui5-notification-action</code> component</li>
156156
* </ul>
157157
*
158158
* <h3>Usage</h3>
@@ -162,13 +162,13 @@ const metadata = {
162162
*
163163
* <code>import @ui5/webcomponents/dist/NotificationListItem.js";</code>
164164
* <br>
165-
* <code>import @ui5/webcomponents/dist/NotificationOverflowAction.js";</code> (optional)
165+
* <code>import @ui5/webcomponents/dist/NotificationAction.js";</code> (optional)
166166
* @constructor
167167
* @author SAP SE
168168
* @alias sap.ui.webcomponents.fiori.NotificationListItem
169169
* @extends NotificationListItemBase
170170
* @tagname ui5-li-notification
171-
* @appenddocs NotificationOverflowAction
171+
* @appenddocs NotificationAction
172172
* @since 1.0.0-rc.8
173173
* @public
174174
*/

‎packages/fiori/src/NotificationListItemBase.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const metadata = {
7171
/**
7272
* Defines the actions, displayed in the top-right area.
7373
* <br><br>
74-
* <b>Note:</b> use the <code>ui5-notification-overflow-action</code> component.
74+
* <b>Note:</b> use the <code>ui5-notification-action</code> component.
7575
*
7676
* @type {HTMLElement}
7777
* @slot
@@ -104,7 +104,7 @@ const metadata = {
104104
* @extends ListItemBase
105105
* @tagname ui5-li-notification-group
106106
* @since 1.0.0-rc.8
107-
* @appenddocs NotificationOverflowAction
107+
* @appenddocs NotificationAction
108108
* @public
109109
*/
110110
class NotificationListItemBase extends ListItemBase {

‎packages/fiori/test/pages/NotificationListGroupItem.html

+16-16
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ <h3>Events on ui5-list level</h3>
6565
<span slot="footnotes">Office Notifications</span>
6666
<span slot="footnotes">3 Days</span>
6767

68-
<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
69-
<ui5-notification-overflow-action icon="message-error" text="Reject" slot="actions"></ui5-notification-overflow-action>
68+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
69+
<ui5-notification-action icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
7070
</ui5-li-notification>
7171

7272
<ui5-li-notification
@@ -80,7 +80,7 @@ <h3>Events on ui5-list level</h3>
8080
<span slot="footnotes">Office Notifications</span>
8181
<span slot="footnotes">3 Days</span>
8282

83-
<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
83+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
8484
</ui5-li-notification>
8585

8686
<ui5-li-notification
@@ -94,11 +94,11 @@ <h3>Events on ui5-list level</h3>
9494
<span slot="footnotes">Office Notifications</span>
9595
<span slot="footnotes">3 Days</span>
9696

97-
<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
97+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
9898
</ui5-li-notification>
9999

100-
<ui5-notification-overflow-action icon="accept" text="Accept All" slot="actions"></ui5-notification-overflow-action>
101-
<ui5-notification-overflow-action icon="message-error" text="Reject All" slot="actions"></ui5-notification-overflow-action>
100+
<ui5-notification-action icon="accept" text="Accept All" slot="actions"></ui5-notification-action>
101+
<ui5-notification-action icon="message-error" text="Reject All" slot="actions"></ui5-notification-action>
102102
</ui5-li-notification-group>
103103

104104
<ui5-li-notification-group
@@ -119,7 +119,7 @@ <h3>Events on ui5-list level</h3>
119119
<span slot="footnotes">Office Notifications</span>
120120
<span slot="footnotes">3 Days</span>
121121

122-
<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
122+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
123123
</ui5-li-notification>
124124

125125
<ui5-li-notification
@@ -133,7 +133,7 @@ <h3>Events on ui5-list level</h3>
133133
<span slot="footnotes">Office Notifications</span>
134134
<span slot="footnotes">3 Days</span>
135135

136-
<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
136+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
137137
</ui5-li-notification>
138138

139139
<ui5-li-notification
@@ -147,7 +147,7 @@ <h3>Events on ui5-list level</h3>
147147
<span slot="footnotes">Office Notifications</span>
148148
<span slot="footnotes">3 Days</span>
149149

150-
<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
150+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
151151
</ui5-li-notification>
152152
</ui5-li-notification-group>
153153

@@ -198,7 +198,7 @@ <h3>Events on ui5-list level</h3>
198198
<span slot="footnotes">3 Days</span>
199199
</ui5-li-notification>
200200

201-
<ui5-notification-overflow-action id="btnMakeGroupBusy"icon="accept" text="Accept All" slot="actions"></ui5-notification-overflow-action>
201+
<ui5-notification-action id="btnMakeGroupBusy"icon="accept" text="Accept All" slot="actions"></ui5-notification-action>
202202
</ui5-li-notification-group>
203203
</ui5-list>
204204

@@ -225,8 +225,8 @@ <h3>Events on ui5-list level</h3>
225225
<span slot="footnotes">2 Days</span>
226226
<span slot="footnotes">Other stuff</span>
227227

228-
<ui5-notification-overflow-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
229-
<ui5-notification-overflow-action id="rejectBtnInPopover" icon="message-error" text="Reject" slot="actions"></ui5-notification-overflow-action>
228+
<ui5-notification-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
229+
<ui5-notification-action id="rejectBtnInPopover" icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
230230
</ui5-li-notification>
231231

232232
<ui5-li-notification
@@ -241,7 +241,7 @@ <h3>Events on ui5-list level</h3>
241241
<span slot="footnotes">Office Notifications</span>
242242
<span slot="footnotes">3 Days</span>
243243

244-
<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
244+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
245245
</ui5-li-notification>
246246

247247
</ui5-li-notification-group>
@@ -262,8 +262,8 @@ <h3>Events on ui5-list level</h3>
262262
<span slot="footnotes">Patricia Clarck</span>
263263
<span slot="footnotes">3 Days</span>
264264

265-
<ui5-notification-overflow-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-overflow-action>
266-
<ui5-notification-overflow-action icon="message-error" text="Reject All Requested Information" slot="actions"></ui5-notification-overflow-action>
265+
<ui5-notification-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-action>
266+
<ui5-notification-action icon="message-error" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
267267
</ui5-li-notification>
268268

269269
<ui5-li-notification
@@ -275,7 +275,7 @@ <h3>Events on ui5-list level</h3>
275275
<span slot="footnotes">John SMith</span>
276276
<span slot="footnotes">3 Days</span>
277277

278-
<ui5-notification-overflow-action icon="message-error" text="Reject" slot="actions"></ui5-notification-overflow-action>
278+
<ui5-notification-action icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
279279
</ui5-li-notification>
280280
</ui5-li-notification-group>
281281
</ui5-list>

‎packages/fiori/test/pages/NotificationListItem.html

+16-16
Original file line numberDiff line numberDiff line change
@@ -62,14 +62,14 @@ <h3>Events on ui5-list level</h3>
6262
<span slot="footnotes">2 Days</span>
6363
<span slot="footnotes">Other stuff</span>
6464

65-
<ui5-notification-overflow-action id="acceptBtn" icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
66-
<ui5-notification-overflow-action
65+
<ui5-notification-action id="acceptBtn" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
66+
<ui5-notification-action
6767
id="rejectBtn"
6868
icon="message-error"
6969
text="Reject"
7070
slot="actions"
7171
design="Negative"
72-
></ui5-notification-overflow-action>
72+
></ui5-notification-action>
7373
</ui5-li-notification>
7474

7575
<ui5-li-notification
@@ -83,7 +83,7 @@ <h3>Events on ui5-list level</h3>
8383
<span slot="footnotes">Office Notifications</span>
8484
<span slot="footnotes">3 Days</span>
8585

86-
<ui5-notification-overflow-action icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
86+
<ui5-notification-action icon="accept" text="Accept" slot="actions"></ui5-notification-action>
8787
</ui5-li-notification>
8888

8989
<ui5-li-notification
@@ -96,8 +96,8 @@ <h3>Events on ui5-list level</h3>
9696
<span slot="footnotes">Patricia Clarck</span>
9797
<span slot="footnotes">3 Days</span>
9898

99-
<ui5-notification-overflow-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-overflow-action>
100-
<ui5-notification-overflow-action icon="decline" design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-overflow-action>
99+
<ui5-notification-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-action>
100+
<ui5-notification-action icon="decline" design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
101101
</ui5-li-notification>
102102

103103
<ui5-li-notification heading="New order (#2523)">
@@ -106,14 +106,14 @@ <h3>Events on ui5-list level</h3>
106106
<span slot="footnotes">John SMith</span>
107107
<span slot="footnotes">3 Days</span>
108108

109-
<ui5-notification-overflow-action
109+
<ui5-notification-action
110110
icon="message-error"
111111
design="Negative"
112112
text="Reject"
113113
slot="actions">
114-
</ui5-notification-overflow-action>
114+
</ui5-notification-action>
115115

116-
<ui5-notification-overflow-action icon="decline" disabled design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-overflow-action>
116+
<ui5-notification-action icon="decline" disabled design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
117117
</ui5-li-notification>
118118
</ui5-list>
119119

@@ -183,14 +183,14 @@ <h3>Events on ui5-list level</h3>
183183
<span slot="footnotes">2 Days</span>
184184
<span slot="footnotes">Other stuff</span>
185185

186-
<ui5-notification-overflow-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
187-
<ui5-notification-overflow-action
186+
<ui5-notification-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
187+
<ui5-notification-action
188188
id="rejectBtnInPopover"
189189
icon="message-error"
190190
text="Reject"
191191
design="Negative"
192192
slot="actions">
193-
</ui5-notification-overflow-action>
193+
</ui5-notification-action>
194194
</ui5-li-notification>
195195

196196
<ui5-li-notification
@@ -204,7 +204,7 @@ <h3>Events on ui5-list level</h3>
204204
<span slot="footnotes">Office Notifications</span>
205205
<span slot="footnotes">3 Days</span>
206206

207-
<ui5-notification-overflow-action id="acceptBtn2InPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-overflow-action>
207+
<ui5-notification-action id="acceptBtn2InPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
208208
</ui5-li-notification>
209209

210210
<ui5-li-notification
@@ -217,8 +217,8 @@ <h3>Events on ui5-list level</h3>
217217
<span slot="footnotes">Patricia Clarck</span>
218218
<span slot="footnotes">3 Days</span>
219219

220-
<ui5-notification-overflow-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-overflow-action>
221-
<ui5-notification-overflow-action icon="decline" design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-overflow-action>
220+
<ui5-notification-action icon="accept" text="Accept All Requested Information" slot="actions"></ui5-notification-action>
221+
<ui5-notification-action icon="decline" design="Negative" text="Reject All Requested Information" slot="actions"></ui5-notification-action>
222222
</ui5-li-notification>
223223

224224
<ui5-li-notification heading="New order (#2523)">
@@ -227,7 +227,7 @@ <h3>Events on ui5-list level</h3>
227227
<span slot="footnotes">John SMith</span>
228228
<span slot="footnotes">3 Days</span>
229229

230-
<ui5-notification-overflow-action icon="message-error" design="Negative" text="Reject" slot="actions"></ui5-notification-overflow-action>
230+
<ui5-notification-action icon="message-error" design="Negative" text="Reject" slot="actions"></ui5-notification-action>
231231
</ui5-li-notification>
232232
</ui5-list>
233233
</ui5-popover>

0 commit comments

Comments
 (0)