Skip to content

Commit 448c726

Browse files
georgimkvgeorgimkv
authored
fix(ui5-title): rename wrap property to wrappingType (#3379)
1 parent 2cd97ec commit 448c726

File tree

11 files changed

+84
-25
lines changed

11 files changed

+84
-25
lines changed

‎packages/base/hash.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
3/PSzZvk10reeCuZDjQUmFqeOI4=
1+
qIoCWcnUsXXyku4AAXsM1nFtY+s=

‎packages/fiori/src/UploadCollection.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<div class="icon-container">
2020
<ui5-icon name="document"></ui5-icon>
2121
</div>
22-
<ui5-title level="H2" wrap>{{_noDataText}}</ui5-title>
22+
<ui5-title level="H2" wrapping-type="Normal">{{_noDataText}}</ui5-title>
2323
<ui5-label class="subtitle" wrap>{{_noDataDescription}}</ui5-label>
2424
</div>
2525
{{else if _showDndOverlay}}

‎packages/fiori/test/pages/FCL.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -659,23 +659,23 @@
659659

660660
<section style="padding: 1rem 1rem; background: var(--sapList_Background);">
661661
<p>
662-
<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
662+
<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
663663
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
664664
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
665665
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
666666
culpa qui officia deserunt mollit anim id est laborum.
667667
</ui5-title>
668668
</p>
669669
<p>
670-
<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
670+
<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
671671
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
672672
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
673673
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
674674
culpa qui officia deserunt mollit anim id est laborum.
675675
</ui5-title>
676676
</p>
677677
<p>
678-
<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
678+
<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
679679
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
680680
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
681681
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

‎packages/fiori/test/samples/FlexibleColumnLayout.sample.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -187,23 +187,23 @@ <h3>FlexibleColumnLayout - One Initial Column</h3>
187187

188188
<section style="padding: 1rem 1rem; background: var(--sapList_Background);">
189189
<p>
190-
<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
190+
<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
191191
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
192192
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
193193
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
194194
culpa qui officia deserunt mollit anim id est laborum.
195195
</ui5-title>
196196
</p>
197197
<p>
198-
<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
198+
<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
199199
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
200200
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
201201
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
202202
culpa qui officia deserunt mollit anim id est laborum.
203203
</ui5-title>
204204
</p>
205205
<p>
206-
<ui5-title level="H5" wrap>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
206+
<ui5-title level="H5" wrapping-type="Normal">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
207207
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
208208
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
209209
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

‎packages/main/src/Title.js

+13-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import TitleLevel from "./types/TitleLevel.js";
4+
import WrappingType from "./types/WrappingType.js";
45

56
// Template
67
import TitleTemplate from "./generated/templates/TitleTemplate.lit.js";
@@ -16,14 +17,20 @@ const metadata = {
1617
properties: /** @lends sap.ui.webcomponents.main.Title.prototype */ {
1718

1819
/**
19-
* Defines whether the component would wrap.
20+
* Defines how the text of a component will be displayed when there is not enough space.
21+
* Available options are:
22+
* <ul>
23+
* <li><code>None</code> - The text will be truncated with an ellipsis.</li>
24+
* <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
25+
* </ul>
2026
*
21-
* @type {boolean}
22-
* @defaultvalue false
27+
* @type {WrappingType}
28+
* @defaultvalue "None"
2329
* @public
24-
*/
25-
wrap: {
26-
type: Boolean,
30+
*/
31+
wrappingType: {
32+
type: WrappingType,
33+
defaultValue: WrappingType.None,
2734
},
2835

2936
/**

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
cursor: inherit;
3131
}
3232

33-
:host([wrap]) .ui5-title-root {
33+
:host([wrapping-type="Normal"]) .ui5-title-root {
3434
white-space: pre-line;
3535
}
3636

‎packages/main/src/types/WrappingType.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
2+
3+
/**
4+
* Different types of wrapping.
5+
* @lends sap.ui.webcomponents.main.types.WrappingType.prototype
6+
* @public
7+
*/
8+
const WrappingTypes = {
9+
/**
10+
* The text will be truncated with an ellipsis.
11+
* @public
12+
* @type {None}
13+
*/
14+
None: "None",
15+
16+
/**
17+
* The text will wrap. The words will not be broken based on hyphenation.
18+
* @public
19+
* @type {Normal}
20+
*/
21+
Normal: "Normal",
22+
};
23+
24+
/**
25+
* @class
26+
* Defines how the text of a component will be displayed when there is not enough space.
27+
* @constructor
28+
* @author SAP SE
29+
* @alias sap.ui.webcomponents.main.types.WrappingType
30+
* @public
31+
* @enum {string}
32+
*/
33+
class WrappingType extends DataType {
34+
static isValid(value) {
35+
return !!WrappingTypes[value];
36+
}
37+
}
38+
39+
WrappingType.generateTypeAccessors(WrappingTypes);
40+
41+
export default WrappingType;

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,12 @@
2828

2929
<body style="background-color: var(--sapBackgroundColor);">
3030
<section>
31-
<ui5-title wrap>DateTimePicker</ui5-title><br>
31+
<ui5-title wrapping-type="Normal">DateTimePicker</ui5-title><br>
3232
<ui5-datetime-picker id="dt"></ui5-datetime-picker>
3333
</section>
3434

3535
<section>
36-
<ui5-title wrap>DateTimePicker format pattern</ui5-title>
36+
<ui5-title wrapping-type="Normal">DateTimePicker format pattern</ui5-title>
3737

3838
<br><ui5-label>Default format pattern</ui5-label><br>
3939
<ui5-datetime-picker
@@ -94,7 +94,7 @@
9494
</section>
9595

9696
<section>
97-
<ui5-title wrap>Test DateTimePicker change event on submit</ui5-title>
97+
<ui5-title wrapping-type="Normal">Test DateTimePicker change event on submit</ui5-title>
9898
<br>
9999

100100
<ui5-datetime-picker id="dt1"></ui5-datetime-picker><br>
@@ -112,7 +112,7 @@
112112
</section>
113113

114114
<section>
115-
<ui5-title wrap>Test DateTimePicker change event on cancel</ui5-title>
115+
<ui5-title wrapping-type="Normal">Test DateTimePicker change event on cancel</ui5-title>
116116
<br/>
117117

118118
<ui5-datetime-picker id="dt2"></ui5-datetime-picker><br>
@@ -139,7 +139,7 @@
139139
</section>
140140

141141
<section>
142-
<ui5-title wrap>DateTimePicker states</ui5-title>
142+
<ui5-title wrapping-type="Normal">DateTimePicker states</ui5-title>
143143
<ui5-datetime-picker value-state="Error"></ui5-datetime-picker>
144144
<ui5-datetime-picker value-state="Warning"></ui5-datetime-picker>
145145
<ui5-datetime-picker value-state="Information"></ui5-datetime-picker>
@@ -150,7 +150,7 @@
150150
</section>
151151

152152
<section class="sapUiSizeCompact">
153-
<ui5-title wrap>DateTimePicker compact size</ui5-title>
153+
<ui5-title wrapping-type="Normal">DateTimePicker compact size</ui5-title>
154154
<ui5-datetime-picker
155155
></ui5-datetime-picker>
156156

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

+6
Original file line numberDiff line numberDiff line change
@@ -26,5 +26,11 @@
2626
<ui5-title id="titleH6" level="H6">Title level 6</ui5-title>
2727
<ui5-title level="H2">Very long long long text of title title with level two</ui5-title>
2828
</section>
29+
30+
<section style="width: 200px; border: 1px solid #ccc">
31+
<h2>Wrapping</h2>
32+
<ui5-title level="H6" id="truncated-title" style="margin-bottom: 1rem;">Truncated title Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, ab.</ui5-title>
33+
<ui5-title level="H6" wrapping-type="Normal" id="wrapping-title">Wrapping title Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, ab.</ui5-title>
34+
</section>
2935
</body>
3036
</html>

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

-4
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ describe("General assertions", () => {
2626
const radiobutton = browser.$("#radioBtn");
2727
const sw = browser.$("#sw");
2828
const toggleBtn = browser.$("#toggleBtn");
29-
const title = browser.$("#title");
3029

3130
// Button
3231
assertBooleanProperty(button, "submits");
@@ -69,9 +68,6 @@ describe("General assertions", () => {
6968
assertBooleanProperty(sw, "checked");
7069
assertBooleanProperty(sw, "disabled");
7170

72-
// Title
73-
assertBooleanProperty(title, "wrap");
74-
7571
// ToggleButton
7672
assertBooleanProperty(toggleBtn, "pressed");
7773
});

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

+9
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,13 @@ describe("Rendering", () => {
2121
assert.ok(titleH5.startsWith("<h5"), "h5 tag is rendered for level='H5'");
2222
assert.ok(titleH6.startsWith("<h6"), "h6 tag is rendered for level='H6'");
2323
});
24+
25+
it("should wrap the text of the title", () => {
26+
const wrappingTitle = browser.$("#wrapping-title");
27+
const truncatedTitle = browser.$("#truncated-title");
28+
29+
assert.strictEqual(truncatedTitle.getSize().height, 16, "truncated title should be single line");
30+
31+
assert.ok(wrappingTitle.getSize().height > truncatedTitle.getSize().height, "wrapping title should span more than a single line");
32+
});
2433
});

0 commit comments

Comments
 (0)