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`
SAP · Jun 11, 2021 · 3b1c0b5 · 3b1c0b5
1 parent 12ce9fd
commit 3b1c0b5
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 31 deletions.
diff --git a/packages/fiori/src/TimelineItem.hbs b/packages/fiori/src/TimelineItem.hbs
@@ -11,8 +11,8 @@
 	</div>
 	<div class="ui5-tli-bubble" tabindex="{{_tabIndex}}" role="option" data-sap-focus-ref>
 		<div class="ui5-tli-title">
-			{{#if itemName}}
-				{{> itemName}}
+			{{#if name}}
+				{{> name}}
 			{{/if}}
 
 			<span>{{titleText}}</span>
@@ -28,12 +28,10 @@
 	</div>
 </div>
 
-{{#*inline "itemName"}}
-	{{#if itemNameClickable}}
-		<ui5-link @click="{{onItemNamePress}}">{{itemName}}</ui5-link>
+{{#*inline "name"}}
+	{{#if nameClickable}}
+		<ui5-link @click="{{onNamePress}}" class="ui5-tli-title-name-clickable">{{name}}&nbsp;</ui5-link>
+	{{else}}
+		<span class="ui5-tli-title-name">{{name}}&nbsp;</span>
 	{{/if}}
-
-	{{#unless itemNameClickable}}
-		<span>{{itemName}}</span>
-	{{/unless}}
 {{/inline}}
diff --git a/packages/fiori/src/TimelineItem.js b/packages/fiori/src/TimelineItem.js
@@ -41,24 +41,24 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the name of the item.
+		 * Defines the name of the item, displayed before the <code>title-text</code>.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 */
-		itemName: {
+		name: {
 			type: String,
 		},
 
 		/**
-		 * Defines whether the <code>itemName</code> is clickable.
+		 * Defines if the <code>name</code> is clickable.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
 		 */
-		itemNameClickable: {
+		nameClickable: {
 			type: Boolean,
 		},
 
@@ -94,13 +94,13 @@ const metadata = {
 		 * Fired when the item name is pressed either with a
 		 * click/tap or by using the Enter or Space key.
 		 * <br><br>
-		 * <b>Note:</b> The event will not be fired if the <code>item-name-clickable</code>
+		 * <b>Note:</b> The event will not be fired if the <code>name-clickable</code>
 		 * attribute is not set.
 		 *
-		 * @event sap.ui.webcomponents.fiori.TimelineItem#item-name-click
+		 * @event sap.ui.webcomponents.fiori.TimelineItem#name-click
 		 * @public
 		 */
-		"item-name-click": {},
+		"name-click": {},
 	},
 };
 
@@ -140,8 +140,8 @@ class TimelineItem extends UI5Element {
 		super();
 	}
 
-	onItemNamePress() {
-		this.fireEvent("item-name-click", {});
+	onNamePress() {
+		this.fireEvent("name-click", {});
 	}
 
 	static get dependencies() {

diff --git a/packages/fiori/test/pages/Timeline.html b/packages/fiori/test/pages/Timeline.html
@@ -78,11 +78,12 @@ <h2>Timeline within Card</h2>
 					heading="Upcoming Activities"
 					subtitle="For Today">
 				<ui5-timeline>
-					<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>
+					<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>
+					<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="phone" name="Stanislava Baltova"></ui5-timeline-item>
 					<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="calendar">
 						<ui5-label>MR SOF02 2.43</ui5-label>
 					</ui5-timeline-item>
-					<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" item-name="Stanislava Baltova">
+					<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
 						Online meeting
 					</ui5-timeline-item>
 				</ui5-timeline>
@@ -98,11 +99,11 @@ <h2>Result</h2>
 <section>
 	<h2>Basic Timeline</h2>
 		<ui5-timeline>
-			<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>
+			<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>
 			<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="calendar">
 				<ui5-label>MR SOF02 2.43</ui5-label>
 			</ui5-timeline-item>
-			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" item-name="Stanislava Baltova">
+			<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="calendar" name="Stanislava Baltova">
 				Online meeting
 			</ui5-timeline-item>
 		</ui5-timeline>
@@ -111,8 +112,8 @@ <h2>Basic Timeline</h2>
 <script>
 	var result = document.getElementById("result");
 
-	document.getElementById("test-item").addEventListener("ui5-itemNameClick", function (event) {
-		result.innerHTML = event.target.getAttribute("item-name");
+	document.getElementById("test-item").addEventListener("ui5-name-click", function (event) {
+		result.innerHTML = event.target.getAttribute("name");
 	});
 </script>
 </body>

diff --git a/packages/fiori/test/samples/Timeline.sample.html b/packages/fiori/test/samples/Timeline.sample.html
@@ -19,7 +19,7 @@ <h2 class="control-header">Timeline</h2>
 	<h3>Basic Timeline</h3>
 	<div class="snippet">
 		<ui5-timeline>
-			<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>
+			<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>
 			<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.07.2017 (11:00 - 12:30)" icon="calendar">
 				<div>MR SOF02 2.43</div>
 			</ui5-timeline-item>
@@ -30,7 +30,7 @@ <h3>Basic Timeline</h3>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-timeline>
-	<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>
+	<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>
 	<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.07.2017 (11:00 - 12:30)" icon="calendar">
 		<div>MR SOF02 2.43</div>
 	</ui5-timeline-item>

diff --git a/packages/fiori/test/specs/Timeline.spec.js b/packages/fiori/test/specs/Timeline.spec.js
@@ -6,7 +6,7 @@ describe("Timeline general interaction", () => {
 		browser.url(`http://localhost:${PORT}/test-resources/pages/Timeline.html`);
 	});
 
-	it("should fire itemNameClick event on a normal item name", () => {
+	it("should fire name-click event on a normal item name", () => {
 		const timelineItemName = browser.$("#test-item").shadow$("ui5-link");
 		const result = $("#result");
 

diff --git a/packages/main/test/samples/Card.sample.html b/packages/main/test/samples/Card.sample.html
@@ -251,7 +251,7 @@ <h3>Card with Timeline</h3>
 	<div class="snippet card-container">
 		<ui5-card title-text="Upcoming Activities" subtitle-text="For Today" class="medium">
 			<ui5-timeline>
-				<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
+				<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
 				<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
 					MR SOF02 2.43
 				</ui5-timeline-item>
@@ -268,7 +268,7 @@ <h3>Card with Timeline</h3>
 	subtitle-text="For Today"
 	class="meidum">
 	<ui5-timeline>
-		<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
+		<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
 		<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
 			MR SOF02 2.43
 		</ui5-timeline-item>

diff --git a/packages/main/test/samples/Carousel.sample.html b/packages/main/test/samples/Carousel.sample.html
@@ -56,7 +56,7 @@ <h3>Carousel With Multiple Items per Page</h3>
 		<ui5-carousel items-per-page-s="1" items-per-page-m="2" items-per-page-l="2">
 			<ui5-card title-text="Activities" subtitle-text="For Today" class="medium">
 				<ui5-timeline>
-					<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
+					<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
 					<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
 						MR SOF02 2.43
 					</ui5-timeline-item>
@@ -106,7 +106,7 @@ <h3>Carousel With Multiple Items per Page</h3>
 <ui5-carousel items-per-page-s="1" items-per-page-m="2" items-per-page-l="2">
 		<ui5-card title-text="Activities" subtitle-text="For Today" class="medium">
 			<ui5-timeline>
-				<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
+				<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="phone" name="John Smith" name-clickable></ui5-timeline-item>
 				<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="calendar">
 					MR SOF02 2.43
 				</ui5-timeline-item>