@tanishqkancharla/maui 0.0.49 → 0.0.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7,7 +7,8 @@ import { text } from "../tokens/text";
|
|
|
7
7
|
import { memoize } from "../utils/memoize";
|
|
8
8
|
export function Avatar({ name, size = "sm", className }) {
|
|
9
9
|
const avatarClassName = useStyles(avatarClass(name, size));
|
|
10
|
-
|
|
10
|
+
const initialsClassName = useStyles(initialsClass);
|
|
11
|
+
return (_jsx("span", { className: joinClassNames(avatarClassName, className), "aria-hidden": "true", children: _jsx("span", { className: initialsClassName, children: initials(name) }) }));
|
|
11
12
|
}
|
|
12
13
|
const avatarPalette = [
|
|
13
14
|
{ background: colors.accent[4], color: colors.accent[11] },
|
|
@@ -82,6 +83,13 @@ const avatarClass = memoize((seed, size) => {
|
|
|
82
83
|
color: palette.color,
|
|
83
84
|
});
|
|
84
85
|
});
|
|
86
|
+
// The grid centers the line box, which includes the font's descent, so
|
|
87
|
+
// capitals rode high. Trimming to cap height centers the letters themselves.
|
|
88
|
+
// text-box applies to block containers, not to the grid itself.
|
|
89
|
+
const initialsClass = style({
|
|
90
|
+
display: "block",
|
|
91
|
+
textBox: "trim-both cap alphabetic",
|
|
92
|
+
});
|
|
85
93
|
function joinClassNames(...classNames) {
|
|
86
94
|
return classNames.filter(Boolean).join(" ");
|
|
87
95
|
}
|
package/package.json
CHANGED
|
@@ -13,13 +13,14 @@ type AvatarProps = {
|
|
|
13
13
|
|
|
14
14
|
export function Avatar({ name, size = "sm", className }: AvatarProps) {
|
|
15
15
|
const avatarClassName = useStyles(avatarClass(name, size))
|
|
16
|
+
const initialsClassName = useStyles(initialsClass)
|
|
16
17
|
|
|
17
18
|
return (
|
|
18
19
|
<span
|
|
19
20
|
className={joinClassNames(avatarClassName, className)}
|
|
20
21
|
aria-hidden="true"
|
|
21
22
|
>
|
|
22
|
-
{initials(name)}
|
|
23
|
+
<span className={initialsClassName}>{initials(name)}</span>
|
|
23
24
|
</span>
|
|
24
25
|
)
|
|
25
26
|
}
|
|
@@ -102,6 +103,14 @@ const avatarClass = memoize((seed: string, size: TextSize) => {
|
|
|
102
103
|
})
|
|
103
104
|
})
|
|
104
105
|
|
|
106
|
+
// The grid centers the line box, which includes the font's descent, so
|
|
107
|
+
// capitals rode high. Trimming to cap height centers the letters themselves.
|
|
108
|
+
// text-box applies to block containers, not to the grid itself.
|
|
109
|
+
const initialsClass = style({
|
|
110
|
+
display: "block",
|
|
111
|
+
textBox: "trim-both cap alphabetic",
|
|
112
|
+
})
|
|
113
|
+
|
|
105
114
|
function joinClassNames(...classNames: Array<string | undefined>) {
|
|
106
115
|
return classNames.filter(Boolean).join(" ")
|
|
107
116
|
}
|