Skip to content

chore(react-avatar): Reduce bundle size by refactoring styles #27572

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
behowell wants to merge 5 commits into from
Closed

chore(react-avatar): Reduce bundle size by refactoring styles #27572

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3ccfcf9
fix: Make border around badge transparent, not a solid color
behowell Apr 13, 2023
c730568
Use a checkerboard background for the badgeMask VR test
behowell Apr 14, 2023
eb99813
chore: Move more styles into makeResetStyles, reduce bundle size
behowell Apr 14, 2023
20d532e
Change file
behowell Apr 14, 2023
27fe5de
Fix up styles
behowell Apr 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion apps/vr-tests-react-components/src/stories/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
import * as React from 'react';
Copy link
Collaborator

@fabricteam fabricteam Apr 14, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

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

✅ There was 2 screenshots added, 0 screenshots removed, 1859 screenshots unchanged, 0 screenshots with different dimensions and 72 screenshots with visible difference.

unknown 74 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.basic - Dark Mode.normal.chromium.png 9 Changed
Avatar Converged.basic - High Contrast.normal.chromium.png 13 Changed
Avatar Converged.basic - RTL.normal.chromium.png 14 Changed
Avatar Converged.basic.normal.chromium.png 14 Changed
Avatar Converged.customSize+icon+active.normal.chromium.png 716 Changed
Avatar Converged.customSize+name+badge.normal.chromium.png 10 Changed
Avatar Converged.size+image+badge.normal.chromium.png 182 Changed
Avatar Converged.size+inactive+badge.normal.chromium.png 119 Changed
AvatarGroup Converged.layoutStack - High Contrast.default.chromium.png 7 Changed
Persona Converged.basic - High Contrast.normal.chromium.png 6 Changed
Table layout flex - cell actions.always visible - Dark Mode.hover row.chromium.png 1 Changed
Table layout flex - cell actions.always visible - High Contrast.chromium.png 25 Changed
Table layout flex - cell actions.always visible - High Contrast.hover row.chromium.png 51 Changed
Table layout flex - cell actions.default - Dark Mode.hover row.chromium.png 1 Changed
Table layout flex - cell actions.default - High Contrast.chromium.png 25 Changed
Table layout flex - cell actions.default - High Contrast.hover row.chromium.png 51 Changed
Table layout flex - headers.sortable - High Contrast.chromium.png 25 Changed
Table layout flex - headers.sortable - High Contrast.hover header.chromium.png 25 Changed
Table layout flex - headers.sortable - High Contrast.press header.chromium.png 25 Changed
Table layout flex.multiselect (checked) - brand - Dark Mode.chromium.png 3 Changed
Table layout flex.multiselect (checked) - brand - High Contrast.chromium.png 201 Changed
Table layout flex.multiselect (checked) - brand - RTL.chromium.png 3 Changed
Table layout flex.multiselect (checked) - brand.chromium.png 3 Changed
Table layout flex.multiselect (checked) - neutral - High Contrast.chromium.png 128 Changed
Table layout flex.multiselect (checked) - neutral - RTL.chromium.png 7 Changed
Table layout flex.multiselect (checked) - neutral.chromium.png 7 Changed
Table layout flex.multiselect (mixed) - brand - Dark Mode.chromium.png 2 Changed
Table layout flex.multiselect (mixed) - brand - High Contrast.chromium.png 113 Changed
Table layout flex.multiselect (mixed) - brand - RTL.chromium.png 1 Changed
Table layout flex.multiselect (mixed) - brand.chromium.png 1 Changed
Table layout flex.multiselect (mixed) - neutral - High Contrast.chromium.png 77 Changed
Table layout flex.multiselect (mixed) - neutral - RTL.chromium.png 4 Changed
Table layout flex.multiselect (mixed) - neutral.chromium.png 4 Changed
Table layout flex.multiselect - High Contrast.chromium.png 25 Changed
Table layout flex.single select (checked) - High Contrast.chromium.png 25 Changed
Table layout flex.single select (checked) - brand - High Contrast.chromium.png 69 Changed
Table layout flex.single select (checked) - neutral - High Contrast.chromium.png 51 Changed
Table layout flex.single select (checked) - neutral - RTL.chromium.png 2 Changed
Table layout flex.single select (checked) - neutral.chromium.png 2 Changed
Table layout flex.single select - High Contrast.chromium.png 25 Changed
Table layout flex.size - medium - High Contrast.chromium.png 25 Changed
Table layout table - cell actions.always visible - Dark Mode.hover row.chromium.png 1 Changed
Table layout table - cell actions.always visible - High Contrast.chromium.png 25 Changed
Table layout table - cell actions.always visible - High Contrast.hover row.chromium.png 51 Changed
Table layout table - cell actions.default - Dark Mode.hover row.chromium.png 1 Changed
Table layout table - cell actions.default - High Contrast.chromium.png 25 Changed
Table layout table - cell actions.default - High Contrast.hover row.chromium.png 51 Changed
Table layout table - headers.sortable - High Contrast.chromium.png 25 Changed
Table layout table - headers.sortable - High Contrast.hover header.chromium.png 25 Changed
Table layout table - headers.sortable - High Contrast.press header.chromium.png 25 Changed
Table layout table.multiselect (checked) - brand - Dark Mode.chromium.png 3 Changed
Table layout table.multiselect (checked) - brand - High Contrast.chromium.png 201 Changed
Table layout table.multiselect (checked) - brand - RTL.chromium.png 3 Changed
Table layout table.multiselect (checked) - brand.chromium.png 3 Changed
Table layout table.multiselect (checked) - neutral - High Contrast.chromium.png 128 Changed
Table layout table.multiselect (checked) - neutral - RTL.chromium.png 7 Changed
Table layout table.multiselect (checked) - neutral.chromium.png 7 Changed
Table layout table.multiselect (mixed) - brand - Dark Mode.chromium.png 2 Changed
Table layout table.multiselect (mixed) - brand - High Contrast.chromium.png 113 Changed
Table layout table.multiselect (mixed) - brand - RTL.chromium.png 1 Changed
Table layout table.multiselect (mixed) - brand.chromium.png 1 Changed
Table layout table.multiselect (mixed) - neutral - High Contrast.chromium.png 77 Changed
Table layout table.multiselect (mixed) - neutral - RTL.chromium.png 4 Changed
Table layout table.multiselect (mixed) - neutral.chromium.png 4 Changed
Table layout table.multiselect - High Contrast.chromium.png 25 Changed
Table layout table.single select (checked) - High Contrast.chromium.png 25 Changed
Table layout table.single select (checked) - brand - High Contrast.chromium.png 69 Changed
Table layout table.single select (checked) - neutral - High Contrast.chromium.png 51 Changed
Table layout table.single select (checked) - neutral - RTL.chromium.png 2 Changed
Table layout table.single select (checked) - neutral.chromium.png 2 Changed
Table layout table.single select - High Contrast.chromium.png 25 Changed
Table layout table.size - medium - High Contrast.chromium.png 25 Changed
Avatar Converged.badgeMask - RTL.normal.chromium.png 0 Added
Avatar Converged.badgeMask.normal.chromium.png 0 Added

import { Steps, StoryWright } from 'storywright';
import { Avatar, AvatarProps } from '@fluentui/react-avatar';
import { tokens } from '@fluentui/react-theme';
import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons';

const imageRoot = 'http://fabricweb.azureedge.net/fabric-website/assets/images/avatar';
Expand Down Expand Up @@ -230,11 +231,28 @@ storiesOf('Avatar Converged', module)
.addStory('size+active+ring-shadow', () => (
<AvatarList images={examples.image} active="active" activeAppearance="ring-shadow" />
))*/
.addStory(
'badgeMask',
() => (
<div
style={{
backgroundSize: '32px 32px',
backgroundImage:
`repeating-conic-gradient(` +
`${tokens.colorPaletteYellowBackground3} 0% 25%, ` +
`${tokens.colorPaletteMarigoldBackground3} 0% 50%)`,
}}
>
<AvatarList images={examples.image} active="active" badge={{ status: 'available' }} />
</div>
),
{ includeRtl: true },
)
.addStory('customSize+image', () => <AvatarCustomSizeList images={examples.image} />)
.addStory('customSize+name+badge', () => (
<AvatarCustomSizeList names={examples.name} badge={{ status: 'available' }} />
))
.addStory('customSize+icon+active', () => <AvatarCustomSizeList active="active" />)
.addStory('customSize+icon+active', () => <AvatarCustomSizeList active="active" badge={{ status: 'available' }} />)
.addStory('color', () => <AvatarColors />, {
includeHighContrast: true,
includeDarkMode: true,
Expand Down
7 changes: 7 additions & 0 deletions change/@fluentui-react-avatar-0275892a-086c-48a0-bced-da21c133fd82.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "chore: Reduce bundle size by refactoring styles",
"packageName": "@fluentui/react-avatar",
"email": "[email protected]",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-avatar-e8c58b22-266b-4609-9169-1a26cdef500c.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: Make border around badge transparent, not a solid color",
"packageName": "@fluentui/react-avatar",
"email": "[email protected]",
"dependentChangeType": "patch"
}
Loading