Skip to content

Conversation

@smhigley
Copy link
Contributor

@smhigley smhigley commented Jun 6, 2023

Previous Behavior

Focus outlines would not show up when opening a Modal, Dialog, Panel, etc. in a new Layer, since the layer contents would be under a new FocusRectsProvider.

New Behavior

Layer now checks whether the focus visible classname is present in its own context, then sets it (if applicable) on the new provider it instantiates.

Related Issue(s)

@size-auditor
Copy link

size-auditor bot commented Jun 6, 2023

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-Tooltip 82.226 kB 82.446 kB ExceedsBaseline     220 bytes
office-ui-fabric-react fluentui-react-Callout 78.976 kB 79.192 kB ExceedsBaseline     216 bytes
office-ui-fabric-react fluentui-react-PersonaCoin 109.71 kB 109.926 kB ExceedsBaseline     216 bytes
office-ui-fabric-react fluentui-react-Persona 109.71 kB 109.926 kB ExceedsBaseline     216 bytes
office-ui-fabric-react fluentui-react-Modal 89.655 kB 89.871 kB ExceedsBaseline     216 bytes
office-ui-fabric-react fluentui-react-Layer 45.448 kB 45.664 kB ExceedsBaseline     216 bytes
office-ui-fabric-react fluentui-react-Keytips 100.765 kB 100.981 kB ExceedsBaseline     216 bytes
office-ui-fabric-react fluentui-react-KeytipLayer 98.011 kB 98.227 kB ExceedsBaseline     216 bytes
office-ui-fabric-react fluentui-react-Keytip 76.725 kB 76.941 kB ExceedsBaseline     216 bytes
office-ui-fabric-react fluentui-react-PositioningContainer 69.659 kB 69.875 kB ExceedsBaseline     216 bytes
office-ui-fabric-react fluentui-react-HoverCard 91.948 kB 92.164 kB ExceedsBaseline     216 bytes
office-ui-fabric-react fluentui-react-Dialog 201.963 kB 202.148 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-Grid 173.106 kB 173.291 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-Pickers 283.668 kB 283.853 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-MessageBar 181.795 kB 181.98 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-Facepile 202.98 kB 203.165 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-FloatingPicker 233.218 kB 233.403 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-Dropdown 224.275 kB 224.46 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-DocumentCard 208.07 kB 208.255 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-DatePicker 177.882 kB 178.067 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-ContextualMenu 147.813 kB 147.998 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-CommandBar 194.18 kB 194.365 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-ComboBox 241.197 kB 241.382 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-ColorPicker 127.649 kB 127.834 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-Coachmark 88.481 kB 88.666 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-ButtonGrid 173.106 kB 173.291 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-Pivot 181.43 kB 181.615 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-Breadcrumb 193.068 kB 193.253 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-TimePicker 231.349 kB 231.534 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-TeachingBubble 196.968 kB 197.153 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-SearchBox 180.17 kB 180.355 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-ShimmeredDetailsList 235.033 kB 235.218 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-SwatchColorPicker 183.075 kB 183.26 kB ExceedsBaseline     185 bytes
office-ui-fabric-react fluentui-react-Button 187.363 kB 187.546 kB ExceedsBaseline     183 bytes
office-ui-fabric-react fluentui-react-Panel 191.546 kB 191.729 kB ExceedsBaseline     183 bytes
office-ui-fabric-react fluentui-react-Nav 180.456 kB 180.639 kB ExceedsBaseline     183 bytes
office-ui-fabric-react fluentui-react-SpinButton 183.851 kB 184.034 kB ExceedsBaseline     183 bytes
office-ui-fabric-react fluentui-react-SelectedItemsList 223.626 kB 223.809 kB ExceedsBaseline     183 bytes
office-ui-fabric-react fluentui-react-DetailsList 224.284 kB 224.466 kB ExceedsBaseline     182 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 7eca299aed541ae297ab5bc7d511e64f56570932 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Jun 6, 2023

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 6b59b9e:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

📊 Bundle size report

🤖 This report was generated against 7eca299aed541ae297ab5bc7d511e64f56570932

@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 629 638 5000
Breadcrumb mount 1642 1661 1000
Checkbox mount 1686 1677 5000
CheckboxBase mount 1446 1459 5000
ChoiceGroup mount 2890 2925 5000
ComboBox mount 648 643 1000
CommandBar mount 6156 6164 1000
ContextualMenu mount 11261 11323 1000
DefaultButton mount 750 730 5000
DetailsRow mount 2147 2174 5000
DetailsRowFast mount 2208 2172 5000
DetailsRowNoStyles mount 1984 1978 5000
Dialog mount 2736 2749 1000
DocumentCardTitle mount 229 225 1000
Dropdown mount 1949 1968 5000
FocusTrapZone mount 1125 1109 5000
FocusZone mount 1061 1040 5000
GroupedList mount 40708 41011 2
GroupedList virtual-rerender 19710 19383 2
GroupedList virtual-rerender-with-unmount 50162 49808 2
GroupedListV2 mount 223 237 2
GroupedListV2 virtual-rerender 206 209 2
GroupedListV2 virtual-rerender-with-unmount 231 229 2
IconButton mount 1054 1057 5000
Label mount 333 336 5000
Layer mount 2672 2728 5000
Link mount 386 393 5000
MenuButton mount 957 934 5000
MessageBar mount 21508 21489 5000
Nav mount 1908 1926 1000
OverflowSet mount 768 759 5000
Panel mount 1769 1775 1000
Persona mount 745 764 1000
Pivot mount 851 832 1000
PrimaryButton mount 828 836 5000
Rating mount 4593 4629 5000
SearchBox mount 896 873 5000
Shimmer mount 1847 1837 5000
Slider mount 1318 1317 5000
SpinButton mount 2873 2810 5000
Spinner mount 375 388 5000
SplitButton mount 1822 1822 5000
Stack mount 398 404 5000
StackWithIntrinsicChildren mount 836 858 5000
StackWithTextChildren mount 2607 2607 5000
SwatchColorPicker mount 6001 6038 5000
TagPicker mount 1419 1422 5000
Text mount 369 369 5000
TextField mount 939 924 5000
ThemeProvider mount 820 830 5000
ThemeProvider virtual-rerender 585 586 5000
ThemeProvider virtual-rerender-with-unmount 1268 1241 5000
Toggle mount 634 609 5000
buttonNative mount 200 190 5000

@smhigley smhigley merged commit 9ec9d9d into microsoft:master Jun 6, 2023
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jun 13, 2023
* master:
  applying package updates
  doc: Remove wrong recommendation from input (microsoft#28168)
  fix: Outline color now respects OS force colors settings (microsoft#28182)
  Datepicker onCalendarOpenStateChange prop (microsoft#28136)
  feat(react-file-type-icons): Add getFileTypeIconAsUrl utility (microsoft#27336)
  applying package updates
  [FIX] Updates selection dot and label positioning for ChoiceGroupOption when an Image or Icon is present. (microsoft#28173)
  chore(react-infobutton): Rename InfoTip to InfoIcon (microsoft#28177)
  fix(react-datepicker-compat): Make DatePicker Compat stories SSR safe (microsoft#28017)
  Added `tab` focus mode to the Breadcrumb (microsoft#28046)
  docs: Add usable documentation (microsoft#28155)
  applying package updates
  Fix up rebase code (microsoft#27864)
  fix: ContextualMenu indexing in sections (microsoft#28127)
  applying package updates
  fix: Layer sets focus visible classname for its FocusRectsProvider (microsoft#28157)
  docs(react-infobutton): Update stories to show better guidance (microsoft#28144)
  fix(react-avatar): Do not render the image when src prop is undefined (microsoft#28146)
  feat(react-datepicker-compat): Add null to value prop and handle controlled cases correctly (microsoft#28056)
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