Skip to content

Conversation

@khmakoto
Copy link
Member

Previous Behavior

The places where via.placeholder.com was being used to provision images in our docsite would result in a Content Security Policy violation because the URL was not recognized and the image would not be loaded, causing a bad experience for users.

image

New Behavior

All usages of via.placeholder.com have now been replaced with an SVG coming from our CDN. The version of the CDN that we are using has been updated in the whole repo to have access to this SVG.

image

Related Issue(s)

@khmakoto khmakoto self-assigned this Aug 17, 2023
@khmakoto khmakoto requested review from a team, dzearing and sopranopillow as code owners August 17, 2023 00:55
@github-actions github-actions bot added this to the August Project Cycle Q4 2023 milestone Aug 17, 2023
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 17, 2023

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
InfoButton mount 10 11 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 622 626 5000
Button mount 323 318 5000
Field mount 1140 1132 5000
FluentProvider mount 680 679 5000
FluentProviderWithTheme mount 76 89 10
FluentProviderWithTheme virtual-rerender 65 56 10
FluentProviderWithTheme virtual-rerender-with-unmount 70 74 10
InfoButton mount 10 11 5000 Possible regression
MakeStyles mount 867 828 50000
Persona mount 1725 1716 5000
SpinButton mount 1304 1349 5000

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 17, 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 4b6c1dd:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 17, 2023

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 120 106 1.13:1
AttachmentMinimalPerf.default 84 78 1.08:1
ButtonOverridesMissPerf.default 701 651 1.08:1
AlertMinimalPerf.default 162 152 1.07:1
HeaderMinimalPerf.default 217 202 1.07:1
CarouselMinimalPerf.default 262 248 1.06:1
RosterPerf.default 1585 1496 1.06:1
ProviderMinimalPerf.default 207 195 1.06:1
ItemLayoutMinimalPerf.default 736 699 1.05:1
IconMinimalPerf.default 393 375 1.05:1
DatepickerMinimalPerf.default 3580 3456 1.04:1
ListCommonPerf.default 392 376 1.04:1
SkeletonMinimalPerf.default 198 190 1.04:1
VideoMinimalPerf.default 435 419 1.04:1
AccordionMinimalPerf.default 81 79 1.03:1
LayoutMinimalPerf.default 203 198 1.03:1
MenuButtonMinimalPerf.default 968 944 1.03:1
PopupMinimalPerf.default 351 341 1.03:1
MenuMinimalPerf.default 500 489 1.02:1
CustomToolbarPrototype.default 1466 1444 1.02:1
ChatWithPopoverPerf.default 196 194 1.01:1
CheckboxMinimalPerf.default 1148 1135 1.01:1
DialogMinimalPerf.default 440 437 1.01:1
DropdownManyItemsPerf.default 391 387 1.01:1
DropdownMinimalPerf.default 1410 1397 1.01:1
EmbedMinimalPerf.default 1854 1839 1.01:1
ListMinimalPerf.default 304 301 1.01:1
ListNestedPerf.default 319 317 1.01:1
PortalMinimalPerf.default 82 81 1.01:1
TableManyItemsPerf.default 1132 1123 1.01:1
ToolbarMinimalPerf.default 527 521 1.01:1
AnimationMinimalPerf.default 302 302 1:1
BoxMinimalPerf.default 195 195 1:1
DividerMinimalPerf.default 208 208 1:1
RadioGroupMinimalPerf.default 265 265 1:1
RefMinimalPerf.default 105 105 1:1
SplitButtonMinimalPerf.default 2241 2230 1:1
StatusMinimalPerf.default 405 404 1:1
AttachmentSlotsPerf.default 636 640 0.99:1
FlexMinimalPerf.default 150 152 0.99:1
HeaderSlotsPerf.default 460 467 0.99:1
ProviderMergeThemesPerf.default 651 658 0.99:1
SliderMinimalPerf.default 724 730 0.99:1
TextMinimalPerf.default 189 191 0.99:1
TooltipMinimalPerf.default 1256 1271 0.99:1
ChatMinimalPerf.default 420 427 0.98:1
GridMinimalPerf.default 184 187 0.98:1
TreeMinimalPerf.default 465 474 0.98:1
ImageMinimalPerf.default 228 234 0.97:1
ListWith60ListItems.default 348 357 0.97:1
TreeWith60ListItems.default 87 90 0.97:1
InputMinimalPerf.default 518 539 0.96:1
LoaderMinimalPerf.default 190 197 0.96:1
ReactionMinimalPerf.default 204 213 0.96:1
CardMinimalPerf.default 294 311 0.95:1
ChatDuplicateMessagesPerf.default 152 160 0.95:1
FormMinimalPerf.default 212 222 0.95:1
LabelMinimalPerf.default 208 219 0.95:1
TableMinimalPerf.default 220 231 0.95:1
TextAreaMinimalPerf.default 269 288 0.93:1
ButtonMinimalPerf.default 83 90 0.92:1
SegmentMinimalPerf.default 190 206 0.92:1
ButtonSlotsPerf.default 292 327 0.89:1

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 17, 2023

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 17, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
330 B
global-context
createContextSelector
537 B
342 B
priority-overflow
createOverflowManager
4.162 kB
1.735 kB
react-accordion
Accordion (including children components)
88.592 kB
26.885 kB
react-alert
Alert
81.836 kB
22.031 kB
react-avatar
Avatar
47.01 kB
14.502 kB
react-avatar
AvatarGroup
16.116 kB
6.431 kB
react-avatar
AvatarGroupItem
61.789 kB
18.912 kB
react-badge
Badge
23.183 kB
7.254 kB
react-badge
CounterBadge
24.084 kB
7.553 kB
react-badge
PresenceBadge
22.14 kB
7.867 kB
react-button
Button
37.078 kB
9.751 kB
react-button
CompoundButton
44.427 kB
11.234 kB
react-button
MenuButton
41.464 kB
11.001 kB
react-button
SplitButton
49.499 kB
12.555 kB
react-button
ToggleButton
54.124 kB
11.65 kB
react-card
Card - All
88.335 kB
25.271 kB
react-card
Card
83.177 kB
23.742 kB
react-card
CardFooter
9.338 kB
3.932 kB
react-card
CardHeader
11.59 kB
4.716 kB
react-card
CardPreview
10.297 kB
4.317 kB
react-checkbox
Checkbox
32.872 kB
10.652 kB
react-combobox
Combobox (including child components)
87.101 kB
28.273 kB
react-combobox
Dropdown (including child components)
85.461 kB
27.912 kB
react-components
react-components: Button, FluentProvider & webLightTheme
66.614 kB
18.512 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
203.043 kB
57.623 kB
react-components
react-components: FluentProvider & webLightTheme
37.787 kB
12.387 kB
react-datepicker-compat
DatePicker Compat
207.127 kB
57.41 kB
react-dialog
Dialog (including children components)
86.738 kB
26.341 kB
react-divider
Divider
17.098 kB
6.303 kB
react-field
Field
18.295 kB
6.978 kB
react-image
Image
12.029 kB
4.783 kB
react-infobutton
InfoButton
125.301 kB
39.269 kB
react-infobutton
InfoLabel
128.971 kB
40.446 kB
react-input
Input
23.237 kB
7.688 kB
react-label
Label
10.423 kB
4.31 kB
react-link
Link
13.254 kB
5.397 kB
react-menu
Menu (including children components)
135.095 kB
41.412 kB
react-menu
Menu (including selectable components)
137.781 kB
41.909 kB
react-overflow
hooks only
12.419 kB
4.687 kB
react-persona
Persona
53.905 kB
16.371 kB
react-popover
Popover
114.603 kB
35.934 kB
react-portal
Portal
12.255 kB
4.504 kB
react-portal-compat
PortalCompatProvider
6.48 kB
2.203 kB
react-positioning
usePositioning
25.137 kB
9.109 kB
react-progress
ProgressBar
13.718 kB
5.476 kB
react-provider
FluentProvider
18.332 kB
6.817 kB
react-radio
Radio
26.617 kB
8.601 kB
react-radio
RadioGroup
11.622 kB
4.833 kB
react-select
Select
24.599 kB
8.651 kB
react-slider
Slider
34.134 kB
11.039 kB
react-spinbutton
SpinButton
32.681 kB
10.209 kB
react-spinner
Spinner
19.577 kB
7.008 kB
react-switch
Switch
29.092 kB
9.217 kB
react-table
DataGrid
152.77 kB
42.242 kB
react-table
Table (Primitives only)
39.638 kB
12.129 kB
react-table
Table as DataGrid
126.224 kB
33.612 kB
react-table
Table (Selection only)
71.594 kB
18.91 kB
react-table
Table (Sort only)
70.213 kB
18.511 kB
react-tags-preview
InteractionTag
11.031 kB
4.528 kB
react-tags-preview
Tag
25.407 kB
8.398 kB
react-tags-preview
TagGroup
69.607 kB
20.482 kB
react-text
Text - Default
13.043 kB
5.129 kB
react-text
Text - Wrappers
16.215 kB
5.447 kB
react-textarea
Textarea
27.302 kB
9.047 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
34.611 kB
7.295 kB
react-theme
Teams: Light theme
19.282 kB
5.486 kB
react-toast
Toast (including Toaster)
87.69 kB
26.037 kB
react-tooltip
Tooltip
47.942 kB
16.845 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 669c13cc90c399d2e0e727be721f868c6c6e2932

@size-auditor
Copy link

size-auditor bot commented Aug 17, 2023

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 669c13cc90c399d2e0e727be721f868c6c6e2932 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 17, 2023

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 635 610 5000
Breadcrumb mount 1671 1684 1000
Checkbox mount 1667 1679 5000
CheckboxBase mount 1499 1469 5000
ChoiceGroup mount 2927 2991 5000
ComboBox mount 649 657 1000
CommandBar mount 6093 6123 1000
ContextualMenu mount 12752 12668 1000
DefaultButton mount 741 753 5000
DetailsRow mount 2169 2175 5000
DetailsRowFast mount 2163 2170 5000
DetailsRowNoStyles mount 1957 1988 5000
Dialog mount 2705 2640 1000
DocumentCardTitle mount 216 225 1000
Dropdown mount 1951 2012 5000
FocusTrapZone mount 1141 1135 5000
FocusZone mount 1032 1051 5000
GroupedList mount 41680 41454 2
GroupedList virtual-rerender 19766 19922 2
GroupedList virtual-rerender-with-unmount 50215 50397 2
GroupedListV2 mount 218 216 2
GroupedListV2 virtual-rerender 203 210 2
GroupedListV2 virtual-rerender-with-unmount 218 221 2
IconButton mount 1084 1054 5000
Label mount 338 334 5000
Layer mount 2724 2743 5000
Link mount 380 397 5000
MenuButton mount 943 914 5000
MessageBar mount 21430 21401 5000
Nav mount 1946 1922 1000
OverflowSet mount 769 770 5000
Panel mount 1821 1771 1000
Persona mount 715 716 1000
Pivot mount 845 878 1000
PrimaryButton mount 855 844 5000
Rating mount 4606 4598 5000
SearchBox mount 910 893 5000
Shimmer mount 1817 1889 5000
Slider mount 1333 1321 5000
SpinButton mount 2793 2874 5000
Spinner mount 391 384 5000
SplitButton mount 1831 1822 5000
Stack mount 402 404 5000
StackWithIntrinsicChildren mount 857 855 5000
StackWithTextChildren mount 2602 2608 5000
SwatchColorPicker mount 6145 6092 5000
TagPicker mount 1450 1485 5000
Text mount 380 373 5000
TextField mount 920 916 5000
ThemeProvider mount 802 829 5000
ThemeProvider virtual-rerender 583 583 5000
ThemeProvider virtual-rerender-with-unmount 1270 1269 5000
Toggle mount 598 634 5000
buttonNative mount 190 182 5000

@khmakoto khmakoto merged commit 67b9304 into master Aug 17, 2023
@khmakoto khmakoto deleted the replacePlaceholders branch August 17, 2023 20:26
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 21, 2023
* master:
  fix(react-drawer): rename values of position prop from left/right to start/end (microsoft#28905)
  Breadcrumb design team fixes (microsoft#28883)
  applying package updates
  chore(react-search-preview): migrate to new slots API (microsoft#28862)
  docs: Updating version of CDN used and replacing usage of via.placeholder.com with SVG from CDN (microsoft#28895)
  fix(DatePicker, react-datepicker-compat): Make year picker react to go to today button (microsoft#28907)
  fix(DatePicker): readOnlyTextField styles should win over default TextField's (microsoft#28891)
  chore: fix lint warnings for @fluentui/react (microsoft#28888)
  Lint: fix fluent v9 warnings (microsoft#28889)
  doc: add drag & drop example (microsoft#28821)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: React List component - Content Security Policy

6 participants