ContextualMenuItem: adding secondaryText #4788

maximus12793 · 2018-05-05T07:53:24Z

Pull request checklist

Addresses an existing issue: Fixes #0000
Include a change request file using $ npm run change

Description of changes

Add secondaryText to ContextualMenuItem to render on the right of item.name (text).

Focus areas to test

(optional)

msftclas · 2018-05-05T07:53:34Z

All CLA requirements met.

maximus12793 · 2018-05-05T08:00:22Z

@martellaj per our email

joschect · 2018-05-06T20:53:04Z

.vscode/launch.json

      "sourceMaps": true
+    },
+    {
+      "type": "node",


Did you mean to check this in? I'm guessing so but I just wanted to make sure.

no, I think this was just from testing with jest. Will revert this

micahgodbolt · 2018-05-07T16:13:50Z

we need to get a visual test capturing what this new text looks like

betrue-final-final · 2018-05-07T16:19:08Z

Yes, let's do that before we merge this. @maximus12793, is there a designer you worked with?

maximus12793 · 2018-05-07T16:24:13Z

@betrue-final-final @micahgodbolt yes Drew.

betrue-final-final · 2018-05-07T16:25:30Z

Andrew Peacock?

maximus12793 · 2018-05-07T17:04:18Z

yes

micahgodbolt · 2018-05-07T20:09:47Z

packages/office-ui-fabric-react/src/components/Button/Button.types.ts

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


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

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

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?

betrue-final-final · 2018-05-08T16:25:06Z

@peacokle, can you add some pictures of what this would look like?

maximus12793 · 2018-05-09T03:15:35Z

@betrue-final-final This is taken from the ContextualMenu ran via. npm start. Please feel free to run and examine on your end.

…c-react into maroquem/customdata mm

martellaj · 2018-05-07T15:16:57Z

packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts

    },
+    secondaryText: {
+      color: theme.palette.neutralTertiary,
+      paddingLeft: '20px',


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

It is handled automatically.

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

Cool! Thanks, @dzearing!

martellaj · 2018-05-07T15:18:13Z

...-react/src/components/ContextualMenu/examples/ContextualMenu.CustomDataAfterName.Example.tsx

+              {
+                key: 'newItem',
+                name: 'New Button',
+                customData: <span className='applez'>Thu. 10:00 PM</span>


Is this class name actually used?

martellaj · 2018-05-07T15:18:47Z

...-react/src/components/ContextualMenu/examples/ContextualMenu.CustomDataAfterName.Example.tsx

+import { IContextualMenuItemProps } from 'office-ui-fabric-react/lib/ContextualMenu';
+import './ContextualMenuExample.scss';
+
+export class ContextualMenuWithCustomDataAfterNameExample extends React.Component {


Did you intend to check in this example? This looks like an exploration with the first thing you were trying.

whoops yes am removing this

maximus12793 · 2018-05-09T19:11:07Z

Are there any additional changes we would like to see, or is this ready to go?

martellaj · 2018-05-09T19:58:35Z

I'm going ahead and merging this since we have design sign-off from @betrue-final-final and code owner (@joschect) sign-off as well.

…i-fabric-react into parallel-tsc * 'parallel-tsc' of https://github.com/Markionium/office-ui-fabric-react: Variants: have project use OUFR instead of just styling (microsoft#4854) Add more customization hooks to ProgressIndicator (microsoft#4566) Issue#4832: Break BaseButton Types hard dependency from class ContextualMenu (microsoft#4845) Applying package updates. Revert react portals change (microsoft#4840) Update ImageOverview.md Fixes duplicate reading of suggestions on people picker (microsoft#4765) Persona: Deprecate primaryText (microsoft#4811) Experiments: Fix Fluent theme color names (microsoft#4834) Applying package updates. Add JasonGore to command bar codeowners Fix index import (microsoft#4826) Added overflowMenuProps property to CommandBar (microsoft#4818) Fluent theme: Fix imports to use relative paths (microsoft#4831) ContextualMenuItem: adding secondaryText (microsoft#4788) ComboBox: Option Performance Optimization (microsoft#4782)

* master: (95 commits) Variants: have project use OUFR instead of just styling (microsoft#4854) Add more customization hooks to ProgressIndicator (microsoft#4566) Issue#4832: Break BaseButton Types hard dependency from class ContextualMenu (microsoft#4845) Applying package updates. Revert react portals change (microsoft#4840) Update ImageOverview.md Fixes duplicate reading of suggestions on people picker (microsoft#4765) Persona: Deprecate primaryText (microsoft#4811) Experiments: Fix Fluent theme color names (microsoft#4834) Applying package updates. Add JasonGore to command bar codeowners Fix index import (microsoft#4826) Added overflowMenuProps property to CommandBar (microsoft#4818) Fluent theme: Fix imports to use relative paths (microsoft#4831) ContextualMenuItem: adding secondaryText (microsoft#4788) ComboBox: Option Performance Optimization (microsoft#4782) Marqueeselection style update (microsoft#4803) Applying package updates. FocusZone: Add the ability to stop focus from propagating outside the FocusZone (microsoft#4823) Unknown persona coin (microsoft#4809) ...

REDMOND\maroquem added 3 commits April 30, 2018 15:51

1st example

01ab053

addition of secondaryText for ContextualMenuItem

7c1d301

adding changefile

4814754

maximus12793 requested a review from joschect as a code owner May 5, 2018 07:53

merge w/ upstream master

f4a55d2

dzearing changed the title ~~Maroquem/customdata~~ ContextualMenuItem: adding secondaryText to render to the right of the name. May 6, 2018

dzearing changed the title ~~ContextualMenuItem: adding secondaryText to render to the right of the name.~~ ContextualMenuItem: adding secondaryText May 6, 2018

update snapshot tests

e78431a

joschect approved these changes May 6, 2018

View reviewed changes

revert launch.json

c1c3b32

micahgodbolt reviewed May 7, 2018

View reviewed changes

maximus12793 added 2 commits May 7, 2018 18:05

adding vr tests

f282f53

merge w/ upstream

7922e3b

maximus12793 added 2 commits May 8, 2018 20:15

Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…

6050417

…c-react into maroquem/customdata mm

fix tests

a2c2da4

martellaj approved these changes May 9, 2018

View reviewed changes

betrue-final-final approved these changes May 9, 2018

View reviewed changes

rm dead CustomDataAfterName.Example.tsx

d5b8650

martellaj merged commit 5eaf2e1 into microsoft:master May 9, 2018

maximus12793 deleted the maroquem/customdata branch May 9, 2018 22:22

microsoft locked as resolved and limited conversation to collaborators Aug 31, 2019

ContextualMenuItem: adding secondaryText #4788

ContextualMenuItem: adding secondaryText #4788

Uh oh!

Conversation

maximus12793 commented May 5, 2018

Pull request checklist

Description of changes

Focus areas to test

Uh oh!

msftclas commented May 5, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

maximus12793 commented May 5, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

micahgodbolt commented May 7, 2018

Uh oh!

betrue-final-final commented May 7, 2018

Uh oh!

maximus12793 commented May 7, 2018

Uh oh!

betrue-final-final commented May 7, 2018

Uh oh!

maximus12793 commented May 7, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

betrue-final-final commented May 8, 2018

Uh oh!

maximus12793 commented May 9, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

maximus12793 commented May 9, 2018

Uh oh!

martellaj commented May 9, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

msftclas commented May 5, 2018 •

edited

Loading