fix: Update menu addon to 0.12.0 styles (#3391)

BREAKING CHANGE: (menu) - fd-menu-addon changed to component, can't be used with fd-icon anymore
SAP · Sep 25, 2020 · 2b0766b · 2b0766b
1 parent de75323
commit 2b0766b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 19 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
@@ -4,23 +4,23 @@
     <fd-menu #menuIcons>
         <li fd-menu-item>
             <a fd-menu-interactive href="#">
-                <fd-icon fd-menu-addon position="before" [glyph]="'cart'"></fd-icon>
+                <fd-menu-addon position="before" [glyph]="'cart'"></fd-menu-addon>
                 <span fd-menu-title>Option 1</span>
             </a>
         </li>
 
         <li fd-menu-item>
             <a fd-menu-interactive href="#">
-                <fd-icon fd-menu-addon position="before" [glyph]="'accept'"></fd-icon>
+                <fd-menu-addon position="before" [glyph]="'accept'"></fd-menu-addon>
                 <span fd-menu-title>Option 2</span>
-                <fd-icon fd-menu-addon [glyph]="'decline'"></fd-icon>
+                <fd-menu-addon [glyph]="'decline'"></fd-menu-addon>
             </a>
         </li>
 
         <li fd-menu-item>
             <a fd-menu-interactive href="#">
                 <span fd-menu-title>Option 3</span>
-                <fd-icon fd-menu-addon [glyph]="'menu'"></fd-icon>
+                <fd-menu-addon [glyph]="'menu'"></fd-menu-addon>
             </a>
         </li>
     </fd-menu>

diff --git a/apps/docs/src/app/core/component-docs/menu/examples/menu-mobile-example.component.html b/apps/docs/src/app/core/component-docs/menu/examples/menu-mobile-example.component.html
@@ -4,21 +4,21 @@
     <li fd-menu-item [submenu]="fruits">
         <div fd-menu-interactive>
             <span fd-menu-title>Fruits</span>
-            <fd-icon fd-menu-addon [submenuIndicator]="true"></fd-icon>
+            <fd-menu-addon [submenuIndicator]="true"></fd-menu-addon>
         </div>
     </li>
 
     <li fd-menu-item [submenu]="vegetables">
         <div fd-menu-interactive>
             <span fd-menu-title>Vegetables</span>
-            <fd-icon fd-menu-addon [submenuIndicator]="true"></fd-icon>
+            <fd-menu-addon [submenuIndicator]="true"></fd-menu-addon>
         </div>
     </li>
 
     <li fd-menu-item [submenu]="milkProducts">
         <div fd-menu-interactive>
             <span fd-menu-title>Milk products</span>
-            <fd-icon fd-menu-addon [submenuIndicator]="true"></fd-icon>
+            <fd-menu-addon [submenuIndicator]="true"></fd-menu-addon>
         </div>
     </li>
 </fd-menu>
@@ -55,14 +55,14 @@
     <li fd-menu-item [submenu]="cheeses">
         <div fd-menu-interactive>
             <span fd-menu-title>Cheese</span>
-            <fd-icon fd-menu-addon [submenuIndicator]="true"></fd-icon>
+            <fd-menu-addon [submenuIndicator]="true"></fd-menu-addon>
         </div>
     </li>
 
     <li fd-menu-item [submenu]="yogurts">
         <div fd-menu-interactive>
             <span fd-menu-title>Yogurts</span>
-            <fd-icon fd-menu-addon [submenuIndicator]="true"></fd-icon>
+            <fd-menu-addon [submenuIndicator]="true"></fd-menu-addon>
         </div>
     </li>
 </fd-submenu>

diff --git a/apps/docs/src/app/core/component-docs/menu/examples/menu-with-submenu-example.component.html b/apps/docs/src/app/core/component-docs/menu/examples/menu-with-submenu-example.component.html
@@ -11,21 +11,21 @@
     <li fd-menu-item [submenu]="fruits">
         <div fd-menu-interactive>
             <span fd-menu-title>Fruits</span>
-            <fd-icon fd-menu-addon [submenuIndicator]="true"></fd-icon>
+            <fd-menu-addon [submenuIndicator]="true"></fd-menu-addon>
         </div>
     </li>
 
     <li fd-menu-item [submenu]="vegetables">
         <div fd-menu-interactive>
             <span fd-menu-title>Vegetables</span>
-            <fd-icon fd-menu-addon [submenuIndicator]="true"></fd-icon>
+            <fd-menu-addon [submenuIndicator]="true"></fd-menu-addon>
         </div>
     </li>
 
     <li fd-menu-item [submenu]="milkProducts">
         <div fd-menu-interactive>
             <span fd-menu-title>Milk products</span>
-            <fd-icon fd-menu-addon [submenuIndicator]="true"></fd-icon>
+            <fd-menu-addon [submenuIndicator]="true"></fd-menu-addon>
         </div>
     </li>
 </fd-menu>
@@ -62,14 +62,14 @@
     <li fd-menu-item [submenu]="cheeses">
         <div fd-menu-interactive>
             <span fd-menu-title>Cheese</span>
-            <fd-icon fd-menu-addon [submenuIndicator]="true"></fd-icon>
+            <fd-menu-addon [submenuIndicator]="true"></fd-menu-addon>
         </div>
     </li>
 
     <li fd-menu-item [submenu]="yogurts">
         <div fd-menu-interactive>
             <span fd-menu-title>Yogurts</span>
-            <fd-icon fd-menu-addon [submenuIndicator]="true"></fd-icon>
+            <fd-menu-addon [submenuIndicator]="true"></fd-menu-addon>
         </div>
     </li>
 </fd-submenu>

diff --git a/libs/core/src/lib/menu/directives/menu-addon.directive.ts b/libs/core/src/lib/menu/directives/menu-addon.directive.ts
@@ -1,8 +1,12 @@
-import { Directive, HostBinding, Input } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
-@Directive({
-    // tslint:disable-next-line:directive-selector
-    selector: '[fd-menu-addon]'
+@Component({
+    // tslint:disable-next-line:component-selector
+    selector: 'fd-menu-addon',
+    template: `
+        <fd-icon [glyph]="glyph" *ngIf="glyph" role="presentation"></fd-icon>
+        <ng-content></ng-content>
+    `
 })
 export class MenuAddonDirective {
     /** Whether addon is used before or after text */
@@ -11,6 +15,12 @@ export class MenuAddonDirective {
         this.fdAddonAfterClass = position === 'after';
     }
 
+    /** The icon name to display. See the icon page for the list of icons
+     * here: https://sap.github.io/fundamental-ngx/icon
+     * */
+    @Input()
+    glyph: string;
+
     /** Whether is used as submenu indicator */
     @Input()
     @HostBinding('class.fd-menu__addon-after--submenu')

diff --git a/libs/core/src/lib/menu/menu.module.ts b/libs/core/src/lib/menu/menu.module.ts
@@ -10,9 +10,10 @@ import { MenuItemComponent, SubmenuComponent } from './menu-item/menu-item.compo
 import { MenuShortcutDirective } from './directives/menu-shortcut.directive';
 import { PopoverModule } from '../popover/popover.module';
 import { MenuTriggerDirective } from './directives/menu-trigger.directive';
+import { IconModule } from '../icon/icon.module';
 
 @NgModule({
-    imports: [CommonModule, PopoverModule],
+    imports: [CommonModule, PopoverModule, IconModule],
     declarations: [
         MenuComponent,
         MenuItemComponent,