fix(ui5-link): rename wrap property to wrappingType (#3380)

Part of #3107

BREAKING_CHANGE: The boolean property `wrap` has been renamed to the string property `wrappingType`. If you previously used `wrap`, now you have to set `wrap="Normal"`

Author: georgimkv

packages/fiori/src/NotificationAction.js

@@ -57,7 +57,7 @@ const metadata = {
 		 * Defines the <code>icon</code> source URI.
 		 * <br><br>
 		 * <b>Note:</b>
-		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
+		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
 		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}

packages/main/src/Link.js

@@ -3,6 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import LinkDesign from "./types/LinkDesign.js";
+import WrappingType from "./types/WrappingType.js";
 
 // Template
 import LinkRederer from "./generated/templates/LinkTemplate.lit.js";
@@ -84,17 +85,20 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether the component text should wrap
-		 * when there is no sufficient space.
-		 * <br><br>
-		 * <b>Note:</b> The text is truncated by default.
+		 * Defines how the text of a component will be displayed when there is not enough space.
+		 * Available options are:
+		 * <ul>
+		 * <li><code>None</code> - The text will be truncated with an ellipsis.</li>
+		 * <li><code>Normal</code> - The text will wrap. The words will not be broken based on hyphenation.</li>
+		 * </ul>
 		 *
-		 * @type {boolean}
-		 * @defaultvalue false
+		 * @type {WrappingType}
+		 * @defaultvalue "None"
 		 * @public
 		 */
-		wrap: {
-			type: Boolean,
+		wrappingType: {
+			type: WrappingType,
+			defaultValue: WrappingType.None,
 		},
 
 		/**
@@ -174,13 +178,13 @@ const metadata = {
  * by using the <code>design</code> property.
  * <br><br>
  * If the <code>href</code> property is set, the link behaves as the HTML
- * anchor tag (<code>&lt;a>&lt;a/></code>) and opens the specified URL in the given target frame (<code>target</code> property).
+ * anchor tag (<code>&lt;a&gt;&lt;a&#47;&gt;</code>) and opens the specified URL in the given target frame (<code>target</code> property).
  * To specify where the linked content is opened, you can use the <code>target</code> property.
  *
  * <h3>Responsive behavior</h3>
  *
  * If there is not enough space, the text of the <code>ui5-link</code> becomes truncated.
- * If the <code>wrap</code> property is set to <code>true</code>, the text is displayed
+ * If the <code>wrappingType</code> property is set to <code>"Normal"</code>, the text is displayed
  * on several lines instead of being truncated.
  *
  * <h3>ES6 Module Import</h3>

packages/main/src/Option.js

@@ -35,7 +35,7 @@ const metadata = {
 		 * Defines the <code>icon</code> source URI.
 		 * <br><br>
 		 * <b>Note:</b>
-		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
+		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
 		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}

packages/main/src/StandardListItem.js

@@ -26,7 +26,7 @@ const metadata = {
 		 * Defines the <code>icon</code> source URI.
 		 * <br><br>
 		 * <b>Note:</b>
-		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
+		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
 		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}

packages/main/src/SuggestionItem.js

@@ -53,7 +53,7 @@ const metadata = {
 		 * Defines the <code>icon</code> source URI.
 		 * <br><br>
 		 * <b>Note:</b>
-		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
+		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
 		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}

packages/main/src/themes/Link.css

@@ -43,7 +43,7 @@
 	color: var(--sapLinkColor);
 }
 
-:host([wrap]) .ui5-link-root {
+:host([wrapping-type="Normal"]) .ui5-link-root {
 	white-space: normal;
 	word-wrap: break-word;
 }

packages/main/test/pages/Link.html

@@ -64,7 +64,7 @@ <h2>Disabled link</h2>
 
 	<section class="group">
 		<h2>Wrapping link</h2>
-		<ui5-link style="width: 100px" id="wrapping-link" wrap>Eu enim consectetur do amet elit.</ui5-link>
+		<ui5-link style="width: 100px" id="wrapping-link" wrapping-type="Normal">Eu enim consectetur do amet elit.</ui5-link>
 		<ui5-link style="width: 100px" id="non-wrapping-link">Eu enim consectetur do amet elit.</ui5-link>
 	</section>
 

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

@@ -47,7 +47,6 @@ describe("General assertions", () => {
 		assertBooleanProperty(label, "required");
 
 		//Link
-		assertBooleanProperty(link, "wrap");
 		assertBooleanProperty(link, "disabled");
 
 		// Input