diff --git a/common/changes/callout-min-page-padding_2017-05-05-20-29.json b/common/changes/callout-min-page-padding_2017-05-05-20-29.json new file mode 100644 index 0000000000000..2e7cbc62e3883 --- /dev/null +++ b/common/changes/callout-min-page-padding_2017-05-05-20-29.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Callout: Add minPagePadding. Dropdown: Expose calloutProps", + "type": "minor" + } + ], + "email": "micahgodbolt@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts b/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts index 63b0a7f38222a..db99634ca0d65 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts +++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts @@ -54,6 +54,12 @@ export interface ICalloutProps extends React.Props { */ bounds?: IRectangle; + /** + * The minimum distance the callout will be away from the edge of the screen. + * @default 8 + */ + minPagePadding?: number; + /** * If true use a point rather than rectangle to position the Callout. * For example it can be used to position based on a click. diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx index 9929bb2c71ded..91dffc87d289a 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx @@ -22,7 +22,6 @@ const styles: any = stylesImport; const BEAK_ORIGIN_POSITION = { top: 0, left: 0 }; const OFF_SCREEN_STYLE = { opacity: 0 }; const BORDER_WIDTH: number = 1; -const SPACE_FROM_EDGE: number = 8; export interface ICalloutState { positions?: IPositionInfo; @@ -37,6 +36,7 @@ export class CalloutContent extends BaseComponent isBeakVisible: true, beakWidth: 16, gapSpace: 0, + minPagePadding: 8, directionalHint: DirectionalHint.bottomAutoEdge }; @@ -265,12 +265,12 @@ export class CalloutContent extends BaseComponent if (!currentBounds) { currentBounds = { - top: 0 + SPACE_FROM_EDGE, - left: 0 + SPACE_FROM_EDGE, - right: this._targetWindow.innerWidth - SPACE_FROM_EDGE, - bottom: this._targetWindow.innerHeight - SPACE_FROM_EDGE, - width: this._targetWindow.innerWidth - SPACE_FROM_EDGE * 2, - height: this._targetWindow.innerHeight - SPACE_FROM_EDGE * 2 + top: 0 + this.props.minPagePadding, + left: 0 + this.props.minPagePadding, + right: this._targetWindow.innerWidth - this.props.minPagePadding, + bottom: this._targetWindow.innerHeight - this.props.minPagePadding, + width: this._targetWindow.innerWidth - this.props.minPagePadding * 2, + height: this._targetWindow.innerHeight - this.props.minPagePadding * 2 }; } this._bounds = currentBounds; 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 index d193484d69a64..2f328c5cc2c25 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.Props.ts @@ -3,6 +3,7 @@ import { ContextualMenu } from './ContextualMenu'; import { DirectionalHint } from '../../common/DirectionalHint'; import { FocusZoneDirection } from '../../FocusZone'; import { IIconProps } from '../Icon/Icon.Props'; +import { ICalloutProps } from '../../Callout'; import { IPoint, IRectangle @@ -164,6 +165,11 @@ export interface IContextualMenuProps extends React.Props { */ onMenuOpened?: (contextualMenu?: IContextualMenuProps) => void; + /** + * Pass in custom callout props + */ + calloutProps?: ICalloutProps; + } export interface IContextualMenuItem { diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx index ae2b27769cfd0..1a048daa2843f 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx @@ -183,7 +183,8 @@ export class ContextualMenu extends BaseComponent 0) { return ( this._focusZone = focusZone } role='menu' - aria-label={ ariaLabel } + aria-label={ ariaLabel } isCircularNavigation={ true } >