feat(ui5-radiobutton): introduce wrap property (#1006)

SAP · Dec 9, 2019 · 99dd6c4 · 99dd6c4
1 parent 9d0fee2
commit 99dd6c4
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 22 deletions.
diff --git a/packages/main/src/RadioButton.hbs b/packages/main/src/RadioButton.hbs
@@ -20,8 +20,8 @@
  		<input type='radio' ?checked="{{selected}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
 	</div>
 
-	{{#if _label.text}}
-		<ui5-label id="{{_id}}-label" class="labelInRadioButton" for="{{_id}}">{{_label.text}}</ui5-label>
+	{{#if text}}
+		<ui5-label id="{{_id}}-label" class="ui5-radio-label" for="{{_id}}" ?wrap="{{wrap}}">{{text}}</ui5-label>
 	{{/if}}
 
 	{{#if hasValueState}}

diff --git a/packages/main/src/RadioButton.js b/packages/main/src/RadioButton.js
@@ -141,8 +141,17 @@ const metadata = {
 			type: String,
 		},
 
-		_label: {
-			type: Object,
+		/**
+		 * Defines whether the <code>ui5-radiobutton</code> text wraps when there is not enough space.
+		 * <br><br>
+		 * <b>Note:</b> By default, the text truncates when there is not enough space.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		wrap: {
+			type: Boolean,
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
@@ -209,7 +218,6 @@ class RadioButton extends UI5Element {
 	constructor() {
 		super();
 
-		this._label = {};
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
@@ -239,17 +247,11 @@ class RadioButton extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		this.syncLabel();
 		this.syncGroup();
 
 		this._enableFormSupport();
 	}
 
-	syncLabel() {
-		this._label = Object.assign({}, this._label);
-		this._label.text = this.text;
-	}
-
 	syncGroup() {
 		const oldGroup = this._name;
 		const currentGroup = this.name;

diff --git a/packages/main/src/themes/RadioButton.css b/packages/main/src/themes/RadioButton.css
@@ -84,6 +84,7 @@
 }
 
 .ui5-radio-root {
+	height: 2.75rem;
 	position: relative;
 	display: flex;
 	flex-wrap: nowrap;
@@ -112,19 +113,29 @@
 }
 
 /* Label */
-ui5-label.labelInRadioButton {
+ui5-label.ui5-radio-label {
+	display: flex;
+	align-items: center;
 	width: calc(100% - 2.75rem);
 	padding-right: 1px;
 	vertical-align: top;
-	height: 2.75rem;
-	line-height: 2.75rem;
 	cursor: default;
 	max-width: 100%;
 	text-overflow: ellipsis;
 	overflow: hidden;
 	pointer-events: none;
 }
 
+:host([wrap][text]) .ui5-radio-root {
+	height: auto;
+}
+
+:host([wrap][text]) ui5-label.ui5-radio-label {
+	padding-bottom: .875rem;
+	padding-top: .875rem;
+	word-break: break-all;
+}
+
 /* SVG */
 .ui5-radio-svg {
 	height: 2.75rem;
@@ -145,6 +156,15 @@ ui5-label.labelInRadioButton {
 	height : 2rem;
 }
 
+:host([data-ui5-compact-size][wrap][text]) .ui5-radio-root {
+	height: auto;
+}
+
+:host([data-ui5-compact-size][wrap][text]) ui5-label.ui5-radio-label {
+	padding-top: .5rem;
+	padding-bottom: .5rem;
+}
+
 :host([data-ui5-compact-size]) .ui5-radio-root:focus:before {
 	top: .375rem;
 	bottom: .375rem;
@@ -167,12 +187,9 @@ ui5-label.labelInRadioButton {
 :host([data-ui5-compact-size]) .ui5-radio-root .ui5-radio-inner .ui5-radio-svg {
 	height: 2rem;
 	width: 2rem;
-	line-height: 2rem;
 }
 
-:host([data-ui5-compact-size]) .ui5-radio-root ui5-label.labelInRadioButton {
-	line-height: 2rem;
-	height: 2rem;
+:host([data-ui5-compact-size]) .ui5-radio-root ui5-label.ui5-radio-label {
 	width: calc(100% - 2rem + 1px);
 }
 

diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html
@@ -25,12 +25,15 @@
 	</style>
 </head>
 
-<body>
-	<h1>ui5-radiobutton</h1>
+<body style="background: var(--sapBackgroundColorDefault);">
+	<ui5-title level="H1">ui5-radiobutton</ui5-title>
 	<ui5-radiobutton id="rb1"></ui5-radiobutton>
 	<ui5-radiobutton id="rb2" text="Option B"></ui5-radiobutton>
-	<ui5-radiobutton id="rb3" text="Option C"></ui5-radiobutton>
+	<ui5-radiobutton id="rb3" wrap 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-input id="field"></ui5-input>
 
@@ -75,7 +78,7 @@ <h1>ui5-radiobutton</h1>
 
 	<p>*Params</p>
 	<p>
-		<ui5-label>- for compact use 'sap-ui-xx-wc-size-compact=true'</ui5-label>
+		<ui5-label>- for compact use 'sap-ui-compactSize=true'</ui5-label>
 	</p>
 	<p>
 		<ui5-label>- for belize use 'sap-ui-theme=sap_belize'</ui5-label>

diff --git a/packages/main/test/samples/RadioButton.sample.html b/packages/main/test/samples/RadioButton.sample.html
@@ -66,6 +66,18 @@ <h3>RadioButton in group - navigate via [UP/Right] and [DOWN/Left] arrow keys</h
 	</xmp></pre>
 </section>
 
+<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>
+	</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>
+	</xmp></pre>
+</section>
+
 <script>
 	radioGroup.addEventListener("select", function(e) {
 		lblRadioGroup.innerHTML = e.target.text;

diff --git a/packages/main/test/specs/RadioButton.spec.js b/packages/main/test/specs/RadioButton.spec.js
@@ -115,4 +115,19 @@ describe("RadioButton general interaction", () => {
 		assert.equal(lblSelectedRadio.getHTML(false), radioButtonToBeSelected.getProperty("text"), "The correct radio is selected");
 	});
 
+	it("tests truncating and wrapping", () => {
+		const truncatingRb = browser.$("#truncatingRb");
+		const wrappingRb = browser.$("#wrappingRb");
+		const RADIOBUTTON_DEFAULT_HEIGHT = 44;
+
+		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.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);
+	});
+
 });