Skip to content

Commit 85143e9

Browse files
ilhan007ilhan007
authored
refactor(ui5-checkbox): replace wrap with wrappingType (#3403)
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.
1 parent 677d5be commit 85143e9

File tree

8 files changed

+39
-45
lines changed

8 files changed

+39
-45
lines changed

‎packages/main/src/CheckBox.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929
/>
3030
</div>
3131

32-
{{#if _label.text}}
33-
<ui5-label id="{{_id}}-label" class="ui5-checkbox-label" wrapping-type="{{_label.wrappingType}}">{{_label.text}}</ui5-label>
32+
{{#if text}}
33+
<ui5-label id="{{_id}}-label" class="ui5-checkbox-label" wrapping-type="{{wrappingType}}">{{text}}</ui5-label>
3434
{{/if}}
3535

3636
{{#if hasValueState}}

‎packages/main/src/CheckBox.js

+11-22
Original file line numberDiff line numberDiff line change
@@ -130,14 +130,19 @@ const metadata = {
130130
/**
131131
* Defines whether the component text wraps when there is not enough space.
132132
* <br><br>
133-
* <b>Note:</b> By default, the text truncates when there is not enough space.
133+
* Available options are:
134+
* <ul>
135+
* <li><code>None</code> - The text will be truncated with an ellipsis.</li>
136+
* <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
137+
* </ul>
134138
*
135-
* @type {boolean}
136-
* @defaultvalue false
139+
* @type {WrappingType}
140+
* @defaultvalue "None"
137141
* @public
138142
*/
139-
wrap: {
140-
type: Boolean,
143+
wrappingType: {
144+
type: WrappingType,
145+
defaultValue: WrappingType.None,
141146
},
142147

143148
/**
@@ -183,10 +188,6 @@ const metadata = {
183188
type: String,
184189
defaultValue: "",
185190
},
186-
187-
_label: {
188-
type: Object,
189-
},
190191
},
191192
events: /** @lends sap.ui.webcomponents.main.CheckBox.prototype */ {
192193

@@ -230,7 +231,7 @@ const metadata = {
230231
* <h3>Usage</h3>
231232
*
232233
* You can define the checkbox text with via the <code>text</code> property. If the text exceeds the available width, it is truncated by default.
233-
* In case you prefer text to wrap, use the <code>wrap</code> property.
234+
* In case you prefer text to wrap, set the <code>wrappingType</code> property to "Normal".
234235
* The touchable area for toggling the <code>ui5-checkbox</code> ends where the text ends.
235236
* <br><br>
236237
* You can disable the <code>ui5-checkbox</code> by setting the <code>disabled</code> property to
@@ -278,25 +279,13 @@ class CheckBox extends UI5Element {
278279
constructor() {
279280
super();
280281

281-
this._label = {};
282282
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
283283
}
284284

285285
onBeforeRendering() {
286-
this.syncLabel();
287-
288286
this._enableFormSupport();
289287
}
290288

291-
syncLabel() {
292-
this._label = { ...this._label };
293-
this._label.text = this.text;
294-
/* temporary workaround. remove after all wrap properties in the relevant components are renamed to wrappingType */
295-
this._label.wrappingType = this.wrap ? WrappingType.Normal : WrappingType.None;
296-
/* end */
297-
this._label.textDirection = this.textDirection;
298-
}
299-
300289
_enableFormSupport() {
301290
const FormSupport = getFeature("FormSupport");
302291
if (FormSupport) {

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,25 @@
2323
}
2424

2525
/* wrap */
26-
:host([wrap][text]) .ui5-checkbox-root {
26+
:host([wrapping-type="Normal"][text]) .ui5-checkbox-root {
2727
min-height: auto;
2828
box-sizing: border-box;
2929
align-items: flex-start;
3030
padding-top: var(--_ui5_checkbox_root_side_padding);
3131
padding-bottom: var(--_ui5_checkbox_root_side_padding);
3232
}
3333

34-
:host([wrap][text]) .ui5-checkbox-root .ui5-checkbox-inner,
35-
:host([wrap][text]) .ui5-checkbox-root .ui5-checkbox-label {
34+
:host([wrapping-type="Normal"][text]) .ui5-checkbox-root .ui5-checkbox-inner,
35+
:host([wrapping-type="Normal"][text]) .ui5-checkbox-root .ui5-checkbox-label {
3636
margin-top: var(--_ui5_checkbox_wrapped_content_margin_top);
3737
}
3838

39-
:host([wrap][text]) .ui5-checkbox-root .ui5-checkbox-label {
39+
:host([wrapping-type="Normal"][text]) .ui5-checkbox-root .ui5-checkbox-label {
4040
word-break: break-all;
4141
align-self: center;
4242
}
4343

44-
:host([wrap]) .ui5-checkbox-root:focus::before {
44+
:host([wrapping-type="Normal"]) .ui5-checkbox-root:focus::before {
4545
bottom: var(--_ui5_checkbox_wrapped_focus_left_top_bottom_position);
4646
}
4747

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

+13-8
Original file line numberDiff line numberDiff line change
@@ -21,19 +21,24 @@
2121
</head>
2222

2323
<body style="background-color: var(--sapBackgroundColor);">
24-
<ui5-checkbox id="cb1" text="Long long long text"></ui5-checkbox>
24+
<ui5-checkbox></ui5-checkbox>
2525
<ui5-checkbox id="cbError" value-state="Error"></ui5-checkbox>
26-
<ui5-checkbox id="cb2" disabled></ui5-checkbox>
2726
<ui5-checkbox id="truncatingCb" text="Long long long text that should truncate at some point" style="width: 300px"></ui5-checkbox>
28-
<ui5-checkbox id="wrappingCb" wrap class="ui5-cb-testing-wrap" text="Longest ever text written in English that have to truncate immediately because it is so long of course!" style="width: 300px"></ui5-checkbox>
29-
<ui5-input id="field"></ui5-input>
30-
31-
<ui5-checkbox></ui5-checkbox>
3227
<ui5-checkbox text="Long long long text that should truncate at some point"></ui5-checkbox>
33-
<ui5-checkbox wrap text="Longest ever text written in English that have to truncate immediately because it is so long of course!"></ui5-checkbox>
28+
29+
<br><br>
30+
<ui5-title>Text Wrapping</ui5-title>
31+
<ui5-checkbox id="wrappingCb" wrapping-type="Normal" class="ui5-cb-testing-wrap" text="Longest ever text written in English that have to wraps because it is so long of course!" style="width: 300px"></ui5-checkbox>
32+
<ui5-checkbox wrapping-type="Normal" text="Longest ever text written in English that wraps because it's too long of course!" style="width: 300px"></ui5-checkbox>
33+
34+
<br><br>
35+
<ui5-title>Change Event Test</ui5-title>
36+
<ui5-checkbox id="cb1" text="Long long long text"></ui5-checkbox>
37+
<ui5-checkbox id="cb2" disabled></ui5-checkbox>
38+
<ui5-input id="field"></ui5-input>
3439

3540
<br>
36-
<ui5-title>ACC test - aria-label</ui5-title>
41+
<ui5-title>ACC Test - aria-label</ui5-title>
3742
<ui5-checkbox id="accCb" aria-label="Hello world"></ui5-checkbox>
3843
<br />
3944
<ui5-checkbox value-state="Warning" text="Long long long text" indeterminate checked></ui5-checkbox>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@
254254
<section class="row row-centered">
255255
<ui5-checkbox id="myCb1" checked text="Default"></ui5-checkbox>
256256
<ui5-checkbox id="myCb2" read-only text="read only"></ui5-checkbox>
257-
<ui5-checkbox id="myCb3" disabled wrap text="disabled long text might also wrap"></ui5-checkbox>
257+
<ui5-checkbox id="myCb3" disabled wrapping-type="Normal" text="disabled long text might also wrap"></ui5-checkbox>
258258
<ui5-checkbox id="myCb4" read-only text="read only" checked></ui5-checkbox>
259259
<ui5-checkbox id="myCb5" disabled text="disabled" checked></ui5-checkbox>
260260
<ui5-checkbox id="myCb6" value-state="Warning" checked text="warning"></ui5-checkbox>

‎packages/main/test/pages/Kitchen.openui5.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -227,7 +227,7 @@
227227
<section class="row row-centered">
228228
<ui5-checkbox id="myCb1" checked text="Default"></ui5-checkbox>
229229
<ui5-checkbox id="myCb2" read-only text="read only"></ui5-checkbox>
230-
<ui5-checkbox id="myCb3" disabled wrap text="disabled long text might also wrap"></ui5-checkbox>
230+
<ui5-checkbox id="myCb3" disabled wrapping-type="Normal" text="disabled long text might also wrap"></ui5-checkbox>
231231
<ui5-checkbox id="myCb4" read-only text="read only" checked></ui5-checkbox>
232232
<ui5-checkbox id="myCb5" disabled text="disabled" checked></ui5-checkbox>
233233
<ui5-checkbox id="myCb6" value-state="Warning" checked text="warning"></ui5-checkbox>

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,12 @@ <h3>CheckBox states</h3>
7070
<section>
7171
<h3>CheckBox with Text Wrapping</h3>
7272
<div class="snippet">
73-
<ui5-checkbox text="ui5-checkbox with 'wrap' set and some long text." wrap style="width:200px"></ui5-checkbox>
74-
<ui5-checkbox text="Another ui5-checkbox with very long text here" wrap style="width:200px"></ui5-checkbox>
73+
<ui5-checkbox text="ui5-checkbox with 'wrapping-type=Normal' set and some long text." wrapping-type="Normal" style="width:200px"></ui5-checkbox>
74+
<ui5-checkbox text="Another ui5-checkbox with very long text here" wrapping-type="Normal" style="width:200px"></ui5-checkbox>
7575
</div>
7676
<pre class="prettyprint lang-html"><xmp>
77-
<ui5-checkbox text="ui5-checkbox with 'wrap' set and some long text." wrap style="width:200px"></ui5-checkbox>
78-
<ui5-checkbox text="Another ui5-checkbox with very long text here" wrap style="width:200px"></ui5-checkbox>
77+
<ui5-checkbox text="ui5-checkbox with 'wrapping-type=Normal' set and some long text." wrapping-type="Normal" style="width:200px"></ui5-checkbox>
78+
<ui5-checkbox text="Another ui5-checkbox with very long text here" wrapping-type="Normal" style="width:200px"></ui5-checkbox>
7979
</xmp></pre>
8080
</section>
8181

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ describe("CheckBox general interaction", () => {
2020
checkBox.keys("Space");
2121
checkBox.keys("Enter");
2222

23-
assert.strictEqual(field.getProperty("value"), "3", "Select event should be fired 3 times");
23+
assert.strictEqual(field.getProperty("value"), "3", "Change event should be fired 3 times");
2424
});
2525

2626
it("tests change event not fired, when disabled", () => {
@@ -31,7 +31,7 @@ describe("CheckBox general interaction", () => {
3131
checkBox.keys("Space");
3232
checkBox.keys("Enter");
3333

34-
assert.strictEqual(field.getProperty("value"), "3", "Select event should not be called any more");
34+
assert.strictEqual(field.getProperty("value"), "3", "Change event should not be called any more");
3535
});
3636

3737
it("tests truncating and wrapping", () => {

0 commit comments

Comments
 (0)