Merge pull request #1172 from OfficeDev/contextual-menu/item-styles

Add style property to IContextualMenuItem
microsoft · Mar 3, 2017 · c3817c9 · c3817c9
2 parents 6831a4e + 11e9fb5
commit c3817c9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/common/changes/contextual-menu-item-styles_2017-03-03-22-07.json b/common/changes/contextual-menu-item-styles_2017-03-03-22-07.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Contextual Menu: allow developers to specify inline styles for menu items",
+      "type": "minor"
+    }
+  ],
+  "email": "miclo@microsoft.com"
+}
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts
@@ -246,6 +246,12 @@ export interface IContextualMenuItem {
    */
   className?: string;
 
+  /**
+   * Additional styles to apply to the menu item
+   * @defaultvalue undefined
+   */
+  style?: React.CSSProperties;
+
   /**
    * Optional accessibility label (aria-label) attribute that will be stamped on to the element.
    * If none is specified, the arai-label attribute will contain the item name

diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -292,7 +292,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
   private _renderHeaderMenuItem(item: IContextualMenuItem, index: number, hasCheckmarks: boolean, hasIcons: boolean): React.ReactNode {
     return (
-      <div className={ css('ms-ContextualMenu-header', styles.header) }>
+      <div className={ css('ms-ContextualMenu-header', styles.header) } style={ item.style }>
         { this._renderMenuItemChildren(item, index, hasCheckmarks, hasIcons) }
       </div>);
   }
@@ -308,6 +308,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
             styles.link,
             (item.isDisabled || item.disabled) && 'is-disabled') }
           role='menuitem'
+          style={ item.style }
           onClick={ this._onAnchorClick.bind(this, item) }>
           { (hasIcons) ? (
             this._renderIcon(item)
@@ -346,7 +347,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       title: item.title,
       'aria-label': ariaLabel,
       'aria-haspopup': hasSubmenuItems(item) ? true : null,
-      'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null
+      'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null,
+      style: item.style,
     };
 
     return React.createElement(