fix(ui5-label): fix width for italic labels (#1625)

SAP · May 18, 2020 · 14a48d1 · 14a48d1
1 parent 0cef140
commit 14a48d1
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 7 deletions.
diff --git a/packages/main/src/Label.hbs b/packages/main/src/Label.hbs
@@ -1,5 +1,6 @@
 <label
 		class="ui5-label-root"
+		dir="{{rtl}}"
 		@click={{_onclick}} 
 		for="{{for}}"
 	>

diff --git a/packages/main/src/Label.js b/packages/main/src/Label.js
@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 
 // Template
 import LabelTemplate from "./generated/templates/LabelTemplate.lit.js";
@@ -130,6 +131,10 @@ class Label extends UI5Element {
 			elementToFocus.focus();
 		}
 	}
+
+	get rtl() {
+		return getRTL() ? "rtl" : undefined;
+	}
 }
 
 Label.define();

diff --git a/packages/main/src/themes/Label.css b/packages/main/src/themes/Label.css
@@ -20,6 +20,11 @@
 	overflow: hidden;
 }
 
+bdi{
+    content: "";
+	padding-right: 0.15625rem;
+}
+
 :host(:not([wrap])) .ui5-label-text-wrapper {
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -29,7 +34,7 @@
 }
 
 :host(:not([wrap])[required][show-colon]) .ui5-label-text-wrapper {
-	max-width: calc(100% - 0.725rem);
+	max-width: calc(100% - .85rem);
 }
 
 :host(:not([wrap])[required]) .ui5-label-text-wrapper {
@@ -50,6 +55,17 @@
 	font-size: 1.25rem;
 	font-weight: bold;
 	position: relative;
+	font-style: normal;
 	vertical-align: middle;
 	line-height: 0;
+}
+
+:host([required][show-colon]) .ui5-label-required-colon:after {
+	margin-right: 0;
+	margin-left: .125rem;
+}
+
+:host([required][show-colon]) [dir="rtl"] .ui5-label-required-colon:after {
+	margin-right: .125rem;
+	margin-left: 0;
 }
diff --git a/packages/main/test/pages/Label.html b/packages/main/test/pages/Label.html
@@ -5,7 +5,7 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
 
-	<title>Playground</title>
+	<title>Label</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
@@ -81,35 +81,35 @@ <h2>Test show-colon not forcing truncation</h2>
 		<h2>label + input</h2>
 		<div style="display: flex; align-items: center">
 			<ui5-label id="label-for-ui5-input" for="form-ui5-input" style="width: 100px" required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur</ui5-label>
-			<ui5-input style="width: 320px; margin-left: 16px;" id="form-ui5-input"></ui5-input>
+			<ui5-input style="width: 320px; margin: 0 16px;" id="form-ui5-input"></ui5-input>
 		</div>
 
 		<br>
 
 		<div style="display: flex; align-items: center">
 			<ui5-label id="label-for-native-input" for="native-input" style="width: 100px" show-colon wrap required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur</ui5-label>
-			<input style="width: 320px; margin-left: 16px;" id="native-input"></input>
+			<input style="width: 320px; margin: 0 16px;" id="native-input"></input>
 		</div>
 
 		<br>
 
 		<div style="display: flex; align-items: center">
 			<ui5-label id="label-for-ui5-textarea" for="ui5-textarea" style="width: 100px" show-colon>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur</ui5-label>
-			<ui5-textarea style="width: 320px; margin-left: 16px;" id="ui5-textarea"></ui5-textarea>
+			<ui5-textarea style="width: 320px; margin: 0 16px;" id="ui5-textarea"></ui5-textarea>
 		</div>
 
 		<br>
 
 		<div style="display: flex; align-items: center">
 			<ui5-label id="label-for-native-textarea" for="native-textarea" style="width: 100px" required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur</ui5-label>
-			<textarea style="width: 320px; margin-left: 16px;" id="native-textarea"></textarea>
+			<textarea style="width: 320px; margin: 0 16px;" id="native-textarea"></textarea>
 		</div>
 
 		<br>
 
 		<div style="display: flex; align-items: center">
 			<ui5-label id="label-for-ui5-datepicker" for="ui5-datepicker" style="width: 100px" show-colon required>Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur</ui5-label>
-			<ui5-datepicker style="width: 320px; margin-left: 16px;" id="ui5-datepicker"></ui5-datepicker>
+			<ui5-datepicker style="width: 320px; margin: 0 16px;" id="ui5-datepicker"></ui5-datepicker>
 		</div>
 	</section>
 </body>