refactor(ui5-radiobutton): set compact via CSS (#1139)

Reuse same SVG mark up for both "compact and "cozy" content densities and apply corresponding differences in size via CSS only and remove all current JS calculations.

packages/main/src/RadioButton.hbs

@@ -14,8 +14,8 @@
 
 	<div class='ui5-radio-inner {{classes.inner}}'>
 		<svg class="ui5-radio-svg" focusable="false" aria-hidden="true">
-			<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" />
+			<circle class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
+			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" r="22%" />
 		</svg>
  		<input type='radio' ?checked="{{selected}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
 	</div>

packages/main/src/RadioButton.js

@@ -1,5 +1,4 @@
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
-import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
@@ -167,21 +166,6 @@ const metadata = {
 	invalidateOnContentDensityChange: true,
 };
 
-const SVGConfig = {
-	"compact": {
-		x: 16,
-		y: 16,
-		rInner: 3,
-		rOuter: 8,
-	},
-	"default": {
-		x: 22,
-		y: 22,
-		rInner: 5,
-		rOuter: 11,
-	},
-};
-
 /**
  * @class
  *
@@ -404,10 +388,6 @@ class RadioButton extends UI5Element {
 		return this.valueState === "None" ? "1" : "2";
 	}
 
-	get circle() {
-		return getCompactSize() ? SVGConfig.compact : SVGConfig.default;
-	}
-
 	get rtl() {
 		return getRTL() ? "rtl" : undefined;
 	}

packages/main/src/themes/RadioButton.css

@@ -5,6 +5,7 @@
 }
 
 :host {
+	min-width: var(--_ui5_radiobutton_min_width);
 	max-width: 100%;
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -62,22 +63,27 @@
 	fill: var(--sapField_ReadOnly_Background);
 	stroke: var(--sapField_ReadOnly_BorderColor);
 }
+/* State */
+:host([value-state="Error"]) .ui5-radio-svg-outer,
+:host([value-state="Warning"]) .ui5-radio-svg-outer {
+	stroke-width: 2;
+}
 
 /* Error state */
-:host([value-state="Error"][selected]) .ui5-radio-root .ui5-radio-svg-inner {
+:host([value-state="Error"][selected]) .ui5-radio-svg-inner {
 	fill: var(--_ui5_radiobutton_selected_error_fill);
 }
-:host([value-state="Error"]) .ui5-radio-root .ui5-radio-svg-outer,
+:host([value-state="Error"]) .ui5-radio-svg-outer,
 :host([value-state="Error"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
 	stroke: var(--sapField_InvalidColor);
 	fill: var(--sapField_InvalidBackground);
 }
 
 /* Warning state */
-:host([value-state="Warning"][selected]) .ui5-radio-root .ui5-radio-svg-inner {
+:host([value-state="Warning"][selected]) .ui5-radio-svg-inner {
 	fill: var(--_ui5_radiobutton_selected_warning_fill);
 }
-:host([value-state="Warning"]) .ui5-radio-root .ui5-radio-svg-outer,
+:host([value-state="Warning"]) .ui5-radio-svg-outer,
 :host([value-state="Warning"]) .ui5-radio-root:hover .ui5-radio-inner.ui5-radio-inner--hoverable:hover .ui5-radio-svg-outer {
 	stroke: var(--sapField_WarningColor);
 	fill: var(--sapField_WarningBackground);
@@ -99,22 +105,29 @@
 
 /* Inner */
 .ui5-radio-inner {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
 	width: 2.75rem;
 	height: 2.75rem;
 	font-size: 1rem; /* override font size of the message dialog */
 	pointer-events: none;
 	vertical-align: top;
-	display: inline-block;
 }
 
 .ui5-radio-inner:focus {
 	outline: none;
 }
 
 .ui5-radio-inner input {
-	margin: 0; /* FF puts margin */
+	-webkit-appearance: none;
 	visibility: hidden;
 	width: 0;
+	left: 0;
+	position: absolute;
+	font-size: inherit;
+	margin: 0; /* FF puts margin */
 }
 
 /* Label */
@@ -143,21 +156,32 @@ ui5-label.ui5-radio-label {
 
 /* SVG */
 .ui5-radio-svg {
-	height: 2.75rem;
-	width: 2.75rem;
+	height: 1.375rem;
+	width: 1.375rem;
+	overflow: visible;
 	pointer-events: none;
 }
 
-.ui5-radio-svg .ui5-radio-svg-outer {
+.ui5-radio-svg-outer {
 	fill: var(--sapField_Background);
 	stroke: currentColor;
+	stroke-width: 1;
 }
 
-.ui5-radio-svg .ui5-radio-svg-inner {
+.ui5-radio-svg-inner {
 	fill: none;
 }
 
+.ui5-radio-svg-outer,
+.ui5-radio-svg-inner {
+	flex-shrink: 0;
+}
+
 /* Compact size */
+:host([data-ui5-compact-size]) {
+	min-width: var(--_ui5_radiobutton_min_width_compact);
+}
+
 :host([data-ui5-compact-size]) .ui5-radio-root {
 	height : 2rem;
 }
@@ -166,6 +190,11 @@ ui5-label.ui5-radio-label {
 	height: auto;
 }
 
+:host([data-ui5-compact-size]) .ui5-radio-svg {
+	height: 1rem;
+	width: 1rem;
+}
+
 :host([data-ui5-compact-size][wrap][text]) ui5-label.ui5-radio-label {
 	padding-top: .5rem;
 	padding-bottom: .5rem;
@@ -190,11 +219,6 @@ ui5-label.ui5-radio-label {
 	justify-content: center;
 }
 
-:host([data-ui5-compact-size]) .ui5-radio-root .ui5-radio-inner .ui5-radio-svg {
-	height: 2rem;
-	width: 2rem;
-}
-
 :host([data-ui5-compact-size]) .ui5-radio-root ui5-label.ui5-radio-label {
 	width: calc(100% - 2rem + 1px);
 }
@@ -214,4 +238,4 @@ ui5-label.ui5-radio-label {
 /* ListItem Context */
 :host(.ui5-li-singlesel-radiobtn) .ui5-radio-root .ui5-radio-inner .ui5-radio-svg-outer {
 	fill: var(--sapList_Background);
-}
+}

packages/main/src/themes/base/RadioButton-parameters.css

@@ -1,4 +1,6 @@
 :root {
+	--_ui5_radiobutton_min_width: 2.75rem;
+	--_ui5_radiobutton_min_width_compact: 2rem;
 	--_ui5_radiobutton_hover_fill: var(--sapField_Hover_Background);
 	--_ui5_radiobutton_border_width: 1px;
 	--_ui5_radiobutton_selected_fill: var(--sapSelectedColor);