+ { this._renderCompositeLink(link, linkIndex, nestingLevel) }
{// show child links
- // 1. only for the first level and
- // 2. if the link is expanded
- nestingLevel == 0 && link.isExpanded ? (
-
- {this._renderLinks(link.links as INavLink[], ++nestingLevel)}
-
- ) : null}
+ // 1. only for the first level and
+ // 2. if the link is expanded
+ nestingLevel == 0 && link.isExpanded ? (
+
+ { this._renderLinks(link.links as INavLink[], ++nestingLevel) }
+
);
}
@@ -308,6 +308,7 @@ class SlimNavComponent extends NavBase {
const classNames = getClassNames(styles!, {});
+
let isGroupHeaderVisible = false;
// first group header is hidden by default, display group header for other groups only if there are visible links
@@ -316,14 +317,14 @@ class SlimNavComponent extends NavBase {
}
return (
-
+
{// do not render group header for the first group
- isGroupHeaderVisible ? (
-
- Use this Dialog sparingly, when calling extra attention to the content. It can be used in situations
- where you want to teach the user something or notify them of an important change.
-
-
-
-
-
- A blocking Dialog disables all other actions and commands on the page behind it. They should be used
- very sparingly, only when it is critical that the user makes a choice or provides information before
- they can proceed. Blocking Dialogs are generally used for irreversible or potentially destructive tasks.
-
+ Use this Dialog sparingly, when calling extra attention to the content. It can be used in situations where
+ you want to teach the user something or notify them of an important change.
+
+ A blocking Dialog disables all other actions and commands on the page behind it. They should be used very
+ sparingly, only when it is critical that the user makes a choice or provides information before they can
+ proceed. Blocking Dialogs are generally used for irreversible or potentially destructive tasks.
+
- The default configuration for a card represents a single file, with space to denote the last significant
- event and the person involved.
-
-
-
-
-
- This example shows a couple of optional abilities, including being able to have a card represent
- multiple items, being able to expose up to three relevant commands, and showing the number of views in
- the bottom right corner.
-
-
Also show a card with Logo, text preview and status that is used for Conversation card.
-
-
-
-
- When showing a card on a mobile device or a similarly narrow layout, you may choose this Compact layout
- which helps the filename remain scannable while giving roomy space for a preview thumbnail.
-
+ This example shows a couple of optional abilities, including being able to have a card represent multiple
+ items, being able to expose up to three relevant commands, and showing the number of views in the bottom
+ right corner.
+
+
Also show a card with Logo, text preview and status that is used for Conversation card.
+ When showing a card on a mobile device or a similarly narrow layout, you may choose this Compact layout
+ which helps the filename remain scannable while giving roomy space for a preview thumbnail.
+
- The ExtendedPeoplePicker is used to select one or more entities, such as people or groups. Entry points for
- ExtendedPeoplePicker are typically specialized TextField-like input fields known as a "well", which are used
- to search for recipients from a list. When a recipient is selected from the list, it is added to the well as
- a specialized Persona that can be interacted with or removed. Clicking on a Persona from the well should
- invoke a PersonaCard or open a profile pane for that recipient.
-
- }
- dos={
-
-
-
Use the ExtendedPeoplePicker to quickly search for a few people
-
Use the ExtendedPeoplePicker to manage a group of people
-
Use defaultSelectedItems when some people have already been selected
-
-
- }
- donts={
-
-
-
Use the ExtendedPeoplePicker to select something other than people
-
Use the ExtendedPeoplePicker to only display people
-
Use the ExtendedPeoplePicker without sufficient space
-
-
- }
- />
- );
- }
-}
+export const ExtendedPeoplePickerPage = (props: { isHeaderVisible: boolean }) => (
+
+);
diff --git a/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerBestPractices.md b/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerBestPractices.md
new file mode 100644
index 0000000000000..4e0c9e300fcca
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerBestPractices.md
@@ -0,0 +1,4 @@
+The ExtendedPeoplePicker is used to select one or more entities, such as people or groups. Entry points for
+ExtendedPeoplePicker are typically specialized TextField-like input fields known as a "well", which are used to search for recipients from a list. When
+a recipient is selected from the list, it is added to the well as a specialized Persona that can be interacted with or removed.
+Clicking on a Persona from the well should invoke a PersonaCard or open a profile pane for that recipient.
diff --git a/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerDonts.md b/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerDonts.md
new file mode 100644
index 0000000000000..55e11adfc4f6f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerDonts.md
@@ -0,0 +1,3 @@
+- Use the ExtendedPeoplePicker to select something other than people
+- Use the ExtendedPeoplePicker to only display people
+- Use the ExtendedPeoplePicker without sufficient space
diff --git a/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerDos.md b/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerDos.md
new file mode 100644
index 0000000000000..18c7be162cbbb
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerDos.md
@@ -0,0 +1,3 @@
+- Use the ExtendedPeoplePicker to quickly search for a few people
+- Use the ExtendedPeoplePicker to manage a group of people
+- Use defaultSelectedItems when some people have already been selected
diff --git a/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerOverview.md b/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerOverview.md
new file mode 100644
index 0000000000000..84e83ae487310
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ExtendedPicker/docs/ExtendedPeoplePickerOverview.md
@@ -0,0 +1,3 @@
+ExtendedPeoplePicker are used to pick recipients. The difference between this and the current PeoplePicker are:
+
+- Will remove selected items on backspace even if there is text in the input area
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx
index ef33752f8ee4c..277d55c3ae3d4 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.tsx
@@ -1,65 +1,48 @@
import * as React from 'react';
-import {
- ExampleCard,
- IComponentDemoPageProps,
- ComponentPage,
- PageMarkdown,
- PropertiesTableSet
-} from '@uifabric/example-app-base';
import { FacepileAddFaceExample } from './examples/Facepile.AddFace.Example';
+import { DemoPage } from '../../demo/components/DemoPage';
+import { IDemoPageProps } from '../../demo/components/DemoPage.types';
import { FacepileBasicExample } from './examples/Facepile.Basic.Example';
import { FacepileOverflowExample } from './examples/Facepile.Overflow.Example';
-import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { FacepileStatus } from './Facepile.checklist';
const FacepileAddFaceExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Facepile/examples/Facepile.AddFace.Example.tsx') as string;
const FacepileBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Facepile/examples/Facepile.Basic.Example.tsx') as string;
const FacepileOverflowExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx') as string;
-export class FacepilePage extends React.Component {
- public render(): JSX.Element {
- return (
-
-
-
-
-
-
-
-
-
-
-
- }
- propertiesTables={
- ('!raw-loader!office-ui-fabric-react/src/components/Facepile/Facepile.types.ts')]}
- />
- }
- overview={
-
- {require('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileOverview.md')}
-
- }
- bestPractices={}
- dos={
-
- {require('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileDos.md')}
-
- }
- donts={
-
- {require('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileDonts.md')}
-
- }
- isHeaderVisible={this.props.isHeaderVisible}
- componentStatus={}
- />
- );
- }
-}
+export const FacepilePageProps: IDemoPageProps = {
+ title: 'Facepile',
+ componentName: 'Facepile',
+ componentUrl:
+ 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Facepile',
+ componentStatus: FacepileStatus,
+ examples: [
+ {
+ title: 'Facepile with size and fade in options',
+ code: FacepileBasicExampleCode,
+ view:
+ },
+ {
+ title: 'Facepile with overflow buttons',
+ code: FacepileOverflowExampleCode,
+ view:
+ },
+ {
+ title: 'Facepile with face adding functionality',
+ code: FacepileAddFaceExampleCode,
+ view:
+ }
+ ],
+ propertiesTablesSources: [
+ require('!raw-loader!office-ui-fabric-react/src/components/Facepile/Facepile.types.ts')
+ ],
+ overview: require('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileOverview.md'),
+ bestPractices: '',
+ dos: require('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileDos.md'),
+ donts: require('!raw-loader!office-ui-fabric-react/src/components/Facepile/docs/FacepileDonts.md'),
+ isHeaderVisible: true
+};
+
+export const FacepilePage = (props: { isHeaderVisible: boolean }) => (
+
+);
diff --git a/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePickerPage.tsx b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePickerPage.tsx
index a0ba6df73cbf5..dd74f90ba5317 100644
--- a/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePickerPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePickerPage.tsx
@@ -1,66 +1,40 @@
import * as React from 'react';
-import { ExampleCard, ComponentPage, IComponentDemoPageProps, PropertiesTableSet } from '@uifabric/example-app-base';
import { FloatingPeoplePickerTypesExample } from '../PeoplePicker/examples/FloatingPeoplePicker.Basic.Example';
+import { DemoPage } from '../../../demo/components/DemoPage';
+import { IDemoPageProps } from '../../../demo/components/DemoPage.types';
+
const FloatingPeoplePickerBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx') as string;
+export const FloatingPeoplePickerPageProps: IDemoPageProps = {
+ title: 'FloatingPeoplePicker',
+ componentName: 'FloatingPeoplePicker',
+ componentUrl:
+ 'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/FloatingPeoplePicker',
+ examples: [
+ {
+ title: 'Floating People Picker',
+ code: FloatingPeoplePickerBasicExampleCode,
+ view:
+ }
+ ],
+ propertiesTablesSources: [
+ require('!raw-loader!office-ui-fabric-react/src/components/FloatingPicker/BaseFloatingPicker.types.ts')
+ ],
+ overview: require<
+ string
+ >('!raw-loader!office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerOverview.md'),
+ bestPractices: require<
+ string
+ >('!raw-loader!office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerBestPractices.md'),
+ dos: require<
+ string
+ >('!raw-loader!office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerDos.md'),
+ donts: require<
+ string
+ >('!raw-loader!office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerDonts.md'),
+ isHeaderVisible: true
+};
-export class FloatingPeoplePickerPage extends React.Component {
- public render(): JSX.Element {
- return (
-
-
-
-
-
- }
- propertiesTables={
- ('!raw-loader!office-ui-fabric-react/src/components/FloatingPicker/BaseFloatingPicker.types.ts')
- ]}
- />
- }
- overview={
-
-
- {' '}
- FloatingPeoplePicker are used to pick recipients but do not need a well or necessarily keep track of
- selected people
-
-
- The FloatingPeoplePicker is used to select one or more entities, such as people or groups. Entry points for
- PeoplePickers are typically specialized TextField-like input fields known as a "well", which are used to
- search for recipients from a list. When a recipient is selected from the list, it is added to the well as a
- specialized Persona that can be interacted with or removed. Clicking on a Persona from the well should
- invoke a PersonaCard or open a profile pane for that recipient.
-
- }
- dos={
-
-
-
Use the FloatingPeoplePicker to quickly search for a few people
-
-
- }
- donts={
-
-
-
Use the FloatingPeoplePicker to select something other than people
-
Use the FloatingPeoplePicker without sufficient space
-
-
- }
- />
- );
- }
-}
+export const FloatingPeoplePickerPage = (props: { isHeaderVisible: boolean }) => (
+
+);
diff --git a/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerBestPractices.md b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerBestPractices.md
new file mode 100644
index 0000000000000..e2ba00d00c753
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerBestPractices.md
@@ -0,0 +1,4 @@
+The FloatingPeoplePicker is used to select one or more entities, such as people or groups. Entry points for PeoplePickers
+are typically specialized TextField-like input fields known as a "well", which are used to search for recipients from a list.
+When a recipient is selected from the list, it is added to the well as a specialized Persona that can be interacted with or
+removed. Clicking on a Persona from the well should invoke a PersonaCard or open a profile pane for that recipient.
diff --git a/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerDonts.md b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerDonts.md
new file mode 100644
index 0000000000000..a30903a6e23c3
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerDonts.md
@@ -0,0 +1,2 @@
+- Use the FloatingPeoplePicker to select something other than people
+- Use the FloatingPeoplePicker without sufficient space
diff --git a/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerDos.md b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerDos.md
new file mode 100644
index 0000000000000..9311f7ac2b1a5
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerDos.md
@@ -0,0 +1 @@
+- Use the FloatingPeoplePicker to quickly search for a few people
diff --git a/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerOverview.md b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerOverview.md
new file mode 100644
index 0000000000000..90b332952b8f6
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/FloatingPicker/PeoplePicker/docs/FloatingPeoplePickerOverview.md
@@ -0,0 +1 @@
+FloatingPeoplePicker are used to pick recipients but do not need a well or necessarily keep track of selected people
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx
index 9e89154caca6c..e7965d95559a1 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import * as ReactTestUtils from 'react-dom/test-utils';
-import { KeyCodes } from '../../Utilities';
+import { KeyCodes, createRef } from '../../Utilities';
import { FocusZone, FocusZoneDirection } from '../FocusZone';
import { FocusTrapZone } from './FocusTrapZone';
@@ -304,4 +304,94 @@ describe('FocusTrapZone', () => {
expect(lastFocusedElement).toBe(buttonB);
});
});
+
+ describe('Focusing the FTZ', () => {
+ function setupTest(focusPreviouslyFocusedInnerElement: boolean) {
+ const focusTrapZoneRef = createRef();
+ const topLevelDiv = ReactTestUtils.renderIntoDocument(
+