Skip to content

Commit 8831139

Browse files
ilhan007ilhan007
authored
fix(ui5-checkbox): fix touchArea size (#448)
1 parent 88e10fe commit 8831139

File tree

4 files changed

+79
-50
lines changed

4 files changed

+79
-50
lines changed

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

+54-33
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,44 @@
44
max-width: 100%;
55
}
66

7+
/* ducplicated for IE */
78
ui5-checkbox {
89
display: inline-block;
910
overflow: hidden;
1011
max-width: 100%;
1112
}
1213

13-
span[data-sap-ui-wc-root] {
14-
display: inline-block;
15-
}
16-
1714
.ui5-checkbox-wrapper {
15+
position: relative;
16+
display: inline-flex;
17+
align-items: center;
18+
width: 100%;
1819
min-height: var(--_ui5_checkbox_width_height);
1920
min-width: var(--_ui5_checkbox_width_height);
20-
display: flex;
21-
align-items: center;
22-
padding-left: .8125rem;
23-
padding-right: 0.125rem;
21+
padding: 0 var(--_ui5_checkbox_wrapper_padding);
2422
box-sizing: border-box;
2523
outline: none;
26-
position: relative;
2724
-webkit-tap-highlight-color: rgba(0,0,0,0);
2825
}
2926

27+
.ui5-checkbox-wrapper:not(.ui5-checkbox-with-label) {
28+
justify-content: center;
29+
}
3030

3131
.ui5-checkbox-wrapper::after {
3232
content: "";
3333
min-height: inherit;
3434
font-size: 0;
3535
}
3636

37+
.ui5-checkbox-wrapper.ui5-checkbox-with-label {
38+
padding-right: 0;
39+
}
40+
41+
.ui5-checkbox-wrapper.ui5-checkbox-with-label:focus::before {
42+
right: 0;
43+
}
44+
3745
.ui5-checkbox-wrapper.ui5-checkbox-with-label.ui5-checkbox--wrap {
3846
min-height: auto;
3947
padding-top: .6875rem;
@@ -47,10 +55,6 @@ span[data-sap-ui-wc-root] {
4755
margin-top: var(--_ui5_checkbox_wrapped_content_margin_top);
4856
}
4957

50-
.sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox-with-label.ui5-checkbox--wrap .ui5-checkbox-label {
51-
margin-top: var(--_ui5_checkbox_compact_wrapped_label_margin_top);
52-
}
53-
5458
.ui5-checkbox--disabled {
5559
opacity: .5;
5660
}
@@ -101,21 +105,17 @@ span[data-sap-ui-wc-root] {
101105
.ui5-checkbox-wrapper:focus::before {
102106
content: "";
103107
position: absolute;
104-
top: var(--_ui5_checkbox_focus_left_top_bottom_position);
105-
left: .6875rem;
106-
right: 0px;
107-
bottom: var(--_ui5_checkbox_focus_left_top_bottom_position);
108+
top: var(--_ui5_checkbox_focus_position);
109+
left: var(--_ui5_checkbox_focus_position);
110+
right: var(--_ui5_checkbox_focus_position);
111+
bottom: var(--_ui5_checkbox_focus_position);
108112
border: var(--_ui5_checkbox_focus_outline);
109113
}
110114

111115
.ui5-checkbox-wrapper.ui5-checkbox--wrap:focus::before {
112116
bottom: var(--_ui5_checkbox_wrapped_focus_left_top_bottom_position);
113117
}
114118

115-
.ui5-checkbox-wrapper:not(.ui5-checkbox-with-label):focus::before {
116-
right: var(--_ui5_checkbox_no_label_focus_right);
117-
}
118-
119119
.ui5-checkbox-inner {
120120
display: flex;
121121
justify-content: center;
@@ -161,7 +161,7 @@ span[data-sap-ui-wc-root] {
161161
}
162162

163163
.ui5-checkbox-wrapper .ui5-checkbox-label {
164-
margin-left: .8125rem;
164+
margin-left: var(--_ui5_checkbox_wrapper_padding);
165165
cursor: default;
166166
text-overflow: ellipsis;
167167
overflow: hidden;
@@ -172,9 +172,11 @@ span[data-sap-ui-wc-root] {
172172
-webkit-user-select: none;
173173
}
174174

175+
/* Compact */
175176
.sapUiSizeCompact .ui5-checkbox-wrapper {
176177
min-height: var(--_ui5_checkbox_compact_width_height);
177178
min-width: var(--_ui5_checkbox_compact_width_height);
179+
padding: 0 var(--_ui5_checkbox_compact_wrapper_padding);
178180
}
179181

180182
.sapUiSizeCompact .ui5-checkbox-inner {
@@ -183,37 +185,56 @@ span[data-sap-ui-wc-root] {
183185
max-width: var(--_ui5_checkbox_compact_inner_size);
184186
min-width: var(--_ui5_checkbox_compact_inner_size);
185187
font-size: .625rem;
186-
border-radius: 0;
187188
}
188189

189190
.sapUiSizeCompact .ui5-checkbox-wrapper:focus::before {
190-
top: var(--_ui5_checkbox_compact_focus_left_top_bottom_position);
191-
left: .6875rem;
192-
right: 0px;
193-
bottom: var(--_ui5_checkbox_compact_focus_left_top_bottom_position);
191+
top: var(--_ui5_checkbox_compact_focus_position);
192+
left: var(--_ui5_checkbox_compact_focus_position);
193+
right: var(--_ui5_checkbox_compact_focus_position);
194+
bottom: var(--_ui5_checkbox_compact_focus_position);
194195
border: var(--_ui5_checkbox_focus_outline);
195196
}
196197

197-
.sapUiSizeCompact .ui5-checkbox-wrapper:not(.ui5-checkbox-with-label):focus::before {
198-
right: var(--_ui5_checkbox_compact_no_label_focus_right);
199-
}
200-
201198
.sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox-with-label.ui5-checkbox--wrap {
202199
min-height: auto;
203200
padding-top: var(--_ui5_checkbox_wrapped_focus_padding);
204201
padding-bottom: var(--_ui5_checkbox_wrapped_focus_padding);
205202
}
206203

204+
.sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox-with-label.ui5-checkbox--wrap .ui5-checkbox-label {
205+
margin-top: var(--_ui5_checkbox_compact_wrapped_label_margin_top);
206+
}
207+
207208
.sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox--wrap:focus::before {
208-
bottom: var(--_ui5_checkbox_compact_wrapped_focus_left_top_bottom_position);
209+
bottom: var(--_ui5_checkbox_compact_focus_position);
209210
}
210211

211212
.sapUiSizeCompact .ui5-checkbox-wrapper .ui5-checkbox-label {
213+
margin-left: var(--_ui5_checkbox_compact_wrapper_padding);
212214
width: calc(100% - .8125rem - var(--_ui5_checkbox_compact_inner_size));
213215
}
214216

217+
/* RTL */
218+
span[dir="rtl"] .ui5-checkbox-wrapper.ui5-checkbox-with-label {
219+
padding-left: 0;
220+
padding-right: var(--_ui5_checkbox_wrapper_padding);
221+
}
222+
223+
span[dir="rtl"] .ui5-checkbox-wrapper.ui5-checkbox-with-label:focus::before {
224+
left: 0;
225+
right: var(--_ui5_checkbox_focus_position);
226+
}
215227

216228
span[dir="rtl"] .ui5-checkbox-wrapper .ui5-checkbox-label {
217229
margin-left: 0;
218-
margin-right: .8125rem;
230+
margin-right: var(--_ui5_checkbox_compact_wrapper_padding);
231+
}
232+
233+
/* RTL + Compact */
234+
span[dir="rtl"].sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox-with-label {
235+
padding-right: var(--_ui5_checkbox_compact_wrapper_padding);
236+
}
237+
238+
span[dir="rtl"].sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox-with-label:focus::before {
239+
right: var(--_ui5_checkbox_compact_focus_position);
219240
}

‎packages/main/src/themes/base/CheckBox-parameters.css

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
:root {
2+
--_ui5_checkbox_wrapper_padding: .8125rem;
23
--_ui5_checkbox_width_height: 3rem;
3-
--_ui5_checkbox_compact_width_height: 2rem;
44
--_ui5_checkbox_hover_background: var(--sapUiFieldHoverBackground);
55
--_ui5_checkbox_inner_width_height: 1.375rem;
66
--_ui5_checkbox_inner_border: solid .125rem var(--sapUiFieldBorderColor);
@@ -10,15 +10,14 @@
1010
--_ui5_checkbox_inner_readonly_border: 0.125rem solid var(--sapUiFieldReadOnlyBorderColor);
1111
--_ui5_checkbox_checkmark_warning_color: var(--sapUiFieldWarningColorDarken100);
1212
--_ui5_checkbox_checkmark_color: var(--sapUiSelected);
13-
--_ui5_checkbox_focus_left_top_bottom_position: .6875rem;
14-
--_ui5_checkbox_compact_no_label_focus_right: 1px;
15-
--_ui5_checkbox_no_label_focus_right: .6875rem;
16-
--_ui5_checkbox_focus_outline: 1px dotted var(--sapUiContentFocusColor);
17-
--_ui5_checkbox_compact_inner_size: 1rem;
18-
--_ui5_checkbox_compact_focus_left_top_bottom_position: .375rem;
19-
--_ui5_checkbox_wrapped_content_margin_top: 0.125rem;
2013
--_ui5_checkbox_wrapped_focus_padding: .375rem;
14+
--_ui5_checkbox_wrapped_content_margin_top: .125rem;
2115
--_ui5_checkbox_wrapped_focus_left_top_bottom_position: .5625rem;
22-
--_ui5_checkbox_compact_wrapped_focus_left_top_bottom_position: .4375rem;
16+
--_ui5_checkbox_focus_position: .6875rem;
17+
--_ui5_checkbox_focus_outline: 1px dotted var(--sapUiContentFocusColor);
18+
--_ui5_checkbox_compact_wrapper_padding: .5rem;
19+
--_ui5_checkbox_compact_width_height: 2rem;
20+
--_ui5_checkbox_compact_inner_size: 1rem;
21+
--_ui5_checkbox_compact_focus_position: .375rem;
2322
--_ui5_checkbox_compact_wrapped_label_margin_top: -1px;
2423
}

‎packages/main/src/themes/sap_fiori_3/CheckBox-parameters.css

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
@import "../base/CheckBox-parameters.css";
22

33
:root {
4+
--_ui5_checkbox_wrapper_padding: .6875rem;
45
--_ui5_checkbox_width_height: 2.75rem;
56
--_ui5_checkbox_inner_border: .0625rem solid var(--sapUiFieldBorderColor);
6-
--_ui5_checkbox_focus_left_top_bottom_position: .5625rem;
7-
--_ui5_checkbox_compact_focus_left_top_bottom_position: .375rem;
8-
--_ui5_checkbox_no_label_focus_right: .4375rem;
9-
--_ui5_checkbox_wrapped_content_margin_top: 0;
7+
--_ui5_checkbox_focus_position: 0.5625rem;
108
--_ui5_checkbox_inner_border_radius: .125rem;
11-
--_ui5_checkbox_compact_no_label_focus_right: 1px;
9+
--_ui5_checkbox_wrapped_content_margin_top: 0;
1210
--_ui5_checkbox_wrapped_focus_padding: .5rem;
1311
--_ui5_checkbox_inner_readonly_border: 1px solid var(--sapUiFieldReadOnlyBorderColor);
1412
--_ui5_checkbox_compact_wrapped_label_margin_top: -0.125rem;
15-
--_ui5_checkbox_compact_wrapped_focus_left_top_bottom_position: .625rem;
1613
}

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

+14-2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
1111
<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js"></script>
1212

13+
<script>delete Document.prototype.adoptedStyleSheets;</script>
14+
1315
<style>
1416
ui5-checkbox {
1517
border: 1px solid red;
@@ -19,6 +21,7 @@
1921

2022
<body>
2123
<ui5-checkbox id="cb1"></ui5-checkbox>
24+
<ui5-checkbox id="cbError" value-state="Error"></ui5-checkbox>
2225
<ui5-checkbox id="cb2" disabled></ui5-checkbox>
2326
<ui5-checkbox id="truncatingCb" text="Long long long text that should truncate at some point" style="width: 300px"></ui5-checkbox>
2427
<ui5-checkbox id="wrappingCb" text="Longest ever text written in English that have to truncate immediately because it is so long of course!" style="width: 300px"></ui5-checkbox>
@@ -28,9 +31,11 @@
2831
<ui5-checkbox></ui5-checkbox>
2932
<ui5-checkbox text="Long long long text that should truncate at some point"></ui5-checkbox>
3033
<ui5-checkbox wrap text="Longest ever text written in English that have to truncate immediately because it is so long of course!"></ui5-checkbox>
31-
</body>
3234

33-
<script>
35+
<ui5-button id="hcbButton">TUen Lights On/Off</ui5-button>
36+
37+
<script>
38+
var hcb = false;
3439
var input = document.querySelector("#field");
3540
var checkBox1 = document.querySelector("#cb1");
3641
var checkBox2 = document.querySelector("#cb2");
@@ -42,5 +47,12 @@
4247
input.value = counter;
4348
});
4449
});
50+
51+
hcbButton.addEventListener("ui5-press", function(event) {
52+
var bg = hcb ? "#fff" : "#333";
53+
hcb = !hcb;
54+
document.body.style.backgroundColor = bg;
55+
});
4556
</script>
57+
</body>
4658
</html>

0 commit comments

Comments
 (0)