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 label="Button" [fdMenu]="true" [compact]="true"></button>
+    <button fd-toolbar-item fd-button fd-toolbar-overflow-button fd-toolbar-overflow-button-menu 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 label="Button" [compact]="true"></button>
-    <button fd-toolbar-item fd-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>
     <fd-toolbar-spacer fd-toolbar-item [fixed]="true" [width]="'200px'"></fd-toolbar-spacer>
-    <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>
+    <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>
 </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 directive</code> in each Toolbar.
+   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.
 </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__body';
+    overflowBody = '.fd-toolbar__overflow';
     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 { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive } from '@angular/core';
+import { 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'
+        class: 'fd-form-label fd-toolbar__overflow-form-label fd-toolbar__overflow-form-label--text'
     }
 })
-export class ToolbarFormLabelDirective extends ToolbarItemDirective {}
+export class ToolbarFormLabelDirective extends ToolbarItemDirective { }

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

@@ -1,11 +1,11 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive } from '@angular/core';
+import {  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-overflow-button-menu.directive.ts

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+import { ToolbarItemDirective } from './toolbar-item.directive';
+
+@Directive({
+    selector: '[fdToolbarOverflowButtonMenu], [fd-toolbar-overflow-button-menu]',
+    host: {
+        class: 'fd-toolbar__overflow-button--menu'
+    }
+})
+export class ToolbarOverflowButtonMenuDirective extends ToolbarItemDirective {}

libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts

@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+import { ToolbarItemDirective } from './toolbar-item.directive';
+
+@Directive({
+    selector: '[fdToolbarOverflowButton], [fd-toolbar-overflow-button]',
+    host: {
+        class: 'fd-toolbar__overflow-button'
+    }
+})
+export class ToolbarOverflowButtonDirective 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__overflow-spacer"></span>
+    <span #overflowSpacer class="fd-toolbar__spacer"></span>
     <ng-container *ngIf="shouldOverflow">
         <fd-popover
                 placement="bottom-end"
                 [noArrow]="true"
-                class="fd-popover fd-toolbar__overflow">
+                class="fd-popover">
             <fd-popover-control>
                 <button
                     *ngIf="overflowVisibility | async"
@@ -19,7 +19,7 @@
                 ></button>
             </fd-popover-control>
             <fd-popover-body>
-                <div class="fd-toolbar__overflow__body" #overflowBody></div>
+                <div class="fd-toolbar__overflow" #overflowBody></div>
             </fd-popover-body>
         </fd-popover>
     </ng-container>

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

@@ -1,127 +1,5 @@
 @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,6 +8,8 @@ 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';
@@ -19,6 +21,8 @@ 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.19.0-rc.43",
+    "fundamental-styles": "0.20.0-rc.21",
     "highlight.js": "10.7.2",
     "intl": "1.2.5",
     "jasminewd2": "2.2.0",