Skip to content

Commit 99dd6c4

Browse files
niyapilhan007
niyap
authored and
ilhan007
committed
feat(ui5-radiobutton): introduce wrap property (#1006)
1 parent 9d0fee2 commit 99dd6c4

File tree

6 files changed

+71
-22
lines changed

6 files changed

+71
-22
lines changed

‎packages/main/src/RadioButton.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
<input type='radio' ?checked="{{selected}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
2121
</div>
2222

23-
{{#if _label.text}}
24-
<ui5-label id="{{_id}}-label" class="labelInRadioButton" for="{{_id}}">{{_label.text}}</ui5-label>
23+
{{#if text}}
24+
<ui5-label id="{{_id}}-label" class="ui5-radio-label" for="{{_id}}" ?wrap="{{wrap}}">{{text}}</ui5-label>
2525
{{/if}}
2626

2727
{{#if hasValueState}}

‎packages/main/src/RadioButton.js

+11-9
Original file line numberDiff line numberDiff line change
@@ -141,8 +141,17 @@ const metadata = {
141141
type: String,
142142
},
143143

144-
_label: {
145-
type: Object,
144+
/**
145+
* Defines whether the <code>ui5-radiobutton</code> text wraps when there is not enough space.
146+
* <br><br>
147+
* <b>Note:</b> By default, the text truncates when there is not enough space.
148+
*
149+
* @type {boolean}
150+
* @defaultvalue false
151+
* @public
152+
*/
153+
wrap: {
154+
type: Boolean,
146155
},
147156
},
148157
events: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
@@ -209,7 +218,6 @@ class RadioButton extends UI5Element {
209218
constructor() {
210219
super();
211220

212-
this._label = {};
213221
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
214222
}
215223

@@ -239,17 +247,11 @@ class RadioButton extends UI5Element {
239247
}
240248

241249
onBeforeRendering() {
242-
this.syncLabel();
243250
this.syncGroup();
244251

245252
this._enableFormSupport();
246253
}
247254

248-
syncLabel() {
249-
this._label = Object.assign({}, this._label);
250-
this._label.text = this.text;
251-
}
252-
253255
syncGroup() {
254256
const oldGroup = this._name;
255257
const currentGroup = this.name;

‎packages/main/src/themes/RadioButton.css

+24-7
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
}
8585

8686
.ui5-radio-root {
87+
height: 2.75rem;
8788
position: relative;
8889
display: flex;
8990
flex-wrap: nowrap;
@@ -112,19 +113,29 @@
112113
}
113114

114115
/* Label */
115-
ui5-label.labelInRadioButton {
116+
ui5-label.ui5-radio-label {
117+
display: flex;
118+
align-items: center;
116119
width: calc(100% - 2.75rem);
117120
padding-right: 1px;
118121
vertical-align: top;
119-
height: 2.75rem;
120-
line-height: 2.75rem;
121122
cursor: default;
122123
max-width: 100%;
123124
text-overflow: ellipsis;
124125
overflow: hidden;
125126
pointer-events: none;
126127
}
127128

129+
:host([wrap][text]) .ui5-radio-root {
130+
height: auto;
131+
}
132+
133+
:host([wrap][text]) ui5-label.ui5-radio-label {
134+
padding-bottom: .875rem;
135+
padding-top: .875rem;
136+
word-break: break-all;
137+
}
138+
128139
/* SVG */
129140
.ui5-radio-svg {
130141
height: 2.75rem;
@@ -145,6 +156,15 @@ ui5-label.labelInRadioButton {
145156
height : 2rem;
146157
}
147158

159+
:host([data-ui5-compact-size][wrap][text]) .ui5-radio-root {
160+
height: auto;
161+
}
162+
163+
:host([data-ui5-compact-size][wrap][text]) ui5-label.ui5-radio-label {
164+
padding-top: .5rem;
165+
padding-bottom: .5rem;
166+
}
167+
148168
:host([data-ui5-compact-size]) .ui5-radio-root:focus:before {
149169
top: .375rem;
150170
bottom: .375rem;
@@ -167,12 +187,9 @@ ui5-label.labelInRadioButton {
167187
:host([data-ui5-compact-size]) .ui5-radio-root .ui5-radio-inner .ui5-radio-svg {
168188
height: 2rem;
169189
width: 2rem;
170-
line-height: 2rem;
171190
}
172191

173-
:host([data-ui5-compact-size]) .ui5-radio-root ui5-label.labelInRadioButton {
174-
line-height: 2rem;
175-
height: 2rem;
192+
:host([data-ui5-compact-size]) .ui5-radio-root ui5-label.ui5-radio-label {
176193
width: calc(100% - 2rem + 1px);
177194
}
178195

‎packages/main/test/pages/RadioButton.html

+7-4
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,15 @@
2525
</style>
2626
</head>
2727

28-
<body>
29-
<h1>ui5-radiobutton</h1>
28+
<body style="background: var(--sapBackgroundColorDefault);">
29+
<ui5-title level="H1">ui5-radiobutton</ui5-title>
3030
<ui5-radiobutton id="rb1"></ui5-radiobutton>
3131
<ui5-radiobutton id="rb2" text="Option B"></ui5-radiobutton>
32-
<ui5-radiobutton id="rb3" text="Option C"></ui5-radiobutton>
32+
<ui5-radiobutton id="rb3" wrap text="Option C"></ui5-radiobutton>
3333
<ui5-radiobutton id="rb4" disabled text="Option D"></ui5-radiobutton>
34+
<ui5-radiobutton id="truncatingRb" text="Long long long text that should truncate at some point">></ui5-radiobutton>
35+
<br/>
36+
<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>
3437

3538
<ui5-input id="field"></ui5-input>
3639

@@ -75,7 +78,7 @@ <h1>ui5-radiobutton</h1>
7578

7679
<p>*Params</p>
7780
<p>
78-
<ui5-label>- for compact use 'sap-ui-xx-wc-size-compact=true'</ui5-label>
81+
<ui5-label>- for compact use 'sap-ui-compactSize=true'</ui5-label>
7982
</p>
8083
<p>
8184
<ui5-label>- for belize use 'sap-ui-theme=sap_belize'</ui5-label>

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

+12
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,18 @@ <h3>RadioButton in group - navigate via [UP/Right] and [DOWN/Left] arrow keys</h
6666
</xmp></pre>
6767
</section>
6868

69+
<section>
70+
<h3>RadioButton with Text Wrapping</h3>
71+
<div class="snippet">
72+
<ui5-radiobutton text="ui5-radiobutton with 'wrap' set and some long text" wrap style="width:200px"></ui5-radiobutton>
73+
<ui5-radiobutton text="Another ui5-radiobutton with very long text here" wrap style="width:200px"></ui5-radiobutton>
74+
</div>
75+
<pre class="prettyprint lang-html"><xmp>
76+
<ui5-radiobutton text="ui5-radiobutton with 'wrap' set and some long text" wrap></ui5-radiobutton>
77+
<ui5-radiobutton text="Another ui5-radiobutton with very long text here" wrap></ui5-radiobutton>
78+
</xmp></pre>
79+
</section>
80+
6981
<script>
7082
radioGroup.addEventListener("select", function(e) {
7183
lblRadioGroup.innerHTML = e.target.text;

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

+15
Original file line numberDiff line numberDiff line change
@@ -115,4 +115,19 @@ describe("RadioButton general interaction", () => {
115115
assert.equal(lblSelectedRadio.getHTML(false), radioButtonToBeSelected.getProperty("text"), "The correct radio is selected");
116116
});
117117

118+
it("tests truncating and wrapping", () => {
119+
const truncatingRb = browser.$("#truncatingRb");
120+
const wrappingRb = browser.$("#wrappingRb");
121+
const RADIOBUTTON_DEFAULT_HEIGHT = 44;
122+
123+
const truncatingRbHeight = truncatingRb.getSize("height");
124+
const wrappingRbHeight = wrappingRb.getSize("height");
125+
126+
assert.ok(!truncatingRb.getProperty("wrap"), "The text should not be wrapped.");
127+
assert.ok(wrappingRb.getProperty("wrap"), "The text should be wrapped.");
128+
129+
assert.strictEqual(truncatingRbHeight, RADIOBUTTON_DEFAULT_HEIGHT, "The size of the radiobutton is : " + truncatingRbHeight);
130+
assert.ok(wrappingRbHeight > RADIOBUTTON_DEFAULT_HEIGHT, "The size of the radiobutton is more than: " + RADIOBUTTON_DEFAULT_HEIGHT);
131+
});
132+
118133
});

0 commit comments

Comments
 (0)