fix(ui5-link): remove unnecessary transparent border (#8830)

Issue:

- There was a transparent border displacing the link's text horizontally.
It is mostly visible if there is an actual text component underneath.
Solution:

- The border is replaced by an outline with an offset. Now the ui5-link
component doesn't have an invisible border and it is compliant with the
visual specification.

Fixes: #8512

packages/main/src/themes/Link.css

@@ -72,14 +72,14 @@
 }
 
 :host .ui5-link-root {
-	border: var(--_ui5_link_border);
+	outline-offset: -0.0625rem;
 	border-radius: var(--_ui5_link_focus_border-radius);
 }
 
 :host([focused]) .ui5-link-root,
 :host([design="Subtle"][focused]) .ui5-link-root {
 	background-color: var(--_ui5_link_focus_background_color);
-	border: var(--_ui5_link_border_focus);
+	outline: var(--_ui5_link_outline);
 	border-radius: var(--_ui5_link_focus_border-radius);
 	text-shadow: none;
 }

packages/main/src/themes/base/Link-parameters.css

@@ -4,8 +4,7 @@
 	--_ui5_link_focused_hover_text_decoration: underline;
 	--_ui5_link_focused_hover_text_color: var(--sapLinkColor);
 	--_ui5_link_active_text_decoration: underline;
-	--_ui5_link_border: 0.0625rem dotted transparent;
-	--_ui5_link_border_focus: 0.0625rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.0625rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_focus_border-radius: 0;
 	--_ui5_link_focus_background_color: transparent;
 	--_ui5_link_focus_color: var(--sapLinkColor);

packages/main/src/themes/sap_belize_hcb/Link-parameters.css

@@ -3,6 +3,5 @@
 :root {
 	--_ui5_link_text_decoration: underline;
 	--_ui5_link_hover_text_decoration: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 }

packages/main/src/themes/sap_belize_hcw/Link-parameters.css

@@ -3,6 +3,5 @@
 :root {
 	--_ui5_link_text_decoration: underline;
 	--_ui5_link_hover_text_decoration: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 }

packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css

@@ -6,8 +6,7 @@
 	--_ui5_link_active_text_decoration: none;
 	--_ui5_link_focus_text_decoration: none;
 	--_ui5_link_focused_hover_text_decoration: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
 }

packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css

@@ -6,8 +6,7 @@
 	--_ui5_link_active_text_decoration: none;
 	--_ui5_link_focus_text_decoration: none;
 	--_ui5_link_focused_hover_text_decoration: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
 }

packages/main/src/themes/sap_horizon/Link-parameters.css

@@ -6,8 +6,7 @@
 	--_ui5_link_focused_hover_text_decoration: none;
 	--_ui5_link_focused_hover_text_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
-	--_ui5_link_border: 0.125rem solid transparent;
-	--_ui5_link_border_focus: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 	--_ui5_link_focus_border-radius: 0.125rem;
 	--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);

packages/main/src/themes/sap_horizon_dark/Link-parameters.css

@@ -6,8 +6,7 @@
 	--_ui5_link_focused_hover_text_decoration: none;
 	--_ui5_link_focused_hover_text_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
-	--_ui5_link_border: 0.125rem solid transparent;
-	--_ui5_link_border_focus: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 	--_ui5_link_focus_border-radius: 0.125rem;
 	--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);

packages/main/src/themes/sap_horizon_dark_exp/Link-parameters.css

@@ -6,8 +6,7 @@
 	--_ui5_link_focused_hover_text_decoration: none;
 	--_ui5_link_focused_hover_text_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
-	--_ui5_link_border: 0.125rem solid transparent;
-	--_ui5_link_border_focus: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 	--_ui5_link_focus_border-radius: 0.125rem;
 	--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);

packages/main/src/themes/sap_horizon_exp/Link-parameters.css

@@ -6,8 +6,7 @@
 	--_ui5_link_focused_hover_text_decoration: none;
 	--_ui5_link_focused_hover_text_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
-	--_ui5_link_border: 0.125rem solid transparent;
-	--_ui5_link_border_focus: 0.125rem solid var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 	--_ui5_link_focus_border-radius: 0.125rem;
 	--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);

packages/main/src/themes/sap_horizon_hcb/Link-parameters.css

@@ -7,6 +7,5 @@
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 }

packages/main/src/themes/sap_horizon_hcb_exp/Link-parameters.css

@@ -7,6 +7,5 @@
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 }

packages/main/src/themes/sap_horizon_hcw/Link-parameters.css

@@ -7,6 +7,5 @@
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: 0.125rem dotted var(--sapContent_FocusColor);
 }

packages/main/src/themes/sap_horizon_hcw_exp/Link-parameters.css

@@ -7,6 +7,5 @@
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
 	--_ui5_link_subtle_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration_hover: none;
-	--_ui5_link_border: 0.125rem dotted transparent;
-	--_ui5_link_border_focus: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_link_outline: none;
 }

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

@@ -45,7 +45,7 @@ describe("General API", () => {
 	it("should wrap the text of the link", async () => {
 		const wrappingLabel = await browser.$("#wrapping-link");
 		const truncatingLabel = await browser.$("#non-wrapping-link");
-		const LINK_HEIGHT = 20; // It's 20px in sap_horizon, previously 18px in sap_fiori_3
+		const LINK_HEIGHT = 16;
 
 		assert.isAbove((await wrappingLabel.getSize()).height, (await truncatingLabel.getSize()).height);
 		assert.strictEqual((await truncatingLabel.getSize()).height, LINK_HEIGHT, "The truncated label should be single line.");