fix(core): Fix menu with addons (#1582)

* Fix menu with addons * Fix shellbar addon menu items * Fix unit tests for shellbar actions
SAP · Nov 20, 2019 · 8d3c0cf · 8d3c0cf
1 parent ad7eaed
commit 8d3c0cf
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 30 deletions.
diff --git a/apps/docs/src/app/core/component-docs/menu/examples/menu-addon-example.component.html b/apps/docs/src/app/core/component-docs/menu/examples/menu-addon-example.component.html
@@ -1,39 +1,34 @@
 <fd-menu fd-menu-addon>
     <ul fd-menu-list>
         <li>
-            <div fd-menu-item-addon>
-                <fd-icon [glyph]="'cart-5'"></fd-icon>
-            </div>
-            <a href=""
-               fd-menu-item>Option 1</a>
+            <a href="" fd-menu-item>
+                <fd-icon fd-menu-item-addon [glyph]="'cart-5'"></fd-icon>
+                Option 1
+            </a>
         </li>
         <li>
-            <div fd-menu-item-addon>
-                <fd-icon [glyph]="'accept'"></fd-icon>
-            </div>
-            <a href=""
-               fd-menu-item>Option 2</a>
+            <a href="" fd-menu-item>
+                <fd-icon fd-menu-item-addon [glyph]="'accept'"></fd-icon>
+                Option 2
+            </a>
         </li>
         <li>
-            <div fd-menu-item-addon>
-                <fd-icon [glyph]="'menu'"></fd-icon>
-            </div>
-            <a href=""
-               fd-menu-item>Option 3</a>
+            <a href="" fd-menu-item>
+                <fd-icon fd-menu-item-addon [glyph]="'menu'"></fd-icon>
+                Option 3
+            </a>
         </li>
         <li>
-            <div fd-menu-item-addon>
-                <input type="checkbox" class="fd-form__control">
-            </div>
-            <a href=""
-               fd-menu-item>Option 4</a>
+            <a href="" fd-menu-item>
+                <input type="checkbox" fd-menu-item-addon>
+                Option 4
+            </a>
         </li>
         <li>
-            <div fd-menu-item-addon>
-                <fd-icon [glyph]="'cart'"></fd-icon>
-            </div>
-            <a href=""
-               fd-menu-item>Option 5</a>
+            <a href="" fd-menu-item>
+                <fd-icon fd-menu-item-addon [glyph]="'cart'"></fd-icon>
+                Option 5
+            </a>
         </li>
     </ul>
 </fd-menu>
diff --git a/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions.component.html b/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions.component.html
@@ -22,13 +22,10 @@
                 <fd-menu>
                     <ul fd-menu-list
                         *ngIf="!showCollapsedProducts">
-                        <div *ngFor="let action of shellbarActions"
-                                class="fd-menu__addon-before">
-                            <span [ngClass]="'sap-icon--' + action.glyph"></span>
-                        </div>
                         <li fd-menu-item
                             *ngFor="let action of shellbarActions"
                             (click)="actionClicked(action, $event)">
+                            <fd-icon fd-menu-item-addon [glyph]="action.glyph"></fd-icon>
                             {{action.label}}
                         </li>
                     </ul>

diff --git a/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions.component.spec.ts b/libs/core/src/lib/shellbar/shellbar-actions/shellbar-actions.component.spec.ts
@@ -8,6 +8,7 @@ import { ShellbarUserMenuComponent } from '../user-menu/shellbar-user-menu.compo
 import { ButtonModule } from '../../button/button.module';
 import { IdentifierModule } from '../../identifier/identifier.module';
 import { ProductSwitchModule } from '../../product-switch/product-switch.module';
+import { IconModule } from '../../icon/icon.module';
 
 describe('ShellbarActionsComponent', () => {
     let component: ShellbarActionsComponent;
@@ -19,7 +20,7 @@ describe('ShellbarActionsComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [ ShellbarActionsComponent, ShellbarUserMenuComponent ],
-            imports: [ MenuModule, PopoverModule, ButtonModule, IdentifierModule, ProductSwitchModule ],
+            imports: [ MenuModule, PopoverModule, ButtonModule, IconModule, IdentifierModule, ProductSwitchModule ],
             providers: [{ provide: 'window', useFactory: (() => windowMock ) }]
         }).compileComponents();
     }));