refactor(ui5-radiobutton): replace wrap with wrappingType (#3409)

As part of #3107 we decided to replace the boolean property wrap as we expect to add a new type of wrapping (Hyphenated) and for this the string property from enum type is more suitable.

BREAKING_CHANGE: The boolean property wrap has been removed in favour of string prop wrappingType. If you previously used wrap, now set wrappingType="Normal" instead.

Author: ilhan007

packages/main/src/RadioButton.hbs

@@ -21,7 +21,7 @@
 	</div>
 
 	{{#if text}}
-		<ui5-label id="{{_id}}-label" class="ui5-radio-label" for="{{_id}}" wrapping-type="{{_wrappingType}}">{{text}}</ui5-label>
+		<ui5-label id="{{_id}}-label" class="ui5-radio-label" for="{{_id}}" wrapping-type="{{wrappingType}}">{{text}}</ui5-label>
 	{{/if}}
 
 	{{#if hasValueState}}

packages/main/src/RadioButton.js

@@ -13,8 +13,8 @@ import {
 	isRight,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import Label from "./Label.js";
-import WrappingType from "./types/WrappingType.js";
 import RadioButtonGroup from "./RadioButtonGroup.js";
+import WrappingType from "./types/WrappingType.js";
 
 // Template
 import RadioButtonTemplate from "./generated/templates/RadioButtonTemplate.lit.js";
@@ -153,14 +153,19 @@ const metadata = {
 		/**
 		 * Defines whether the component text wraps when there is not enough space.
 		 * <br><br>
-		 * <b>Note:</b> By default, the text truncates when there is not enough space.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+		 * </ul>
 		 *
-		 * @type {boolean}
-		 * @defaultvalue false
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
 		 * @public
 		 */
-		wrap: {
-			type: Boolean,
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
 		},
 
 		_tabIndex: {
@@ -260,10 +265,6 @@ class RadioButton extends UI5Element {
 	onBeforeRendering() {
 		this.syncGroup();
 
-		/* temporary workaround. remove after all wrap properties in the relevant components are renamed to wrappingType */
-		this._wrappingType = this.wrap ? WrappingType.Normal : WrappingType.None;
-		/* end */
-
 		this._enableFormSupport();
 	}
 

packages/main/src/themes/RadioButton.css

@@ -145,11 +145,11 @@
 	pointer-events: none;
 }
 
-:host([wrap][text]) .ui5-radio-root {
+:host([wrapping-type="Normal"][text]) .ui5-radio-root {
 	height: auto;
 }
 
-:host([wrap][text]) [ui5-label].ui5-radio-label {
+:host([wrapping-type="Normal"][text]) [ui5-label].ui5-radio-label {
 	padding: var(--_ui5_rb_label_side_padding) 0;
 	word-break: break-all;
 }

packages/main/test/pages/RadioButton.html

@@ -83,11 +83,11 @@
 	<section class="radio-section">
 		<ui5-radiobutton id="rb1"></ui5-radiobutton>
 		<ui5-radiobutton id="rb2" text="Option B"></ui5-radiobutton>
-		<ui5-radiobutton id="rb3" wrap text="Option C"></ui5-radiobutton>
+		<ui5-radiobutton id="rb3" wrapping-type="Normal" text="Option C"></ui5-radiobutton>
 		<ui5-radiobutton id="rb4" disabled text="Option D"></ui5-radiobutton>
 		<ui5-radiobutton id="truncatingRb" text="Long long long text that should truncate at some point">></ui5-radiobutton>
 		<br/>
-		<ui5-radiobutton id="wrappingRb" wrap text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s." style="width: 300px"></ui5-radiobutton>
+		<ui5-radiobutton id="wrappingRb" wrapping-type="Normal" text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s." style="width: 300px"></ui5-radiobutton>
 		<ui5-input id="field"></ui5-input>
 	</section>
 

packages/main/test/samples/RadioButton.sample.html

@@ -69,12 +69,12 @@ <h3>RadioButton in group - navigate via [UP/Right] and [DOWN/Left] arrow keys</h
 <section>
 	<h3>RadioButton with Text Wrapping</h3>
 	<div class="snippet">
-		<ui5-radiobutton text="ui5-radiobutton with 'wrap' set and some long text" wrap style="width:200px"></ui5-radiobutton>
-		<ui5-radiobutton text="Another ui5-radiobutton with very long text here" wrap style="width:200px"></ui5-radiobutton>
+		<ui5-radiobutton text="ui5-radiobutton with 'wrapping-type=Normal' set and some long text" wrapping-type="Normal" style="width:200px"></ui5-radiobutton>
+		<ui5-radiobutton text="Another ui5-radiobutton with very long text here" wrapping-type="Normal" style="width:200px"></ui5-radiobutton>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
-		<ui5-radiobutton text="ui5-radiobutton with 'wrap' set and some long text" wrap></ui5-radiobutton>
-		<ui5-radiobutton text="Another ui5-radiobutton with very long text here" wrap></ui5-radiobutton>
+		<ui5-radiobutton text="ui5-radiobutton with 'wrapping-type=Normal' set and some long text" wrapping-type="Normal"></ui5-radiobutton>
+		<ui5-radiobutton text="Another ui5-radiobutton with very long text here" wrapping-type="Normal"></ui5-radiobutton>
 	</xmp></pre>
 </section>
 

packages/main/test/specs/RadioButton.spec.js

@@ -150,8 +150,8 @@ describe("RadioButton general interaction", () => {
 		const truncatingRbHeight = truncatingRb.getSize("height");
 		const wrappingRbHeight = wrappingRb.getSize("height");
 
-		assert.ok(!truncatingRb.getProperty("wrap"), "The text should not be wrapped.");
-		assert.ok(wrappingRb.getProperty("wrap"), "The text should be wrapped.");
+		assert.ok(truncatingRb.getProperty("wrappingType") === "None", "The text should not be wrapped.");
+		assert.ok(wrappingRb.getProperty("wrappingType") === "Normal", "The text should be wrapped.");
 
 		assert.strictEqual(truncatingRbHeight, RADIOBUTTON_DEFAULT_HEIGHT, "The size of the radiobutton is : " + truncatingRbHeight);
 		assert.ok(wrappingRbHeight > RADIOBUTTON_DEFAULT_HEIGHT, "The size of the radiobutton is more than: " + RADIOBUTTON_DEFAULT_HEIGHT);