Skip to content

Commit ca8ebac

Browse files
inomdzhoninomdzhon
committed
feat(Avatar): tokenized
1 parent b538689 commit ca8ebac

File tree

21 files changed

+92
-348
lines changed

21 files changed

+92
-348
lines changed

‎src/components/Avatar/Avatar.css‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.Avatar {
22
flex-shrink: 0;
33
box-sizing: border-box;
4-
color: var(--placeholder_icon_background);
4+
color: var(--placeholder_icon_background, var(--vkui--color_background));
55
background: currentColor;
66
background-size: cover;
77
position: relative;
@@ -21,7 +21,8 @@
2121
}
2222

2323
.Avatar__children,
24-
.Avatar--shadow::after {
24+
.Avatar--shadow::after,
25+
.Avatar__badge--shadow::before {
2526
position: absolute;
2627
left: 0;
2728
top: 0;
@@ -32,7 +33,8 @@
3233

3334
.Avatar--shadow::after {
3435
content: "";
35-
box-shadow: inset 0 0 0 var(--thin-border) var(--image_border);
36+
box-shadow: inset 0 0 0 var(--thin-border)
37+
var(--image_border, var(--vkui--color_image_border_alpha));
3638
}
3739

3840
.Avatar__overlay {
@@ -52,11 +54,13 @@
5254
}
5355

5456
.Avatar__overlay--light {
55-
background-color: rgba(255, 255, 255, 0.85);
57+
color: var(--accent, var(--vkui--color_icon_accent));
58+
background-color: var(--vkui--color_avatar_overlay_inverse_alpha);
5659
}
5760

5861
.Avatar__overlay--dark {
59-
background-color: rgba(0, 0, 0, 0.6);
62+
color: var(--button_commerce_foreground, var(--vkui--color_icon_contrast));
63+
background-color: var(--vkui--color_avatar_overlay);
6064
}
6165

6266
.Avatar__overlay--visible {
@@ -65,14 +69,14 @@
6569

6670
.Avatar__overlay--focus-visible {
6771
opacity: 1;
68-
box-shadow: 0 0 0 2px var(--accent);
72+
box-shadow: 0 0 0 2px var(--accent, var(--vkui--color_stroke_accent));
6973
}
7074

7175
.Avatar__children {
7276
display: flex;
7377
align-items: center;
7478
justify-content: center;
75-
color: var(--icon_secondary);
79+
color: var(--icon_secondary, var(--vkui--color_icon_secondary));
7680
}
7781

7882
.Avatar__badge {
@@ -88,37 +92,40 @@
8892
right: 14%;
8993
}
9094

91-
.Avatar__badge--shadow {
92-
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.04))
93-
drop-shadow(0 4px 4px rgba(0, 0, 0, 0.08));
95+
.Avatar__badge--shadow::before {
96+
content: "";
97+
border-radius: 50%;
98+
box-shadow: var(--vkui--elevation1);
9499
}
95100

96101
.Avatar__badge-online {
97-
color: #4bb34b;
98-
background-color: var(--background_content);
102+
color: var(--button_commerce_background, var(--vkui--color_accent_green));
103+
background-color: var(
104+
--background_content,
105+
var(--vkui--color_background_content)
106+
);
99107
border-radius: 50%;
100108
}
101109

102110
.Avatar__badge-online-mobile {
103-
color: #4bb34b;
104-
background-color: var(--background_content);
111+
color: var(--button_commerce_background, var(--vkui--color_accent_green));
112+
background-color: var(
113+
--background_content,
114+
var(--vkui--color_background_content)
115+
);
105116
border-radius: 3px;
106117
padding: 2px;
107118
}
108119

109120
/**
110121
* .CellButton
111122
*/
112-
.CellButton > .Avatar {
113-
color: var(--button_muted_background);
114-
}
115-
116123
.CellButton > .Avatar .Icon {
117-
color: var(--accent);
124+
color: var(--accent, var(--vkui--color_icon_accent));
118125
}
119126

120127
.CellButton--danger > .Avatar .Icon {
121-
color: var(--destructive);
128+
color: var(--destructive, var(--vkui--color_icon_negative));
122129
}
123130

124131
/**

‎src/components/Avatar/Avatar.e2e.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
Icon20GiftCircleFillRed,
44
Icon28AddOutline,
55
} from "@vkontakte/icons";
6-
import Avatar, { AvatarProps } from "./Avatar";
6+
import { Avatar, AvatarProps } from "./Avatar";
77
import { describeScreenshotFuzz } from "../../testing/e2e/utils";
88

99
const base64Image =

‎src/components/Avatar/Avatar.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { baselineComponent, imgOnlyAttributes } from "../../testing/utils";
22
import { render, screen } from "@testing-library/react";
3-
import Avatar, { AvatarProps } from "./Avatar";
3+
import { Avatar, AvatarProps } from "./Avatar";
44
import { Icon20GiftCircleFillRed } from "@vkontakte/icons";
55

66
const AvatarTest = (props: AvatarProps) => (

‎src/components/Avatar/Avatar.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import * as React from "react";
22
import { Icon12Circle, Icon12OnlineMobile } from "@vkontakte/icons";
3-
import { getClassName } from "../../helpers/getClassName";
43
import { classNames } from "../../lib/classNames";
5-
import { usePlatform } from "../../hooks/usePlatform";
64
import { useAdaptivity } from "../../hooks/useAdaptivity";
75
import Tappable from "../Tappable/Tappable";
86
import { HasRef, HasRootRef } from "../../types";
@@ -33,7 +31,7 @@ export const AVATAR_DEFAULT_SHADOW = true;
3331
/**
3432
* @see https://vkcom.github.io/VKUI/#/Avatar
3533
*/
36-
const Avatar: React.FC<AvatarProps> = ({
34+
export const Avatar: React.FC<AvatarProps> = ({
3735
alt,
3836
crossOrigin,
3937
decoding,
@@ -61,7 +59,6 @@ const Avatar: React.FC<AvatarProps> = ({
6159
onClick,
6260
...restProps
6361
}: AvatarProps) => {
64-
const platform = usePlatform();
6562
const { hasMouse } = useAdaptivity();
6663
const [failedImage, setFailedImage] = React.useState(false);
6764

@@ -101,7 +98,7 @@ const Avatar: React.FC<AvatarProps> = ({
10198
{...restProps}
10299
// eslint-disable-next-line vkui/no-object-expression-in-arguments
103100
vkuiClass={classNames(
104-
getClassName("Avatar", platform),
101+
"Avatar",
105102
`Avatar--type-${mode}`,
106103
`Avatar--sz-${size}`,
107104
{
@@ -184,6 +181,3 @@ const Avatar: React.FC<AvatarProps> = ({
184181
</div>
185182
);
186183
};
187-
188-
// eslint-disable-next-line import/no-default-export
189-
export default Avatar;

0 commit comments

Comments
 (0)