Update design for clicking on badges

This commit is contained in:
Evan Hahn 2021-11-18 14:01:53 -06:00 committed by GitHub
parent 80320d8825
commit 1ba48512f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 28 deletions

View file

@ -2,6 +2,7 @@
// SPDX-License-Identifier: AGPL-3.0-only
import type {
CSSProperties,
FunctionComponent,
MouseEvent,
ReactChild,
@ -68,6 +69,7 @@ export type Props = {
searchResult?: boolean;
onClick?: (event: MouseEvent<HTMLButtonElement>) => unknown;
onClickBadge?: (event: MouseEvent<HTMLButtonElement>) => unknown;
// Matches Popper's RefHandler type
innerRef?: React.Ref<HTMLDivElement>;
@ -104,6 +106,7 @@ export const Avatar: FunctionComponent<Props> = ({
loading,
noteToSelf,
onClick,
onClickBadge,
sharedGroupNames,
size,
theme,
@ -254,19 +257,35 @@ export const Avatar: FunctionComponent<Props> = ({
badgeTheme
);
if (badgeImagePath) {
badgeNode = (
<img
alt={badge.name}
className="module-Avatar__badge"
src={badgeImagePath}
style={{
width: badgePlacement.size,
height: badgePlacement.size,
bottom: badgePlacement.bottom,
right: badgePlacement.right,
}}
/>
);
const positionStyles: CSSProperties = {
width: badgePlacement.size,
height: badgePlacement.size,
bottom: badgePlacement.bottom,
right: badgePlacement.right,
};
if (onClickBadge) {
badgeNode = (
<button
aria-label={badge.name}
className="module-Avatar__badge module-Avatar__badge--button"
onClick={onClickBadge}
style={{
backgroundImage: `url('${encodeURI(badgeImagePath)}')`,
...positionStyles,
}}
type="button"
/>
);
} else {
badgeNode = (
<img
alt={badge.name}
className="module-Avatar__badge module-Avatar__badge--static"
src={badgeImagePath}
style={positionStyles}
/>
);
}
}
} else if (badge && !theme) {
log.error('<Avatar> requires a theme if a badge is provided');