Skip to content

Commit 391ffaa

Browse files
yanaminkovayanaminkova
authored
refactor(ui5-li): replace the usage of image property with image slot (#9089)
Removes the `image` property of the `ui5-li` and renames the `imageContent` slot to `image`. BREAKING CHANGE: The `image` property of the `ui5-li` is removed and the `imageContent` slot is renamed to `image`. If you have previously used the `image` property: ```html <ui5-li image="./img/HT-1022.jpg">Standard List Item</ui5-li> ``` or the `imageContent` slot: ```html <ui5-li> Avatar inside imageContent slot <ui5-avatar slot="imageContent" shape="Square" initials="ABC" color-scheme="Accent2"></ui5-avatar> </ui5-li> ``` Now use `image` slot instead: ```html <ui5-li> Avatar inside image slot <ui5-avatar slot="image" shape="Square" initials="ABC" color-scheme="Accent2"></ui5-avatar> </ui5-li> ``` Related to #8461, #7887, #9200
1 parent 7701b60 commit 391ffaa

18 files changed

+675
-223
lines changed

‎packages/main/src/ListItemStandard.hbs

+3-9
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,10 @@
2424
{{/inline}}
2525

2626
{{#*inline "imageBegin"}}
27-
{{#if hasImageContent}}
28-
<div class="ui5-li-imgContent" >
29-
<slot name="imageContent"></slot>
27+
{{#if hasImage}}
28+
<div class="ui5-li-image" >
29+
<slot name="image"></slot>
3030
</div>
31-
{{else}}
32-
{{#if displayImage}}
33-
<ui5-avatar shape="Square" class="ui5-li-img">
34-
<img src="{{image}}" class="ui5-li-img-inner" />
35-
</ui5-avatar>
36-
{{/if}}
3731
{{/if}}
3832
{{/inline}}
3933

‎packages/main/src/ListItemStandard.ts

+6-21
Original file line numberDiff line numberDiff line change
@@ -68,23 +68,12 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
6868
/**
6969
* Defines whether the `icon` should be displayed in the beginning of the list item or in the end.
7070
*
71-
* **Note:** If `image` is set, the `icon` would be displayed after the `image`.
7271
* @default false
7372
* @public
7473
*/
7574
@property({ type: Boolean })
7675
iconEnd = false;
7776

78-
/**
79-
* Defines the `image` source URI.
80-
*
81-
* **Note:** The `image` would be displayed in the beginning of the list item.
82-
* @default undefined
83-
* @public
84-
*/
85-
@property()
86-
image?: string;
87-
8877
/**
8978
* Defines the `additionalText`, displayed in the end of the list item.
9079
* @default undefined
@@ -143,28 +132,24 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
143132
hasTitle = false;
144133

145134
@property({ type: Boolean })
146-
_hasImageContent = false;
135+
_hasImage = false;
147136

148137
/**
149138
* **Note:** While the slot allows option for setting custom avatar, to match the
150139
* design guidelines, please use the `ui5-avatar` with it's default size - S.
151140
*
152141
* **Note:** If bigger `ui5-avatar` needs to be used, then the size of the
153142
* `ui5-li` should be customized in order to fit.
154-
* @since 1.10.0
143+
* @since 2.0.0
155144
* @public
156145
*/
157146
@slot()
158-
imageContent!: Array<HTMLElement>;
147+
image!: Array<HTMLElement>;
159148

160149
onBeforeRendering() {
161150
super.onBeforeRendering();
162151
this.hasTitle = !!this.textContent;
163-
this._hasImageContent = this.hasImageContent;
164-
}
165-
166-
get displayImage(): boolean {
167-
return !!this.image;
152+
this._hasImage = this.hasImage;
168153
}
169154

170155
get displayIconBegin(): boolean {
@@ -175,8 +160,8 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
175160
return !!(this.icon && this.iconEnd);
176161
}
177162

178-
get hasImageContent(): boolean {
179-
return !!this.imageContent.length;
163+
get hasImage(): boolean {
164+
return !!this.image.length;
180165
}
181166
}
182167

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

+9-13
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,21 @@
4848
height: 5rem;
4949
}
5050

51-
:host([_has-image-content]) {
51+
:host([_has-image]) {
5252
height: 5rem;
5353
}
5454

5555
:host([image]) .ui5-li-content {
5656
height: 3rem;
5757
}
5858

59+
::slotted(img[slot="image"]){
60+
width: var(--_ui5_list_item_img_size);
61+
height: var(--_ui5_list_item_img_size);
62+
border-radius: var(--ui5-avatar-border-radius);
63+
object-fit: contain
64+
}
65+
5966
:host([description]) .ui5-li-root {
6067
padding: 1rem;
6168
}
@@ -108,25 +115,14 @@
108115
align-self: flex-end;
109116
}
110117

111-
.ui5-li-img {
112-
width: var(--_ui5_list_item_img_size);
113-
height: var(--_ui5_list_item_img_size);
114-
border-radius: var(--ui5-avatar-border-radius);
115-
}
116-
117-
.ui5-li-img,
118-
.ui5-li-imgContent {
118+
.ui5-li-image {
119119
min-width: var(--_ui5_list_item_img_size);
120120
min-height: var(--_ui5_list_item_img_size);
121121
margin-top: var(--_ui5_list_item_img_top_margin);
122122
margin-bottom: var(--_ui5_list_item_img_bottom_margin);
123123
margin-inline-end: var(--_ui5_list_item_img_hn_margin);
124124
}
125125

126-
.ui5-li-img-inner {
127-
object-fit: contain;
128-
}
129-
130126
.ui5-li-icon {
131127
min-width: var(--_ui5_list_item_icon_size);
132128
min-height: var(--_ui5_list_item_icon_size);

‎packages/main/test/pages/Carousel.html

+18-6
Original file line numberDiff line numberDiff line change
@@ -379,15 +379,27 @@
379379

380380
<ui5-list header-text="API: ListItemGroup (2/3)" selection-mode="Multiple">
381381
<ui5-li-group header-text="New Items">
382-
<ui5-li image="./img/HT-1000.jpg" icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat
382+
<ui5-li icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat
383383
elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam.
384384
Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad
385385
excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex
386-
laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.</ui5-li>
387-
<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"
388-
additional-text-state="Negative">Laptop Lenovo</ui5-li>
389-
<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"
390-
additional-text-state="Negative">IPhone 3</ui5-li>
386+
laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.
387+
<ui5-avatar slot="image" shape="Square">
388+
<img src="./img/HT-1000.jpg" alt="Woman image">
389+
</ui5-avatar>
390+
</ui5-li>
391+
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"
392+
additional-text-state="Negative">Laptop Lenovo
393+
<ui5-avatar slot="image" shape="Square">
394+
<img src="./img/HT-1010.jpg" alt="Woman image">
395+
</ui5-avatar>
396+
</ui5-li>
397+
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"
398+
additional-text-state="Negative">IPhone 3
399+
<ui5-avatar slot="image" shape="Square">
400+
<img src="./img/HT-1022.jpg" alt="Woman image">
401+
</ui5-avatar>
402+
</ui5-li>
391403
</ui5-li-group>
392404
</ui5-list>
393405

‎packages/main/test/pages/Input_quickview.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
99

1010
<script>// delete Document.prototype.adoptedStyleSheets;</script>
11-
<link rel="stylesheet" type="text/css" href="./styles/Input_quickview.css">
11+
<link rel="stylesheet" type="text/css" href="./styles/Input_quickview.css">
1212
</head>
1313

1414
<body class="input_quickview1auto">
@@ -47,9 +47,9 @@ <h1> Quick View sample</h1>
4747
<ui5-li>OData API Audit</ui5-li>
4848
</ui5-li-group>
4949
<ui5-li-group header-text="Products">
50-
<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo</ui5-li>
51-
<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">IPhone 3</ui5-li>
52-
<ui5-li image="./img/HT-1030.jpg" icon-end icon="navigation-right-arrow" description="#12331232131" additional-text="Required" additional-text-state="Negative">HP Monitor 24</ui5-li>
50+
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo</ui5-li>
51+
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">IPhone 3</ui5-li>
52+
<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131" additional-text="Required" additional-text-state="Negative">HP Monitor 24</ui5-li>
5353
</ui5-li-group>
5454
</ui5-list>
5555
</ui5-popover>
@@ -95,9 +95,9 @@ <h1> Test Quick View sample</h1>
9595
<ui5-li>OData API Audit</ui5-li>
9696
</ui5-li-group>
9797
<ui5-li-group header-text="Products">
98-
<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo</ui5-li>
99-
<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">IPhone 3</ui5-li>
100-
<ui5-li image="./img/HT-1030.jpg" icon-end icon="navigation-right-arrow" description="#12331232131" additional-text="Required" additional-text-state="Negative">HP Monitor 24</ui5-li>
98+
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo</ui5-li>
99+
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">IPhone 3</ui5-li>
100+
<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131" additional-text="Required" additional-text-state="Negative">HP Monitor 24</ui5-li>
101101
</ui5-li-group>
102102
</ui5-list>
103103
</ui5-popover>

‎packages/main/test/pages/Kitchen.html

+36-6
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010

1111
<link rel="stylesheet" type="text/css" href="./styles/Kitchen.css">
1212

13+
<style>
14+
[ui5-avatar] img {
15+
object-fit: contain;
16+
}
17+
</style>
18+
1319
<!--
1420
<link rel="stylesheet" type="text/css" href="./css/css_variables.css">
1521
-->
@@ -90,9 +96,21 @@
9096
</ui5-card-header>
9197

9298
<ui5-list id="myList12" separators="Inner">
93-
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Java EE</ui5-li>
94-
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Maven</ui5-li>
95-
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Cloud computing</ui5-li>
99+
<ui5-li icon="source-code" icon-end>Java EE
100+
<ui5-avatar slot="image" shape="Square">
101+
<img src="./img/HT-1030.jpg" alt="Woman image">
102+
</ui5-avatar>
103+
</ui5-li>
104+
<ui5-li icon="source-code" icon-end>Maven
105+
<ui5-avatar slot="image" shape="Square">
106+
<img src="./img/HT-1030.jpg" alt="Woman image">
107+
</ui5-avatar>
108+
</ui5-li>
109+
<ui5-li icon="source-code" icon-end>Cloud computing
110+
<ui5-avatar slot="image" shape="Square">
111+
<img src="./img/HT-1030.jpg" alt="Woman image">
112+
</ui5-avatar>
113+
</ui5-li>
96114
</ui5-list>
97115
</ui5-card>
98116
<ui5-card
@@ -102,9 +120,21 @@
102120
</ui5-card-header>
103121

104122
<ui5-list id="myList12" separators="Inner">
105-
<ui5-li image="./img/HT-1030.jpg" icon="source-code">C/C++</ui5-li>
106-
<ui5-li image="./img/HT-1030.jpg" icon="source-code">Phyton</ui5-li>
107-
<ui5-li image="./img/HT-1030.jpg" icon="source-code">Node JS</ui5-li>
123+
<ui5-li icon="source-code">C/C++
124+
<ui5-avatar slot="image" shape="Square">
125+
<img src="./img/HT-1030.jpg" alt="Woman image">
126+
</ui5-avatar>
127+
</ui5-li>
128+
<ui5-li icon="source-code">Phyton
129+
<ui5-avatar slot="image" shape="Square">
130+
<img src="./img/HT-1030.jpg" alt="Woman image">
131+
</ui5-avatar>
132+
</ui5-li>
133+
<ui5-li icon="source-code">Node JS
134+
<ui5-avatar slot="image" shape="Square">
135+
<img src="./img/HT-1030.jpg" alt="Woman image">
136+
</ui5-avatar>
137+
</ui5-li>
108138
</ui5-list>
109139
</ui5-card>
110140
<ui5-card

‎packages/main/test/pages/Kitchen.openui5.html

+37-7
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,13 @@
3131
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
3232

3333

34-
<link rel="stylesheet" type="text/css" href="./styles/Kitchen.openui5.css">
34+
<link rel="stylesheet" type="text/css" href="./styles/Kitchen.openui5.css">
35+
36+
<style>
37+
[ui5-avatar] img {
38+
object-fit: contain;
39+
}
40+
</style>
3541
</head>
3642

3743
<body class="kitchen_openui51auto">
@@ -85,9 +91,21 @@
8591
</ui5-card-header>
8692

8793
<ui5-list id="myList12" separators="Inner">
88-
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Java EE</ui5-li>
89-
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Maven</ui5-li>
90-
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Cloud computing</ui5-li>
94+
<ui5-li icon="source-code" icon-end>Java EE
95+
<ui5-avatar slot="image" shape="Square">
96+
<img src="./img/HT-1030.jpg" alt="Woman image">
97+
</ui5-avatar>
98+
</ui5-li>
99+
<ui5-li icon="source-code" icon-end>Maven
100+
<ui5-avatar slot="image" shape="Square">
101+
<img src="./img/HT-1030.jpg" alt="Woman image">
102+
</ui5-avatar>
103+
</ui5-li>
104+
<ui5-li icon="source-code" icon-end>Cloud computing
105+
<ui5-avatar slot="image" shape="Square">
106+
<img src="./img/HT-1030.jpg" alt="Woman image">
107+
</ui5-avatar>
108+
</ui5-li>
91109
</ui5-list>
92110
</ui5-card>
93111
<ui5-card
@@ -97,9 +115,21 @@
97115
</ui5-card-header>
98116

99117
<ui5-list id="myList12" separators="Inner">
100-
<ui5-li image="./img/HT-1030.jpg" icon="source-code">C/C++</ui5-li>
101-
<ui5-li image="./img/HT-1030.jpg" icon="source-code">Phyton</ui5-li>
102-
<ui5-li image="./img/HT-1030.jpg" icon="source-code">Node JS</ui5-li>
118+
<ui5-li icon="source-code">C/C++
119+
<ui5-avatar slot="image" shape="Square">
120+
<img src="./img/HT-1030.jpg" alt="Woman image">
121+
</ui5-avatar>
122+
</ui5-li>
123+
<ui5-li icon="source-code">Phyton
124+
<ui5-avatar slot="image" shape="Square">
125+
<img src="./img/HT-1030.jpg" alt="Woman image">
126+
</ui5-avatar>
127+
</ui5-li>
128+
<ui5-li icon="source-code">Node JS
129+
<ui5-avatar slot="image" shape="Square">
130+
<img src="./img/HT-1030.jpg" alt="Woman image">
131+
</ui5-avatar>
132+
</ui5-li>
103133
</ui5-list>
104134
</ui5-card>
105135
<ui5-card

0 commit comments

Comments
 (0)