From 15eef93fb6a87b1c46722cc68870294882b8b03d Mon Sep 17 00:00:00 2001 From: "REDMOND\\jspurlin" Date: Tue, 27 Mar 2018 13:59:44 -0700 Subject: [PATCH 1/8] Add a prop so that OverflowSets do not have to contain FocusZones --- .../components/OverflowSet/OverflowSet.tsx | 26 ++++++++++++++++--- .../OverflowSet/OverflowSet.types.ts | 10 +++++++ 2 files changed, 32 insertions(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx index aed2fe8a340f93..59944ca81da42d 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx @@ -15,6 +15,16 @@ export class OverflowSet extends BaseComponent implements private _focusZone = createRef(); + constructor(props: IOverflowSetProps) { + super(props); + + if (props.doNotContainWithinFocusZone) { + this._warnMutuallyExclusive({ + 'doNotContainWithinFocusZone': 'focusZoneProps' + }); + } + } + public render() { const { items, @@ -22,10 +32,19 @@ export class OverflowSet extends BaseComponent implements className, focusZoneProps, vertical = false, - role = 'menubar' + role = 'menubar', + doNotContainWithinFocusZone } = this.props; - return ( + const overflowSetItems = items && this._onRenderItems(items); + const overflowSetButtonWrapper = overflowItems && overflowItems.length > 0 && this._onRenderOverflowButtonWrapper(overflowItems); + + const overflowSetContents = { + ...overflowSetItems, + ...overflowSetButtonWrapper + }; + + return doNotContainWithinFocusZone ? overflowSetContents : ( implements direction={ vertical ? FocusZoneDirection.vertical : FocusZoneDirection.horizontal } role={ role } > - { items && this._onRenderItems(items) } - { overflowItems && overflowItems.length > 0 && this._onRenderOverflowButtonWrapper(overflowItems) } + { overflowSetContents } ); } diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.types.ts b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.types.ts index 3930f92d1cf039..0bb8f771dab982 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.types.ts +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.types.ts @@ -50,9 +50,19 @@ export interface IOverflowSetProps extends React.Props { /** * Custom properties for OverflowSet's FocusZone. + * If doNotContainWithinFocusZone is set to true focusZoneProps will be ignored. + * Use one or the other */ focusZoneProps?: IFocusZoneProps; + /** + * If true do not contain the OverflowSet inside of a FocusZone, + * otherwise the OverflowSet will contain a FocusZone. + * If this is set to true focusZoneProps will be ignored. + * Use one or the other + */ + doNotContainWithinFocusZone?: boolean; + /** * The role for the OverflowSet. * @default 'menubar' From 6a7e91c33b7b7b58d37dc5744142566285b439e8 Mon Sep 17 00:00:00 2001 From: "REDMOND\\jspurlin" Date: Wed, 28 Mar 2018 09:14:46 -0700 Subject: [PATCH 2/8] pull the common aspects into variables so they can be reused --- .../components/OverflowSet/OverflowSet.tsx | 67 +++++++++++++------ 1 file changed, 46 insertions(+), 21 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx index 59944ca81da42d..a057ac431fc1b0 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx @@ -2,7 +2,11 @@ import * as React from 'react'; import { css, BaseComponent, - createRef + createRef, + getNativeProps, + buttonProperties, + getId, + focusFirstChild } from '../../Utilities'; import { mergeStyles } from '../../Styling'; import { IOverflowSet, IOverflowSetProps, IOverflowSetItemProps } from './OverflowSet.types'; @@ -14,6 +18,8 @@ const styles: any = stylesImport; export class OverflowSet extends BaseComponent implements IOverflowSet { private _focusZone = createRef(); + private _divContainer = createRef(); + private _overflowButtonKey: string; constructor(props: IOverflowSetProps) { super(props); @@ -23,6 +29,8 @@ export class OverflowSet extends BaseComponent implements 'doNotContainWithinFocusZone': 'focusZoneProps' }); } + + this._overflowButtonKey = getId(); } public render() { @@ -36,33 +44,50 @@ export class OverflowSet extends BaseComponent implements doNotContainWithinFocusZone } = this.props; - const overflowSetItems = items && this._onRenderItems(items); - const overflowSetButtonWrapper = overflowItems && overflowItems.length > 0 && this._onRenderOverflowButtonWrapper(overflowItems); + const overflowSetContents = [ + items && this._onRenderItems(items), + overflowItems && overflowItems.length > 0 && this._onRenderOverflowButtonWrapper(overflowItems) + ]; - const overflowSetContents = { - ...overflowSetItems, - ...overflowSetButtonWrapper + const commonProps = { + className: mergeStyles( + 'ms-OverflowSet', + styles.root, + vertical && styles.rootVertical, + className + ), + role: role }; - return doNotContainWithinFocusZone ? overflowSetContents : ( - { overflowSetContents } - - ); + + ) : ( + + { overflowSetContents } + + ); } public focus() { + if (this.props.doNotContainWithinFocusZone) { + if (this._divContainer.value) { + focusFirstChild(this._divContainer.value); + } + + return; + } + if (this._focusZone.value) { this._focusZone.value.focus(); } @@ -83,7 +108,7 @@ export class OverflowSet extends BaseComponent implements private _onRenderOverflowButtonWrapper = (items: any[]): JSX.Element => { const wrapperDivProps: React.HTMLProps = { className: css('ms-OverflowSet-overflowButton', styles.item) }; return ( -
+
{ this.props.onRenderOverflowButton(items) }
); From f9ce90d6fd52357ac24969110e045cbccece691d Mon Sep 17 00:00:00 2001 From: "REDMOND\\jspurlin" Date: Wed, 28 Mar 2018 13:10:57 -0700 Subject: [PATCH 3/8] simplify OverflowSet even more (use Tag to remove duplication) --- .../components/OverflowSet/OverflowSet.tsx | 63 ++++++++++--------- 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx index a057ac431fc1b0..149a95f9ece846 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx @@ -44,39 +44,40 @@ export class OverflowSet extends BaseComponent implements doNotContainWithinFocusZone } = this.props; - const overflowSetContents = [ - items && this._onRenderItems(items), - overflowItems && overflowItems.length > 0 && this._onRenderOverflowButtonWrapper(overflowItems) - ]; - - const commonProps = { - className: mergeStyles( - 'ms-OverflowSet', - styles.root, - vertical && styles.rootVertical, - className - ), - role: role - }; - - return doNotContainWithinFocusZone ? ( -
- { overflowSetContents } -
- ) : ( - - { overflowSetContents } - - ); + { items && this._onRenderItems(items) } + { overflowItems && overflowItems.length > 0 && this._onRenderOverflowButtonWrapper(overflowItems) } + + ); } public focus() { From 59317ed8ade62633ee0f35c13022995c0b71bde6 Mon Sep 17 00:00:00 2001 From: "REDMOND\\jspurlin" Date: Wed, 28 Mar 2018 13:51:48 -0700 Subject: [PATCH 4/8] Revert back and remove the key since it's no longer needed --- .../src/components/OverflowSet/OverflowSet.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx index 149a95f9ece846..30f628730c6e9b 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx @@ -19,7 +19,6 @@ export class OverflowSet extends BaseComponent implements private _focusZone = createRef(); private _divContainer = createRef(); - private _overflowButtonKey: string; constructor(props: IOverflowSetProps) { super(props); @@ -29,8 +28,6 @@ export class OverflowSet extends BaseComponent implements 'doNotContainWithinFocusZone': 'focusZoneProps' }); } - - this._overflowButtonKey = getId(); } public render() { @@ -109,7 +106,7 @@ export class OverflowSet extends BaseComponent implements private _onRenderOverflowButtonWrapper = (items: any[]): JSX.Element => { const wrapperDivProps: React.HTMLProps = { className: css('ms-OverflowSet-overflowButton', styles.item) }; return ( -
+
{ this.props.onRenderOverflowButton(items) }
); From 3b724d64adc51c2917cdd7595e283be59de2ff20 Mon Sep 17 00:00:00 2001 From: "REDMOND\\jspurlin" Date: Thu, 29 Mar 2018 07:42:38 -0700 Subject: [PATCH 5/8] rush change --- ...verflowSetToNotBeInFocusZone_2018-03-29-14-40.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/jspurlin-OverflowSetToNotBeInFocusZone_2018-03-29-14-40.json diff --git a/common/changes/office-ui-fabric-react/jspurlin-OverflowSetToNotBeInFocusZone_2018-03-29-14-40.json b/common/changes/office-ui-fabric-react/jspurlin-OverflowSetToNotBeInFocusZone_2018-03-29-14-40.json new file mode 100644 index 00000000000000..5201f21344200e --- /dev/null +++ b/common/changes/office-ui-fabric-react/jspurlin-OverflowSetToNotBeInFocusZone_2018-03-29-14-40.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "OverflowSet: Allow the OverflowSet to not be contained within a FocusZone", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "jspurlin@microsoft.com" +} \ No newline at end of file From cee25f790e064fa6fc4bc025a9fdeda43d8a062a Mon Sep 17 00:00:00 2001 From: "REDMOND\\jspurlin" Date: Thu, 29 Mar 2018 08:07:03 -0700 Subject: [PATCH 6/8] Make sure the focusZoneProps are still getting passed down --- .../src/components/OverflowSet/OverflowSet.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx index 30f628730c6e9b..41762608eb40d9 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx @@ -42,33 +42,32 @@ export class OverflowSet extends BaseComponent implements } = this.props; let Tag; - let elementRef; - let direction; + let uniqueComponentProps; if (doNotContainWithinFocusZone) { Tag = 'div'; - elementRef = { + uniqueComponentProps = { ref: this._divContainer }; } else { Tag = FocusZone; - elementRef = { - componentRef: this._focusZone + uniqueComponentProps = { + ...focusZoneProps, + componentRef: this._focusZone, + direction: vertical ? FocusZoneDirection.vertical : FocusZoneDirection.horizontal }; - direction = vertical ? FocusZoneDirection.vertical : FocusZoneDirection.horizontal; } return ( { items && this._onRenderItems(items) } From a8cd5bf2463d956a9e63707b99265db430e46aeb Mon Sep 17 00:00:00 2001 From: "REDMOND\\jspurlin" Date: Thu, 29 Mar 2018 08:12:06 -0700 Subject: [PATCH 7/8] The divProperties only need to be used when doNotContainWithinFocusZone is true --- .../src/components/OverflowSet/OverflowSet.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx index 41762608eb40d9..7179d5819db0b0 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx @@ -4,7 +4,7 @@ import { BaseComponent, createRef, getNativeProps, - buttonProperties, + divProperties, getId, focusFirstChild } from '../../Utilities'; @@ -47,6 +47,7 @@ export class OverflowSet extends BaseComponent implements if (doNotContainWithinFocusZone) { Tag = 'div'; uniqueComponentProps = { + ...getNativeProps(this.props, divProperties), ref: this._divContainer }; } else { @@ -60,7 +61,6 @@ export class OverflowSet extends BaseComponent implements return ( Date: Thu, 29 Mar 2018 08:14:55 -0700 Subject: [PATCH 8/8] Remove unneeded import --- .../src/components/OverflowSet/OverflowSet.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx index 7179d5819db0b0..cb4678cd7ec80e 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx @@ -5,7 +5,6 @@ import { createRef, getNativeProps, divProperties, - getId, focusFirstChild } from '../../Utilities'; import { mergeStyles } from '../../Styling';