Skip to content

Conversation

@tabrumle
Copy link
Contributor

sectionProps limits the title prop to a string. This prevents sending any additional properties to the title.

A while ago, there was a PR to apply html div properties specified on itemProps of a an IContextualMenuItem element to the surrounding div of the section header.

This PR makes parity with that.

Focus areas to test
Titles still render on contextual menus

This is a resubmit of #14069

tabrumle and others added 29 commits April 15, 2020 11:19
…ContextualMenu.base.tsx

Co-Authored-By: Xu Gao <xugao0131@hotmail.com>
…flow at 99 to prevent large numbers from overflowing outside of the buttons bounds
@tabrumle tabrumle requested a review from joschect as a code owner September 18, 2020 18:31
@tabrumle
Copy link
Contributor Author

@joschect I had to resubmit the PR as I don't have access to Matt branch to resolve the merge conflicts

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 18, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 49b121f:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Sep 18, 2020

Perf Analysis

No significant results to display.

All results

Scenario Render type 7.0 Ticks PR Ticks Iterations Status
Avatar mount 897 850 5000
BaseButton mount 1008 971 5000
Breadcrumb mount 42540 42783 5000
ButtonNext mount 641 617 5000
Checkbox mount 1713 1651 5000
CheckboxBase mount 1413 1397 5000
ChoiceGroup mount 5188 5247 5000
ComboBox mount 984 958 1000
CommandBar mount 7844 7777 1000
ContextualMenu mount 14305 13847 1000
DefaultButton mount 1200 1230 5000
DetailsRow mount 3862 3855 5000
DetailsRowFast mount 3833 3818 5000
DetailsRowNoStyles mount 3642 3640 5000
Dialog mount 1580 1578 1000
DocumentCardTitle mount 1845 1806 1000
Dropdown mount 2738 2814 5000
FocusTrapZone mount 1735 1770 5000
FocusZone mount 1836 1834 5000
IconButton mount 1875 1893 5000
Label mount 367 366 5000
Layer mount 2107 2101 5000
Link mount 483 483 5000
MenuButton mount 1582 1610 5000
MessageBar mount 2157 2086 5000
Nav mount 3468 3378 1000
OverflowSet mount 1476 1438 5000
Panel mount 1472 1522 1000
Persona mount 874 905 1000
Pivot mount 1546 1573 1000
PrimaryButton mount 1384 1389 5000
Rating mount 8268 8202 5000
SearchBox mount 1372 1383 5000
Shimmer mount 2818 2883 5000
Slider mount 1627 1665 5000
SpinButton mount 5390 5438 5000
Spinner mount 465 462 5000
SplitButton mount 3428 3397 5000
Stack mount 571 583 5000
StackWithIntrinsicChildren mount 2155 2137 5000
StackWithTextChildren mount 5452 5487 5000
SwatchColorPicker mount 11152 11101 5000
TagPicker mount 2897 2908 5000
TeachingBubble mount 51964 51784 5000
Text mount 470 460 5000
TextField mount 1482 1489 5000
ThemeProvider mount 3234 3142 5000
ThemeProvider virtual-rerender 644 609 5000
Toggle mount 850 903 5000
button mount 133 130 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.49 0.52 0.94:1 2000 983
🦄 Button.Fluent 0.13 0.21 0.62:1 5000 626
🔧 Checkbox.Fluent 0.71 0.41 1.73:1 1000 714
🎯 Dialog.Fluent 0.18 0.25 0.72:1 5000 890
🔧 Dropdown.Fluent 3.18 0.53 6:1 1000 3179
🔧 Icon.Fluent 0.17 0.07 2.43:1 5000 845
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 444
🔧 Slider.Fluent 1.71 0.38 4.5:1 1000 1713
🔧 Text.Fluent 0.08 0.04 2:1 5000 406
🦄 Tooltip.Fluent 0.12 17.36 0.01:1 5000 609

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 181 0 Infinity:1
AlertMinimalPerf.default 364 0 Infinity:1
AnimationMinimalPerf.default 479 0 Infinity:1
AttachmentSlotsPerf.default 1273 0 Infinity:1
AvatarMinimalPerf.default 537 0 Infinity:1
BoxMinimalPerf.default 428 0 Infinity:1
ButtonMinimalPerf.default 214 0 Infinity:1
ButtonSlotsPerf.default 675 0 Infinity:1
ButtonUseCssPerf.default 907 0 Infinity:1
ButtonUseCssNestingPerf.default 1207 0 Infinity:1
CardMinimalPerf.default 678 0 Infinity:1
CarouselMinimalPerf.default 516 0 Infinity:1
ChatDuplicateMessagesPerf.default 491 0 Infinity:1
ChatMinimalPerf.default 715 0 Infinity:1
CheckboxMinimalPerf.default 3030 0 Infinity:1
DialogMinimalPerf.default 902 0 Infinity:1
DividerMinimalPerf.default 452 0 Infinity:1
DropdownManyItemsPerf.default 824 0 Infinity:1
DropdownMinimalPerf.default 3084 0 Infinity:1
EmbedMinimalPerf.default 2145 0 Infinity:1
FlexMinimalPerf.default 354 0 Infinity:1
FormMinimalPerf.default 511 0 Infinity:1
GridMinimalPerf.default 417 0 Infinity:1
HeaderMinimalPerf.default 459 0 Infinity:1
HeaderSlotsPerf.default 921 0 Infinity:1
ImageMinimalPerf.default 467 0 Infinity:1
InputMinimalPerf.default 1428 0 Infinity:1
ItemLayoutMinimalPerf.default 1496 0 Infinity:1
LabelMinimalPerf.default 494 0 Infinity:1
LayoutMinimalPerf.default 482 0 Infinity:1
ListCommonPerf.default 718 0 Infinity:1
ListNestedPerf.default 711 0 Infinity:1
ListWith60ListItems.default 1045 0 Infinity:1
LoaderMinimalPerf.default 830 0 Infinity:1
MenuMinimalPerf.default 988 0 Infinity:1
MenuButtonMinimalPerf.default 1787 0 Infinity:1
PopupMinimalPerf.default 764 0 Infinity:1
PortalMinimalPerf.default 191 0 Infinity:1
ProviderMergeThemesPerf.default 2197 0 Infinity:1
ProviderMinimalPerf.default 1107 0 Infinity:1
ReactionMinimalPerf.default 481 0 Infinity:1
RefMinimalPerf.default 254 0 Infinity:1
SegmentMinimalPerf.default 418 0 Infinity:1
SkeletonMinimalPerf.default 471 0 Infinity:1
SplitButtonMinimalPerf.default 4150 0 Infinity:1
StatusMinimalPerf.default 828 0 Infinity:1
IconMinimalPerf.default 766 0 Infinity:1
TableManyItemsPerf.default 2525 0 Infinity:1
TableMinimalPerf.default 476 0 Infinity:1
TextMinimalPerf.default 448 0 Infinity:1
TextAreaMinimalPerf.default 597 0 Infinity:1
CustomToolbarPrototype.default 4185 0 Infinity:1
ToolbarMinimalPerf.default 1046 0 Infinity:1
TreeMinimalPerf.default 1024 0 Infinity:1
TreeWith60ListItems.default 225 0 Infinity:1
VideoMinimalPerf.default 721 0 Infinity:1
Avatar.Fluent 983 0 Infinity:1
Button.Fluent 626 0 Infinity:1
Checkbox.Fluent 714 0 Infinity:1
Dialog.Fluent 890 0 Infinity:1
Icon.Fluent 845 0 Infinity:1
Image.Fluent 444 0 Infinity:1
Text.Fluent 406 0 Infinity:1
Dropdown.Fluent 3179 1 3179:1
ButtonOverridesMissPerf.default 1799 1 1799:1
Slider.Fluent 1713 1 1713:1
SliderMinimalPerf.default 1649 1 1649:1
TooltipMinimalPerf.default 914 1 914:1
Tooltip.Fluent 609 1 609:1
ListMinimalPerf.default 576 1 576:1
ChatWithPopoverPerf.default 530 1 530:1
RadioGroupMinimalPerf.default 508 1 508:1
AttachmentMinimalPerf.default 180 1 180:1

# Conflicts:
#	packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md
@size-auditor
Copy link

size-auditor bot commented Sep 21, 2020

Asset size changes

⚠️ Insufficient baseline data to detect size changes

Unable to find bundle size details for Baseline commit: d727c1a

Possible causes

  • The baseline build d727c1a is broken
  • The Size Auditor run for the baseline build d727c1a was not triggered

Recommendations

  • Please merge your branch for this Pull request with the latest master build and commit your changes once again

@tomi-msft
Copy link
Contributor

As part of our version 8 release we need folks to port changes to this component to the react-next package as well. Could you make this change in react-next as well?

…pdateSectionHeaderType

# Conflicts:
#	packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md
@tabrumle
Copy link
Contributor Author

@tomi-msft

As part of our version 8 release we need folks to port changes to this component to the react-next package as well. Could you make this change in react-next as well?

Made the relevant changes and pushed

Copy link
Member

@khmakoto khmakoto left a comment

Choose a reason for hiding this comment

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

Thanks for submitting this fix, but due to work we're currently doing to prepare master for our version 8 beta release, we're asking contributors to either wait a couple weeks to submit fixes (if it's not urgent) or submit to the new 7.0 branch (if it's urgent). See #15222 for more details.

@msft-github-bot
Copy link
Contributor

Hello @khmakoto!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

@msft-github-bot
Copy link
Contributor

🎉office-ui-fabric-react@v7.144.0 has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot
Copy link
Contributor

🎉@fluentui/react-next@v8.0.0-alpha.121 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot pushed a commit that referenced this pull request Jun 28, 2021
…xtualMenuItem (#18713)

This ports the change to allow title on menu sections to be an IContextualMenuItem to support lang props

#### Description of changes

This is simply a port of #15123
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants