Skip to content

Commit cb34e96

Browse files
ilhan007ilhan007
authored
refactor(ui5-li-custom): provide min-width for multiple and single selection components (#197)
1 parent 037409d commit cb34e96

File tree

9 files changed

+78
-23
lines changed

9 files changed

+78
-23
lines changed

‎packages/main/entries-less.esm.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ import "./src/themes/sap_belize/CalendarHeader.less";
1818
import "./src/themes/sap_belize_hcb/CalendarHeader.less";
1919
import "./src/themes/sap_fiori_3/CalendarHeader.less";
2020

21+
import "./src/themes/sap_belize/CustomListItem.less";
22+
import "./src/themes/sap_belize_hcb/CustomListItem.less";
23+
import "./src/themes/sap_fiori_3/CustomListItem.less";
24+
2125
import "./src/themes/sap_belize/DatePicker.less";
2226
import "./src/themes/sap_belize_hcb/DatePicker.less";
2327
import "./src/themes/sap_fiori_3/DatePicker.less";

‎packages/main/src/CustomListItem.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
import Bootstrap from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/Bootstrap";
2+
import ShadowDOM from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM";
23
import ListItem from "./ListItem";
34
import CustomListItemTemplateContext from "./CustomListItemTemplateContext";
45
import CustomListItemRenderer from "./build/compiled/CustomListItemRenderer.lit";
56

7+
import belize from "./themes/sap_belize/CustomListItem.less";
8+
import belizeHcb from "./themes/sap_belize_hcb/CustomListItem.less";
9+
import fiori3 from "./themes/sap_fiori_3/CustomListItem.less";
10+
11+
ShadowDOM.registerStyle("sap_belize", "CustomListItem.css", belize);
12+
ShadowDOM.registerStyle("sap_belize_hcb", "CustomListItem.css", belizeHcb);
13+
ShadowDOM.registerStyle("sap_fiori_3", "CustomListItem.css", fiori3);
14+
615
/**
716
* @public
817
*/
@@ -11,6 +20,7 @@ const metadata = {
1120
styleUrl: [
1221
"ListItemBase.css",
1322
"ListItem.css",
23+
"CustomListItem.css",
1424
],
1525
defaultSlot: "content",
1626
slots: /** @lends sap.ui.webcomponents.main.CustomListItem.prototype */ {

‎packages/main/src/ListItem.hbs‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,15 @@
2929
{{#if modeSingleSelect}}
3030
<ui5-radiobutton
3131
id="{{ctr._id}}-singleSelectionControl"
32-
class="radioButtonInListItem"
32+
class="singleSelectionRadioButton"
3333
selected="{{ctr.selected}}">
3434
</ui5-radiobutton>
3535
{{/if}}
3636

3737
{{#if modeMultiSelect}}
3838
<ui5-checkbox
3939
id="{{ctr._id}}-multiSelectionControl"
40+
class="multiSelectionCheckBox"
4041
checked="{{ctr.selected}}">
4142
</ui5-checkbox>
4243
{{/if}}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* =============================== */
2+
/* CSS for ui5-li-custom */
3+
/* Base theme */
4+
/* =============================== */
5+
:host(ui5-li-custom) .sap-phone .sapMLIB {
6+
outline: none;
7+
}
8+
9+
:host(ui5-li-custom) {
10+
display: block;
11+
}
12+
13+
ui5-li-custom {
14+
display: block;
15+
}
16+
17+
ui5-li-custom .sap-phone .sapMLIB {
18+
outline: none;
19+
}
20+
21+
.sapMLIB.sapMCustomLI {
22+
padding: 0;
23+
}
24+
25+
ui5-checkbox.multiSelectionCheckBox,
26+
ui5-radiobutton.singleSelectionRadioButton {
27+
min-width: 3rem;
28+
}
29+
30+
.sapUiSizeCompact ui5-checkbox.multiSelectionCheckBox,
31+
.sapUiSizeCompact ui5-radiobutton.singleSelectionRadioButton {
32+
min-width: 2rem;
33+
}

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

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,30 +19,14 @@
1919
outline: none;
2020
}
2121

22-
:host(ui5-li-custom) .sap-phone .sapMLIB {
23-
outline: none;
24-
}
25-
26-
:host(ui5-li-custom) {
27-
display: block;
28-
}
29-
3022
ui5-li {
3123
display: block;
3224
}
3325

34-
ui5-li-custom {
35-
display: block;
36-
}
37-
3826
ui5-li .sap-phone .sapMLIB {
3927
outline: none;
4028
}
4129

42-
ui5-li-custom .sap-phone .sapMLIB {
43-
outline: none;
44-
}
45-
4630
.sapMLIB {
4731
position: relative;
4832
display: flex;
@@ -53,10 +37,6 @@ ui5-li-custom .sap-phone .sapMLIB {
5337
box-sizing: border-box;
5438
}
5539

56-
.sapMLIB.sapMCustomLI {
57-
padding: 0;
58-
}
59-
6040
.sapMLIBHoverable:hover {
6141
background : @sapUiListHoverBackground;
6242
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,10 +207,10 @@ span[dir="rtl"].sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before {
207207
}
208208

209209
/* ListItem Context */
210-
:host(ui5-radiobutton.radioButtonInListItem) .sapMRb .sapMRbInner .sapMRbSvgOuter {
210+
:host(ui5-radiobutton.singleSelectionRadioButton) .sapMRb .sapMRbInner .sapMRbSvgOuter {
211211
fill: @sapUiListBackground;
212212
}
213213

214-
ui5-radiobutton.radioButtonInListItem .sapMRb .sapMRbInner .sapMRbSvgOuter {
214+
ui5-radiobutton.singleSelectionRadioButton .sapMRb .sapMRbInner .sapMRbSvgOuter {
215215
fill: @sapUiListBackground;
216216
}

‎packages/main/src/themes/sap_belize/CustomListItem.less‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* ============================= */
2+
/* Base theme */
3+
/* ============================= */
4+
@import "../base/CustomListItem.less";
5+
6+
/* =============================== */
7+
/* CSS for ui5-li-custom */
8+
/* Belize theme */
9+
/* =============================== */

‎packages/main/src/themes/sap_belize_hcb/CustomListItem.less‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* ============================= */
2+
/* Base theme */
3+
/* ============================= */
4+
@import "../base/CustomListItem.less";
5+
6+
/* =============================== */
7+
/* CSS for ui5-li-custom */
8+
/* Belize HCB theme */
9+
/* =============================== */

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* ============================= */
2+
/* Base theme */
3+
/* ============================= */
4+
@import "../base/CustomListItem.less";
5+
6+
/* =============================== */
7+
/* CSS for ui5-li-custom */
8+
/* Fiori 3 theme */
9+
/* =============================== */

0 commit comments

Comments
 (0)