Skip to content

Commit 3b1c0b5

Browse files
ilhan007ilhan007
authored
refactor(ui5-timeline-item): rename API (#3387)
Improve naming as part of #3107. The word item is obsolete in the props/event names as the component is TimelineItem and has the word item itself. BREAKING_CHANGE: The properties `itemName` and `itemNameClickable` are renamed to renamed to `name` and `nameClickable` and the event `item-name-click` is renamed to `name-click`
1 parent 12ce9fd commit 3b1c0b5

File tree

7 files changed

+30
-31
lines changed

7 files changed

+30
-31
lines changed

‎packages/fiori/src/TimelineItem.hbs

+7-9
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
</div>
1212
<div class="ui5-tli-bubble" tabindex="{{_tabIndex}}" role="option" data-sap-focus-ref>
1313
<div class="ui5-tli-title">
14-
{{#if itemName}}
15-
{{> itemName}}
14+
{{#if name}}
15+
{{> name}}
1616
{{/if}}
1717

1818
<span>{{titleText}}</span>
@@ -28,12 +28,10 @@
2828
</div>
2929
</div>
3030

31-
{{#*inline "itemName"}}
32-
{{#if itemNameClickable}}
33-
<ui5-link @click="{{onItemNamePress}}">{{itemName}}</ui5-link>
31+
{{#*inline "name"}}
32+
{{#if nameClickable}}
33+
<ui5-link @click="{{onNamePress}}" class="ui5-tli-title-name-clickable">{{name}}&nbsp;</ui5-link>
34+
{{else}}
35+
<span class="ui5-tli-title-name">{{name}}&nbsp;</span>
3436
{{/if}}
35-
36-
{{#unless itemNameClickable}}
37-
<span>{{itemName}}</span>
38-
{{/unless}}
3937
{{/inline}}

‎packages/fiori/src/TimelineItem.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -41,24 +41,24 @@ const metadata = {
4141
},
4242

4343
/**
44-
* Defines the name of the item.
44+
* Defines the name of the item, displayed before the <code>title-text</code>.
4545
*
4646
* @type {string}
4747
* @defaultvalue ""
4848
* @public
4949
*/
50-
itemName: {
50+
name: {
5151
type: String,
5252
},
5353

5454
/**
55-
* Defines whether the <code>itemName</code> is clickable.
55+
* Defines if the <code>name</code> is clickable.
5656
*
5757
* @type {boolean}
5858
* @defaultvalue false
5959
* @public
6060
*/
61-
itemNameClickable: {
61+
nameClickable: {
6262
type: Boolean,
6363
},
6464

@@ -94,13 +94,13 @@ const metadata = {
9494
* Fired when the item name is pressed either with a
9595
* click/tap or by using the Enter or Space key.
9696
* <br><br>
97-
* <b>Note:</b> The event will not be fired if the <code>item-name-clickable</code>
97+
* <b>Note:</b> The event will not be fired if the <code>name-clickable</code>
9898
* attribute is not set.
9999
*
100-
* @event sap.ui.webcomponents.fiori.TimelineItem#item-name-click
100+
* @event sap.ui.webcomponents.fiori.TimelineItem#name-click
101101
* @public
102102
*/
103-
"item-name-click": {},
103+
"name-click": {},
104104
},
105105
};
106106

@@ -140,8 +140,8 @@ class TimelineItem extends UI5Element {
140140
super();
141141
}
142142

143-
onItemNamePress() {
144-
this.fireEvent("item-name-click", {});
143+
onNamePress() {
144+
this.fireEvent("name-click", {});
145145
}
146146

147147
static get dependencies() {

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

+7-6
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,12 @@ <h2>Timeline within Card</h2>
7878
heading="Upcoming Activities"
7979
subtitle="For Today">
8080
<ui5-timeline>
81-
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" item-name="Stanislava Baltova" item-name-clickable></ui5-timeline-item>
81+
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova" name-clickable></ui5-timeline-item>
82+
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova"></ui5-timeline-item>
8283
<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="calendar">
8384
<ui5-label>MR SOF02 2.43</ui5-label>
8485
</ui5-timeline-item>
85-
<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" item-name="Stanislava Baltova">
86+
<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
8687
Online meeting
8788
</ui5-timeline-item>
8889
</ui5-timeline>
@@ -98,11 +99,11 @@ <h2>Result</h2>
9899
<section>
99100
<h2>Basic Timeline</h2>
100101
<ui5-timeline>
101-
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" item-name="Stanislava Baltova" item-name-clickable></ui5-timeline-item>
102+
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova" name-clickable></ui5-timeline-item>
102103
<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="calendar">
103104
<ui5-label>MR SOF02 2.43</ui5-label>
104105
</ui5-timeline-item>
105-
<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" item-name="Stanislava Baltova">
106+
<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
106107
Online meeting
107108
</ui5-timeline-item>
108109
</ui5-timeline>
@@ -111,8 +112,8 @@ <h2>Basic Timeline</h2>
111112
<script>
112113
var result = document.getElementById("result");
113114

114-
document.getElementById("test-item").addEventListener("ui5-itemNameClick", function (event) {
115-
result.innerHTML = event.target.getAttribute("item-name");
115+
document.getElementById("test-item").addEventListener("ui5-name-click", function (event) {
116+
result.innerHTML = event.target.getAttribute("name");
116117
});
117118
</script>
118119
</body>

‎packages/fiori/test/samples/Timeline.sample.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h2 class="control-header">Timeline</h2>
1919
<h3>Basic Timeline</h3>
2020
<div class="snippet">
2121
<ui5-timeline>
22-
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
22+
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
2323
<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.07.2017 (11:00 - 12:30)" icon="calendar">
2424
<div>MR SOF02 2.43</div>
2525
</ui5-timeline-item>
@@ -30,7 +30,7 @@ <h3>Basic Timeline</h3>
3030
</div>
3131
<pre class="prettyprint lang-html"><xmp>
3232
<ui5-timeline>
33-
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
33+
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
3434
<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.07.2017 (11:00 - 12:30)" icon="calendar">
3535
<div>MR SOF02 2.43</div>
3636
</ui5-timeline-item>

‎packages/fiori/test/specs/Timeline.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ describe("Timeline general interaction", () => {
66
browser.url(`http://localhost:${PORT}/test-resources/pages/Timeline.html`);
77
});
88

9-
it("should fire itemNameClick event on a normal item name", () => {
9+
it("should fire name-click event on a normal item name", () => {
1010
const timelineItemName = browser.$("#test-item").shadow$("ui5-link");
1111
const result = $("#result");
1212

‎packages/main/test/samples/Card.sample.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,7 @@ <h3>Card with Timeline</h3>
251251
<div class="snippet card-container">
252252
<ui5-card title-text="Upcoming Activities" subtitle-text="For Today" class="medium">
253253
<ui5-timeline>
254-
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
254+
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
255255
<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
256256
MR SOF02 2.43
257257
</ui5-timeline-item>
@@ -268,7 +268,7 @@ <h3>Card with Timeline</h3>
268268
subtitle-text="For Today"
269269
class="meidum">
270270
<ui5-timeline>
271-
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
271+
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
272272
<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
273273
MR SOF02 2.43
274274
</ui5-timeline-item>

‎packages/main/test/samples/Carousel.sample.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ <h3>Carousel With Multiple Items per Page</h3>
5656
<ui5-carousel items-per-page-s="1" items-per-page-m="2" items-per-page-l="2">
5757
<ui5-card title-text="Activities" subtitle-text="For Today" class="medium">
5858
<ui5-timeline>
59-
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
59+
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
6060
<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
6161
MR SOF02 2.43
6262
</ui5-timeline-item>
@@ -106,7 +106,7 @@ <h3>Carousel With Multiple Items per Page</h3>
106106
<ui5-carousel items-per-page-s="1" items-per-page-m="2" items-per-page-l="2">
107107
<ui5-card title-text="Activities" subtitle-text="For Today" class="medium">
108108
<ui5-timeline>
109-
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
109+
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
110110
<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
111111
MR SOF02 2.43
112112
</ui5-timeline-item>

0 commit comments

Comments
 (0)