Revert "fix(core): remove hardcoded style from ngx for toolbar component"

apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html

@@ -43,18 +43,18 @@
         style="max-width: 200px;"
     />
 
-    <button fd-toolbar-item fd-button fd-toolbar-overflow-button fd-toolbar-overflow-button-menu label="Button" [fdMenu]="true" [compact]="true"></button>
+    <button fd-toolbar-item fd-button label="Button" [fdMenu]="true" [compact]="true"></button>
 
     <fd-segmented-button fd-toolbar-item>
         <button fd-button label="Left" [compact]="true"></button>
         <button fd-button label="Middle" [compact]="true"></button>
         <button fd-button label="Right" [compact]="true"></button>
     </fd-segmented-button>
 
-    <button fd-toolbar-item fd-button fd-toolbar-overflow-button label="Button" [compact]="true"></button>
-    <button fd-toolbar-item fd-button fd-toolbar-overflow-button label="Button" [compact]="true"></button>
+    <button fd-toolbar-item fd-button label="Button" [compact]="true"></button>
+    <button fd-toolbar-item fd-button label="Button" [compact]="true"></button>
     <fd-toolbar-spacer fd-toolbar-item [fixed]="true" [width]="'200px'"></fd-toolbar-spacer>
-    <button fd-toolbar-item fd-button fd-toolbar-overflow-button label="Button" [compact]="true"></button>
-    <button fd-toolbar-item fd-button fd-toolbar-overflow-button label="Button" [compact]="true"></button>
-    <button fd-toolbar-item fd-button fd-toolbar-overflow-button label="Button" [compact]="true"></button>
+    <button fd-toolbar-item fd-button label="Button" [compact]="true"></button>
+    <button fd-toolbar-item fd-button label="Button" [compact]="true"></button>
+    <button fd-toolbar-item fd-button label="Button" [compact]="true"></button>
 </fd-toolbar>

apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.component.html

@@ -25,7 +25,7 @@
 <description>
    If there isn’t enough room in a Toolbar, the [shouldOverflow]="true" can be used to move buttons to an overflow area.
    A popover button will be created which will contain all the items in the overflow.
-   Make sure to include the <code class="code-snippet">fd-toolbar-item </code>directive in each Toolbar. <code class="code-snippet">fd-toolbar-overflow-button</code> for button and <code class="code-snippet">fd-toolbar-overflow-button-menu</code> for menu button in each Toolbar.
+   Make sure to include the <code class="code-snippet">fd-toolbar-item directive</code> in each Toolbar.
 </description>
 <component-example>
     <fd-toolbar-overflow-example></fd-toolbar-overflow-example>

e2e/wdio/core/pages/toolbar.po.ts

@@ -13,7 +13,7 @@ export class ToolbarPo extends CoreBaseComponentPo {
     overflowPriorityExample = 'fd-toolbar-overflow-priority-example';
     overflowGroupingExample = 'fd-toolbar-overflow-grouping-example';
     moreButton = ' [title="More"]';
-    overflowBody = '.fd-toolbar__overflow';
+    overflowBody = '.fd-toolbar__overflow__body';
     alwaysButton = '[label="Always"]';
     overflowGroupingButton = '#background-ex7' + this.button;
     checkbox = '.fd-checkbox__label';

libs/core/src/lib/toolbar/toolbar-form-label.directive.ts

@@ -1,11 +1,11 @@
-import { Directive } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive } from '@angular/core';
 import { ToolbarItemDirective } from './toolbar-item.directive';
 
 @Directive({
     // tslint:disable-next-line: directive-selector
     selector: '[fd-toolbar-form-label]',
     host: {
-        class: 'fd-form-label fd-toolbar__overflow-form-label fd-toolbar__overflow-form-label--text'
+        class: 'fd-form-label fd-toolbar__overflow__form-label'
     }
 })
-export class ToolbarFormLabelDirective extends ToolbarItemDirective { }
+export class ToolbarFormLabelDirective extends ToolbarItemDirective {}

libs/core/src/lib/toolbar/toolbar-label.directive.ts

@@ -1,11 +1,11 @@
-import {  Directive } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive } from '@angular/core';
 import { ToolbarItemDirective } from './toolbar-item.directive';
 
 @Directive({
     // tslint:disable-next-line: directive-selector
     selector: '[fd-toolbar-label]',
     host: {
-        class: 'fd-label fd-toolbar__overflow-label'
+        class: 'fd-label fd-toolbar__overflow__label'
     }
 })
 export class ToolbarLabelDirective extends ToolbarItemDirective {}

libs/core/src/lib/toolbar/toolbar.component.html

@@ -1,11 +1,11 @@
 <div #toolbar>
     <ng-content></ng-content>
-    <span #overflowSpacer class="fd-toolbar__spacer"></span>
+    <span #overflowSpacer class="fd-toolbar__overflow-spacer"></span>
     <ng-container *ngIf="shouldOverflow">
         <fd-popover
                 placement="bottom-end"
                 [noArrow]="true"
-                class="fd-popover">
+                class="fd-popover fd-toolbar__overflow">
             <fd-popover-control>
                 <button
                     *ngIf="overflowVisibility | async"
@@ -19,7 +19,7 @@
                 ></button>
             </fd-popover-control>
             <fd-popover-body>
-                <div class="fd-toolbar__overflow" #overflowBody></div>
+                <div class="fd-toolbar__overflow__body" #overflowBody></div>
             </fd-popover-body>
         </fd-popover>
     </ng-container>

libs/core/src/lib/toolbar/toolbar.component.scss

@@ -1,5 +1,127 @@
 @import '~fundamental-styles/dist/toolbar';
 
+
+@mixin fd-rtl {
+	@at-root {
+		[dir='rtl'] &,
+		&[dir='rtl'] {
+			@content;
+		}
+	}
+}
+
+
+.fd-toolbar {
+	position: relative;
+
+	.fd-form-label {
+		align-self: auto;
+	}
+
+	&__overflow-spacer {
+		display: none;
+	}
+}
+
 .fd-toolbar > * {
 	flex-shrink: 0;
 }
+
+.fd-toolbar-fade-out {
+	visibility: hidden;
+	opacity: 0;
+	transition: visibility 0s linear 1s, opacity 1ms;
+}
+
+.fd-toolbar-fade-in {
+	visibility: visible;
+	opacity: 1;
+	transition: visibility 0s linear 0s, opacity 1s;
+}
+
+// TODO: Remove after merging https://github.com/SAP/fundamental-styles/pull/1851
+$fd-namespace: fd;
+$block: fd-toolbar;
+
+.#{$block}__overflow__body {
+	font-size: .875rem;
+	font-size: var(--sapFontSize, .875rem);
+	line-height: 1.4;
+	line-height: var(--sapContent_LineHeight, 1.4);
+	color: #32363a;
+	color: var(--sapTextColor, #32363a);
+	font-family: "72", "72full", Arial, Helvetica, sans-serif;
+	font-family: var(--sapFontFamily, "72", "72full", Arial, Helvetica, sans-serif);
+	font-weight: 400;
+	-webkit-font-smoothing: antialiased;
+	box-sizing: border-box;
+	margin: 0;
+	border: 0;
+	display: flex;
+	flex-direction: column;
+	max-width: 20rem;
+	padding: .1875rem .375rem;
+
+	> *,
+	> .fd-button {
+		display: block;
+		text-align: left;
+		width: auto;
+
+		@at-root {
+			[dir="rtl"] &,
+			&[dir="rtl"] {
+				text-align: right;
+			}
+		}
+	}
+
+	> .#{$block}__separator {
+		height: 0.0625rem;
+		margin: 0.375rem 0.1875rem;
+		width: auto;
+		background-color: var(--sapToolbar_SeparatorColor);
+	}
+
+	.#{$block}__overflow__label {
+		&.#{$fd-namespace}-label {
+			margin: 0.375rem 0;
+		}
+	}
+
+	.#{$block}__overflow__form-label {
+		&.#{$fd-namespace}-form-label {
+			margin: 0.625rem 0 0.125rem 0;
+		}
+	}
+
+	.#{$block}__overflow__form-label,
+	.#{$block}__overflow__label {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+}
+
+
+.#{$block}__overflow__body {
+	max-height: 50vh;
+	overflow: auto;
+
+	.fd-button--menu {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		max-width: 100%;
+	}
+}
+
+.#{$block} > .#{$block}__overflow,
+.#{$block} .#{$block}__overflow, {
+	margin-left: auto;
+
+	@include fd-rtl() {
+		margin-left: 0;
+		margin-right: auto;
+	}
+}

libs/core/src/lib/toolbar/toolbar.module.ts

@@ -8,8 +8,6 @@ import { ToolbarItemDirective } from './toolbar-item.directive';
 import { ToolbarSeparatorComponent } from './toolbar-separator.component';
 import { ToolbarSpacerComponent } from './toolbar-spacer.component';
 import { ToolbarLabelDirective } from './toolbar-label.directive';
-import { ToolbarOverflowButtonDirective } from './toolbar-overflow-button.directive';
-import { ToolbarOverflowButtonMenuDirective } from './toolbar-overflow-button-menu.directive';
 import { ToolbarFormLabelDirective } from './toolbar-form-label.directive';
 import { ToolbarOverflowPriorityDirective } from './toolbar-overflow-priority.directive';
 import { ToolbarOverflowGroupDirective } from './toolbar-overflow-group.directive';
@@ -21,8 +19,6 @@ const components = [
     ToolbarSeparatorComponent,
     ToolbarFormLabelDirective,
     ToolbarLabelDirective,
-    ToolbarOverflowButtonDirective,
-    ToolbarOverflowButtonMenuDirective,
     ToolbarOverflowPriorityDirective,
     ToolbarOverflowGroupDirective
 ];

package.json

@@ -121,7 +121,7 @@
     "classlist.js": "1.1.20150312",
     "core-js": "3.7.0",
     "focus-trap": "6.6.0",
-    "fundamental-styles": "0.20.0-rc.21",
+    "fundamental-styles": "0.19.0-rc.43",
     "highlight.js": "10.7.2",
     "intl": "1.2.5",
     "jasminewd2": "2.2.0",