Skip to content

Commit fe79710

Browse files
ilhan007ilhan007
authored
feat(ui5-li): add description property (#54)
1 parent 33152b9 commit fe79710

File tree

8 files changed

+86
-29
lines changed

8 files changed

+86
-29
lines changed

‎packages/main/src/StandardListItem.hbs

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
{{>include "./ListItem.hbs"}}
22

33
{{#*inline "listItemContent"}}
4-
<span class="sapMSLITitle">{{ctr._nodeText}}</span>
4+
<div class="sapMSLITextWrapper">
5+
{{#if ctr._nodeText}}
6+
<span class="sapMSLITitle">{{ctr._nodeText}}</span>
7+
{{/if}}
8+
{{#if ctr.description}}
9+
<span class="sapMSLIDescription">{{ctr.description}}</span>
10+
{{/if}}
11+
</div>
512
{{/inline}}
613

714
{{#*inline "imageBegin"}}

‎packages/main/src/StandardListItem.js

+10
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,16 @@ const metadata = {
1717
usesNodeText: true,
1818
properties: /** @lends sap.ui.webcomponents.main.StandardListItem.prototype */ {
1919

20+
/**
21+
* Defines the description displayed right under the item text, if such is present.
22+
* @type {String}
23+
* @public
24+
*/
25+
description: {
26+
type: String,
27+
defaultValue: "",
28+
},
29+
2030
/**
2131
* Defines the <code>icon</code> source URI.
2232
* </br></br>

‎packages/main/src/StandardListItemTemplateContext.js

+3
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,13 @@ class StandardListItemTemplateContext {
66
const hasIcon = !!state.icon;
77
const iconEnd = state.iconEnd;
88
const hasImage = !!state.image;
9+
const hasDesc = state.description && !!state.description.length;
10+
const hasTitle = state._nodeText && !!state._nodeText.length;
911

1012
context.displayImage = hasImage;
1113
context.displayIconBegin = (hasIcon && !iconEnd);
1214
context.displayIconEnd = (hasIcon && iconEnd);
15+
context.classes.main.sapMSLIWithTitleAndDescription = hasDesc && hasTitle;
1316

1417
return context;
1518
}

‎packages/main/src/themes/base/ListItem.less

+29-5
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,42 @@
1111
/* ======================================= */
1212

1313
.sapMSLI {
14-
&.sapMLIBActive .sapMSLITitle {
14+
&.sapMLIBActive .sapMSLITitle,
15+
&.sapMLIBActive .sapMSLIDescription {
1516
color: @sapUiListActiveTextColor;
1617
}
1718

19+
&.sapMSLIWithTitleAndDescription {
20+
height: 5rem;
21+
padding: 1rem;
22+
23+
.sapMSLITitle {
24+
padding-bottom: 0.375rem;
25+
}
26+
}
27+
28+
.sapMSLITextWrapper {
29+
display: flex;
30+
flex-direction: column;
31+
min-width: 1px;
32+
line-height: normal;
33+
}
34+
1835
.sapMSLITitle {
36+
font-size: @sapMFontLargeSize;
37+
color: @sapUiListTextColor;
38+
}
39+
40+
.sapMSLITitle,
41+
.sapMSLIDescription {
1942
white-space: nowrap;
2043
overflow: hidden;
2144
text-overflow: ellipsis;
22-
font-size: 1rem;
23-
height: 3rem;
24-
line-height: 3rem;
25-
color: @sapUiListTextColor;
45+
}
46+
47+
.sapMSLIDescription {
48+
font-size: @sapMFontMediumSize;
49+
color: @sapUiContentLabelColor;
2650
}
2751

2852
.sapMSLIImg {

‎packages/main/src/themes/sap_fiori_3/ListItem.less

+2-7
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,7 @@
44
@import "../base/ListItem.less";
55

66
/* ============================= */
7-
/* Global Belize parameters */
7+
/* Global Fiori 3 parameters */
88
/* ============================= */
99
@import "./base.less";
10-
@import "./global.less";
11-
12-
/* ======================================= */
13-
/* CSS for control sap.m/StandardListItem */
14-
/* Belize theme */
15-
/* ======================================= */
10+
@import "./global.less";

‎packages/main/test/sap/ui/webcomponents/main/pages/List_test_page.html

+6
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,12 @@
3838
<button id="btnAfter">After</button>
3939
<label id="lblResult">0</label>
4040

41+
<ui5-list id="listWithDesc">
42+
<ui5-li image="./img/HT-1000.jpg" type="Active" description="2GB RAM, Intel i7 4.5 GHz">Laptop HP</ui5-li>
43+
<ui5-li image="./img/HT-2026.jpg" type="Active" description="2GB RAM, Intel i7 4.5 GHz">Audio cabel</ui5-li>
44+
<ui5-li image="./img/HT-2002.jpg" type="Active" description="2GB RAM, Intel i7 4.5 GHz">DVD set</ui5-li>
45+
</ui5-list>
46+
4147
<script>
4248
'use strict';
4349

‎packages/main/test/sap/ui/webcomponents/main/samples/List.sample.html

+15-15
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,18 @@ <h2 class="control-header">List</h2>
4040
<h3>Basic List</h3>
4141
<div class="snippet">
4242
<ui5-list id="myList" class="full-width">
43-
<ui5-li icon="sap-icon://meal" type="Active">Pineapple</ui5-li>
44-
<ui5-li icon="sap-icon://meal" type="Active">Orange</ui5-li>
45-
<ui5-li icon="sap-icon://meal" type="Active">Banana</ui5-li>
46-
<ui5-li icon="sap-icon://meal" type="Active">Mango</ui5-li>
43+
<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="Tropical plant with an edible fruit">Pineapple</ui5-li>
44+
<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="Occurs between red and yellow">Orange</ui5-li>
45+
<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="The yellow lengthy fruit">Banana</ui5-li>
46+
<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="The tropical stone fruit">Mango</ui5-li>
4747
</ui5-list>
4848
</div>
4949
<pre class="prettyprint lang-html"><xmp>
5050
<ui5-list id="myList" class="full-width">
51-
<ui5-li icon="sap-icon://meal" type="Active">Pineapple</ui5-li>
52-
<ui5-li icon="sap-icon://meal" type="Active">Orange</ui5-li>
53-
<ui5-li icon="sap-icon://meal" type="Active">Banana</ui5-li>
54-
<ui5-li icon="sap-icon://meal" type="Active">Mango</ui5-li>
51+
<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="Tropical plant with an edible fruit">Pineapple</ui5-li>
52+
<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="Occurs between red and yellow">Orange</ui5-li>
53+
<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="The yellow lengthy fruit">Banana</ui5-li>
54+
<ui5-li icon="sap-icon://nutrition-activity" type="Active" description="The tropical stone fruit">Mango</ui5-li>
5555
</ui5-list>
5656
</xmp></pre>
5757
</section>
@@ -63,7 +63,7 @@ <h3>List in Single-selection Mode</h3>
6363
<ui5-li key="Argentina" type="Active" selected icon="sap-icon://map" icon-end>Argentina</ui5-li>
6464
<ui5-li key="Bulgaria" type="Active" icon="sap-icon://map" icon-end>Bulgaria</ui5-li>
6565
<ui5-li key="China" type="Active" icon="sap-icon://map" icon-end>China</ui5-li>
66-
<ui5-li key="Europe" type="Inactive" icon="sap-icon://map" icon-end>Europe (ui5-li type='Inactive')</ui5-li>
66+
<ui5-li key="Denmark" type="Inactive" icon="sap-icon://map" icon-end>Denmark (ui5-li type='Inactive')</ui5-li>
6767
</ui5-list>
6868

6969
<script>
@@ -76,10 +76,10 @@ <h3>List in Single-selection Mode</h3>
7676
</div>
7777
<pre class="prettyprint lang-html"><xmp>
7878
<ui5-list id="country-selector" mode="SingleSelect" header-text="Select a country:">
79-
<ui5-li key="argentina" type="Active" selected icon="sap-icon://map" icon-end>Argentina</ui5-li>
80-
<ui5-li key="bulgaria" type="Active" icon="sap-icon://map" icon-end>Bulgaria</ui5-li>
81-
<ui5-li key="china" type="Active" icon="sap-icon://map" icon-end>China</ui5-li>
82-
<ui5-li key="europe" type="Inactive" icon="sap-icon://map" icon-end>Europe (ui5-li type='Inactive')</ui5-li>
79+
<ui5-li key="Argentina" type="Active" selected icon="sap-icon://map" icon-end>Argentina</ui5-li>
80+
<ui5-li key="Bulgaria" type="Active" icon="sap-icon://map" icon-end>Bulgaria</ui5-li>
81+
<ui5-li key="China" type="Active" icon="sap-icon://map" icon-end>China</ui5-li>
82+
<ui5-li key="Denmark" type="Inactive" icon="sap-icon://map" icon-end>Denmark (ui5-li type='Inactive')</ui5-li>
8383
</ui5-list>
8484

8585
<script>
@@ -152,7 +152,7 @@ <h3>List Item Separation Types</h3>
152152
<ui5-li icon="sap-icon://product" type="Active">Item #2</ui5-li>
153153
<ui5-li icon="sap-icon://product" type="Active">Item #3</ui5-li>
154154
</ui5-list>
155-
<ui5-list header-text="Inner separators" separators="Inner" class="full-width">
155+
<ui5-list header-text="Inner separators" separators="Inner" class="full-width">
156156
<ui5-li icon="sap-icon://shipping-status" type="Active">Devilered</ui5-li>
157157
<ui5-li icon="sap-icon://shipping-status" type="Active">Pending</ui5-li>
158158
<ui5-li icon="sap-icon://shipping-status" type="Active">Declined</ui5-li>
@@ -164,7 +164,7 @@ <h3>List Item Separation Types</h3>
164164
<ui5-li icon="sap-icon://product" type="Active">Item #2</ui5-li>
165165
<ui5-li icon="sap-icon://product" type="Active">Item #3</ui5-li>
166166
</ui5-list>
167-
<ui5-list header-text="Inner separators" separators="Inner" class="full-width">
167+
<ui5-list header-text="Inner separators" separators="Inner" class="full-width">
168168
<ui5-li icon="sap-icon://shipping-status" type="Active">Devilered</ui5-li>
169169
<ui5-li icon="sap-icon://shipping-status" type="Active">Pending</ui5-li>
170170
<ui5-li icon="sap-icon://shipping-status" type="Active">Declined</ui5-li>

‎packages/main/test/specs/List.spec.js

+13-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ describe("List Tests", () => {
9999
assert.ok(browser.$('#btnAfter').isFocused(), "focus is outside the list");
100100
});
101101

102-
it("inner single selection sradio button checkbox is skipped on tab", () => {
102+
it("inner single selection radio button checkbox is skipped on tab", () => {
103103
browser.url("http://localhost:8080/test-resources/sap/ui/webcomponents/main/pages/List_test_page.html");
104104
list.root.setProperty("mode", "SingleSelect");
105105

@@ -110,4 +110,16 @@ describe("List Tests", () => {
110110

111111
assert.ok(browser.$('#btnAfter').isFocused(), "focus is outside the list");
112112
});
113+
114+
it("item size and classed, when an item has both text and description", () => {
115+
const ITEM_WITH_DESCRIPTION_AND_TITLE_HEIGHT = 80;
116+
const firstItem = $("#listWithDesc ui5-li[slot=items-1]");
117+
const firstItemHeight = firstItem.getSize("height");
118+
const rootElement = browser.findElementDeep("#listWithDesc ui5-li[slot=items-1] >>> .sapMSLI");
119+
const descriptionElement = browser.findElementDeep("#listWithDesc ui5-li[slot=items-1] >>> .sapMSLIDescription");
120+
121+
assert.strictEqual(firstItemHeight, ITEM_WITH_DESCRIPTION_AND_TITLE_HEIGHT, "The size of the item is : " + firstItemHeight);
122+
assert.ok(descriptionElement, "The description span is rendered.");
123+
assert.ok(rootElement.hasClass("sapMSLIWithTitleAndDescription"), "The sapMSLIWithTitleAndDescription class is added to the root element.");
124+
});
113125
});

0 commit comments

Comments
 (0)