diff --git a/packages/base/hash.txt b/packages/base/hash.txt index 3594d98b0c2c..917739b81510 100644 --- a/packages/base/hash.txt +++ b/packages/base/hash.txt @@ -1 +1 @@ -3/PSzZvk10reeCuZDjQUmFqeOI4= \ No newline at end of file +qIoCWcnUsXXyku4AAXsM1nFtY+s= \ No newline at end of file diff --git a/packages/fiori/src/UploadCollection.hbs b/packages/fiori/src/UploadCollection.hbs index 864193ee7a36..9f208e88c53c 100644 --- a/packages/fiori/src/UploadCollection.hbs +++ b/packages/fiori/src/UploadCollection.hbs @@ -19,7 +19,7 @@
- {{_noDataText}} + {{_noDataText}} {{_noDataDescription}} {{else if _showDndOverlay}} diff --git a/packages/fiori/test/pages/FCL.html b/packages/fiori/test/pages/FCL.html index 898f8d20d65c..344793d35954 100644 --- a/packages/fiori/test/pages/FCL.html +++ b/packages/fiori/test/pages/FCL.html @@ -659,7 +659,7 @@

- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in @@ -667,7 +667,7 @@

- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in @@ -675,7 +675,7 @@

- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in diff --git a/packages/fiori/test/samples/FlexibleColumnLayout.sample.html b/packages/fiori/test/samples/FlexibleColumnLayout.sample.html index 4f565781ff44..84d8fc8e9a6f 100644 --- a/packages/fiori/test/samples/FlexibleColumnLayout.sample.html +++ b/packages/fiori/test/samples/FlexibleColumnLayout.sample.html @@ -187,7 +187,7 @@

FlexibleColumnLayout - One Initial Column

- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in @@ -195,7 +195,7 @@

FlexibleColumnLayout - One Initial Column

- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in @@ -203,7 +203,7 @@

FlexibleColumnLayout - One Initial Column

- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in diff --git a/packages/main/src/Title.js b/packages/main/src/Title.js index 21690a382a81..b67248e0c841 100644 --- a/packages/main/src/Title.js +++ b/packages/main/src/Title.js @@ -1,6 +1,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import TitleLevel from "./types/TitleLevel.js"; +import WrappingType from "./types/WrappingType.js"; // Template import TitleTemplate from "./generated/templates/TitleTemplate.lit.js"; @@ -16,14 +17,20 @@ const metadata = { properties: /** @lends sap.ui.webcomponents.main.Title.prototype */ { /** - * Defines whether the component would wrap. + * Defines how the text of a component will be displayed when there is not enough space. + * Available options are: + *

* - * @type {boolean} - * @defaultvalue false + * @type {WrappingType} + * @defaultvalue "None" * @public - */ - wrap: { - type: Boolean, + */ + wrappingType: { + type: WrappingType, + defaultValue: WrappingType.None, }, /** diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css index 1e9feab61a4f..d819db728aed 100644 --- a/packages/main/src/themes/Title.css +++ b/packages/main/src/themes/Title.css @@ -30,7 +30,7 @@ cursor: inherit; } -:host([wrap]) .ui5-title-root { +:host([wrapping-type="Normal"]) .ui5-title-root { white-space: pre-line; } diff --git a/packages/main/src/types/WrappingType.js b/packages/main/src/types/WrappingType.js new file mode 100644 index 000000000000..2c1bafa2e4e3 --- /dev/null +++ b/packages/main/src/types/WrappingType.js @@ -0,0 +1,41 @@ +import DataType from "@ui5/webcomponents-base/dist/types/DataType.js"; + +/** + * Different types of wrapping. + * @lends sap.ui.webcomponents.main.types.WrappingType.prototype + * @public + */ +const WrappingTypes = { + /** + * The text will be truncated with an ellipsis. + * @public + * @type {None} + */ + None: "None", + + /** + * The text will wrap. The words will not be broken based on hyphenation. + * @public + * @type {Normal} + */ + Normal: "Normal", +}; + +/** + * @class + * Defines how the text of a component will be displayed when there is not enough space. + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.types.WrappingType + * @public + * @enum {string} + */ +class WrappingType extends DataType { + static isValid(value) { + return !!WrappingTypes[value]; + } +} + +WrappingType.generateTypeAccessors(WrappingTypes); + +export default WrappingType; diff --git a/packages/main/test/pages/DateTimePicker.html b/packages/main/test/pages/DateTimePicker.html index 63375229a31b..b7cbe231228f 100644 --- a/packages/main/test/pages/DateTimePicker.html +++ b/packages/main/test/pages/DateTimePicker.html @@ -28,12 +28,12 @@
- DateTimePicker
+ DateTimePicker
- DateTimePicker format pattern + DateTimePicker format pattern
Default format pattern
- Test DateTimePicker change event on submit + Test DateTimePicker change event on submit

@@ -112,7 +112,7 @@
- Test DateTimePicker change event on cancel + Test DateTimePicker change event on cancel

@@ -139,7 +139,7 @@
- DateTimePicker states + DateTimePicker states @@ -150,7 +150,7 @@
- DateTimePicker compact size + DateTimePicker compact size diff --git a/packages/main/test/pages/Title.html b/packages/main/test/pages/Title.html index 1d15b5817e37..feb5adf46cfd 100644 --- a/packages/main/test/pages/Title.html +++ b/packages/main/test/pages/Title.html @@ -26,5 +26,11 @@ Title level 6 Very long long long text of title title with level two
+ +
+

Wrapping

+ Truncated title Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, ab. + Wrapping title Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, ab. +
diff --git a/packages/main/test/specs/Components.spec.js b/packages/main/test/specs/Components.spec.js index 896b1cc59b2b..95cb8eb7d535 100644 --- a/packages/main/test/specs/Components.spec.js +++ b/packages/main/test/specs/Components.spec.js @@ -26,7 +26,6 @@ describe("General assertions", () => { const radiobutton = browser.$("#radioBtn"); const sw = browser.$("#sw"); const toggleBtn = browser.$("#toggleBtn"); - const title = browser.$("#title"); // Button assertBooleanProperty(button, "submits"); @@ -69,9 +68,6 @@ describe("General assertions", () => { assertBooleanProperty(sw, "checked"); assertBooleanProperty(sw, "disabled"); - // Title - assertBooleanProperty(title, "wrap"); - // ToggleButton assertBooleanProperty(toggleBtn, "pressed"); }); diff --git a/packages/main/test/specs/Title.spec.js b/packages/main/test/specs/Title.spec.js index e1210250fe78..6d86e1ff729c 100644 --- a/packages/main/test/specs/Title.spec.js +++ b/packages/main/test/specs/Title.spec.js @@ -21,4 +21,13 @@ describe("Rendering", () => { assert.ok(titleH5.startsWith(" { + const wrappingTitle = browser.$("#wrapping-title"); + const truncatedTitle = browser.$("#truncated-title"); + + assert.strictEqual(truncatedTitle.getSize().height, 16, "truncated title should be single line"); + + assert.ok(wrappingTitle.getSize().height > truncatedTitle.getSize().height, "wrapping title should span more than a single line"); + }); });