fix: Make border around Avatar's badge transparent, not a solid color #27292

behowell · 2023-03-22T19:44:59Z

Previous Behavior

New Behavior

Related Issue(s)

Fixes #

fabricteam · 2023-03-22T19:55:34Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-alert` Alert	`96.524 kB` `23.109 kB`	`100.003 kB` `23.828 kB`	`3.479 kB` `719 B`
`react-avatar` Avatar	`60.189 kB` `15.557 kB`	`63.668 kB` `16.236 kB`	`3.479 kB` `679 B`
`react-avatar` AvatarGroupItem	`76.45 kB` `20.063 kB`	`79.929 kB` `20.78 kB`	`3.479 kB` `717 B`
`react-persona` Persona	`67.215 kB` `17.502 kB`	`70.694 kB` `18.188 kB`	`3.479 kB` `686 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-avatar` AvatarGroup	`18.059 kB` `6.662 kB`
`react-components` react-components: Button, FluentProvider & webLightTheme	`67.372 kB` `18.188 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`206.778 kB` `57.319 kB`
`react-components` react-components: FluentProvider & webLightTheme	`38.201 kB` `12.128 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.185 kB`
`react-table` DataGrid	`149.705 kB` `40.623 kB`
`react-table` Table (Primitives only)	`47 kB` `12.681 kB`
`react-table` Table as DataGrid	`137.845 kB` `35.252 kB`
`react-table` Table (Selection only)	`85.68 kB` `21.276 kB`
`react-table` Table (Sort only)	`85.01 kB` `21.086 kB`

_{🤖 This report was generated against 77bb9ec1eeedef91315dee3750bd06b15168c693}

size-auditor · 2023-03-22T19:59:13Z

Asset size changes

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

Baseline commit: 77bb9ec1eeedef91315dee3750bd06b15168c693 (build)

fabricteam · 2023-03-22T20:11:25Z

change/@fluentui-react-avatar-e8c58b22-266b-4609-9169-1a26cdef500c.json

@@ -0,0 +1,7 @@
+{


🕵 fluentuiv9 Open the Visual Regressions report to inspect the 163 screenshots

✅ There was 0 screenshots added, 0 screenshots removed, 1740 screenshots unchanged, 0 screenshots with different dimensions and 163 screenshots with visible difference.

unknown 163 screenshots

Image Name Diff(in Pixels) Image Type

Avatar Converged.basic - Dark Mode.normal.chromium.png 3 Changed

Avatar Converged.basic - High Contrast.normal.chromium.png 9 Changed

Avatar Converged.basic - RTL.normal.chromium.png 34 Changed

Avatar Converged.basic.normal.chromium.png 6 Changed

Avatar Converged.customSize+name+badge.normal.chromium.png 83 Changed

Avatar Converged.size+icon+badge+square.normal.chromium.png 47 Changed

Avatar Converged.size+image+badge.normal.chromium.png 70 Changed

Avatar Converged.size+inactive+badge.normal.chromium.png 43 Changed

Persona Converged.basic - Dark Mode.normal.chromium.png 1 Changed

Persona Converged.basic - High Contrast.normal.chromium.png 5 Changed

Persona Converged.basic - RTL.normal.chromium.png 2 Changed

Persona Converged.basic.normal.chromium.png 3 Changed

Persona Converged.textWrap.normal.chromium.png 3 Changed

Table flex - subtle selection.rest.chromium.png 9 Changed

Table flex - subtle selection.rest.hover unselected row.chromium.png 9 Changed

Table layout flex - cell actions.always visible - Dark Mode.chromium.png 6 Changed

Table layout flex - cell actions.always visible - Dark Mode.hover row.chromium.png 7 Changed

Table layout flex - cell actions.always visible - High Contrast.chromium.png 19 Changed

Table layout flex - cell actions.always visible - High Contrast.hover row.chromium.png 33 Changed

Table layout flex - cell actions.always visible - RTL.chromium.png 9 Changed

Table layout flex - cell actions.always visible - RTL.hover row.chromium.png 8 Changed

Table layout flex - cell actions.always visible.chromium.png 9 Changed

Table layout flex - cell actions.always visible.hover row.chromium.png 9 Changed

Table layout flex - cell actions.default - Dark Mode.chromium.png 6 Changed

Table layout flex - cell actions.default - Dark Mode.hover row.chromium.png 7 Changed

Table layout flex - cell actions.default - High Contrast.chromium.png 19 Changed

Table layout flex - cell actions.default - High Contrast.hover row.chromium.png 33 Changed

Table layout flex - cell actions.default - RTL.chromium.png 9 Changed

Table layout flex - cell actions.default - RTL.hover row.chromium.png 8 Changed

Table layout flex - cell actions.default.chromium.png 9 Changed

Table layout flex - cell actions.default.hover row.chromium.png 9 Changed

Table layout flex - cell actions.in header cell.chromium.png 9 Changed

Table layout flex - cell actions.in header cell.hover row.chromium.png 9 Changed

Table layout flex - headers.sortable - Dark Mode.chromium.png 6 Changed

Table layout flex - headers.sortable - Dark Mode.hover header.chromium.png 6 Changed

Table layout flex - headers.sortable - Dark Mode.press header.chromium.png 6 Changed

Table layout flex - headers.sortable - High Contrast.chromium.png 19 Changed

Table layout flex - headers.sortable - High Contrast.hover header.chromium.png 19 Changed

Table layout flex - headers.sortable - High Contrast.press header.chromium.png 19 Changed

Table layout flex - headers.sortable.chromium.png 9 Changed

Table layout flex - headers.sortable.hover header.chromium.png 9 Changed

Table layout flex - headers.sortable.press header.chromium.png 9 Changed

Table layout flex - truncate.default (disabled).chromium.png 9 Changed

Table layout flex - truncate.false.chromium.png 9 Changed

Table layout flex - truncate.true.chromium.png 9 Changed

Table layout flex.multiselect (checked) - brand - Dark Mode.chromium.png 8 Changed

Table layout flex.multiselect (checked) - brand - High Contrast.chromium.png 111 Changed

Table layout flex.multiselect (checked) - brand - RTL.chromium.png 7 Changed

Table layout flex.multiselect (checked) - brand.chromium.png 11 Changed

Table layout flex.multiselect (checked) - neutral - Dark Mode.chromium.png 5 Changed

Table layout flex.multiselect (checked) - neutral - High Contrast.chromium.png 76 Changed

Table layout flex.multiselect (checked) - neutral - RTL.chromium.png 8 Changed

Table layout flex.multiselect (checked) - neutral.chromium.png 13 Changed

Table layout flex.multiselect (mixed) - brand - Dark Mode.chromium.png 7 Changed

Table layout flex.multiselect (mixed) - brand - High Contrast.chromium.png 65 Changed

Table layout flex.multiselect (mixed) - brand - RTL.chromium.png 8 Changed

Table layout flex.multiselect (mixed) - brand.chromium.png 10 Changed

Table layout flex.multiselect (mixed) - neutral - Dark Mode.chromium.png 6 Changed

Table layout flex.multiselect (mixed) - neutral - High Contrast.chromium.png 48 Changed

Table layout flex.multiselect (mixed) - neutral - RTL.chromium.png 9 Changed

Table layout flex.multiselect (mixed) - neutral.chromium.png 11 Changed

Table layout flex.multiselect - Dark Mode.chromium.png 6 Changed

Table layout flex.multiselect - High Contrast.chromium.png 19 Changed

Table layout flex.multiselect - RTL.chromium.png 9 Changed

Table layout flex.multiselect.chromium.png 9 Changed

Table layout flex.primary cell.chromium.png 9 Changed

Table layout flex.single select (checked) - Dark Mode.chromium.png 6 Changed

Table layout flex.single select (checked) - High Contrast.chromium.png 19 Changed

Table layout flex.single select (checked) - RTL.chromium.png 9 Changed

Table layout flex.single select (checked) - brand - Dark Mode.chromium.png 7 Changed

Table layout flex.single select (checked) - brand - High Contrast.chromium.png 42 Changed

Table layout flex.single select (checked) - brand - RTL.chromium.png 9 Changed

Table layout flex.single select (checked) - brand.chromium.png 10 Changed

Table layout flex.single select (checked) - neutral - Dark Mode.chromium.png 6 Changed

Table layout flex.single select (checked) - neutral - High Contrast.chromium.png 33 Changed

Table layout flex.single select (checked) - neutral - RTL.chromium.png 9 Changed

Table layout flex.single select (checked) - neutral.chromium.png 10 Changed

Table layout flex.single select (checked).chromium.png 9 Changed

Table layout flex.single select - Dark Mode.chromium.png 6 Changed

Table layout flex.single select - High Contrast.chromium.png 19 Changed

Table layout flex.single select - RTL.chromium.png 9 Changed

Table layout flex.single select.chromium.png 9 Changed

Table layout flex.size - extra small.chromium.png 7 Changed

Table layout flex.size - medium - Dark Mode.chromium.png 6 Changed

Table layout flex.size - medium - High Contrast.chromium.png 19 Changed

Table layout flex.size - medium - RTL.chromium.png 9 Changed

Table layout flex.size - medium.chromium.png 9 Changed

Table layout flex.size - small.chromium.png 7 Changed

Table layout table - cell actions.always visible - Dark Mode.chromium.png 6 Changed

Table layout table - cell actions.always visible - Dark Mode.hover row.chromium.png 7 Changed

Table layout table - cell actions.always visible - High Contrast.chromium.png 19 Changed

Table layout table - cell actions.always visible - High Contrast.hover row.chromium.png 33 Changed

Table layout table - cell actions.always visible - RTL.chromium.png 9 Changed

Table layout table - cell actions.always visible - RTL.hover row.chromium.png 8 Changed

Table layout table - cell actions.always visible.chromium.png 9 Changed

Table layout table - cell actions.always visible.hover row.chromium.png 9 Changed

Table layout table - cell actions.default - Dark Mode.chromium.png 6 Changed

Table layout table - cell actions.default - Dark Mode.hover row.chromium.png 7 Changed

Table layout table - cell actions.default - High Contrast.chromium.png 19 Changed

Table layout table - cell actions.default - High Contrast.hover row.chromium.png 33 Changed

Table layout table - cell actions.default - RTL.chromium.png 9 Changed

Table layout table - cell actions.default - RTL.hover row.chromium.png 8 Changed

Table layout table - cell actions.default.chromium.png 9 Changed

Table layout table - cell actions.default.hover row.chromium.png 9 Changed

Table layout table - cell actions.in header cell.chromium.png 9 Changed

Table layout table - cell actions.in header cell.hover row.chromium.png 9 Changed

Table layout table - headers.sortable - Dark Mode.chromium.png 6 Changed

Table layout table - headers.sortable - Dark Mode.hover header.chromium.png 6 Changed

Table layout table - headers.sortable - Dark Mode.press header.chromium.png 6 Changed

Table layout table - headers.sortable - High Contrast.chromium.png 19 Changed

Table layout table - headers.sortable - High Contrast.hover header.chromium.png 19 Changed

Table layout table - headers.sortable - High Contrast.press header.chromium.png 19 Changed

Table layout table - headers.sortable.chromium.png 9 Changed

Table layout table - headers.sortable.hover header.chromium.png 9 Changed

Table layout table - headers.sortable.press header.chromium.png 9 Changed

Table layout table - truncate.default (disabled).chromium.png 9 Changed

Table layout table - truncate.false.chromium.png 9 Changed

Table layout table - truncate.true.chromium.png 9 Changed

Table layout table.multiselect (checked) - brand - Dark Mode.chromium.png 8 Changed

Table layout table.multiselect (checked) - brand - High Contrast.chromium.png 111 Changed

Table layout table.multiselect (checked) - brand - RTL.chromium.png 7 Changed

Table layout table.multiselect (checked) - brand.chromium.png 11 Changed

Table layout table.multiselect (checked) - neutral - Dark Mode.chromium.png 5 Changed

Table layout table.multiselect (checked) - neutral - High Contrast.chromium.png 76 Changed

Table layout table.multiselect (checked) - neutral - RTL.chromium.png 8 Changed

Table layout table.multiselect (checked) - neutral.chromium.png 13 Changed

Table layout table.multiselect (mixed) - brand - Dark Mode.chromium.png 7 Changed

Table layout table.multiselect (mixed) - brand - High Contrast.chromium.png 65 Changed

Table layout table.multiselect (mixed) - brand - RTL.chromium.png 8 Changed

Table layout table.multiselect (mixed) - brand.chromium.png 10 Changed

Table layout table.multiselect (mixed) - neutral - Dark Mode.chromium.png 6 Changed

Table layout table.multiselect (mixed) - neutral - High Contrast.chromium.png 48 Changed

Table layout table.multiselect (mixed) - neutral - RTL.chromium.png 9 Changed

Table layout table.multiselect (mixed) - neutral.chromium.png 11 Changed

Table layout table.multiselect - Dark Mode.chromium.png 6 Changed

Table layout table.multiselect - High Contrast.chromium.png 19 Changed

Table layout table.multiselect - RTL.chromium.png 9 Changed

Table layout table.multiselect.chromium.png 9 Changed

Table layout table.primary cell.chromium.png 9 Changed

Table layout table.single select (checked) - Dark Mode.chromium.png 6 Changed

Table layout table.single select (checked) - High Contrast.chromium.png 19 Changed

Table layout table.single select (checked) - RTL.chromium.png 9 Changed

Table layout table.single select (checked) - brand - Dark Mode.chromium.png 7 Changed

Table layout table.single select (checked) - brand - High Contrast.chromium.png 42 Changed

Table layout table.single select (checked) - brand - RTL.chromium.png 9 Changed

Table layout table.single select (checked) - brand.chromium.png 10 Changed

Table layout table.single select (checked) - neutral - Dark Mode.chromium.png 6 Changed

Table layout table.single select (checked) - neutral - High Contrast.chromium.png 33 Changed

Table layout table.single select (checked) - neutral - RTL.chromium.png 9 Changed

Table layout table.single select (checked) - neutral.chromium.png 10 Changed

Table layout table.single select (checked).chromium.png 9 Changed

Table layout table.single select - Dark Mode.chromium.png 6 Changed

Table layout table.single select - High Contrast.chromium.png 19 Changed

Table layout table.single select - RTL.chromium.png 9 Changed

Table layout table.single select.chromium.png 9 Changed

Table layout table.size - extra small.chromium.png 7 Changed

Table layout table.size - medium - Dark Mode.chromium.png 6 Changed

Table layout table.size - medium - High Contrast.chromium.png 19 Changed

Table layout table.size - medium - RTL.chromium.png 9 Changed

Table layout table.size - medium.chromium.png 9 Changed

Table layout table.size - small.chromium.png 7 Changed

Table table - subtle selection.rest.chromium.png 9 Changed

Table table - subtle selection.rest.hover unselected row.chromium.png 9 Changed

codesandbox-ci · 2023-03-22T21:30:58Z

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 5a89239:

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

fabricteam · 2023-03-22T21:34:47Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1078	1108	5000
Button	mount	694	680	5000
Field	mount	1956	1948	5000
FluentProvider	mount	1371	1416	5000
FluentProviderWithTheme	mount	383	381	10
FluentProviderWithTheme	virtual-rerender	290	278	10
FluentProviderWithTheme	virtual-rerender-with-unmount	356	342	10
InfoButton	mount	249	257	5000
MakeStyles	mount	1552	1576	50000
Persona	mount	2664	2708	5000
SpinButton	mount	2326	2397	5000

behowell · 2023-04-13T09:16:10Z

Abandoning in favor of #27527

behowell added 2 commits March 22, 2023 12:42

Using a clip-path for the badge border

2dcfceb

Change file

23761a5

behowell added the Component: Avatar label Mar 22, 2023

behowell self-assigned this Mar 22, 2023

github-actions bot added this to the March Project Cycle Q1 2023 milestone Mar 22, 2023

fabricteam reviewed Mar 22, 2023

View reviewed changes

Fix build error

5a89239

behowell closed this Apr 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Make border around Avatar's badge transparent, not a solid color #27292

fix: Make border around Avatar's badge transparent, not a solid color #27292

behowell commented Mar 22, 2023

fabricteam commented Mar 22, 2023 •

edited

Loading

size-auditor bot commented Mar 22, 2023 •

edited

Loading

fabricteam Mar 22, 2023 •

edited

Loading

codesandbox-ci bot commented Mar 22, 2023

fabricteam commented Mar 22, 2023

behowell commented Apr 13, 2023

Image Name	Diff(in Pixels)	Image Type
Avatar Converged.basic - Dark Mode.normal.chromium.png	3	Changed
Avatar Converged.basic - High Contrast.normal.chromium.png	9	Changed
Avatar Converged.basic - RTL.normal.chromium.png	34	Changed
Avatar Converged.basic.normal.chromium.png	6	Changed
Avatar Converged.customSize+name+badge.normal.chromium.png	83	Changed
Avatar Converged.size+icon+badge+square.normal.chromium.png	47	Changed
Avatar Converged.size+image+badge.normal.chromium.png	70	Changed
Avatar Converged.size+inactive+badge.normal.chromium.png	43	Changed
Persona Converged.basic - Dark Mode.normal.chromium.png	1	Changed
Persona Converged.basic - High Contrast.normal.chromium.png	5	Changed
Persona Converged.basic - RTL.normal.chromium.png	2	Changed
Persona Converged.basic.normal.chromium.png	3	Changed
Persona Converged.textWrap.normal.chromium.png	3	Changed
Table flex - subtle selection.rest.chromium.png	9	Changed
Table flex - subtle selection.rest.hover unselected row.chromium.png	9	Changed
Table layout flex - cell actions.always visible - Dark Mode.chromium.png	6	Changed
Table layout flex - cell actions.always visible - Dark Mode.hover row.chromium.png	7	Changed
Table layout flex - cell actions.always visible - High Contrast.chromium.png	19	Changed
Table layout flex - cell actions.always visible - High Contrast.hover row.chromium.png	33	Changed
Table layout flex - cell actions.always visible - RTL.chromium.png	9	Changed
Table layout flex - cell actions.always visible - RTL.hover row.chromium.png	8	Changed
Table layout flex - cell actions.always visible.chromium.png	9	Changed
Table layout flex - cell actions.always visible.hover row.chromium.png	9	Changed
Table layout flex - cell actions.default - Dark Mode.chromium.png	6	Changed
Table layout flex - cell actions.default - Dark Mode.hover row.chromium.png	7	Changed
Table layout flex - cell actions.default - High Contrast.chromium.png	19	Changed
Table layout flex - cell actions.default - High Contrast.hover row.chromium.png	33	Changed
Table layout flex - cell actions.default - RTL.chromium.png	9	Changed
Table layout flex - cell actions.default - RTL.hover row.chromium.png	8	Changed
Table layout flex - cell actions.default.chromium.png	9	Changed
Table layout flex - cell actions.default.hover row.chromium.png	9	Changed
Table layout flex - cell actions.in header cell.chromium.png	9	Changed
Table layout flex - cell actions.in header cell.hover row.chromium.png	9	Changed
Table layout flex - headers.sortable - Dark Mode.chromium.png	6	Changed
Table layout flex - headers.sortable - Dark Mode.hover header.chromium.png	6	Changed
Table layout flex - headers.sortable - Dark Mode.press header.chromium.png	6	Changed
Table layout flex - headers.sortable - High Contrast.chromium.png	19	Changed
Table layout flex - headers.sortable - High Contrast.hover header.chromium.png	19	Changed
Table layout flex - headers.sortable - High Contrast.press header.chromium.png	19	Changed
Table layout flex - headers.sortable.chromium.png	9	Changed
Table layout flex - headers.sortable.hover header.chromium.png	9	Changed
Table layout flex - headers.sortable.press header.chromium.png	9	Changed
Table layout flex - truncate.default (disabled).chromium.png	9	Changed
Table layout flex - truncate.false.chromium.png	9	Changed
Table layout flex - truncate.true.chromium.png	9	Changed
Table layout flex.multiselect (checked) - brand - Dark Mode.chromium.png	8	Changed
Table layout flex.multiselect (checked) - brand - High Contrast.chromium.png	111	Changed
Table layout flex.multiselect (checked) - brand - RTL.chromium.png	7	Changed
Table layout flex.multiselect (checked) - brand.chromium.png	11	Changed
Table layout flex.multiselect (checked) - neutral - Dark Mode.chromium.png	5	Changed
Table layout flex.multiselect (checked) - neutral - High Contrast.chromium.png	76	Changed
Table layout flex.multiselect (checked) - neutral - RTL.chromium.png	8	Changed
Table layout flex.multiselect (checked) - neutral.chromium.png	13	Changed
Table layout flex.multiselect (mixed) - brand - Dark Mode.chromium.png	7	Changed
Table layout flex.multiselect (mixed) - brand - High Contrast.chromium.png	65	Changed
Table layout flex.multiselect (mixed) - brand - RTL.chromium.png	8	Changed
Table layout flex.multiselect (mixed) - brand.chromium.png	10	Changed
Table layout flex.multiselect (mixed) - neutral - Dark Mode.chromium.png	6	Changed
Table layout flex.multiselect (mixed) - neutral - High Contrast.chromium.png	48	Changed
Table layout flex.multiselect (mixed) - neutral - RTL.chromium.png	9	Changed
Table layout flex.multiselect (mixed) - neutral.chromium.png	11	Changed
Table layout flex.multiselect - Dark Mode.chromium.png	6	Changed
Table layout flex.multiselect - High Contrast.chromium.png	19	Changed
Table layout flex.multiselect - RTL.chromium.png	9	Changed
Table layout flex.multiselect.chromium.png	9	Changed
Table layout flex.primary cell.chromium.png	9	Changed
Table layout flex.single select (checked) - Dark Mode.chromium.png	6	Changed
Table layout flex.single select (checked) - High Contrast.chromium.png	19	Changed
Table layout flex.single select (checked) - RTL.chromium.png	9	Changed
Table layout flex.single select (checked) - brand - Dark Mode.chromium.png	7	Changed
Table layout flex.single select (checked) - brand - High Contrast.chromium.png	42	Changed
Table layout flex.single select (checked) - brand - RTL.chromium.png	9	Changed
Table layout flex.single select (checked) - brand.chromium.png	10	Changed
Table layout flex.single select (checked) - neutral - Dark Mode.chromium.png	6	Changed
Table layout flex.single select (checked) - neutral - High Contrast.chromium.png	33	Changed
Table layout flex.single select (checked) - neutral - RTL.chromium.png	9	Changed
Table layout flex.single select (checked) - neutral.chromium.png	10	Changed
Table layout flex.single select (checked).chromium.png	9	Changed
Table layout flex.single select - Dark Mode.chromium.png	6	Changed
Table layout flex.single select - High Contrast.chromium.png	19	Changed
Table layout flex.single select - RTL.chromium.png	9	Changed
Table layout flex.single select.chromium.png	9	Changed
Table layout flex.size - extra small.chromium.png	7	Changed
Table layout flex.size - medium - Dark Mode.chromium.png	6	Changed
Table layout flex.size - medium - High Contrast.chromium.png	19	Changed
Table layout flex.size - medium - RTL.chromium.png	9	Changed
Table layout flex.size - medium.chromium.png	9	Changed
Table layout flex.size - small.chromium.png	7	Changed
Table layout table - cell actions.always visible - Dark Mode.chromium.png	6	Changed
Table layout table - cell actions.always visible - Dark Mode.hover row.chromium.png	7	Changed
Table layout table - cell actions.always visible - High Contrast.chromium.png	19	Changed
Table layout table - cell actions.always visible - High Contrast.hover row.chromium.png	33	Changed
Table layout table - cell actions.always visible - RTL.chromium.png	9	Changed
Table layout table - cell actions.always visible - RTL.hover row.chromium.png	8	Changed
Table layout table - cell actions.always visible.chromium.png	9	Changed
Table layout table - cell actions.always visible.hover row.chromium.png	9	Changed
Table layout table - cell actions.default - Dark Mode.chromium.png	6	Changed
Table layout table - cell actions.default - Dark Mode.hover row.chromium.png	7	Changed
Table layout table - cell actions.default - High Contrast.chromium.png	19	Changed
Table layout table - cell actions.default - High Contrast.hover row.chromium.png	33	Changed
Table layout table - cell actions.default - RTL.chromium.png	9	Changed
Table layout table - cell actions.default - RTL.hover row.chromium.png	8	Changed
Table layout table - cell actions.default.chromium.png	9	Changed
Table layout table - cell actions.default.hover row.chromium.png	9	Changed
Table layout table - cell actions.in header cell.chromium.png	9	Changed
Table layout table - cell actions.in header cell.hover row.chromium.png	9	Changed
Table layout table - headers.sortable - Dark Mode.chromium.png	6	Changed
Table layout table - headers.sortable - Dark Mode.hover header.chromium.png	6	Changed
Table layout table - headers.sortable - Dark Mode.press header.chromium.png	6	Changed
Table layout table - headers.sortable - High Contrast.chromium.png	19	Changed
Table layout table - headers.sortable - High Contrast.hover header.chromium.png	19	Changed
Table layout table - headers.sortable - High Contrast.press header.chromium.png	19	Changed
Table layout table - headers.sortable.chromium.png	9	Changed
Table layout table - headers.sortable.hover header.chromium.png	9	Changed
Table layout table - headers.sortable.press header.chromium.png	9	Changed
Table layout table - truncate.default (disabled).chromium.png	9	Changed
Table layout table - truncate.false.chromium.png	9	Changed
Table layout table - truncate.true.chromium.png	9	Changed
Table layout table.multiselect (checked) - brand - Dark Mode.chromium.png	8	Changed
Table layout table.multiselect (checked) - brand - High Contrast.chromium.png	111	Changed
Table layout table.multiselect (checked) - brand - RTL.chromium.png	7	Changed
Table layout table.multiselect (checked) - brand.chromium.png	11	Changed
Table layout table.multiselect (checked) - neutral - Dark Mode.chromium.png	5	Changed
Table layout table.multiselect (checked) - neutral - High Contrast.chromium.png	76	Changed
Table layout table.multiselect (checked) - neutral - RTL.chromium.png	8	Changed
Table layout table.multiselect (checked) - neutral.chromium.png	13	Changed
Table layout table.multiselect (mixed) - brand - Dark Mode.chromium.png	7	Changed
Table layout table.multiselect (mixed) - brand - High Contrast.chromium.png	65	Changed
Table layout table.multiselect (mixed) - brand - RTL.chromium.png	8	Changed
Table layout table.multiselect (mixed) - brand.chromium.png	10	Changed
Table layout table.multiselect (mixed) - neutral - Dark Mode.chromium.png	6	Changed
Table layout table.multiselect (mixed) - neutral - High Contrast.chromium.png	48	Changed
Table layout table.multiselect (mixed) - neutral - RTL.chromium.png	9	Changed
Table layout table.multiselect (mixed) - neutral.chromium.png	11	Changed
Table layout table.multiselect - Dark Mode.chromium.png	6	Changed
Table layout table.multiselect - High Contrast.chromium.png	19	Changed
Table layout table.multiselect - RTL.chromium.png	9	Changed
Table layout table.multiselect.chromium.png	9	Changed
Table layout table.primary cell.chromium.png	9	Changed
Table layout table.single select (checked) - Dark Mode.chromium.png	6	Changed
Table layout table.single select (checked) - High Contrast.chromium.png	19	Changed
Table layout table.single select (checked) - RTL.chromium.png	9	Changed
Table layout table.single select (checked) - brand - Dark Mode.chromium.png	7	Changed
Table layout table.single select (checked) - brand - High Contrast.chromium.png	42	Changed
Table layout table.single select (checked) - brand - RTL.chromium.png	9	Changed
Table layout table.single select (checked) - brand.chromium.png	10	Changed
Table layout table.single select (checked) - neutral - Dark Mode.chromium.png	6	Changed
Table layout table.single select (checked) - neutral - High Contrast.chromium.png	33	Changed
Table layout table.single select (checked) - neutral - RTL.chromium.png	9	Changed
Table layout table.single select (checked) - neutral.chromium.png	10	Changed
Table layout table.single select (checked).chromium.png	9	Changed
Table layout table.single select - Dark Mode.chromium.png	6	Changed
Table layout table.single select - High Contrast.chromium.png	19	Changed
Table layout table.single select - RTL.chromium.png	9	Changed
Table layout table.single select.chromium.png	9	Changed
Table layout table.size - extra small.chromium.png	7	Changed
Table layout table.size - medium - Dark Mode.chromium.png	6	Changed
Table layout table.size - medium - High Contrast.chromium.png	19	Changed
Table layout table.size - medium - RTL.chromium.png	9	Changed
Table layout table.size - medium.chromium.png	9	Changed
Table layout table.size - small.chromium.png	7	Changed
Table table - subtle selection.rest.chromium.png	9	Changed
Table table - subtle selection.rest.hover unselected row.chromium.png	9	Changed

fix: Make border around Avatar's badge transparent, not a solid color #27292

fix: Make border around Avatar's badge transparent, not a solid color #27292

Conversation

behowell commented Mar 22, 2023

Previous Behavior

New Behavior

Related Issue(s)

fabricteam commented Mar 22, 2023 • edited Loading

📊 Bundle size report

size-auditor bot commented Mar 22, 2023 • edited Loading

Asset size changes

fabricteam Mar 22, 2023 • edited Loading

Choose a reason for hiding this comment

🕵 fluentuiv9 Open the Visual Regressions report to inspect the 163 screenshots

codesandbox-ci bot commented Mar 22, 2023

fabricteam commented Mar 22, 2023

Perf Analysis (@fluentui/react-components)

behowell commented Apr 13, 2023

fabricteam commented Mar 22, 2023 •

edited

Loading

size-auditor bot commented Mar 22, 2023 •

edited

Loading

fabricteam Mar 22, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)