refactor(ui5-checkbox): improve styling (#199)

- fixes some tiny visual bugs - removes CheckBox.qunit.js - removes browser specific CSS
SAP · Mar 20, 2019 · 6887985 · 6887985
1 parent 2608100
commit 6887985
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 442 deletions.
diff --git a/packages/main/src/CheckBox.hbs b/packages/main/src/CheckBox.hbs
@@ -11,7 +11,7 @@
 
 		{{#if ctr._label.text}}
 		<ui5-label
-				class="sapWCLabelInCheckBox"
+				class="ui5-checkbox-label"
 				?wrap="{{ctr._label.wrap}}"
 		>{{ctr._label.text}}</ui5-label>
 		{{/if}}

diff --git a/packages/main/src/CheckBoxTemplateContext.js b/packages/main/src/CheckBoxTemplateContext.js
@@ -19,25 +19,25 @@ class CheckBoxTemplateContext {
 	}
 
 	static getMainClasses(state) {
+		const hoverable = !state.disabled && !state.readOnly && isDesktop();
+
 		return {
-			sapMCb: true,
-			sapMCbHasLabel: !!state.text,
-			sapMCbBgDis: state.disabled,
-			sapMCbRo: state.readOnly,
-			sapMCbErr: state.valueState === "Error",
-			sapMCbWarn: state.valueState === "Warning",
-			sapMCbWrapped: state.wrap,
+			"ui5-checkbox-wrapper": true,
+			"ui5-checkbox-with-label": !!state.text,
+			"ui5-checkbox--disabled": state.disabled,
+			"ui5-checkbox--readonly": state.readOnly,
+			"ui5-checkbox--error": state.valueState === "Error",
+			"ui5-checkbox--warning": state.valueState === "Warning",
+			"ui5-checkbox--wrap": state.wrap,
+			"ui5-checkbox--hoverable": hoverable,
 		};
 	}
 
 	static getInnerClasses(state) {
-		const hoverable = !state.disabled && !state.readOnly && isDesktop();
-
 		return {
-			sapMCbBg: true,
-			sapMCbHoverable: hoverable,
-			sapMCbMark: true,
-			sapMCbMarkChecked: !!state.checked,
+			"ui5-checkbox-inner": true,
+			"ui5-checkbox-inner-mark": true,
+			"ui5-checkbox-inner--checked": !!state.checked,
 		};
 	}
 }