fix(ui5-checkbox): fix truncation in compactSize (#998)

Although there is enough space, the checkbox used to truncate, now this is fixed. FIXES: #996
SAP · Nov 29, 2019 · 3cdcede · 3cdcede
1 parent 3eca602
commit 3cdcede
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/main/src/themes/CheckBox.css b/packages/main/src/themes/CheckBox.css
@@ -148,6 +148,13 @@ https://github.com/philipwalton/flexbugs/issues/231
 }
 
 /* Compact */
+:host([text][data-ui5-compact-size]) .ui5-checkbox-root {
+	padding-right: 0;
+}
+:host([text][data-ui5-compact-size]) .ui5-checkbox-root:focus::before {
+	right: 0;
+}
+
 :host([wrap][text][data-ui5-compact-size]) .ui5-checkbox-root {
 	min-height: auto;
 	padding-top: var(--_ui5_checkbox_wrapped_focus_padding);
@@ -186,7 +193,6 @@ https://github.com/philipwalton/flexbugs/issues/231
 
 :host([data-ui5-compact-size]) .ui5-checkbox-root .ui5-checkbox-label {
 	margin-left: var(--_ui5_checkbox_compact_wrapper_padding);
-	width: calc(100% - .8125rem - var(--_ui5_checkbox_compact_inner_size));
 }
 
 :host([data-ui5-compact-size]) .ui5-checkbox-icon {

diff --git a/packages/main/test/pages/CheckBox.html b/packages/main/test/pages/CheckBox.html
@@ -20,7 +20,7 @@
 </head>
 
 <body>
-	<ui5-checkbox id="cb1"></ui5-checkbox>
+	<ui5-checkbox id="cb1" text="Long long long text"></ui5-checkbox>
 	<ui5-checkbox id="cbError" value-state="Error"></ui5-checkbox>
 	<ui5-checkbox id="cb2" disabled></ui5-checkbox>
 	<ui5-checkbox id="truncatingCb" text="Long long long text that should truncate at some point" style="width: 300px"></ui5-checkbox>