fix(ui5-checkbox): fix touchArea size (#448)

SAP · May 28, 2019 · 8831139 · 8831139
1 parent 88e10fe
commit 8831139
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 50 deletions.
diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css
@@ -4,36 +4,44 @@
 	max-width: 100%;
 }
 
+/* ducplicated for IE */
 ui5-checkbox {
 	display: inline-block;
 	overflow: hidden;
 	max-width: 100%;
 }
 
-span[data-sap-ui-wc-root] {
-	display: inline-block;
-}
-
 .ui5-checkbox-wrapper {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	width: 100%;
 	min-height: var(--_ui5_checkbox_width_height);
 	min-width: var(--_ui5_checkbox_width_height);
-	display: flex;
-	align-items: center;
-	padding-left: .8125rem;
-	padding-right: 0.125rem;
+	padding: 0 var(--_ui5_checkbox_wrapper_padding);
 	box-sizing: border-box;
 	outline: none;
-	position: relative;
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
+.ui5-checkbox-wrapper:not(.ui5-checkbox-with-label) {
+	justify-content: center;
+}
 
 .ui5-checkbox-wrapper::after {
 	content: "";
 	min-height: inherit;
 	font-size: 0;
 }
 
+.ui5-checkbox-wrapper.ui5-checkbox-with-label {
+	padding-right: 0;
+}
+
+.ui5-checkbox-wrapper.ui5-checkbox-with-label:focus::before {
+	right: 0;
+}
+
 .ui5-checkbox-wrapper.ui5-checkbox-with-label.ui5-checkbox--wrap {
 	min-height: auto;
 	padding-top: .6875rem;
@@ -47,10 +55,6 @@ span[data-sap-ui-wc-root] {
 	margin-top: var(--_ui5_checkbox_wrapped_content_margin_top);
 }
 
-.sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox-with-label.ui5-checkbox--wrap .ui5-checkbox-label {
-	margin-top: var(--_ui5_checkbox_compact_wrapped_label_margin_top);
-}
-
 .ui5-checkbox--disabled {
 	opacity: .5;
 }
@@ -101,21 +105,17 @@ span[data-sap-ui-wc-root] {
 .ui5-checkbox-wrapper:focus::before {
 	content: "";
 	position: absolute;
-	top: var(--_ui5_checkbox_focus_left_top_bottom_position);
-	left: .6875rem;
-	right: 0px;
-	bottom: var(--_ui5_checkbox_focus_left_top_bottom_position);
+	top: var(--_ui5_checkbox_focus_position);
+	left: var(--_ui5_checkbox_focus_position);
+	right: var(--_ui5_checkbox_focus_position);
+	bottom: var(--_ui5_checkbox_focus_position);
 	border: var(--_ui5_checkbox_focus_outline);
 }
 
 .ui5-checkbox-wrapper.ui5-checkbox--wrap:focus::before {
 	bottom: var(--_ui5_checkbox_wrapped_focus_left_top_bottom_position);
 }
 
-.ui5-checkbox-wrapper:not(.ui5-checkbox-with-label):focus::before {
-	right: var(--_ui5_checkbox_no_label_focus_right);
-}
-
 .ui5-checkbox-inner {
 	display: flex;
 	justify-content: center;
@@ -161,7 +161,7 @@ span[data-sap-ui-wc-root] {
 }
 
 .ui5-checkbox-wrapper .ui5-checkbox-label {
-	margin-left: .8125rem;
+	margin-left: var(--_ui5_checkbox_wrapper_padding);
 	cursor: default;
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -172,9 +172,11 @@ span[data-sap-ui-wc-root] {
 	-webkit-user-select: none;
 }
 
+/* Compact */
 .sapUiSizeCompact .ui5-checkbox-wrapper {
 	min-height: var(--_ui5_checkbox_compact_width_height);
 	min-width: var(--_ui5_checkbox_compact_width_height);
+	padding: 0 var(--_ui5_checkbox_compact_wrapper_padding);
 }
 
 .sapUiSizeCompact .ui5-checkbox-inner {
@@ -183,37 +185,56 @@ span[data-sap-ui-wc-root] {
 	max-width: var(--_ui5_checkbox_compact_inner_size);
 	min-width: var(--_ui5_checkbox_compact_inner_size);
 	font-size: .625rem;
-	border-radius: 0;
 }
 
 .sapUiSizeCompact .ui5-checkbox-wrapper:focus::before {
-	top: var(--_ui5_checkbox_compact_focus_left_top_bottom_position);
-	left: .6875rem;
-	right: 0px;
-	bottom: var(--_ui5_checkbox_compact_focus_left_top_bottom_position);
+	top: var(--_ui5_checkbox_compact_focus_position);
+	left: var(--_ui5_checkbox_compact_focus_position);
+	right: var(--_ui5_checkbox_compact_focus_position);
+	bottom: var(--_ui5_checkbox_compact_focus_position);
 	border: var(--_ui5_checkbox_focus_outline);
 }
 
-.sapUiSizeCompact .ui5-checkbox-wrapper:not(.ui5-checkbox-with-label):focus::before {
-	right: var(--_ui5_checkbox_compact_no_label_focus_right);
-}
-
 .sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox-with-label.ui5-checkbox--wrap {
 	min-height: auto;
 	padding-top: var(--_ui5_checkbox_wrapped_focus_padding);
 	padding-bottom: var(--_ui5_checkbox_wrapped_focus_padding);
 }
 
+.sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox-with-label.ui5-checkbox--wrap .ui5-checkbox-label {
+	margin-top: var(--_ui5_checkbox_compact_wrapped_label_margin_top);
+}
+
 .sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox--wrap:focus::before {
-	bottom: var(--_ui5_checkbox_compact_wrapped_focus_left_top_bottom_position);
+	bottom: var(--_ui5_checkbox_compact_focus_position);
 }
 
 .sapUiSizeCompact .ui5-checkbox-wrapper .ui5-checkbox-label {
+	margin-left: var(--_ui5_checkbox_compact_wrapper_padding);
 	width: calc(100% - .8125rem - var(--_ui5_checkbox_compact_inner_size));
 }
 
+/* RTL */
+span[dir="rtl"] .ui5-checkbox-wrapper.ui5-checkbox-with-label {
+	padding-left: 0;
+	padding-right: var(--_ui5_checkbox_wrapper_padding);
+}
+
+span[dir="rtl"] .ui5-checkbox-wrapper.ui5-checkbox-with-label:focus::before {
+	left: 0;
+	right: var(--_ui5_checkbox_focus_position);
+}
 
 span[dir="rtl"] .ui5-checkbox-wrapper .ui5-checkbox-label {
 	margin-left: 0;
-	margin-right: .8125rem;
+	margin-right: var(--_ui5_checkbox_compact_wrapper_padding);
+}
+
+/* RTL + Compact */
+span[dir="rtl"].sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox-with-label {
+	padding-right: var(--_ui5_checkbox_compact_wrapper_padding);
+}
+
+span[dir="rtl"].sapUiSizeCompact .ui5-checkbox-wrapper.ui5-checkbox-with-label:focus::before {
+	right: var(--_ui5_checkbox_compact_focus_position);
 }
diff --git a/packages/main/src/themes/base/CheckBox-parameters.css b/packages/main/src/themes/base/CheckBox-parameters.css
@@ -1,6 +1,6 @@
 :root {
+--_ui5_checkbox_wrapper_padding: .8125rem;
 --_ui5_checkbox_width_height: 3rem;
---_ui5_checkbox_compact_width_height: 2rem;
 --_ui5_checkbox_hover_background: var(--sapUiFieldHoverBackground);
 --_ui5_checkbox_inner_width_height: 1.375rem;
 --_ui5_checkbox_inner_border: solid .125rem var(--sapUiFieldBorderColor);
@@ -10,15 +10,14 @@
 --_ui5_checkbox_inner_readonly_border: 0.125rem solid var(--sapUiFieldReadOnlyBorderColor);
 --_ui5_checkbox_checkmark_warning_color: var(--sapUiFieldWarningColorDarken100);
 --_ui5_checkbox_checkmark_color: var(--sapUiSelected);
---_ui5_checkbox_focus_left_top_bottom_position: .6875rem;
---_ui5_checkbox_compact_no_label_focus_right: 1px;
---_ui5_checkbox_no_label_focus_right: .6875rem;
---_ui5_checkbox_focus_outline: 1px dotted var(--sapUiContentFocusColor);
---_ui5_checkbox_compact_inner_size: 1rem;
---_ui5_checkbox_compact_focus_left_top_bottom_position: .375rem;
---_ui5_checkbox_wrapped_content_margin_top: 0.125rem;
 --_ui5_checkbox_wrapped_focus_padding: .375rem;
+--_ui5_checkbox_wrapped_content_margin_top: .125rem;
 --_ui5_checkbox_wrapped_focus_left_top_bottom_position: .5625rem;
---_ui5_checkbox_compact_wrapped_focus_left_top_bottom_position: .4375rem;
+--_ui5_checkbox_focus_position: .6875rem;
+--_ui5_checkbox_focus_outline: 1px dotted var(--sapUiContentFocusColor);
+--_ui5_checkbox_compact_wrapper_padding: .5rem;
+--_ui5_checkbox_compact_width_height: 2rem;
+--_ui5_checkbox_compact_inner_size: 1rem;
+--_ui5_checkbox_compact_focus_position: .375rem;
 --_ui5_checkbox_compact_wrapped_label_margin_top: -1px;
 }
diff --git a/packages/main/src/themes/sap_fiori_3/CheckBox-parameters.css b/packages/main/src/themes/sap_fiori_3/CheckBox-parameters.css
@@ -1,16 +1,13 @@
 @import "../base/CheckBox-parameters.css";
 
 :root {
+	--_ui5_checkbox_wrapper_padding: .6875rem;
 	--_ui5_checkbox_width_height: 2.75rem;
 	--_ui5_checkbox_inner_border: .0625rem solid var(--sapUiFieldBorderColor);
-	--_ui5_checkbox_focus_left_top_bottom_position: .5625rem;
-	--_ui5_checkbox_compact_focus_left_top_bottom_position: .375rem;
-	--_ui5_checkbox_no_label_focus_right: .4375rem;
-	--_ui5_checkbox_wrapped_content_margin_top: 0;
+	--_ui5_checkbox_focus_position: 0.5625rem;
 	--_ui5_checkbox_inner_border_radius: .125rem;
-	--_ui5_checkbox_compact_no_label_focus_right: 1px;
+	--_ui5_checkbox_wrapped_content_margin_top: 0;
 	--_ui5_checkbox_wrapped_focus_padding: .5rem;
 	--_ui5_checkbox_inner_readonly_border: 1px solid var(--sapUiFieldReadOnlyBorderColor);
 	--_ui5_checkbox_compact_wrapped_label_margin_top: -0.125rem;
-	--_ui5_checkbox_compact_wrapped_focus_left_top_bottom_position: .625rem;
 }
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/CheckBox.html b/packages/main/test/sap/ui/webcomponents/main/pages/CheckBox.html
@@ -10,6 +10,8 @@
 	<script	src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
 	<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js"></script>
 
+	<script>delete Document.prototype.adoptedStyleSheets;</script>
+
 	<style>
 		ui5-checkbox {
 			border: 1px solid red;
@@ -19,6 +21,7 @@
 
 <body>
 	<ui5-checkbox id="cb1"></ui5-checkbox>
+	<ui5-checkbox id="cbError" value-state="Error"></ui5-checkbox>
 	<ui5-checkbox id="cb2" disabled></ui5-checkbox>
 	<ui5-checkbox id="truncatingCb" text="Long long long text that should truncate at some point" style="width: 300px"></ui5-checkbox>
 	<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 @@
 	<ui5-checkbox></ui5-checkbox>
 	<ui5-checkbox text="Long long long text that should truncate at some point"></ui5-checkbox>
 	<ui5-checkbox wrap text="Longest ever text written in English that have to truncate immediately because it is so long of course!"></ui5-checkbox>
-</body>
 
-<script>
+	<ui5-button id="hcbButton">TUen Lights On/Off</ui5-button>
+
+	<script>
+		var hcb = false;
 		var input = document.querySelector("#field");
 		var checkBox1 = document.querySelector("#cb1");
 		var checkBox2 = document.querySelector("#cb2");
@@ -42,5 +47,12 @@
 				input.value = counter;
 			});
 		});
+
+		hcbButton.addEventListener("ui5-press", function(event) {
+			var bg = hcb ? "#fff" : "#333";
+			hcb = !hcb;
+			document.body.style.backgroundColor = bg;
+		});
 </script>
+</body>
 </html>