fix(ui5-button): make buttons truncate (#1586)

Author: fifoosid

packages/fiori/src/themes/ShellBar.css

@@ -33,6 +33,9 @@
 	position: relative;
 	font-size: 0.75rem;
 	font-weight: bold;
+	white-space: initial;
+	overflow: initial;
+	text-overflow: initial;
 }
 
 .ui5-shellbar-menu-button,

packages/main/src/themes/Button.css

@@ -17,6 +17,9 @@
 	border: 1px solid var(--sapButton_BorderColor);
 	color: var(--sapButton_TextColor);
 	box-sizing: border-box;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 :host([disabled]) {
@@ -93,10 +96,15 @@
 	text-overflow: inherit;
 }
 
-:host([has-icon]) .ui5-button-text {
+:host([has-icon]:not([icon-end])) .ui5-button-text {
+	max-width: calc(100% - 1rem);
 	margin-left: var(--_ui5_button_base_icon_margin);
 }
 
+:host([has-icon][icon-end]) .ui5-button-text {
+	margin-left: 0;
+}
+
 :host([disabled]) {
 	opacity: 0.5;
 	pointer-events: none;

packages/main/test/pages/Button.html

@@ -66,6 +66,9 @@
 	<ui5-button icon="employee" aria-label="Download book">Action Bar Button</ui5-button>
 	<ui5-button icon="download"></ui5-button>
 
+	<ui5-button icon="employee" aria-label="Download book" style="width: 6rem;">Action Bar Button</ui5-button>
+	<ui5-button icon="employee" icon-end aria-label="Download book" style="width: 6rem;">Action Bar Button</ui5-button>
+
 	<br />
 	<br />