refactor(ui5-radiobutton): clean up styles (#684)

SAP · Jul 25, 2019 · 382386e · 382386e
1 parent 424d965
commit 382386e
Show file tree

Hide file tree

Showing 5 changed files with 203 additions and 158 deletions.
diff --git a/packages/main/src/RadioButton.hbs b/packages/main/src/RadioButton.hbs
@@ -1,4 +1,4 @@
-<div class="{{classes.main}}"
+<div class="ui5-radio-root {{classes.main}}"
 	role="radio"
 	aria-checked="{{selected}}"
 	aria-readonly="{{ariaReadonly}}"
@@ -9,10 +9,10 @@
 	dir="{{rtl}}"
 >
 
-	<div class='{{classes.inner}}'>
+	<div class='ui5-radio-inner {{classes.inner}}'>
 		<svg class="sapMRbSvg" focusable="false" aria-hidden="true">
-			<circle class="sapMRbSvgOuter" cx="{{circle.x}}" cy="{{circle.y}}" r="{{circle.rOuter}}" stroke-width="{{strokeWidth}}" fill="none" />
-			<circle class="sapMRbSvgInner" cx="{{circle.x}}" cy="{{circle.y}}" r="{{circle.rInner}}" stroke-width="10" />
+			<circle class="ui5-radio-svg-outer" cx="{{circle.x}}" cy="{{circle.y}}" r="{{circle.rOuter}}" stroke-width="{{strokeWidth}}" fill="none" />
+			<circle class="ui5-radio-svg-inner" cx="{{circle.x}}" cy="{{circle.y}}" r="{{circle.rInner}}" stroke-width="10" />
 		</svg>
  		<input type='radio' ?checked="{{selected}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
 	</div>

diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js
@@ -339,19 +339,8 @@ class RadioButton extends UI5Element {
 
 	get classes() {
 		return {
-			main: {
-				sapMRb: true,
-				sapMRbHasLabel: this.text && this.text.length > 0,
-				sapMRbSel: this.selected,
-				sapMRbDis: this.disabled,
-				sapMRbRo: this.readonly,
-				sapMRbErr: this.valueState === "Error",
-				sapMRbWarn: this.valueState === "Warning",
-				sapUiSizeCompact: getCompactSize(),
-			},
 			inner: {
-				sapMRbInner: true,
-				sapMRbHoverable: !this.disabled && !this.readonly && isDesktop(),
+				"ui5-radio-inner--hoverable": !this.disabled && !this.readonly && isDesktop(),
 			},
 		};
 	}