diff --git a/common/changes/office-ui-fabric-react/users-adtran-overflowMenuProps-cmdbar_2018-05-08-21-16.json b/common/changes/office-ui-fabric-react/users-adtran-overflowMenuProps-cmdbar_2018-05-08-21-16.json new file mode 100644 index 00000000000000..76588362200034 --- /dev/null +++ b/common/changes/office-ui-fabric-react/users-adtran-overflowMenuProps-cmdbar_2018-05-08-21-16.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Added overflowMenuProps property to CommandBar", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "adtran@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx index 895d5194fa414c..310a4bc0076e0f 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx @@ -8,7 +8,8 @@ import { getId, getNativeProps, KeyCodes, - createRef + createRef, + css } from '../../Utilities'; import { Icon } from '../../Icon'; import { DirectionalHint } from '../../common/DirectionalHint'; @@ -431,7 +432,7 @@ export class BaseButton extends BaseComponent { (contextualMenuProps) ? (): IContextualMenuProps | undefined { if (this.state && this.state.expandedMenuItemKey) { if (this.state.expandedMenuItemKey === OVERFLOW_KEY) { // Keep the overflow menu open - return { items: overflowItems }; + return { ...overflowMenuProps, items: overflowItems }; } else { // Find the currently open key in the new props const matchingItem = renderedItems.filter(item => item.key === this.state.expandedMenuItemKey); diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.types.ts b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.types.ts index 216e55194332ce..7aca28a7fcf059 100644 --- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.types.ts +++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IContextualMenuItem } from '../ContextualMenu/index'; +import { IContextualMenuItem, IContextualMenuProps } from '../ContextualMenu/index'; export interface ICommandBar { /** @@ -36,6 +36,11 @@ export interface ICommandBarProps extends React.HTMLAttributes { */ overflowItems?: IContextualMenuItem[]; + /** + * Menu props to be passed to overflow elipsis + */ + overflowMenuProps?: Partial; + /** * Text to be read by screen readers if there are overflow items and focus is on elipsis button */