Skip to content

Commit f1d8a85

Browse files
ilhan007ilhan007
authored
feat(ui5-li): add info and infoState properties (#539)
1 parent 71e7495 commit f1d8a85

File tree

5 files changed

+77
-17
lines changed

5 files changed

+77
-17
lines changed

‎packages/main/src/StandardListItem.hbs

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@
99
<span class="sapMSLIDescription">{{description}}</span>
1010
{{/if}}
1111
</div>
12+
{{#if info}}
13+
<span class="{{classes.info}}">{{info}}</span>
14+
{{/if}}
1215
{{/inline}}
1316

1417
{{#*inline "imageBegin"}}

‎packages/main/src/StandardListItem.js

+31-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
22
import litRender from "@ui5/webcomponents-base/src/renderer/LitRenderer.js";
3+
import ValueState from "@ui5/webcomponents-base/src/types/ValueState.js";
34
import ListItem from "./ListItem.js";
45
import Icon from "./Icon.js";
56
import StandardListItemTemplate from "./build/compiled/StandardListItemTemplate.lit.js";
67

7-
// Styles
8-
98
// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
109
import "./ThemePropertiesProvider.js";
1110

@@ -65,6 +64,29 @@ const metadata = {
6564
image: {
6665
type: String,
6766
},
67+
68+
/**
69+
* Defines the <code>info</code>, displayed in the end of the list item.
70+
* @type {string}
71+
* @public
72+
* @since 0.13.0
73+
*/
74+
info: {
75+
type: String,
76+
},
77+
78+
/**
79+
* Defines the state of the <code>info</code>.
80+
* <br>
81+
* Available options are: <code>"None"</code< (by default), <code>"Success"</code>, <code>"Warning"</code> and <code>"Erorr"</code>.
82+
* @type {string}
83+
* @public
84+
* @since 0.13.0
85+
*/
86+
infoState: {
87+
type: ValueState,
88+
defaultValue: ValueState.None,
89+
},
6890
},
6991
slots: /** @lends sap.ui.webcomponents.main.StandardListItem.prototype */ {
7092
/**
@@ -131,10 +153,17 @@ class StandardListItem extends ListItem {
131153
const result = super.classes;
132154
const hasDesc = this.description && !!this.description.length;
133155
const hasTitle = this.textContent;
156+
const infoState = this.infoState.toLowerCase();
134157

135158
// Modify main classes
136159
result.main.sapMSLIWithTitleAndDescription = hasDesc && hasTitle;
137160

161+
// Add "info" classes
162+
result.info = {
163+
"sapMSLI-info": true,
164+
[`sapMSLI-info--${infoState}`]: true,
165+
};
166+
138167
return result;
139168
}
140169

‎packages/main/src/themes/ListItem.css

+29-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11

22
.sapMSLI.sapMLIBActive .sapMSLITitle,
3-
.sapMSLI.sapMLIBActive .sapMSLIDescription {
3+
.sapMSLI.sapMLIBActive .sapMSLIDescription,
4+
.sapMSLI.sapMLIBActive .sapMSLI-info {
45
color: var(--sapUiListActiveTextColor);
56
}
67

@@ -9,6 +10,7 @@
910
flex-direction: column;
1011
min-width: 1px;
1112
line-height: normal;
13+
flex: auto;
1214
}
1315

1416
.sapMSLI .sapMSLITitle {
@@ -28,6 +30,28 @@
2830
color: var(--sapUiContentLabelColor);
2931
}
3032

33+
.sapMSLI-info {
34+
margin: 0 0.25rem;
35+
color: var(--sapUiNeutralText);
36+
font-size: 0.875rem;
37+
flex-shrink: 0;
38+
overflow: hidden;
39+
text-overflow: ellipsis;
40+
white-space: nowrap;
41+
}
42+
43+
.sapMSLI-info--warning {
44+
color: var(--sapUiCriticalText);
45+
}
46+
47+
.sapMSLI-info--success {
48+
color: var(--sapUiPositiveText);
49+
}
50+
51+
.sapMSLI-info--error {
52+
color: var(--sapUiNegativeText);
53+
}
54+
3155
.sapMSLI .sapMSLIImg {
3256
margin: 0.5rem 0.75rem 0.5rem 0rem;
3357
height: 2rem;
@@ -63,6 +87,10 @@
6387
padding-bottom: 0.375rem;
6488
}
6589

90+
.sapMSLI.sapMSLIWithTitleAndDescription .sapMSLI-info {
91+
align-self: flex-end;
92+
}
93+
6694
/* Compact size */
6795
.sapUiSizeCompact.sapMSLI:not(.sapMSLIWithTitleAndDescription) {
6896
height: 2rem;

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ <h2>ui5-list</h2>
1616

1717
<ui5-list header-text="API: GroupHeaderListItem" mode="MultiSelect">
1818
<ui5-li-groupheader>New Items</ui5-li-groupheader>
19-
<ui5-li image="./img/HT-1000.jpg" icon="sap-icon://navigation-right-arrow" >Laptop HP</ui5-li>
20-
<ui5-li image="./img/HT-1010.jpg" icon="sap-icon://navigation-right-arrow" >Laptop Lenovo</ui5-li>
21-
<ui5-li image="./img/HT-1022.jpg" icon="sap-icon://navigation-right-arrow" >IPhone 3</ui5-li>
19+
<ui5-li image="./img/HT-1000.jpg" icon="sap-icon://navigation-right-arrow" info="Available">Laptop HP</ui5-li>
20+
<ui5-li image="./img/HT-1010.jpg" icon="sap-icon://navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">Laptop Lenovo</ui5-li>
21+
<ui5-li image="./img/HT-1022.jpg" icon="sap-icon://navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">IPhone 3</ui5-li>
2222

2323
<ui5-li-groupheader>Discounted Items</ui5-li-groupheader>
24-
<ui5-li image="./img/HT-1030.jpg" icon-end icon="sap-icon://navigation-right-arrow">HP Monitor 24</ui5-li>
25-
<ui5-li image="./img/HT-2026.jpg" icon-end icon="sap-icon://navigation-right-arrow">Audio cabel</ui5-li>
26-
<ui5-li image="./img/HT-2002.jpg" icon-end icon="sap-icon://navigation-right-arrow">DVD set</ui5-li>
24+
<ui5-li image="./img/HT-1030.jpg" icon-end icon="sap-icon://navigation-right-arrow" description="#12331232131" info="Reuqired" info-state="Error">HP Monitor 24</ui5-li>
25+
<ui5-li image="./img/HT-2026.jpg" icon-end icon="sap-icon://navigation-right-arrow" description="#12331232131" info="Available" info-state="Success">Audio cabel</ui5-li>
26+
<ui5-li image="./img/HT-2002.jpg" icon-end icon="sap-icon://navigation-right-arrow" info="Reuqired" info-state="Warning">DVD set</ui5-li>
2727

2828
<ui5-li-groupheader>Discounted Items</ui5-li-groupheader>
2929
<ui5-li image="./img/HT-1030.jpg" icon="sap-icon://navigation-right-arrow">HP Monitor 24</ui5-li>

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,18 @@ <h2 class="control-header">List</h2>
4141
<h3>Basic List</h3>
4242
<div class="snippet">
4343
<ui5-list id="myList" class="full-width">
44-
<ui5-li icon="sap-icon://nutrition-activity" description="Tropical plant with an edible fruit">Pineapple</ui5-li>
45-
<ui5-li icon="sap-icon://nutrition-activity" description="Occurs between red and yellow">Orange</ui5-li>
46-
<ui5-li icon="sap-icon://nutrition-activity" description="The yellow lengthy fruit">Banana</ui5-li>
47-
<ui5-li icon="sap-icon://nutrition-activity" description="The tropical stone fruit">Mango</ui5-li>
44+
<ui5-li icon="sap-icon://nutrition-activity" description="Tropical plant with an edible fruit" info="In-stock" info-state="Success">Pineapple</ui5-li>
45+
<ui5-li icon="sap-icon://nutrition-activity" description="Occurs between red and yellow" info="Expires" info-state="Warning">Orange</ui5-li>
46+
<ui5-li icon="sap-icon://nutrition-activity" description="The yellow lengthy fruit" info="Re-stock" info-state="Error">Banana</ui5-li>
47+
<ui5-li icon="sap-icon://nutrition-activity" description="The tropical stone fruit" info="Re-stock" info-state="Error">Mango</ui5-li>
4848
</ui5-list>
4949
</div>
5050
<pre class="prettyprint lang-html"><xmp>
5151
<ui5-list id="myList" class="full-width">
52-
<ui5-li icon="sap-icon://nutrition-activity" description="Tropical plant with an edible fruit">Pineapple</ui5-li>
53-
<ui5-li icon="sap-icon://nutrition-activity" description="Occurs between red and yellow">Orange</ui5-li>
54-
<ui5-li icon="sap-icon://nutrition-activity" description="The yellow lengthy fruit">Banana</ui5-li>
55-
<ui5-li icon="sap-icon://nutrition-activity" description="The tropical stone fruit">Mango</ui5-li>
52+
<ui5-li icon="sap-icon://nutrition-activity" description="Tropical plant with an edible fruit" info="In-stock" info-state="Success">Pineapple</ui5-li>
53+
<ui5-li icon="sap-icon://nutrition-activity" description="Occurs between red and yellow" info="Expires" info-state="Warning">Orange</ui5-li>
54+
<ui5-li icon="sap-icon://nutrition-activity" description="The yellow lengthy fruit" info="Re-stock" info-state="Error">Banana</ui5-li>
55+
<ui5-li icon="sap-icon://nutrition-activity" description="The tropical stone fruit" info="Re-stock" info-state="Error">Mango</ui5-li>
5656
</ui5-list>
5757
</xmp></pre>
5858
</section>

0 commit comments

Comments
 (0)