diff --git a/packages/main/src/themes/Link.css b/packages/main/src/themes/Link.css index 763c6ff8393f..5d359ce26889 100644 --- a/packages/main/src/themes/Link.css +++ b/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; } diff --git a/packages/main/src/themes/base/Link-parameters.css b/packages/main/src/themes/base/Link-parameters.css index 3526103948bd..46fdaf4d3fbe 100644 --- a/packages/main/src/themes/base/Link-parameters.css +++ b/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); diff --git a/packages/main/src/themes/sap_belize_hcb/Link-parameters.css b/packages/main/src/themes/sap_belize_hcb/Link-parameters.css index 49c42c223135..c6556ad15849 100644 --- a/packages/main/src/themes/sap_belize_hcb/Link-parameters.css +++ b/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); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/Link-parameters.css b/packages/main/src/themes/sap_belize_hcw/Link-parameters.css index 49c42c223135..c6556ad15849 100644 --- a/packages/main/src/themes/sap_belize_hcw/Link-parameters.css +++ b/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); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css index e485ae4b666d..f25cb9076a97 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css +++ b/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; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css index e485ae4b666d..f25cb9076a97 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css +++ b/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; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/Link-parameters.css b/packages/main/src/themes/sap_horizon/Link-parameters.css index fae29fa61d70..29e6a4ea2b76 100644 --- a/packages/main/src/themes/sap_horizon/Link-parameters.css +++ b/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); diff --git a/packages/main/src/themes/sap_horizon_dark/Link-parameters.css b/packages/main/src/themes/sap_horizon_dark/Link-parameters.css index fae29fa61d70..29e6a4ea2b76 100644 --- a/packages/main/src/themes/sap_horizon_dark/Link-parameters.css +++ b/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); diff --git a/packages/main/src/themes/sap_horizon_dark_exp/Link-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/Link-parameters.css index fae29fa61d70..29e6a4ea2b76 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/Link-parameters.css +++ b/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); diff --git a/packages/main/src/themes/sap_horizon_exp/Link-parameters.css b/packages/main/src/themes/sap_horizon_exp/Link-parameters.css index fae29fa61d70..29e6a4ea2b76 100644 --- a/packages/main/src/themes/sap_horizon_exp/Link-parameters.css +++ b/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); diff --git a/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css index b728a598793c..beee8369cb7a 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css +++ b/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); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/Link-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/Link-parameters.css index b728a598793c..4563cfa034bb 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/Link-parameters.css +++ b/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; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css index b728a598793c..beee8369cb7a 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css +++ b/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); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/Link-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/Link-parameters.css index b728a598793c..4563cfa034bb 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/Link-parameters.css +++ b/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; } \ No newline at end of file diff --git a/packages/main/test/specs/Link.spec.js b/packages/main/test/specs/Link.spec.js index 25f8e75ebad2..52215536ceab 100644 --- a/packages/main/test/specs/Link.spec.js +++ b/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.");