Skip to content

ContextualMenuItem: adding secondaryText #4788

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
martellaj merged 11 commits into from
May 9, 2018
Merged

ContextualMenuItem: adding secondaryText #4788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
01ab053
1st example
Apr 30, 2018
7c1d301
addition of secondaryText for ContextualMenuItem
May 4, 2018
4814754
adding changefile
May 5, 2018
f4a55d2
merge w/ upstream master
May 5, 2018
e78431a
update snapshot tests
May 6, 2018
c1c3b32
revert launch.json
May 6, 2018
f282f53
adding vr tests
May 8, 2018
7922e3b
merge w/ upstream
May 8, 2018
6050417
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
May 9, 2018
a2c2da4
fix tests
May 9, 2018
d5b8650
rm dead CustomDataAfterName.Example.tsx
May 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 40 additions & 1 deletion apps/vr-tests/src/stories/ContextualMenu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -219,7 +254,6 @@ const itemsWithSplitButtonSubmenu = [
}
];


storiesOf('ContextualMenu', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
Expand Down Expand Up @@ -247,6 +281,11 @@ storiesOf('ContextualMenu', module)
items={ itemsWithIcons }
/>
))
.add('With secondaryText', () => (
<ContextualMenu
items={ itemsWithSecondaryText }
/>
))
.add('With submenu', () => (
<ContextualMenu
items={ itemsWithSubmenu }
Expand Down
11 changes: 11 additions & 0 deletions common/changes/office-ui-fabric-react/maroquem-customdata_2018-05-05-07-50.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": "[email protected]"
}
5 changes: 5 additions & 0 deletions packages/office-ui-fabric-react/src/components/Button/Button.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,11 @@ export interface IButtonStyles {
*/
description?: IStyle;

/**
* Style for the description text if applicable (for compound buttons.)
*/
secondaryText?: IStyle;
Copy link
Member

@micahgodbolt micahgodbolt May 7, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

secondary text is here, but isn't being used in button.

If the idea is to replace description with secondaryText, lets start supporting both (in BaseButton.tsx and style files) so that we can deprecate description

Copy link
Contributor Author

@maximus12793 maximus12793 May 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops, sorry no I forgot to remove this. Am adding vr-tests now

Copy link
Contributor Author

@maximus12793 maximus12793 May 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On second thought I am not sure. Without this addition I am unable to add this property to ContextualMenu.styles.ts (since this derives from IMenuStyles which falls under ButtonTypes.ts (namely, IMenuItemStyles extends IButtonStyles). Is this fine? Or how do you suggest adding it properly to just effect ContextualMenuItems?


/**
* Style override for the description text when the button is hovered.
*/
Expand Down
11 changes: 8 additions & 3 deletions packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -21,6 +21,7 @@ export interface IMenuItemClassNames {
checkmarkIcon: string;
subMenuIcon: string;
label: string;
secondaryText: string;
splitContainer: string;
splitPrimary: string;
splitMenu: string;
Expand Down Expand Up @@ -198,6 +199,10 @@ export const getItemClassNames = memoizeFunction((
'ms-ContextualMenu-itemText',
styles.label
],
secondaryText: [
'ms-ContextualMenu-secondaryText',
styles.secondaryText
],
splitContainer: [
styles.splitButtonFlexContainer,
!disabled && !checked && [{
Expand Down
14 changes: 9 additions & 5 deletions packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
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';
Expand Down Expand Up @@ -117,6 +116,11 @@ export const getMenuItemStyles = memoizeFunction((
overflow: 'hidden',
whiteSpace: 'nowrap'
},
secondaryText: {
color: theme.palette.neutralTertiary,
paddingLeft: '20px',
Copy link
Member

@martellaj martellaj May 7, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dzearing / @joschect How is RTL handled in Fabric? Is this handled in the build pipeline?

Copy link
Member

@dzearing dzearing May 9, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is handled automatically.

You can test it through npm start by going to the top right gear, and selecting the rtl option :)

Copy link
Member

@martellaj martellaj May 9, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool! Thanks, @dzearing!

textAlign: 'right',
},
icon: {
display: 'inline-block',
minHeight: '1px',
Expand Down
5 changes: 5 additions & 0 deletions packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,11 @@ export interface IContextualMenuItem {
*/
name?: string;

/**
* Seconday description for the menu item to display
*/
secondaryText?: string;

itemType?: ContextualMenuItemType;

/**
Expand Down
1 change: 1 addition & 0 deletions packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,7 @@ function getMenuItemClassNames(): IMenuItemClassNames {
checkmarkIcon: 'checkmarkIcon',
subMenuIcon: 'subMenuIcon',
label: 'label',
secondaryText: 'secondaryText',
splitContainer: 'splitContainer',
splitPrimary: 'splitPrimary',
splitMenu: 'splitMenu',
Expand Down
10 changes: 9 additions & 1 deletion packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,13 @@ const renderItemName = ({ item, classNames }: IContextualMenuItemProps) => {
return null;
};

const renderSecondaryText = ({ item, classNames }: IContextualMenuItemProps) => {
if (item.secondaryText) {
return <span className={ classNames.secondaryText }>{ item.secondaryText }</span>;
}
return null;
};

const renderSubMenuIcon = ({ item, classNames }: IContextualMenuItemProps) => {
if (hasSubmenu(item)) {
return (
Expand Down Expand Up @@ -81,6 +88,7 @@ export class ContextualMenuItem extends BaseComponent<IContextualMenuItemProps,
{ renderCheckMarkIcon(this.props) }
{ renderItemIcon(this.props) }
{ renderItemName(this.props) }
{ renderSecondaryText(this.props) }
{ renderSubMenuIcon(this.props) }
</div>
);
Expand Down Expand Up @@ -109,4 +117,4 @@ export class ContextualMenuItem extends BaseComponent<IContextualMenuItemProps,
dismissMenu(undefined /* ev */, dismissAll);
}
}
}
}
1 change: 1 addition & 0 deletions ...act/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuAnchor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ function getMenuItemClassNames(): IMenuItemClassNames {
checkmarkIcon: 'checkmarkIcon',
subMenuIcon: 'subMenuIcon',
label: 'label',
secondaryText: 'secondaryText',
splitContainer: 'splitContainer',
splitPrimary: 'splitPrimary',
splitMenu: 'splitMenu',
Expand Down
1 change: 1 addition & 0 deletions ...act/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ function getMenuItemClassNames(): IMenuItemClassNames {
checkmarkIcon: 'checkmarkIcon',
subMenuIcon: 'subMenuIcon',
label: 'label',
secondaryText: 'secondaryText',
splitContainer: 'splitContainer',
splitPrimary: 'splitPrimary',
splitMenu: 'splitMenu',
Expand Down
1 change: 1 addition & 0 deletions ...rc/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ function getMenuItemClassNames(): IMenuItemClassNames {
checkmarkIcon: 'checkmarkIcon',
subMenuIcon: 'subMenuIcon',
label: 'label',
secondaryText: 'secondaryText',
splitContainer: 'splitContainer',
splitPrimary: 'splitPrimary',
splitMenu: 'splitMenu',
Expand Down
8 changes: 8 additions & 0 deletions packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -51,6 +53,12 @@ export class ContextualMenuPage extends React.Component<IComponentDemoPageProps,
>
<ContextualMenuIconExample />
</ExampleCard>
<ExampleCard
title='ContextualMenu with icons and secondary text'
code={ ContextualMenuIconSecondaryTextExampleCode }
>
<ContextualMenuIconSecondaryTextExample />
</ExampleCard>
<ExampleCard
title='ContextualMenu with submenus'
code={ ContextualMenuSubmenuExampleCode }
Expand Down
Loading