From 01ab0532cf22a296aa2023b60d68394619f5d2ce Mon Sep 17 00:00:00 2001 From: "REDMOND\\maroquem" Date: Mon, 30 Apr 2018 15:51:40 -0700 Subject: [PATCH 1/8] 1st example --- ...extualMenu.CustomDataAfterName.Example.tsx | 58 +++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomDataAfterName.Example.tsx diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomDataAfterName.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomDataAfterName.Example.tsx new file mode 100644 index 0000000000000..3dd6cde572f77 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomDataAfterName.Example.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; +import { ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu'; +import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; +import { IContextualMenuItemProps } from 'office-ui-fabric-react/lib/ContextualMenu'; +import './ContextualMenuExample.scss'; + +export class ContextualMenuWithCustomDataAfterNameExample extends React.Component { + + constructor(props: {}) { + super(props); + this.state = { + showCallout: false + }; + } + + public render(): JSX.Element { + return ( +
+ Thu. 10:00 PM + }, + { + key: 'divider_1', + itemType: ContextualMenuItemType.Divider + }, + { + key: 'rename', + name: 'Rename' + }, + { + key: 'edit', + name: 'Edit' + }, + { + key: 'properties', + name: 'Properties' + }, + { + key: 'disabled', + name: 'Disabled item', + disabled: true + } + ], + contextualMenuItemAs: (props: IContextualMenuItemProps) =>
{ props.item.name } { props.item.customData }
+ } } + /> +
+ ); + } +} From 7c1d30157971a6bcba97018dfe9ca07ccfbef8f0 Mon Sep 17 00:00:00 2001 From: "REDMOND\\maroquem" Date: Fri, 4 May 2018 14:31:49 -0700 Subject: [PATCH 2/8] addition of secondaryText for ContextualMenuItem --- .../src/components/Button/Button.types.ts | 5 ++ .../ContextualMenu.classNames.ts | 11 ++- .../ContextualMenu/ContextualMenu.styles.ts | 15 ++-- .../ContextualMenu/ContextualMenu.types.ts | 23 ++--- .../ContextualMenu/ContextualMenuItem.tsx | 11 ++- .../ContextualMenu/ContextualMenuPage.tsx | 8 ++ ...textualMenu.Icon.SecondaryText.Example.tsx | 83 +++++++++++++++++++ 7 files changed, 136 insertions(+), 20 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.SecondaryText.Example.tsx diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.types.ts b/packages/office-ui-fabric-react/src/components/Button/Button.types.ts index 2bae1a569d29b..bce4761bcc6f3 100644 --- a/packages/office-ui-fabric-react/src/components/Button/Button.types.ts +++ b/packages/office-ui-fabric-react/src/components/Button/Button.types.ts @@ -418,6 +418,11 @@ export interface IButtonStyles { */ description?: IStyle; + /** + * Style for the description text if applicable (for compound buttons.) + */ + secondaryText?: IStyle; + /** * Style override for the description text when the button is hovered. */ diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts index 5463c487adb10..3f8e3f917bd3c 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts @@ -1,8 +1,8 @@ -import { memoizeFunction } from '../../Utilities'; +import { getDividerClassNames } from '../Divider/VerticalDivider.classNames'; +import { getMenuItemStyles, getStyles as getContextualMenuStyles } from './ContextualMenu.styles'; import { ITheme, mergeStyleSets } from '../../Styling'; -import { getStyles as getContextualMenuStyles, getMenuItemStyles } from './ContextualMenu.styles'; import { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types'; -import { getDividerClassNames } from '../Divider/VerticalDivider.classNames'; +import { memoizeFunction } from '../../Utilities'; export interface IContextualMenuClassNames { container: string; @@ -21,6 +21,7 @@ export interface IMenuItemClassNames { checkmarkIcon: string; subMenuIcon: string; label: string; + secondaryText: string; splitContainer: string; splitPrimary: string; splitMenu: string; @@ -198,6 +199,10 @@ export const getItemClassNames = memoizeFunction(( 'ms-ContextualMenu-itemText', styles.label ], + secondaryText: [ + 'ms-ContextualMenu-secondaryText', + styles.secondaryText + ], splitContainer: [ styles.splitButtonFlexContainer, !disabled && !checked && [{ diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts index e65b4b3d650b4..3370f20c698fc 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts @@ -1,16 +1,16 @@ import { + concatStyleSets, FontSizes, FontWeights, - IRawStyle, - ITheme, - concatStyleSets, getFocusStyle, - HighContrastSelector + HighContrastSelector, + IRawStyle, + ITheme } from '../../Styling'; import { IContextualMenuStyles, IMenuItemStyles } from './ContextualMenu.types'; - import { memoizeFunction } from '../../Utilities'; + const ContextualMenuItemHeight = '32px'; const getItemHighContrastStyles = memoizeFunction((): IRawStyle => { @@ -117,6 +117,11 @@ export const getMenuItemStyles = memoizeFunction(( overflow: 'hidden', whiteSpace: 'nowrap' }, + secondaryText: { + color: theme.palette.neutralTertiary, + paddingLeft: '20px', + textAlign: 'right', + }, icon: { display: 'inline-block', minHeight: '1px', diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts index 962cf17290b67..a0c564d3d3b60 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts @@ -2,20 +2,16 @@ import * as React from 'react'; import { ContextualMenu } from './ContextualMenu'; import { DirectionalHint } from '../../common/DirectionalHint'; import { FocusZoneDirection, IFocusZoneProps } from '../../FocusZone'; -import { IIconProps } from '../Icon/Icon.types'; -import { ICalloutProps } from '../../Callout'; -import { ITheme, IStyle } from '../../Styling'; import { IButtonStyles } from '../../Button'; -import { - IPoint, - IRectangle, - IRenderFunction -} from '../../Utilities'; -import { IWithResponsiveModeState } from '../../utilities/decorators/withResponsiveMode'; +import { ICalloutProps } from '../../Callout'; import { IContextualMenuClassNames, IMenuItemClassNames } from './ContextualMenu.classNames'; -export { DirectionalHint } from '../../common/DirectionalHint'; -import { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types'; import { IContextualMenuItemProps } from './ContextualMenuItem.types'; +import { IIconProps } from '../Icon/Icon.types'; +import { IPoint, IRectangle, IRenderFunction } from '../../Utilities'; +import { IStyle, ITheme } from '../../Styling'; +import { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types'; +import { IWithResponsiveModeState } from '../../utilities/decorators/withResponsiveMode'; +export { DirectionalHint } from '../../common/DirectionalHint'; export enum ContextualMenuItemType { Normal = 0, @@ -264,6 +260,11 @@ export interface IContextualMenuItem { */ name?: string; + /** + * Seconday description for the menu item to display + */ + secondaryText?: string; + itemType?: ContextualMenuItemType; /** diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx index 49171cbb87383..943a9c0007ee2 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index'; +import { getIsChecked, hasSubmenu } from '../../utilities/contextualMenu/index'; import { getRTL } from '../../Utilities'; import { Icon } from '../../Icon'; import { IContextualMenuItemProps } from './ContextualMenuItem.types'; @@ -54,6 +54,14 @@ const renderItemName = ({ item, classNames }: IContextualMenuItemProps) => { return null; }; + +const renderSecondaryText = ({ item, classNames }: IContextualMenuItemProps) => { + if (item.secondaryText) { + return { item.secondaryText }; + } + return null; +}; + const renderSubMenuIcon = ({ item, classNames }: IContextualMenuItemProps) => { if (hasSubmenu(item)) { return ( @@ -79,6 +87,7 @@ export const ContextualMenuItem: React.StatelessComponent ); diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx index 1307bd2ae58f9..5cf6241e425b4 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx @@ -8,6 +8,7 @@ import { } from '@uifabric/example-app-base'; import { ContextualMenuBasicExample } from './examples/ContextualMenu.Basic.Example'; import { ContextualMenuIconExample } from './examples/ContextualMenu.Icon.Example'; +import { ContextualMenuIconSecondaryTextExample } from './examples/ContextualMenu.Icon.SecondaryText.Example'; import { ContextualMenuSectionExample } from './examples/ContextualMenu.Section.Example'; import { ContextualMenuSubmenuExample } from './examples/ContextualMenu.Submenu.Example'; import { ContextualMenuCustomizationWithNoWrapExample } from './examples/ContextualMenu.CustomizationWithNoWrap.Example'; @@ -21,6 +22,7 @@ import { ContextualMenuStatus } from './ContextualMenu.checklist'; const ContextualMenuBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx') as string; const ContextualMenuIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.Example.tsx') as string; +const ContextualMenuIconSecondaryTextExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.SecondaryText.Example.tsx') as string; const ContextualMenuSectionExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Section.Example.tsx') as string; const ContextualMenuSubmenuExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx') as string; const ContextualMenuCheckmarksExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx') as string; @@ -51,6 +53,12 @@ export class ContextualMenuPage extends React.Component + + + { + + constructor(props: {}) { + super(props); + this.state = { + showCallout: false + }; + } + + public render(): JSX.Element { + const { showCallout } = this.state; + + return ( +
+ + { showCallout && ( + this.setState({ showCallout: false }) } + > + this.setState({ showCallout: false }) } + text='Hello Popup' + /> + + ) } +
+ ); + } +} From 4814754f103bba57e27dd5facd22bcc44127e098 Mon Sep 17 00:00:00 2001 From: maximus12793 Date: Sat, 5 May 2018 00:50:58 -0700 Subject: [PATCH 3/8] adding changefile --- .../maroquem-customdata_2018-05-05-07-50.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/maroquem-customdata_2018-05-05-07-50.json diff --git a/common/changes/office-ui-fabric-react/maroquem-customdata_2018-05-05-07-50.json b/common/changes/office-ui-fabric-react/maroquem-customdata_2018-05-05-07-50.json new file mode 100644 index 0000000000000..bbcb43ba9312b --- /dev/null +++ b/common/changes/office-ui-fabric-react/maroquem-customdata_2018-05-05-07-50.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Add secondaryText to ContextualMenuItem to render on the right of item.name (text)", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "maroquem@microsoft.com" +} \ No newline at end of file From e78431a3bb24a04a533de61ed5542f85441bc77c Mon Sep 17 00:00:00 2001 From: maximus12793 Date: Sun, 6 May 2018 13:20:19 -0700 Subject: [PATCH 4/8] update snapshot tests --- .vscode/launch.json | 22 +++++++++++++++++++ package.json | 3 +++ .../ContextualMenu/ContextualMenu.styles.ts | 1 - .../ContextualMenuItem.test.tsx | 1 + .../ContextualMenu/ContextualMenuItem.tsx | 1 - .../ContextualMenuSplitButton.test.tsx | 1 + .../ContextualMenuItem.test.tsx.snap | 20 +++++++++++++++++ ...textualMenu.Icon.SecondaryText.Example.tsx | 22 ------------------- 8 files changed, 47 insertions(+), 24 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index d11601527a252..7a9d642ede537 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -125,6 +125,28 @@ "NODE_ENV": "development" }, "sourceMaps": true + }, + { + "type": "node", + "request": "launch", + "name": "Jest All", + "program": "${workspaceFolder}/node_modules/jest/bin/jest", + "args": [ + "--runInBand" + ], + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen" + }, + { + "type": "node", + "request": "launch", + "name": "Jest Current File", + "program": "${workspaceFolder}/node_modules/jest/bin/jest", + "args": [ + "${relativeFile}" + ], + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen", } ] } \ No newline at end of file diff --git a/package.json b/package.json index 7ce5f0b04aa3b..adb57e15e59ba 100644 --- a/package.json +++ b/package.json @@ -29,5 +29,8 @@ "license": "MIT", "devDependencies": { "@microsoft/rush": "4.3.0" + }, + "dependencies": { + "jest": "^22.4.3" } } diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts index 3370f20c698fc..4a1299d8e44a8 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts @@ -10,7 +10,6 @@ import { import { IContextualMenuStyles, IMenuItemStyles } from './ContextualMenu.types'; import { memoizeFunction } from '../../Utilities'; - const ContextualMenuItemHeight = '32px'; const getItemHighContrastStyles = memoizeFunction((): IRawStyle => { diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx index 76545c463f2c1..a307d1847888c 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx @@ -134,6 +134,7 @@ function getMenuItemClassNames(): IMenuItemClassNames { checkmarkIcon: 'checkmarkIcon', subMenuIcon: 'subMenuIcon', label: 'label', + secondaryText: 'secondaryText', splitContainer: 'splitContainer', splitPrimary: 'splitPrimary', splitMenu: 'splitMenu', diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx index 943a9c0007ee2..d7144d1b999da 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx @@ -54,7 +54,6 @@ const renderItemName = ({ item, classNames }: IContextualMenuItemProps) => { return null; }; - const renderSecondaryText = ({ item, classNames }: IContextualMenuItemProps) => { if (item.secondaryText) { return { item.secondaryText }; diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.test.tsx index 9e8ae71f134aa..b7d6dc6bc6cc2 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuSplitButton.test.tsx @@ -39,6 +39,7 @@ function getMenuItemClassNames(): IMenuItemClassNames { checkmarkIcon: 'checkmarkIcon', subMenuIcon: 'subMenuIcon', label: 'label', + secondaryText: 'secondaryText', splitContainer: 'splitContainer', splitPrimary: 'splitPrimary', splitMenu: 'splitMenu', diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap index caf1028a96c2e..0f300272e54b8 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap @@ -15,6 +15,7 @@ ShallowWrapper { "linkContent": "linkContent", "linkContentMenu": "linkContentMenu", "root": "root", + "secondaryText": "secondaryText", "splitContainer": "splitContainer", "splitMenu": "splitMenu", "splitPrimary": "splitPrimary", @@ -51,6 +52,7 @@ ShallowWrapper { null, null, null, + null, ], "className": "linkContent", }, @@ -72,6 +74,7 @@ ShallowWrapper { null, null, null, + null, ], "type": "div", }, @@ -90,6 +93,7 @@ ShallowWrapper { null, null, null, + null, ], "className": "linkContent", }, @@ -111,6 +115,7 @@ ShallowWrapper { null, null, null, + null, ], "type": "div", }, @@ -140,6 +145,7 @@ ShallowWrapper { "linkContent": "linkContent", "linkContentMenu": "linkContentMenu", "root": "root", + "secondaryText": "secondaryText", "splitContainer": "splitContainer", "splitMenu": "splitMenu", "splitPrimary": "splitPrimary", @@ -174,6 +180,7 @@ ShallowWrapper { className="icon" />, null, + null, , null, + null, , null, null, + null, ], "className": "linkContent", }, @@ -339,6 +351,7 @@ ShallowWrapper { }, null, null, + null, ], "type": "div", }, @@ -355,6 +368,7 @@ ShallowWrapper { />, null, null, + null, ], "className": "linkContent", }, @@ -374,6 +388,7 @@ ShallowWrapper { }, null, null, + null, ], "type": "div", }, @@ -403,6 +418,7 @@ ShallowWrapper { "linkContent": "linkContent", "linkContentMenu": "linkContentMenu", "root": "root", + "secondaryText": "secondaryText", "splitContainer": "splitContainer", "splitMenu": "splitMenu", "splitPrimary": "splitPrimary", @@ -443,6 +459,7 @@ ShallowWrapper { menuItem , null, + null, ], "className": "linkContent", }, @@ -474,6 +491,7 @@ ShallowWrapper { "type": "span", }, null, + null, ], "type": "div", }, @@ -495,6 +513,7 @@ ShallowWrapper { menuItem , null, + null, ], "className": "linkContent", }, @@ -526,6 +545,7 @@ ShallowWrapper { "type": "span", }, null, + null, ], "type": "div", }, diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.SecondaryText.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.SecondaryText.Example.tsx index d816109f52dcd..b691e2fb1e93d 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.SecondaryText.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.SecondaryText.Example.tsx @@ -1,12 +1,5 @@ import * as React from 'react'; -import { ContextualMenuItemType, IContextualMenuItemProps } from 'office-ui-fabric-react/lib/ContextualMenu'; -import { Callout } from 'office-ui-fabric-react/lib/Callout'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; -import { Icon } from 'office-ui-fabric-react/lib/Icon'; -import * as stylesImport from './ContextualMenuExample.scss'; - -// tslint:disable-next-line:no-any -const styles: any = stylesImport; export class ContextualMenuIconSecondaryTextExample extends React.Component<{}, { showCallout: boolean }> { @@ -18,8 +11,6 @@ export class ContextualMenuIconSecondaryTextExample extends React.Component<{}, } public render(): JSX.Element { - const { showCallout } = this.state; - return (
- { showCallout && ( - this.setState({ showCallout: false }) } - > - this.setState({ showCallout: false }) } - text='Hello Popup' - /> - - ) }
); } From c1c3b32fc10683a09bae155fd34ef24d01266fa9 Mon Sep 17 00:00:00 2001 From: maximus12793 Date: Sun, 6 May 2018 14:29:44 -0700 Subject: [PATCH 5/8] revert launch.json --- .vscode/launch.json | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index 7a9d642ede537..d11601527a252 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -125,28 +125,6 @@ "NODE_ENV": "development" }, "sourceMaps": true - }, - { - "type": "node", - "request": "launch", - "name": "Jest All", - "program": "${workspaceFolder}/node_modules/jest/bin/jest", - "args": [ - "--runInBand" - ], - "console": "integratedTerminal", - "internalConsoleOptions": "neverOpen" - }, - { - "type": "node", - "request": "launch", - "name": "Jest Current File", - "program": "${workspaceFolder}/node_modules/jest/bin/jest", - "args": [ - "${relativeFile}" - ], - "console": "integratedTerminal", - "internalConsoleOptions": "neverOpen", } ] } \ No newline at end of file From f282f536bcd22fcecbcf1f18a1141feca2f3a896 Mon Sep 17 00:00:00 2001 From: maximus12793 Date: Mon, 7 May 2018 18:05:44 -0700 Subject: [PATCH 6/8] adding vr tests --- .../src/stories/ContextualMenu.stories.tsx | 41 ++++++++++++++++++- package.json | 3 -- 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/apps/vr-tests/src/stories/ContextualMenu.stories.tsx b/apps/vr-tests/src/stories/ContextualMenu.stories.tsx index 5e6f6cff36cff..5073b369e47aa 100644 --- a/apps/vr-tests/src/stories/ContextualMenu.stories.tsx +++ b/apps/vr-tests/src/stories/ContextualMenu.stories.tsx @@ -84,6 +84,41 @@ const itemsWithIcons = [ } ]; +const itemsWithSecondaryText = [ + { + key: 'Later Today', + iconProps: { + iconName: 'Clock' + }, + name: 'Later Today', + secondaryText: '7:00 PM' + }, + { + key: 'Tomorrow', + iconProps: { + iconName: 'Coffeescript' + }, + name: 'Tomorrow', + secondaryText: 'Thu. 8:00 AM' + }, + { + key: 'This Weekend', + iconProps: { + iconName: 'Vacation' + }, + name: 'This Weekend', + secondaryText: 'Sat. 10:00 AM' + }, + { + key: 'Next Week', + iconProps: { + iconName: 'Suitcase' + }, + name: 'Next Week', + secondaryText: 'Mon. 8:00 AM' + } +]; + const itemsWithSubmenu = [ { key: 'newItem', @@ -219,7 +254,6 @@ const itemsWithSplitButtonSubmenu = [ } ]; - storiesOf('ContextualMenu', module) .addDecorator(FabricDecorator) .addDecorator(story => ( @@ -247,6 +281,11 @@ storiesOf('ContextualMenu', module) items={ itemsWithIcons } /> )) + .add('With secondaryText', () => ( + + )) .add('With submenu', () => ( Date: Tue, 8 May 2018 20:27:38 -0700 Subject: [PATCH 7/8] fix tests --- .../ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx | 1 + .../ContextualMenuItemWrapper/ContextualMenuButton.test.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx index b225c5d81d03d..25687274af96d 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx @@ -39,6 +39,7 @@ function getMenuItemClassNames(): IMenuItemClassNames { checkmarkIcon: 'checkmarkIcon', subMenuIcon: 'subMenuIcon', label: 'label', + secondaryText: 'secondaryText', splitContainer: 'splitContainer', splitPrimary: 'splitPrimary', splitMenu: 'splitMenu', diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx index d78a6eabf2e80..98313139a48ed 100644 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx @@ -39,6 +39,7 @@ function getMenuItemClassNames(): IMenuItemClassNames { checkmarkIcon: 'checkmarkIcon', subMenuIcon: 'subMenuIcon', label: 'label', + secondaryText: 'secondaryText', splitContainer: 'splitContainer', splitPrimary: 'splitPrimary', splitMenu: 'splitMenu', From d5b8650ab4cb52b1cf712f83d11a44fe3cb181d6 Mon Sep 17 00:00:00 2001 From: maximus12793 Date: Wed, 9 May 2018 09:13:47 -0700 Subject: [PATCH 8/8] rm dead CustomDataAfterName.Example.tsx --- ...extualMenu.CustomDataAfterName.Example.tsx | 58 ------------------- 1 file changed, 58 deletions(-) delete mode 100644 packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomDataAfterName.Example.tsx diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomDataAfterName.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomDataAfterName.Example.tsx deleted file mode 100644 index 3dd6cde572f77..0000000000000 --- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomDataAfterName.Example.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react'; -import { ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu'; -import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; -import { IContextualMenuItemProps } from 'office-ui-fabric-react/lib/ContextualMenu'; -import './ContextualMenuExample.scss'; - -export class ContextualMenuWithCustomDataAfterNameExample extends React.Component { - - constructor(props: {}) { - super(props); - this.state = { - showCallout: false - }; - } - - public render(): JSX.Element { - return ( -
- Thu. 10:00 PM - }, - { - key: 'divider_1', - itemType: ContextualMenuItemType.Divider - }, - { - key: 'rename', - name: 'Rename' - }, - { - key: 'edit', - name: 'Edit' - }, - { - key: 'properties', - name: 'Properties' - }, - { - key: 'disabled', - name: 'Disabled item', - disabled: true - } - ], - contextualMenuItemAs: (props: IContextualMenuItemProps) =>
{ props.item.name } { props.item.customData }
- } } - /> -
- ); - } -}