From dddbfca2193bd7d5aeeb347de0caed1a3e4604b1 Mon Sep 17 00:00:00 2001 From: Georgi Minkov Date: Wed, 2 Jun 2021 18:13:38 +0300 Subject: [PATCH 1/2] fix(ui5-title): rename wrap property to wrappingType Part of #3107 BREAKING_CHANGE: property wrap has been renamed to wrappingType and its type has changed --- packages/fiori/src/UploadCollection.hbs | 2 +- packages/fiori/test/pages/FCL.html | 6 +++--- .../samples/FlexibleColumnLayout.sample.html | 6 +++--- packages/main/src/Title.js | 19 +++++++++++++------ packages/main/src/themes/Title.css | 2 +- packages/main/test/pages/DateTimePicker.html | 12 ++++++------ packages/main/test/pages/Title.html | 6 ++++++ packages/main/test/specs/Components.spec.js | 4 ---- packages/main/test/specs/Title.spec.js | 9 +++++++++ 9 files changed, 42 insertions(+), 24 deletions(-) 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..4a3c3cc2af05 100644 --- a/packages/main/src/Title.js +++ b/packages/main/src/Title.js @@ -16,14 +16,21 @@ const metadata = { properties: /** @lends sap.ui.webcomponents.main.Title.prototype */ { /** - * Defines whether the component would wrap. + * Determines the wrapping type of the component. + *

+ * The available options are: + *

    + *
  • None - The title will be truncated with an ellipsis.
    • + *
  • Normal - The title will wrap. The words won't break based on hyphenation.
    • + *
* - * @type {boolean} - * @defaultvalue false + * @type {string} + * @defaultvalue "None" * @public - */ - wrap: { - type: Boolean, + */ + wrappingType: { + type: String, + defaultValue: "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/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"); + }); }); From b9edd6814a756ebb1bbf4d896cf2e8dfe8745db3 Mon Sep 17 00:00:00 2001 From: Georgi Minkov Date: Thu, 3 Jun 2021 11:17:23 +0300 Subject: [PATCH 2/2] add WrappingType enum --- packages/base/hash.txt | 2 +- packages/main/src/Title.js | 16 +++++----- packages/main/src/types/WrappingType.js | 41 +++++++++++++++++++++++++ 3 files changed, 50 insertions(+), 9 deletions(-) create mode 100644 packages/main/src/types/WrappingType.js 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/main/src/Title.js b/packages/main/src/Title.js index 4a3c3cc2af05..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,21 +17,20 @@ const metadata = { properties: /** @lends sap.ui.webcomponents.main.Title.prototype */ { /** - * Determines the wrapping type of the component. - *

- * The available options are: + * Defines how the text of a component will be displayed when there is not enough space. + * Available options are: *
    - *
  • None - The title will be truncated with an ellipsis.
    • - *
  • Normal - The title will wrap. The words won't break based on hyphenation.
    • + *
  • None - The text will be truncated with an ellipsis.
    • + *
  • Normal - The text will wrap. The words will not be broken based on hyphenation.
    • *
* - * @type {string} + * @type {WrappingType} * @defaultvalue "None" * @public */ wrappingType: { - type: String, - defaultValue: "None", + type: WrappingType, + defaultValue: WrappingType.None, }, /** 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;