feat(ui5-title): add custom overstyles when used with Link (#6932)

There are cases when a Link will be used inside a Title. Elements nested inside, mainly the Link, will inherit the Title's font styles. Refactored Link to allow for overstyling. Updated text-underline when hovering a Subtle link to match the latest VD spec. Fixes #6785
SAP · Apr 26, 2023 · e1b65ef · e1b65ef
1 parent f10c251
commit e1b65ef
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 39 deletions.
diff --git a/packages/main/src/Title.ts b/packages/main/src/Title.ts
@@ -67,6 +67,7 @@ class Title extends UI5Element {
 
 	/**
 	 * Defines the text of the component.
+	 * This component supports nesting a <code>Link</code> component inside.
 	 * <br><br>
 	 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
 	 *

diff --git a/packages/main/src/themes/Link.css b/packages/main/src/themes/Link.css
@@ -13,6 +13,8 @@
 	outline: none;
 	text-decoration: var(--_ui5_link_text_decoration);
 	text-shadow: var(--sapContent_TextShadow);
+	white-space: nowrap;
+	overflow-wrap: normal;
 }
 
 :host([disabled]) {
@@ -40,7 +42,7 @@
 	color: var(--sapLinkColor);
 }
 
-:host([wrapping-type="Normal"]) .ui5-link-root {
+:host([wrapping-type="Normal"]) {
 	white-space: normal;
 	overflow-wrap: break-word;
 }
@@ -49,11 +51,11 @@
 	width: 100%;
 	display: inline-block;
 	position: relative;
-	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	overflow-wrap: normal;
 	outline: none;
+	white-space: inherit;
+	overflow-wrap: inherit;
 	text-decoration: inherit;
 	color: inherit;
 }
@@ -83,6 +85,11 @@
 	text-decoration: var(--_ui5_link_hover_text_decoration);
 }
 
+:host([design="Subtle"]:hover) {
+	color: var(--sapLink_SubtleColor);
+	text-decoration: var(--_ui5_link_subtle_text_decoration_hover);
+}
+
 :host([focused]:hover) {
 	text-decoration: var(--_ui5_link_focused_hover_text_decoration);
 }

diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css
@@ -30,10 +30,17 @@
 	cursor: inherit;
 }
 
-:host([wrapping-type="Normal"]) .ui5-title-root {
+:host([wrapping-type="Normal"]) .ui5-title-root,
+:host([wrapping-type="Normal"]) ::slotted(*) {
 	white-space: pre-line;
 }
 
+::slotted(*) {
+	font-size: inherit;
+	font-family: inherit;
+	text-shadow: inherit;
+}
+
 /* Level H1 */
 :host([level="H1"]) {
 	font-size: var(--sapFontHeader1Size);

diff --git a/packages/main/src/themes/base/Link-parameters.css b/packages/main/src/themes/base/Link-parameters.css
@@ -11,4 +11,6 @@
 	--_ui5_link_focus_color: inherit;
 	--_ui5_link_focus_text_decoration: underline;
 	--_ui5_link_subtle_text_decoration: none;
+	--_ui5_link_subtle_text_decoration_hover: underline;
+
 }
diff --git a/packages/main/src/themes/sap_horizon/Link-parameters.css b/packages/main/src/themes/sap_horizon/Link-parameters.css
@@ -11,4 +11,5 @@
 	--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_subtle_text_decoration: underline;
+	--_ui5_link_subtle_text_decoration_hover: none;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/Link-parameters.css b/packages/main/src/themes/sap_horizon_dark/Link-parameters.css
@@ -11,4 +11,5 @@
 	--_ui5_link_focus_background_color: var(--sapContent_FocusColor);
 	--_ui5_link_focus_color: var(--sapContent_ContrastTextColor);
 	--_ui5_link_subtle_text_decoration: underline;
+	--_ui5_link_subtle_text_decoration_hover: none;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Link-parameters.css
@@ -5,6 +5,7 @@
 	--_ui5_link_hover_text_decoration: none;
 	--_ui5_link_active_text_decoration: none;
 	--_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);
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Link-parameters.css
@@ -5,6 +5,7 @@
 	--_ui5_link_hover_text_decoration: none;
 	--_ui5_link_active_text_decoration: none;
 	--_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);
 }
diff --git a/packages/main/test/pages/Title.html b/packages/main/test/pages/Title.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 	<meta charset="utf-8">
 
@@ -11,25 +12,47 @@
 	<script src="../../bundle.esm.js" type="module"></script>
 
 
-<link rel="stylesheet" type="text/css" href="./styles/Title.css">
+	<link rel="stylesheet" type="text/css" href="./styles/Title.css">
 </head>
 
 <body class="title1auto">
 	<section>
-		<ui5-title id="titleH1" level="H1">Title level 1</ui5-title>
-		<ui5-title>Title level Auto (2)</ui5-title>
-		<ui5-title id="titleH2" level="H2">Title level 2</ui5-title>
-		<ui5-title id="titleH3" level="H3">Title level 3</ui5-title>
-		<ui5-title id="titleH4" level="H4">Title level 4</ui5-title>
-		<ui5-title id="titleH5" level="H5">Title level 5</ui5-title>
-		<ui5-title id="titleH6" level="H6">Title level 6</ui5-title>
-		<ui5-title level="H2">Very long long long text of title title with level two</ui5-title>
+		<ui5-title id="titleH1" level="H1">Title Level 1</ui5-title>
+		<ui5-title>Title Level Auto (2)</ui5-title>
+		<ui5-title id="titleH2" level="H2">Title Level 2</ui5-title>
+		<ui5-title id="titleH3" level="H3">Title Level 3</ui5-title>
+		<ui5-title id="titleH4" level="H4">Title Level 4</ui5-title>
+		<ui5-title id="titleH5" level="H5">Title Level 5</ui5-title>
+		<ui5-title id="titleH6" level="H6">Title Level 6</ui5-title>
+		<ui5-title level="H2">A Very Long Long Long Long Title Text with Level Two</ui5-title>
 	</section>
 
-	<section class="title2auto">
+	<section class="wrapping">
 		<h2>Wrapping</h2>
-		<ui5-title level="H6" id="truncated-title" class="title3auto">Truncated title Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, ab.</ui5-title>
-		<ui5-title level="H6" wrapping-type="Normal" id="wrapping-title">Wrapping title Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam, ab.</ui5-title>
+		<ui5-title level="H6" id="truncated-title">Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
+		<ui5-title level="H6" wrapping-type="Normal" id="wrapping-title">Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
+	</section>
+
+	<section>
+		<h2>Usage With ui5-link</h2>
+		<ui5-title level="H3">
+			<ui5-link design="Default">With Default Link (57)</ui5-link>
+		</ui5-title>
+		<ui5-title level="H3">
+			<ui5-link design="Emphasized">With Emphasized Link (58)</ui5-link>
+		</ui5-title>
+		<ui5-title level="H3">
+			<ui5-link design="Subtle">With Subtle Link (59)</ui5-link>
+		</ui5-title>
+		<div class="wrapping">
+			<h2>Wrapping With Link</h2>
+			<ui5-title level="H6">
+				<ui5-link design="Default">Truncated With Link (60) Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-link>
+			</ui5-title>
+			<ui5-title level="H6" wrapping-type="Normal">
+				<ui5-link design="Default">Wrapping With Link (61) Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-link>
+			</ui5-title>
+		</div>
 	</section>
 </body>
-</html>
+</html>
diff --git a/packages/main/test/pages/styles/Title.css b/packages/main/test/pages/styles/Title.css
@@ -1,12 +1,13 @@
 .title1auto {
-    background-color: var(--sapBackgroundColor);
+	background-color: var(--sapBackgroundColor);
 }
 
-.title2auto {
-    width: 200px;
-    border: 1px solid #ccc
+.wrapping {
+	width: 200px;
+	margin-block-start: 1rem;
+	border: 1px solid #ccc;
 }
 
-.title3auto {
-    margin-bottom: 1rem;
-}
+.wrapping > * {
+	margin-block: 0 1rem;
+}
diff --git a/packages/main/test/samples/Title.sample.html b/packages/main/test/samples/Title.sample.html
@@ -9,20 +9,20 @@ <h2 class="control-header">Title</h2>
 <section>
 	<h3>Title in All Available Levels</h3>
 	<div class="snippet flex-column">
-		<ui5-title level="H1">Title level 1</ui5-title>
-		<ui5-title level="H2">Title level 2</ui5-title>
-		<ui5-title level="H3">Title level 3</ui5-title>
-		<ui5-title level="H4">Title level 4</ui5-title>
-		<ui5-title level="H5">Title level 5</ui5-title>
-		<ui5-title level="H6">Title level 6</ui5-title>
+		<ui5-title level="H1">Title Level 1</ui5-title>
+		<ui5-title level="H2">Title Level 2</ui5-title>
+		<ui5-title level="H3">Title Level 3</ui5-title>
+		<ui5-title level="H4">Title Level 4</ui5-title>
+		<ui5-title level="H5">Title Level 5</ui5-title>
+		<ui5-title level="H6">Title Level 6</ui5-title>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
-<ui5-title level="H1">Title level 1</ui5-title>
-<ui5-title level="H2">Title level 2</ui5-title>
-<ui5-title level="H3">Title level 3</ui5-title>
-<ui5-title level="H4">Title level 4</ui5-title>
-<ui5-title level="H5">Title level 5</ui5-title>
-<ui5-title level="H6">Title level 6</ui5-title>
+<ui5-title level="H1">Title Level 1</ui5-title>
+<ui5-title level="H2">Title Level 2</ui5-title>
+<ui5-title level="H3">Title Level 3</ui5-title>
+<ui5-title level="H4">Title Level 4</ui5-title>
+<ui5-title level="H5">Title Level 5</ui5-title>
+<ui5-title level="H6">Title Level 6</ui5-title>
 	</xmp></pre>
 </section>
 

diff --git a/packages/playground/_stories/main/Title/Title.stories.ts b/packages/playground/_stories/main/Title/Title.stories.ts
@@ -44,13 +44,13 @@ ${story({args: {...args, level: TitleLevel.H6}})}`;
 
 export const Basic = Template.bind({});
 Basic.args = {
-	default: "Title text",
+	default: "Title Text",
 };
 Basic.decorators = [...Template.decorators];
 
 export const Wrapping = Template.bind({});
 Wrapping.args = {
-	default: "Long title text text text which wraps",
+	default: "Long Title Text Text Text Which Wraps",
 	wrappingType: WrappingType.Normal,
 }
 Wrapping.decorators = [
@@ -64,4 +64,10 @@ Wrapping.decorators = [
 </style>
 ${story()}`
 	},
-];
+];
+
+export const WithLink = Template.bind({});
+WithLink.args = {
+	default: `<ui5-link design="Default">With Default Link (57)</ui5-link>`,
+};
+WithLink.decorators = [...Template.decorators];