From 42ea5ded60553f3d556742680eacd31bdcc498d8 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Wed, 7 Mar 2018 17:03:53 -0800 Subject: [PATCH 1/7] added nativeprops note to Button --- .../src/components/Button/ButtonPage.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx index 5760dfede8dc92..b59d4c9742aa7b 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx @@ -19,6 +19,7 @@ import { ButtonSplitExample, ButtonSplitCustomExample } from './examples/Button. import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; import { Link } from '../../Link'; +import { MessageBar } from '../../MessageBar'; import * as exampleStylesImport from '../../common/_exampleStyles.scss'; const exampleStyles: any = exampleStylesImport; @@ -127,12 +128,14 @@ export class ButtonPage extends React.Component + + Native Props Allowed - all html attributes native to the <button> and <a> tags, including all data and aria attributes, can be applied as native props on this component. + ('!raw-loader!office-ui-fabric-react/src/components/Button/Button.types.ts') ] } /> -

Besides the above properties, the Button component accepts all properties that the React button and a components accept.

} overview={ From bc4c8f744462b1302b55a66f436e1a6775c84d97 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Wed, 7 Mar 2018 17:12:45 -0800 Subject: [PATCH 2/7] added nativeprops note to ComboBox --- .../src/components/ComboBox/ComboBoxPage.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx index 6beae488d65298..05720b8335038b 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx @@ -9,6 +9,7 @@ import { ComboBoxBasicExample } from './examples/ComboBox.Basic.Example'; import { ComboBoxCustomStyledExample } from './examples/ComboBox.CustomStyled.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ComboBoxStatus } from './ComboBox.checklist'; +import { MessageBar } from '../../MessageBar'; const ComboBoxBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx') as string; const ComboBoxCustomStyledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx') as string; @@ -30,11 +31,16 @@ export class ComboBoxPage extends React.Component { } propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts') + ] } + /> +
} overview={
@@ -61,7 +67,7 @@ export class ComboBoxPage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> From db6459e94bdb18c88b9b39bdbb55761e8774e80c Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Thu, 8 Mar 2018 10:51:11 -0800 Subject: [PATCH 3/7] added nativeprops note to Dropdown, FocusTrapZone, FocusZone, HoverCard, Icon, and Image --- .../src/components/Dropdown/DropdownPage.tsx | 20 ++++++++++++------- .../FocusTrapZone/FocusTrapZonePage.tsx | 16 ++++++++++----- .../components/FocusZone/FocusZonePage.tsx | 16 ++++++++++----- .../components/HoverCard/HoverCardPage.tsx | 20 ++++++++++++------- .../src/components/Icon/IconPage.tsx | 18 +++++++++++------ .../src/components/Image/ImagePage.tsx | 18 +++++++++++------ 6 files changed, 72 insertions(+), 36 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx index 0dccfe54666529..cd0c1f5e6d2894 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx @@ -10,6 +10,7 @@ import { DropdownCustomExample } from './examples/Dropdown.Custom.Example'; import { DropdownErrorExample } from './examples/Dropdown.Error.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { DropdownStatus } from './Dropdown.checklist'; +import { MessageBar } from '../../MessageBar'; const DropdownBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx') as string; const DropdownCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Custom.Example.tsx') as string; @@ -46,12 +47,17 @@ export class DropdownPage extends React.Component { } propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/Dropdown/Dropdown.types.ts'), - require('!raw-loader!office-ui-fabric-react/src/utilities/selectableOption/SelectableDroppableText.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/Dropdown/Dropdown.types.ts'), + require('!raw-loader!office-ui-fabric-react/src/utilities/selectableOption/SelectableDroppableText.types.ts') + ] } + /> +
} overview={
@@ -78,7 +84,7 @@ export class DropdownPage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx index 912c9654d96bf5..8b29975e788873 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Link } from 'office-ui-fabric-react/lib/Link'; +import { MessageBar } from '../../MessageBar'; import { ExampleCard, IComponentDemoPageProps, @@ -43,11 +44,16 @@ export class FocusTrapZonePage extends React.Component } propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts') + ] } + /> +
} overview={
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx index a227aaafaaeb48..a9ad925394f493 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx @@ -5,6 +5,7 @@ import { ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base'; +import { MessageBar } from '../../MessageBar'; import { FocusZonePhotosExample } from './examples/FocusZone.Photos.Example'; import { FocusZoneListExample } from './examples/FocusZone.List.Example'; import { FocusZoneDisabledExample } from './examples/FocusZone.Disabled.Example'; @@ -38,11 +39,16 @@ export class FocusZonePage extends React.Component
} propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts') + ] } + /> +
} overview={
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx index 16bc5b48902a57..966e9c18e43ba6 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx @@ -10,6 +10,7 @@ import { HoverCardBasicExample } from './examples/HoverCard.Basic.Example'; import { HoverCardTargetExample } from './examples/HoverCard.Target.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { HoverCardStatus } from './HoverCard.checklist'; +import { MessageBar } from '../../MessageBar'; import './HoverCardPage.scss'; @@ -33,12 +34,17 @@ export class HoverCardPage extends React.Component } propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/HoverCard/HoverCard.types.ts'), - require('!raw-loader!office-ui-fabric-react/src/components/HoverCard/ExpandingCard.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/HoverCard/HoverCard.types.ts'), + require('!raw-loader!office-ui-fabric-react/src/components/HoverCard/ExpandingCard.types.ts') + ] } + /> +
} overview={
@@ -47,7 +53,7 @@ export class HoverCardPage extends React.Component } componentStatus={ } isHeaderVisible={ this.props.isHeaderVisible } diff --git a/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx b/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx index 0dda3185b97251..4762f2229d2ebc 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx @@ -11,6 +11,7 @@ import { IconColorExample } from './examples/Icon.Color.Example'; import { IconImageSheetExample } from './examples/Icon.ImageSheet.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { IconStatus } from './Icon.checklist'; +import { MessageBar } from '../../MessageBar'; const IconBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx') as string; const IconSvgExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.Svg.Example.tsx') as string; @@ -40,11 +41,16 @@ export class IconPage extends React.Component {
} propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/Icon/Icon.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/Icon/Icon.types.ts') + ] } + /> +
} overview={
@@ -75,7 +81,7 @@ export class IconPage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx b/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx index ce9968bd82a4d2..513cff7586e172 100644 --- a/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx @@ -14,6 +14,7 @@ import { ImageNoneExample } from './examples/Image.None.Example'; import { ImageMaximizeFrameExample } from './examples/Image.MaximizeFrame.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ImageStatus } from './Image.checklist'; +import { MessageBar } from '../../MessageBar'; const ImageDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx') as string; const ImageCenterExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Center.Example.tsx') as string; @@ -51,11 +52,16 @@ export class ImagePage extends React.Component {
} propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/Image/Image.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <img> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/Image/Image.types.ts') + ] } + /> +
} overview={
@@ -89,7 +95,7 @@ export class ImagePage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> From 51129b7a245a24ac101175fed4b5fd7d87ac0924 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Thu, 8 Mar 2018 11:34:42 -0800 Subject: [PATCH 4/7] added nativeprops note to ChoiceGroup, Label, Link, List, Overlay, Persona, PivotItem, ResizeGroup, ScrollablePane, TextField, Toggle, and Tooltip --- .../ChoiceGroup/ChoiceGroupPage.tsx | 18 +++++++++++------ .../src/components/Label/LabelPage.tsx | 18 +++++++++++------ .../src/components/Link/LinkPage.tsx | 18 +++++++++++------ .../src/components/List/ListPage.tsx | 18 +++++++++++------ .../src/components/Overlay/OverlayPage.tsx | 18 +++++++++++------ .../src/components/Persona/PersonaPage.tsx | 18 +++++++++++------ .../src/components/Pivot/PivotPage.tsx | 19 ++++++++++++------ .../ResizeGroup/ResizeGroupPage.tsx | 18 +++++++++++------ .../ScrollablePane/ScrollablePanePage.tsx | 20 ++++++++++++------- .../components/TextField/TextFieldPage.tsx | 18 +++++++++++------ .../src/components/Toggle/TogglePage.tsx | 18 +++++++++++------ .../src/components/Tooltip/TooltipPage.tsx | 18 +++++++++++------ 12 files changed, 146 insertions(+), 73 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx index 808512db08e764..89cacad3045d9c 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx @@ -11,6 +11,7 @@ import { ChoiceGroupImageExample } from './examples/ChoiceGroup.Image.Example'; import { ChoiceGroupIconExample } from './examples/ChoiceGroup.Icon.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ChoiceGroupStatus } from './ChoiceGroup.checklist'; +import { MessageBar } from '../../MessageBar'; const ChoiceGroupBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx') as string; const ChoiceGroupCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Custom.Example.tsx') as string; @@ -40,11 +41,16 @@ export class ChoiceGroupPage extends React.Component } propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <input> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.types.ts') + ] } + /> +
} overview={
@@ -88,7 +94,7 @@ export class ChoiceGroupPage extends React.Component } /> diff --git a/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx b/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx index 69a28a5b819d30..5e769f22e3f36c 100644 --- a/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx @@ -8,6 +8,7 @@ import { import { LabelBasicExample } from './examples/Label.Basic.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { LabelStatus } from './Label.checklist'; +import { MessageBar } from '../../MessageBar'; const LabelBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx') as string; @@ -23,11 +24,16 @@ export class LabelPage extends React.Component { } propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/Label/Label.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/Label/Label.types.ts') + ] } + /> +
} overview={
@@ -59,7 +65,7 @@ export class LabelPage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx b/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx index 0e15bcab62e265..84e89c177fac3c 100644 --- a/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx @@ -8,6 +8,7 @@ import { import { LinkBasicExample } from './examples/Link.Basic.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { LinkStatus } from './Link.checklist'; +import { MessageBar } from '../../MessageBar'; const LinkBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx') as string; @@ -23,11 +24,16 @@ export class LinkPage extends React.Component { } propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/Link/Link.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <a> or <button> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/Link/Link.types.ts') + ] } + /> +
} overview={
@@ -65,7 +71,7 @@ export class LinkPage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/List/ListPage.tsx b/packages/office-ui-fabric-react/src/components/List/ListPage.tsx index 6f8a186ce19515..15f4bbbed3b1e5 100644 --- a/packages/office-ui-fabric-react/src/components/List/ListPage.tsx +++ b/packages/office-ui-fabric-react/src/components/List/ListPage.tsx @@ -12,6 +12,7 @@ import { ListGhostingExample } from './examples/List.Ghosting.Example'; import { createListItems } from '@uifabric/example-app-base'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ListStatus } from './List.checklist'; +import { MessageBar } from '../../MessageBar'; const ListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx') as string; const ListGridExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx') as string; @@ -49,11 +50,16 @@ export class ListPage extends React.Component {
} propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/List/List.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/List/List.types.ts') + ] } + /> +
} overview={
@@ -71,7 +77,7 @@ export class ListPage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx b/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx index 56c21085b6fd0c..4c18221a018f89 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx @@ -9,6 +9,7 @@ import { OverlayDarkExample } from './examples/Overlay.Dark.Example'; import { OverlayLightExample } from './examples/Overlay.Light.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { OverlayStatus } from './Overlay.checklist'; +import { MessageBar } from '../../MessageBar'; const OverlayLightExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx') as string; const OverlayDarkExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx') as string; @@ -30,11 +31,16 @@ export class OverlayPage extends React.Component {
} propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/Overlay/Overlay.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/Overlay/Overlay.types.ts') + ] } + /> +
} overview={
@@ -64,7 +70,7 @@ export class OverlayPage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx index bcadebf3bbf87f..f19d62d88d1ada 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx @@ -12,6 +12,7 @@ import { PersonaCustomRenderExample } from './examples/Persona.CustomRender.Exam import { PersonaCustomCoinRenderExample } from './examples/Persona.CustomCoinRender.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { PersonaStatus } from './Persona.checklist'; +import { MessageBar } from '../../MessageBar'; const PersonaInitialsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx') as string; const PersonaBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx') as string; @@ -45,11 +46,16 @@ export class PersonaPage extends React.Component {
} propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/Persona/Persona.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/Persona/Persona.types.ts') + ] } + /> +
} overview={
@@ -81,7 +87,7 @@ export class PersonaPage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx index cd09643857ae1c..c02eb549c9af34 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx @@ -17,6 +17,7 @@ import { PivotOverrideExample } from './examples/Pivot.Override.Example'; import { PivotSeparateExample } from './examples/Pivot.Separate.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { PivotStatus } from './Pivot.checklist'; +import { MessageBar } from '../../MessageBar'; const PivotRemoveExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Remove.Example.tsx') as string; const PivotBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx') as string; @@ -70,11 +71,17 @@ export class PivotPage extends React.Component {
} propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/Pivot/Pivot.types.ts') - ] } - /> +
+ + Native Props Allowed [PivotItem] - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on PivotItem. + + ('!raw-loader!office-ui-fabric-react/src/components/Pivot/Pivot.types.ts'), + require('!raw-loader!office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts') + ] } + /> +
} overview={
@@ -118,7 +125,7 @@ export class PivotPage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx index 3a0e3ba50ddea2..c40e6bf223e427 100644 --- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx @@ -10,6 +10,7 @@ import { ResizeGroupOverflowSetExample } from './examples/ResizeGroup.OverflowSe import { FlexBoxResizeGroupExample } from './examples/ResizeGroup.FlexBox.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ResizeGroupStatus } from './ResizeGroup.checklist'; +import { MessageBar } from '../../MessageBar'; const ResizeGroupBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.OverflowSet.Example.tsx') as string; @@ -32,11 +33,16 @@ export class ResizeGroupPage extends React.Component } propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.types.ts') + ] } + /> +
} overview={
@@ -103,7 +109,7 @@ export class ResizeGroupPage extends React.Component } /> diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx index badfb5bbd41247..cfeda1a2a5ce3d 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx @@ -9,6 +9,7 @@ import { ScrollablePaneDefaultExample } from './examples/ScrollablePane.Default. import { ScrollablePaneDetailsListExample } from './examples/ScrollablePane.DetailsList.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ScrollablePaneStatus } from './ScrollablePane.checklist'; +import { MessageBar } from '../../MessageBar'; const ScrollablePaneDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.Default.Example.tsx') as string; @@ -31,12 +32,17 @@ export class ScrollablePanePage extends React.Component } propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts'), - require('!raw-loader!office-ui-fabric-react/src/components/Sticky/Sticky.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts'), + require('!raw-loader!office-ui-fabric-react/src/components/Sticky/Sticky.types.ts') + ] } + /> +
} overview={
@@ -67,7 +73,7 @@ export class ScrollablePanePage extends React.Component } /> diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx index 68251f037c2abc..8ca8de5ec5e927 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx @@ -19,6 +19,7 @@ import { TextFieldStatus } from './TextField.checklist'; import { TextFieldSuffixExample } from './examples/TextField.Suffix.Example'; import { TextFieldUnderlinedExample } from './examples/TextField.Underlined.Example'; import { TextFieldAutoCompleteExample } from './examples/TextField.AutoComplete.Example'; +import { MessageBar } from '../../MessageBar'; const TextFieldBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx') as string; const TextFieldBorderlessExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx') as string; @@ -120,11 +121,16 @@ export class TextFieldPage extends React.Component
} propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/TextField/TextField.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <input> or <textarea> tags, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/TextField/TextField.types.ts') + ] } + /> +
} overview={
@@ -168,7 +174,7 @@ export class TextFieldPage extends React.Component isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx index 7172e73c5c6eaa..16915f5c4c3998 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx @@ -10,6 +10,7 @@ import { ToggleAriaLabelExample } from './examples/Toggle.AriaLabel.Example'; import { FontClassNames } from '../../Styling'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ToggleStatus } from './Toggle.checklist'; +import { MessageBar } from '../../MessageBar'; const ToggleBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx') as string; const ToggleAriaLabelExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx') as string; @@ -37,11 +38,16 @@ export class TogglePage extends React.Component {
} propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/Toggle/Toggle.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <input> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/Toggle/Toggle.types.ts') + ] } + /> +
} overview={
@@ -84,7 +90,7 @@ export class TogglePage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx index 35937c34431b86..4db309d419eea3 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx @@ -12,6 +12,7 @@ import { TooltipBasicExample } from './examples/Tooltip.Basic.Example'; import { TooltipOverflowExample } from './examples/Tooltip.Overflow.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { TooltipStatus } from './Tooltip.checklist'; +import { MessageBar } from '../../MessageBar'; import './TooltipPage.scss'; @@ -41,11 +42,16 @@ export class TooltipPage extends React.Component { } propertiesTables={ - ('!raw-loader!office-ui-fabric-react/src/components/Tooltip/Tooltip.types.ts') - ] } - /> +
+ + Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. + + ('!raw-loader!office-ui-fabric-react/src/components/Tooltip/Tooltip.types.ts') + ] } + /> +
} overview={
@@ -56,7 +62,7 @@ export class TooltipPage extends React.Component { isHeaderVisible={ this.props.isHeaderVisible } componentStatus={ } /> From 74abca0838420a07d099f07ab8112ef082542490 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Thu, 8 Mar 2018 11:35:56 -0800 Subject: [PATCH 5/7] rush change --- .../documentation-nativeprops_2018-03-08-19-35.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/documentation-nativeprops_2018-03-08-19-35.json diff --git a/common/changes/office-ui-fabric-react/documentation-nativeprops_2018-03-08-19-35.json b/common/changes/office-ui-fabric-react/documentation-nativeprops_2018-03-08-19-35.json new file mode 100644 index 00000000000000..cab121b2f4ee9b --- /dev/null +++ b/common/changes/office-ui-fabric-react/documentation-nativeprops_2018-03-08-19-35.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Added documentation for components that allow native props", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "v-brgarl@microsoft.com" +} \ No newline at end of file From 9c0670882d84aa712638692b765d8ab7b3b476ca Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Fri, 9 Mar 2018 16:02:26 -0800 Subject: [PATCH 6/7] added functionality for 'allows native props' to ComponentPage component and applied to Fabric components --- .../ComponentPage/ComponentPage.tsx | 37 +++++++++++++++++++ .../src/components/Button/ButtonPage.tsx | 18 ++++----- .../ChoiceGroup/ChoiceGroupPage.tsx | 18 ++++----- .../src/components/ComboBox/ComboBoxPage.tsx | 17 +++------ .../src/components/Dropdown/DropdownPage.tsx | 19 ++++------ .../FocusTrapZone/FocusTrapZonePage.tsx | 17 +++------ .../components/FocusZone/FocusZonePage.tsx | 17 +++------ .../components/HoverCard/HoverCardPage.tsx | 19 ++++------ .../src/components/Icon/IconPage.tsx | 17 +++------ .../src/components/Image/ImagePage.tsx | 18 ++++----- .../src/components/Label/LabelPage.tsx | 17 +++------ .../src/components/Link/LinkPage.tsx | 18 ++++----- .../src/components/List/ListPage.tsx | 17 +++------ .../src/components/Overlay/OverlayPage.tsx | 17 +++------ .../src/components/Persona/PersonaPage.tsx | 17 +++------ .../src/components/Pivot/PivotPage.tsx | 19 ++++------ .../ResizeGroup/ResizeGroupPage.tsx | 16 +++----- .../ScrollablePane/ScrollablePanePage.tsx | 5 +-- .../components/TextField/TextFieldPage.tsx | 18 ++++----- .../src/components/Toggle/TogglePage.tsx | 18 ++++----- .../src/components/Tooltip/TooltipPage.tsx | 17 +++------ 21 files changed, 162 insertions(+), 214 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 22666689d3fc27..210ce511009281 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -6,6 +6,7 @@ import { import { Link } from 'office-ui-fabric-react/lib/Link'; +import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar'; import './ComponentPage.scss'; export interface IComponentPageSection { @@ -29,6 +30,8 @@ export interface IComponentPageProps { className?: string; componentStatus?: JSX.Element; otherSections?: IComponentPageSection[]; + allowNativeProps?: boolean | string; + nativePropsElement?: string | string[] | undefined; } export class ComponentPage extends React.Component { @@ -148,11 +151,45 @@ export class ComponentPage extends React.Component { } } + private _getNativePropsInfo(): JSX.Element | undefined { + if (this.props.allowNativeProps) { + let elementString: string | string[] | JSX.Element = this.props.nativePropsElement || 'div', + componentString: JSX.Element | undefined; + // componentString: JSX.Element = <> this component; + if (typeof elementString === 'object' && elementString.length > 1) { + const elementArr = elementString.slice(); + for (let _i = 0; _i < elementArr.length; _i++) { + if (_i === 0) { + elementString = <>{ '<' }{ elementArr[_i] }{ '>' }; + } else { + elementString = <>{ elementString } and { '<' }{ elementArr[_i] }{ '>' }; + } + } + elementString = <>{ elementString } tags; + } else { + elementString = <>{ '<' }{ elementString }{ '>' } tag; + } + + if (typeof this.props.allowNativeProps === 'string') { + // titleString = <> { this.props.allowNativeProps }; + componentString = <> { this.props.allowNativeProps }; + } + + return ( + + Native Props Allowed{ componentString } - all HTML attributes native to the { elementString }, + including all aria and custom data attributes, can be applied as native props on{ componentString || <> this component }. + + ); + } + } + private _getPropertiesTable(): JSX.Element | undefined { if (this.props.propertiesTables) { return (

Implementation

+ { this._getNativePropsInfo() } { this.props.propertiesTables }
); diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx index b59d4c9742aa7b..37e2643a4a00ca 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx @@ -19,7 +19,6 @@ import { ButtonSplitExample, ButtonSplitCustomExample } from './examples/Button. import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox'; import { Link } from '../../Link'; -import { MessageBar } from '../../MessageBar'; import * as exampleStylesImport from '../../common/_exampleStyles.scss'; const exampleStyles: any = exampleStylesImport; @@ -126,17 +125,14 @@ export class ButtonPage extends React.Component
} + allowNativeProps={ true } + nativePropsElement={ ['a', 'button'] } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <button> and <a> tags, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/Button/Button.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/Button/Button.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx index 89cacad3045d9c..d1c26163ae1215 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx @@ -11,7 +11,6 @@ import { ChoiceGroupImageExample } from './examples/ChoiceGroup.Image.Example'; import { ChoiceGroupIconExample } from './examples/ChoiceGroup.Icon.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ChoiceGroupStatus } from './ChoiceGroup.checklist'; -import { MessageBar } from '../../MessageBar'; const ChoiceGroupBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx') as string; const ChoiceGroupCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Custom.Example.tsx') as string; @@ -40,17 +39,14 @@ export class ChoiceGroupPage extends React.Component
} + allowNativeProps={ true } + nativePropsElement={ 'input' } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <input> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx index 05720b8335038b..5ef42f2043090c 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx @@ -9,7 +9,6 @@ import { ComboBoxBasicExample } from './examples/ComboBox.Basic.Example'; import { ComboBoxCustomStyledExample } from './examples/ComboBox.CustomStyled.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ComboBoxStatus } from './ComboBox.checklist'; -import { MessageBar } from '../../MessageBar'; const ComboBoxBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx') as string; const ComboBoxCustomStyledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.CustomStyled.Example.tsx') as string; @@ -30,17 +29,13 @@ export class ComboBoxPage extends React.Component {
} + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx index cd0c1f5e6d2894..f7ffc94d031b4b 100644 --- a/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx @@ -10,7 +10,6 @@ import { DropdownCustomExample } from './examples/Dropdown.Custom.Example'; import { DropdownErrorExample } from './examples/Dropdown.Error.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { DropdownStatus } from './Dropdown.checklist'; -import { MessageBar } from '../../MessageBar'; const DropdownBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx') as string; const DropdownCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Custom.Example.tsx') as string; @@ -46,18 +45,14 @@ export class DropdownPage extends React.Component {
} + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/Dropdown/Dropdown.types.ts'), - require('!raw-loader!office-ui-fabric-react/src/utilities/selectableOption/SelectableDroppableText.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/Dropdown/Dropdown.types.ts'), + require('!raw-loader!office-ui-fabric-react/src/utilities/selectableOption/SelectableDroppableText.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx index 8b29975e788873..3eaa6ec90c340a 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { Link } from 'office-ui-fabric-react/lib/Link'; -import { MessageBar } from '../../MessageBar'; import { ExampleCard, IComponentDemoPageProps, @@ -43,17 +42,13 @@ export class FocusTrapZonePage extends React.Component
} + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx index a9ad925394f493..7443be6a2b82c0 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx @@ -5,7 +5,6 @@ import { ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base'; -import { MessageBar } from '../../MessageBar'; import { FocusZonePhotosExample } from './examples/FocusZone.Photos.Example'; import { FocusZoneListExample } from './examples/FocusZone.List.Example'; import { FocusZoneDisabledExample } from './examples/FocusZone.Disabled.Example'; @@ -38,17 +37,13 @@ export class FocusZonePage extends React.Component
} + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx index 966e9c18e43ba6..20eff65a396328 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx @@ -10,7 +10,6 @@ import { HoverCardBasicExample } from './examples/HoverCard.Basic.Example'; import { HoverCardTargetExample } from './examples/HoverCard.Target.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { HoverCardStatus } from './HoverCard.checklist'; -import { MessageBar } from '../../MessageBar'; import './HoverCardPage.scss'; @@ -33,18 +32,14 @@ export class HoverCardPage extends React.Component } + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/HoverCard/HoverCard.types.ts'), - require('!raw-loader!office-ui-fabric-react/src/components/HoverCard/ExpandingCard.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/HoverCard/HoverCard.types.ts'), + require('!raw-loader!office-ui-fabric-react/src/components/HoverCard/ExpandingCard.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx b/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx index 4762f2229d2ebc..c107523257b8ec 100644 --- a/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx @@ -11,7 +11,6 @@ import { IconColorExample } from './examples/Icon.Color.Example'; import { IconImageSheetExample } from './examples/Icon.ImageSheet.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { IconStatus } from './Icon.checklist'; -import { MessageBar } from '../../MessageBar'; const IconBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.Basic.Example.tsx') as string; const IconSvgExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Icon/examples/Icon.Svg.Example.tsx') as string; @@ -40,17 +39,13 @@ export class IconPage extends React.Component {
} + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/Icon/Icon.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/Icon/Icon.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx b/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx index 513cff7586e172..d09b82965ceb22 100644 --- a/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx @@ -14,7 +14,6 @@ import { ImageNoneExample } from './examples/Image.None.Example'; import { ImageMaximizeFrameExample } from './examples/Image.MaximizeFrame.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ImageStatus } from './Image.checklist'; -import { MessageBar } from '../../MessageBar'; const ImageDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx') as string; const ImageCenterExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Center.Example.tsx') as string; @@ -51,17 +50,14 @@ export class ImagePage extends React.Component {
} + allowNativeProps={ true } + nativePropsElement={ 'img' } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <img> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/Image/Image.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/Image/Image.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx b/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx index 5e769f22e3f36c..0a4a56da9b28e2 100644 --- a/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx @@ -8,7 +8,6 @@ import { import { LabelBasicExample } from './examples/Label.Basic.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { LabelStatus } from './Label.checklist'; -import { MessageBar } from '../../MessageBar'; const LabelBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx') as string; @@ -23,17 +22,13 @@ export class LabelPage extends React.Component { } + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/Label/Label.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/Label/Label.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx b/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx index 84e89c177fac3c..86e45618b070be 100644 --- a/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx @@ -8,7 +8,6 @@ import { import { LinkBasicExample } from './examples/Link.Basic.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { LinkStatus } from './Link.checklist'; -import { MessageBar } from '../../MessageBar'; const LinkBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx') as string; @@ -23,17 +22,14 @@ export class LinkPage extends React.Component { } + allowNativeProps={ true } + nativePropsElement={ ['a', 'button'] } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <a> or <button> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/Link/Link.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/Link/Link.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/List/ListPage.tsx b/packages/office-ui-fabric-react/src/components/List/ListPage.tsx index 15f4bbbed3b1e5..8f9ba43d51e08f 100644 --- a/packages/office-ui-fabric-react/src/components/List/ListPage.tsx +++ b/packages/office-ui-fabric-react/src/components/List/ListPage.tsx @@ -12,7 +12,6 @@ import { ListGhostingExample } from './examples/List.Ghosting.Example'; import { createListItems } from '@uifabric/example-app-base'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ListStatus } from './List.checklist'; -import { MessageBar } from '../../MessageBar'; const ListBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx') as string; const ListGridExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx') as string; @@ -49,17 +48,13 @@ export class ListPage extends React.Component {
} + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/List/List.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/List/List.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx b/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx index 4c18221a018f89..56b3d0c1ffaf65 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx @@ -9,7 +9,6 @@ import { OverlayDarkExample } from './examples/Overlay.Dark.Example'; import { OverlayLightExample } from './examples/Overlay.Light.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { OverlayStatus } from './Overlay.checklist'; -import { MessageBar } from '../../MessageBar'; const OverlayLightExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx') as string; const OverlayDarkExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx') as string; @@ -30,17 +29,13 @@ export class OverlayPage extends React.Component {
} + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/Overlay/Overlay.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/Overlay/Overlay.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx index f19d62d88d1ada..b318f55c8012ad 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx @@ -12,7 +12,6 @@ import { PersonaCustomRenderExample } from './examples/Persona.CustomRender.Exam import { PersonaCustomCoinRenderExample } from './examples/Persona.CustomCoinRender.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { PersonaStatus } from './Persona.checklist'; -import { MessageBar } from '../../MessageBar'; const PersonaInitialsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx') as string; const PersonaBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx') as string; @@ -45,17 +44,13 @@ export class PersonaPage extends React.Component {
} + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/Persona/Persona.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/Persona/Persona.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx index c02eb549c9af34..20a45b5cebb33e 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx @@ -17,7 +17,6 @@ import { PivotOverrideExample } from './examples/Pivot.Override.Example'; import { PivotSeparateExample } from './examples/Pivot.Separate.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { PivotStatus } from './Pivot.checklist'; -import { MessageBar } from '../../MessageBar'; const PivotRemoveExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Remove.Example.tsx') as string; const PivotBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Pivot/examples/Pivot.Basic.Example.tsx') as string; @@ -70,18 +69,14 @@ export class PivotPage extends React.Component {
} + allowNativeProps={ 'PivitItem' } propertiesTables={ -
- - Native Props Allowed [PivotItem] - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on PivotItem. - - ('!raw-loader!office-ui-fabric-react/src/components/Pivot/Pivot.types.ts'), - require('!raw-loader!office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/Pivot/Pivot.types.ts'), + require('!raw-loader!office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx index c40e6bf223e427..060046c5fad272 100644 --- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx @@ -32,17 +32,13 @@ export class ResizeGroupPage extends React.Component } + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx index cfeda1a2a5ce3d..6029411f7fbc1d 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx @@ -31,11 +31,10 @@ export class ScrollablePanePage extends React.Component
} + allowNativeProps={ true } + nativePropsElement={ ['a', 'button'] } propertiesTables={
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - ('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts'), diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx index 8ca8de5ec5e927..15ebbbd00d5196 100644 --- a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx +++ b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx @@ -19,7 +19,6 @@ import { TextFieldStatus } from './TextField.checklist'; import { TextFieldSuffixExample } from './examples/TextField.Suffix.Example'; import { TextFieldUnderlinedExample } from './examples/TextField.Underlined.Example'; import { TextFieldAutoCompleteExample } from './examples/TextField.AutoComplete.Example'; -import { MessageBar } from '../../MessageBar'; const TextFieldBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx') as string; const TextFieldBorderlessExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx') as string; @@ -120,17 +119,14 @@ export class TextFieldPage extends React.Component
} + allowNativeProps={ true } + nativePropsElement={ ['input', 'textarea'] } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <input> or <textarea> tags, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/TextField/TextField.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/TextField/TextField.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx index 16915f5c4c3998..2373ebbf3031bf 100644 --- a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx +++ b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx @@ -10,7 +10,6 @@ import { ToggleAriaLabelExample } from './examples/Toggle.AriaLabel.Example'; import { FontClassNames } from '../../Styling'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { ToggleStatus } from './Toggle.checklist'; -import { MessageBar } from '../../MessageBar'; const ToggleBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Toggle/examples/Toggle.Basic.Example.tsx') as string; const ToggleAriaLabelExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Toggle/examples/Toggle.AriaLabel.Example.tsx') as string; @@ -37,17 +36,14 @@ export class TogglePage extends React.Component {
} + allowNativeProps={ true } + nativePropsElement={ 'input' } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <input> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/Toggle/Toggle.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/Toggle/Toggle.types.ts') + ] } + /> } overview={
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx index 4db309d419eea3..a70b8579a4f0f6 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx @@ -12,7 +12,6 @@ import { TooltipBasicExample } from './examples/Tooltip.Basic.Example'; import { TooltipOverflowExample } from './examples/Tooltip.Overflow.Example'; import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus'; import { TooltipStatus } from './Tooltip.checklist'; -import { MessageBar } from '../../MessageBar'; import './TooltipPage.scss'; @@ -41,17 +40,13 @@ export class TooltipPage extends React.Component { } + allowNativeProps={ true } propertiesTables={ -
- - Native Props Allowed - all html attributes native to the <div> tag, including all data and aria attributes, can be applied as native props on this component. - - ('!raw-loader!office-ui-fabric-react/src/components/Tooltip/Tooltip.types.ts') - ] } - /> -
+ ('!raw-loader!office-ui-fabric-react/src/components/Tooltip/Tooltip.types.ts') + ] } + /> } overview={
From 22f0ea8d5dd9629eb6adf1aa7a46375fc9e28014 Mon Sep 17 00:00:00 2001 From: Brian Garland Date: Mon, 12 Mar 2018 13:39:35 -0700 Subject: [PATCH 7/7] fixes --- .../src/components/ComponentPage/ComponentPage.tsx | 2 -- .../office-ui-fabric-react/src/components/Pivot/PivotPage.tsx | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx index 210ce511009281..133752d29f0fdd 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx @@ -155,7 +155,6 @@ export class ComponentPage extends React.Component { if (this.props.allowNativeProps) { let elementString: string | string[] | JSX.Element = this.props.nativePropsElement || 'div', componentString: JSX.Element | undefined; - // componentString: JSX.Element = <> this component; if (typeof elementString === 'object' && elementString.length > 1) { const elementArr = elementString.slice(); for (let _i = 0; _i < elementArr.length; _i++) { @@ -171,7 +170,6 @@ export class ComponentPage extends React.Component { } if (typeof this.props.allowNativeProps === 'string') { - // titleString = <> { this.props.allowNativeProps }; componentString = <> { this.props.allowNativeProps }; } diff --git a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx index 20a45b5cebb33e..37c8c6a06ad37b 100644 --- a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx +++ b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx @@ -69,7 +69,7 @@ export class PivotPage extends React.Component {
} - allowNativeProps={ 'PivitItem' } + allowNativeProps={ 'PivotItem' } propertiesTables={