Skip to content

Commit

Permalink
fix(ui5-li-notification, ui5-li-notification-group): rename heading p…
Browse files Browse the repository at this point in the history
…roperty to titleText (#3586)

BREAKING CHANGE The property "heading" property has been renamed to "titleText"
fifoosid authored Aug 3, 2021
1 parent 2584341 commit 4f17a31
Showing 15 changed files with 144 additions and 144 deletions.
2 changes: 1 addition & 1 deletion packages/base/hash.txt
Original file line number Diff line number Diff line change
@@ -1 +1 @@
L4iGj2puGZcQfMJ02grqW31YqrU=
4ww8NXNfQEKz/jKz4fx9NcfWBUE=
4 changes: 2 additions & 2 deletions packages/fiori/src/NotificationListGroupItem.hbs
Original file line number Diff line number Diff line change
@@ -27,8 +27,8 @@
</ui5-icon>
{{/if}}

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

{{#if showCounter}}
8 changes: 4 additions & 4 deletions packages/fiori/src/NotificationListGroupItem.js
Original file line number Diff line number Diff line change
@@ -96,7 +96,7 @@ const metadata = {
* <ul>
* <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><code>TitleText</code> to entitle the group</li>
* <li>Custom actions - with the use of <code>ui5-notification-action</code></li>
* <li>Items of the group</li>
* </ul>
@@ -110,7 +110,7 @@ const metadata = {
* <br>
* The <code>ui5-li-notification-group</code> exposes the following CSS Shadow Parts:
* <ul>
* <li>heading - Used to style the heading of the notification list group item</li>
* <li>title-text - Used to style the titleText of the notification list group item</li>
* </ul>
*
* <h3>ES6 Module Import</h3>
@@ -232,8 +232,8 @@ class NotificationListGroupItem extends NotificationListItemBase {
const id = this._id;
const ids = [];

if (this.hasHeading) {
ids.push(`${id}-heading`);
if (this.hasTitleText) {
ids.push(`${id}-title-text`);
}

ids.push(`${id}-invisibleText`);
6 changes: 3 additions & 3 deletions packages/fiori/src/NotificationListItem.hbs
Original file line number Diff line number Diff line change
@@ -49,16 +49,16 @@
</div>

<div class="ui5-nli-content {{classes.content}}">
<div class="ui5-nli-heading-wrapper">
<div class="ui5-nli-title-text-wrapper">
{{#if hasPriority}}
<ui5-icon
class="ui5-prio-icon ui5-prio-icon--{{priorityIcon}}"
name="{{priorityIcon}}">
</ui5-icon>
{{/if}}

<div id="{{_id}}-heading" class="ui5-nli-heading" part="heading">
{{heading}}
<div id="{{_id}}-title-text" class="ui5-nli-title-text" part="title-text">
{{titleText}}
</div>
</div>

46 changes: 23 additions & 23 deletions packages/fiori/src/NotificationListItem.js
Original file line number Diff line number Diff line change
@@ -44,11 +44,11 @@ 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 {WrappingType}
* @defaultvalue "None"
@@ -61,7 +61,7 @@ const metadata = {
},

/**
* 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
*/
@@ -137,14 +137,14 @@ 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-action</code> component</li>
* </ul>
@@ -158,7 +158,7 @@ const metadata = {
* <br>
* The <code>ui5-li-notification</code> exposes the following CSS Shadow Parts:
* <ul>
* <li>heading - Used to style the heading of the notification list item</li>
* <li>title-text - Used to style the titleText of the notification list item</li>
* </ul>
*
* <h3>ES6 Module Import</h3>
@@ -180,8 +180,8 @@ 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;
@@ -260,30 +260,30 @@ class NotificationListItem extends NotificationListItemBase {
return this.shadowRoot.querySelector(".ui5-nli-description");
}

get headingDOM() {
return this.shadowRoot.querySelector(".ui5-nli-heading");
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 titleText.scrollHeight > MAX_WRAP_HEIGHT;
}

return heading.offsetHeight < heading.scrollHeight;
return titleText.offsetHeight < titleText.scrollHeight;
}

get descriptionOverflows() {
@@ -313,8 +313,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`);
@@ -413,17 +413,17 @@ class NotificationListItem extends NotificationListItemBase {
return;
}

const headingWouldOverflow = this.headingHeight > this._headingOverflowHeight;
const titleTextWouldOverflow = this.titleTextHeight > this._titleTextOverflowHeight;
const descWouldOverflow = this.hasDesc && this.descriptionHeight > this._descOverflowHeight;
const overflows = headingWouldOverflow || descWouldOverflow;
const overflows = titleTextWouldOverflow || descWouldOverflow;

if (this._showMorePressed && overflows) {
this._showMore = true;
return;
}

if (this.headingOverflows || this.descriptionOverflows) {
this._headingOverflowHeight = this.headingHeight;
if (this.titleTextOverflows || this.descriptionOverflows) {
this._titleTextOverflowHeight = this.titleTextHeight;
this._descOverflowHeight = this.hasDesc ? this.descriptionHeight : 0;
this._showMore = true;
return;
10 changes: 5 additions & 5 deletions packages/fiori/src/NotificationListItemBase.js
Original file line number Diff line number Diff line change
@@ -26,12 +26,12 @@ 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,
},

@@ -66,7 +66,7 @@ const metadata = {
/**
* 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,
* <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
@@ -167,8 +167,8 @@ class NotificationListItemBase extends ListItemBase {
};
}

get hasHeading() {
return !!this.heading.length;
get hasTitleText() {
return !!this.titleText.length;
}

get hasPriority() {
4 changes: 2 additions & 2 deletions packages/fiori/src/themes/NotificationListGroupItem.css
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@
display: none;
}

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

@@ -36,7 +36,7 @@
cursor: pointer;
}

.ui5-nli-group-heading {
.ui5-nli-group-title-text {
color: var(--sapGroup_TitleTextColor);
font-family: "72override", var(--sapFontFamily);
font-size: var(--sapFontHeader6Size);
16 changes: 8 additions & 8 deletions packages/fiori/src/themes/NotificationListItem.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import "./NotificationListItemBase.css";
@import "./NotificationPrioIcon.css";

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

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

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

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

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

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

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

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

.ui5-nli-heading-wrapper {
.ui5-nli-title-text-wrapper {
display: flex;
flex-direction: row;
}

.ui5-nli-heading {
.ui5-nli-title-text {
display: flex;
margin-bottom: 0.25rem;
box-sizing: border-box;
}

.ui5-nli-heading {
.ui5-nli-title-text {
color: var(--sapGroup_TitleTextColor);
font-weight: bold;
font-size: var(--sapFontHeader6Size);
Loading

0 comments on commit 4f17a31

Please sign in to comment.