Skip to content

Commit

Permalink
fix(ui5-link): remove unnecessary transparent border (#8830)
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@unazko
unazko committed Apr 26, 2024
1 parent 897825d commit b0d4dd5
Show file tree
Hide file tree
Showing 15 changed files with 16 additions and 29 deletions.
4 changes: 2 additions & 2 deletions packages/main/src/themes/Link.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
3 changes: 1 addition & 2 deletions packages/main/src/themes/base/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_belize_hcb/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_belize_hcw/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_fiori_3_hcb/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_fiori_3_hcw/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_horizon/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_horizon_dark/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_horizon_dark_exp/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_horizon_exp/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_horizon_hcb/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_horizon_hcb_exp/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_horizon_hcw/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
3 changes: 1 addition & 2 deletions packages/main/src/themes/sap_horizon_hcw_exp/Link-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
2 changes: 1 addition & 1 deletion packages/main/test/specs/Link.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.");
Expand Down

0 comments on commit b0d4dd5

Please sign in to comment.