Skip to content

Commit 4f17a31

Browse files
fifoosidfifoosid
authored
fix(ui5-li-notification, ui5-li-notification-group): rename heading property to titleText (#3586)
BREAKING CHANGE The property "heading" property has been renamed to "titleText"
1 parent 2584341 commit 4f17a31

15 files changed

+144
-144
lines changed

‎packages/base/hash.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
L4iGj2puGZcQfMJ02grqW31YqrU=
1+
4ww8NXNfQEKz/jKz4fx9NcfWBUE=

‎packages/fiori/src/NotificationListGroupItem.hbs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@
2727
</ui5-icon>
2828
{{/if}}
2929

30-
<div id="{{_id}}-heading" class="ui5-nli-group-heading" part="heading">
31-
{{heading}}
30+
<div id="{{_id}}-title-text" class="ui5-nli-group-title-text" part="title-text">
31+
{{titleText}}
3232
</div>
3333

3434
{{#if showCounter}}

‎packages/fiori/src/NotificationListGroupItem.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const metadata = {
9696
* <ul>
9797
* <li><code>Toggle</code> button to expand and collapse the group</li>
9898
* <li><code>Priority</code> icon to display the priority of the group</li>
99-
* <li><code>Heading</code> to entitle the group</li>
99+
* <li><code>TitleText</code> to entitle the group</li>
100100
* <li>Custom actions - with the use of <code>ui5-notification-action</code></li>
101101
* <li>Items of the group</li>
102102
* </ul>
@@ -110,7 +110,7 @@ const metadata = {
110110
* <br>
111111
* The <code>ui5-li-notification-group</code> exposes the following CSS Shadow Parts:
112112
* <ul>
113-
* <li>heading - Used to style the heading of the notification list group item</li>
113+
* <li>title-text - Used to style the titleText of the notification list group item</li>
114114
* </ul>
115115
*
116116
* <h3>ES6 Module Import</h3>
@@ -232,8 +232,8 @@ class NotificationListGroupItem extends NotificationListItemBase {
232232
const id = this._id;
233233
const ids = [];
234234

235-
if (this.hasHeading) {
236-
ids.push(`${id}-heading`);
235+
if (this.hasTitleText) {
236+
ids.push(`${id}-title-text`);
237237
}
238238

239239
ids.push(`${id}-invisibleText`);

‎packages/fiori/src/NotificationListItem.hbs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,16 @@
4949
</div>
5050

5151
<div class="ui5-nli-content {{classes.content}}">
52-
<div class="ui5-nli-heading-wrapper">
52+
<div class="ui5-nli-title-text-wrapper">
5353
{{#if hasPriority}}
5454
<ui5-icon
5555
class="ui5-prio-icon ui5-prio-icon--{{priorityIcon}}"
5656
name="{{priorityIcon}}">
5757
</ui5-icon>
5858
{{/if}}
5959

60-
<div id="{{_id}}-heading" class="ui5-nli-heading" part="heading">
61-
{{heading}}
60+
<div id="{{_id}}-title-text" class="ui5-nli-title-text" part="title-text">
61+
{{titleText}}
6262
</div>
6363
</div>
6464

‎packages/fiori/src/NotificationListItem.js

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,11 @@ const metadata = {
4444
properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItem.prototype */ {
4545

4646
/**
47-
* Defines if the <code>heading</code> and <code>description</code> should wrap,
47+
* Defines if the <code>titleText</code> and <code>description</code> should wrap,
4848
* they truncate by default.
4949
*
5050
* <br><br>
51-
* <b>Note:</b> by default the <code>heading</code> and <code>decription</code>,
51+
* <b>Note:</b> by default the <code>titleText</code> and <code>decription</code>,
5252
* and a <code>ShowMore/Less</code> button would be displayed.
5353
* @type {WrappingType}
5454
* @defaultvalue "None"
@@ -61,7 +61,7 @@ const metadata = {
6161
},
6262

6363
/**
64-
* Defines the state of the <code>heading</code> and <code>description</code>,
64+
* Defines the state of the <code>titleText</code> and <code>description</code>,
6565
* if less or more information is displayed.
6666
* @private
6767
*/
@@ -137,14 +137,14 @@ const metadata = {
137137
* The <code>ui5-li-notification</code> is a type of list item, meant to display notifications.
138138
* <br>
139139
*
140-
* 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>
140+
* 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>
141141
* and <code>footnotes</code> to fully describe a notification.
142142
* <br>
143143
*
144144
* The user can:
145145
* <ul>
146146
* <li>display a <code>Close</code> button</li>
147-
* <li>can control whether the <code>heading</code> and <code>description</code> should wrap or truncate
147+
* <li>can control whether the <code>titleText</code> and <code>description</code> should wrap or truncate
148148
* and display a <code>ShowMore</code> button to switch between less and more information</li>
149149
* <li>add custom actions by using the <code>ui5-notification-action</code> component</li>
150150
* </ul>
@@ -158,7 +158,7 @@ const metadata = {
158158
* <br>
159159
* The <code>ui5-li-notification</code> exposes the following CSS Shadow Parts:
160160
* <ul>
161-
* <li>heading - Used to style the heading of the notification list item</li>
161+
* <li>title-text - Used to style the titleText of the notification list item</li>
162162
* </ul>
163163
*
164164
* <h3>ES6 Module Import</h3>
@@ -180,8 +180,8 @@ class NotificationListItem extends NotificationListItemBase {
180180
constructor() {
181181
super();
182182

183-
// the heading overflow height
184-
this._headingOverflowHeight = 0;
183+
// the titleText overflow height
184+
this._titleTextOverflowHeight = 0;
185185

186186
// the description overflow height
187187
this._descOverflowHeight = 0;
@@ -260,30 +260,30 @@ class NotificationListItem extends NotificationListItemBase {
260260
return this.shadowRoot.querySelector(".ui5-nli-description");
261261
}
262262

263-
get headingDOM() {
264-
return this.shadowRoot.querySelector(".ui5-nli-heading");
263+
get titleTextDOM() {
264+
return this.shadowRoot.querySelector(".ui5-nli-title-text");
265265
}
266266

267-
get headingHeight() {
268-
return this.headingDOM.offsetHeight;
267+
get titleTextHeight() {
268+
return this.titleTextDOM.offsetHeight;
269269
}
270270

271271
get descriptionHeight() {
272272
return this.descriptionDOM.offsetHeight;
273273
}
274274

275-
get headingOverflows() {
276-
const heading = this.headingDOM;
275+
get titleTextOverflows() {
276+
const titleText = this.titleTextDOM;
277277

278-
if (!heading) {
278+
if (!titleText) {
279279
return false;
280280
}
281281

282282
if (isIE()) {
283-
return heading.scrollHeight > MAX_WRAP_HEIGHT;
283+
return titleText.scrollHeight > MAX_WRAP_HEIGHT;
284284
}
285285

286-
return heading.offsetHeight < heading.scrollHeight;
286+
return titleText.offsetHeight < titleText.scrollHeight;
287287
}
288288

289289
get descriptionOverflows() {
@@ -313,8 +313,8 @@ class NotificationListItem extends NotificationListItemBase {
313313
const id = this._id;
314314
const ids = [];
315315

316-
if (this.hasHeading) {
317-
ids.push(`${id}-heading`);
316+
if (this.hasTitleText) {
317+
ids.push(`${id}-title-text`);
318318
}
319319
if (this.hasDesc) {
320320
ids.push(`${id}-description`);
@@ -413,17 +413,17 @@ class NotificationListItem extends NotificationListItemBase {
413413
return;
414414
}
415415

416-
const headingWouldOverflow = this.headingHeight > this._headingOverflowHeight;
416+
const titleTextWouldOverflow = this.titleTextHeight > this._titleTextOverflowHeight;
417417
const descWouldOverflow = this.hasDesc && this.descriptionHeight > this._descOverflowHeight;
418-
const overflows = headingWouldOverflow || descWouldOverflow;
418+
const overflows = titleTextWouldOverflow || descWouldOverflow;
419419

420420
if (this._showMorePressed && overflows) {
421421
this._showMore = true;
422422
return;
423423
}
424424

425-
if (this.headingOverflows || this.descriptionOverflows) {
426-
this._headingOverflowHeight = this.headingHeight;
425+
if (this.titleTextOverflows || this.descriptionOverflows) {
426+
this._titleTextOverflowHeight = this.titleTextHeight;
427427
this._descOverflowHeight = this.hasDesc ? this.descriptionHeight : 0;
428428
this._showMore = true;
429429
return;

‎packages/fiori/src/NotificationListItemBase.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@ const metadata = {
2626
properties: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
2727

2828
/**
29-
* Defines the <code>heading</code> of the item.
29+
* Defines the <code>titleText</code> of the item.
3030
* @type {string}
3131
* @defaultvalue ""
3232
* @public
3333
*/
34-
heading: {
34+
titleText: {
3535
type: String,
3636
},
3737

@@ -66,7 +66,7 @@ const metadata = {
6666
/**
6767
* Defines if the <code>notification</code> is new or has been already read.
6868
* <br><br>
69-
* <b>Note:</b> if set to <code>false</code> the <code>heading</code> has bold font,
69+
* <b>Note:</b> if set to <code>false</code> the <code>titleText</code> has bold font,
7070
* if set to true - it has a normal font.
7171
* @type {boolean}
7272
* @defaultvalue false
@@ -167,8 +167,8 @@ class NotificationListItemBase extends ListItemBase {
167167
};
168168
}
169169

170-
get hasHeading() {
171-
return !!this.heading.length;
170+
get hasTitleText() {
171+
return !!this.titleText.length;
172172
}
173173

174174
get hasPriority() {

‎packages/fiori/src/themes/NotificationListGroupItem.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
display: none;
1010
}
1111

12-
:host([read]) .ui5-nli-group-heading {
12+
:host([read]) .ui5-nli-group-title-text {
1313
font-weight: normal;
1414
}
1515

@@ -36,7 +36,7 @@
3636
cursor: pointer;
3737
}
3838

39-
.ui5-nli-group-heading {
39+
.ui5-nli-group-title-text {
4040
color: var(--sapGroup_TitleTextColor);
4141
font-family: "72override", var(--sapFontFamily);
4242
font-size: var(--sapFontHeader6Size);

‎packages/fiori/src/themes/NotificationListItem.css

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "./NotificationListItemBase.css";
22
@import "./NotificationPrioIcon.css";
33

4-
:host([wrapping-type="None"]) .ui5-nli-heading {
4+
:host([wrapping-type="None"]) .ui5-nli-title-text {
55
display: -webkit-box;
66
-webkit-line-clamp: 2;
77
-webkit-box-orient: vertical;
@@ -15,15 +15,15 @@
1515
overflow: hidden;
1616
}
1717

18-
:host([_show-more-pressed]) .ui5-nli-heading {
18+
:host([_show-more-pressed]) .ui5-nli-title-text {
1919
-webkit-line-clamp: unset;
2020
}
2121

2222
:host([_show-more-pressed]) .ui5-nli-description {
2323
-webkit-line-clamp: unset;
2424
}
2525

26-
:host([read]) .ui5-nli-heading {
26+
:host([read]) .ui5-nli-title-text {
2727
font-weight: normal;
2828
}
2929

@@ -32,11 +32,11 @@
3232
max-height: 32px;
3333
}
3434

35-
:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-heading {
35+
:host([wrapping-type="None"]) .ui5-nli-content--ie .ui5-nli-title-text {
3636
max-height: 32px;
3737
}
3838

39-
:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-heading {
39+
:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-title-text {
4040
max-height: inherit;
4141
}
4242

@@ -66,18 +66,18 @@
6666
box-sizing: border-box;
6767
}
6868

69-
.ui5-nli-heading-wrapper {
69+
.ui5-nli-title-text-wrapper {
7070
display: flex;
7171
flex-direction: row;
7272
}
7373

74-
.ui5-nli-heading {
74+
.ui5-nli-title-text {
7575
display: flex;
7676
margin-bottom: 0.25rem;
7777
box-sizing: border-box;
7878
}
7979

80-
.ui5-nli-heading {
80+
.ui5-nli-title-text {
8181
color: var(--sapGroup_TitleTextColor);
8282
font-weight: bold;
8383
font-size: var(--sapFontHeader6Size);

0 commit comments

Comments
 (0)