Skip to content

fix: Make border around Avatar's badge transparent using a mask #27527

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

Merged
behowell merged 18 commits into from
Apr 24, 2023
Merged

fix: Make border around Avatar's badge transparent using a mask #27527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 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
ca62e19
Merge branch 'master' of https://github.com/microsoft/fluentui into a…
behowell Apr 17, 2023
d4682ad
Tone down badgeMask story colors
behowell Apr 17, 2023
3729f60
Minor refactoring to attempt to reduce bundle size
behowell Apr 17, 2023
c5e76b8
Revert "Minor refactoring to attempt to reduce bundle size"
behowell Apr 18, 2023
85646f9
Clean up badgeCutout, move badge size styles to useStyles
behowell Apr 18, 2023
222acaf
Merge branch 'master' of https://github.com/microsoft/fluentui into a…
behowell Apr 18, 2023
ebfa958
Delete @fluentui-react-avatar-0275892a-086c-48a0-bced-da21c133fd82.json
behowell Apr 18, 2023
557bb48
Merge branch 'master' into avatar/badge-mask
behowell Apr 18, 2023
b78d12d
Merge branch 'master' of https://github.com/behowell/fluentui into av…
behowell Apr 18, 2023
087f1ad
Merge branch 'avatar/badge-mask' of https://github.com/behowell/fluen…
behowell Apr 18, 2023
dc20e9a
Add background color to the image slot, so the background color is di…
behowell Apr 18, 2023
c8cd1aa
Merge branch 'master' of https://github.com/microsoft/fluentui into a…
behowell Apr 24, 2023
d501da0
Refactor badgeMask helper function
behowell Apr 24, 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';
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.colorBrandBackground} 0% 25%, ` +
`${tokens.colorBrandBackgroundSelected} 0% 50%)`,
}}
>
<AvatarList images={examples.image} color="marigold" 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-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