refactor: move avatar size styles to css

Author: pawelgrimm

src/avatar/avatar.mdx

@@ -159,9 +159,9 @@ component appearance. The values shown below are the default values.
 
 ### Component-owned variables
 
-Avatar sets these variables at render time from the `size`, `shape`, and
-`name` props. They are listed for completeness, but consumers should prefer
-the component props instead of overriding them directly.
+Avatar's size classes set these variables from the `size` prop. They are
+listed for completeness, but consumers should prefer the component props
+instead of overriding them directly.
 
 ```css
 .avatar {

src/avatar/avatar.module.css

@@ -58,6 +58,71 @@
     outline-offset: -2px;
 }
 
+.size-80 {
+    --reactist-avatar-size: 80px;
+    --reactist-avatar-rounded-radius: 10px;
+}
+
+.size-72 {
+    --reactist-avatar-size: 72px;
+    --reactist-avatar-rounded-radius: 10px;
+}
+
+.size-62 {
+    --reactist-avatar-size: 62px;
+    --reactist-avatar-rounded-radius: 8.5px;
+}
+
+.size-50 {
+    --reactist-avatar-size: 50px;
+    --reactist-avatar-rounded-radius: 7px;
+}
+
+.size-40 {
+    --reactist-avatar-size: 40px;
+    --reactist-avatar-rounded-radius: 5.5px;
+}
+
+.size-36 {
+    --reactist-avatar-size: 36px;
+    --reactist-avatar-rounded-radius: 5px;
+}
+
+.size-30 {
+    --reactist-avatar-size: 30px;
+    --reactist-avatar-rounded-radius: 5px;
+}
+
+.size-28 {
+    --reactist-avatar-size: 28px;
+    --reactist-avatar-rounded-radius: 5px;
+}
+
+.size-24 {
+    --reactist-avatar-size: 24px;
+    --reactist-avatar-rounded-radius: 3.2px;
+}
+
+.size-20 {
+    --reactist-avatar-size: 20px;
+    --reactist-avatar-rounded-radius: 3px;
+}
+
+.size-18 {
+    --reactist-avatar-size: 18px;
+    --reactist-avatar-rounded-radius: 3px;
+}
+
+.size-16 {
+    --reactist-avatar-size: 16px;
+    --reactist-avatar-rounded-radius: 2px;
+}
+
+.size-12 {
+    --reactist-avatar-size: 12px;
+    --reactist-avatar-rounded-radius: 1.6px;
+}
+
 .avatar:has(.initials) {
     background-color: var(--reactist-avatar-meta-fill);
 }

src/avatar/avatar.test.tsx

@@ -19,9 +19,7 @@ describe('Avatar', () => {
         render(<Avatar data-testid="avatar" size={36} name="Jane Doe" image="avatar.png" />)
 
         expect(screen.getByRole('img', { name: 'Jane Doe' })).toHaveAttribute('src', 'avatar.png')
-        expect(screen.getByTestId('avatar')).toHaveStyle({
-            '--reactist-avatar-size': '36px',
-        })
+        expect(screen.getByTestId('avatar')).toHaveClass('size-36')
     })
 
     it('does not apply meta color classes while rendering an image', () => {
@@ -223,13 +221,11 @@ describe('Avatar', () => {
         expect(invalidRefElement).toBeTruthy()
     })
 
-    it('supports rounded shape with size-aware radius', () => {
+    it('supports rounded shape with size-driven CSS classes', () => {
         render(<Avatar data-testid="avatar" size={50} shape="rounded" name="Design" />)
 
         expect(screen.getByTestId('avatar')).toHaveClass('shape-rounded')
-        expect(screen.getByTestId('avatar')).toHaveStyle({
-            '--reactist-avatar-rounded-radius': '7px',
-        })
+        expect(screen.getByTestId('avatar')).toHaveClass('size-50')
     })
 
     it('defaults to circle shape', () => {

src/avatar/avatar.tsx

@@ -12,7 +12,6 @@ import {
     getInitials,
     getSources,
     normalizeAvatarName,
-    ROUNDED_AVATAR_RADIUS_BY_SIZE,
 } from './utils'
 
 import styles from './avatar.module.css'
@@ -21,11 +20,6 @@ import type { ObfuscatedClassName } from '../utils/common-types'
 import type { PolymorphicComponentProps } from '../utils/polymorphism'
 import type { AvatarImage, AvatarShape, AvatarSize, ImageSources } from './utils'
 
-type AvatarStyle = React.CSSProperties & {
-    '--reactist-avatar-size': string
-    '--reactist-avatar-rounded-radius': string
-}
-
 /**
  * Props for the `Avatar` component.
  */
@@ -118,12 +112,12 @@ const AvatarContent = polymorphicComponent<'div', AvatarOwnProps, 'omitClassName
                 ref={ref}
                 className={classNames(
                     styles.avatar,
+                    styles[`size-${size}`],
                     styles[`shape-${shape}`],
                     metaColorIndex !== undefined && styles[`meta-color-${metaColorIndex}`],
                     !availableImageSources && !hasInitials && styles.empty,
                     exceptionallySetClassName,
                 )}
-                style={getAvatarStyle(size)}
                 data-testid={testId}
                 aria-hidden={isDecorative || undefined}
                 display="inlineFlex"
@@ -190,13 +184,6 @@ const Avatar = polymorphicComponent<'div', AvatarOwnProps, 'omitClassName'>(func
     )
 })
 
-function getAvatarStyle(size: AvatarSize): AvatarStyle {
-    return {
-        '--reactist-avatar-size': `${size}px`,
-        '--reactist-avatar-rounded-radius': ROUNDED_AVATAR_RADIUS_BY_SIZE[size],
-    }
-}
-
 function getAbsoluteImageSource(src: string, image: HTMLImageElement) {
     try {
         return new URL(src, image.ownerDocument.baseURI).href

src/avatar/utils.test.ts

@@ -6,7 +6,6 @@ import {
     getInitials,
     getSources,
     normalizeAvatarName,
-    ROUNDED_AVATAR_RADIUS_BY_SIZE,
 } from './utils'
 
 describe('Avatar utils', () => {
@@ -216,24 +215,4 @@ describe('Avatar utils', () => {
             expect(index).toBeLessThan(AVATAR_META_COLOR_COUNT)
         })
     })
-
-    describe('ROUNDED_AVATAR_RADIUS_BY_SIZE', () => {
-        it('contains the exclusive rounded radius mapping', () => {
-            expect(ROUNDED_AVATAR_RADIUS_BY_SIZE).toEqual({
-                80: '10px',
-                72: '10px',
-                62: '8.5px',
-                50: '7px',
-                40: '5.5px',
-                36: '5px',
-                30: '5px',
-                28: '5px',
-                24: '3.2px',
-                20: '3px',
-                18: '3px',
-                16: '2px',
-                12: '1.6px',
-            })
-        })
-    })
 })

src/avatar/utils.ts

@@ -32,22 +32,6 @@ type ImageSources = {
 
 const AVATAR_META_COLOR_COUNT = 20
 
-const ROUNDED_AVATAR_RADIUS_BY_SIZE: Record<AvatarSize, string> = {
-    80: '10px',
-    72: '10px',
-    62: '8.5px',
-    50: '7px',
-    40: '5.5px',
-    36: '5px',
-    30: '5px',
-    28: '5px',
-    24: '3.2px',
-    20: '3px',
-    18: '3px',
-    16: '2px',
-    12: '1.6px',
-}
-
 const WHITESPACE_REGEXP = new RegExp('\\p{White_Space}+', 'gu')
 const GRAPHEME_SEGMENTER =
     typeof Intl !== 'undefined' && 'Segmenter' in Intl
@@ -179,6 +163,5 @@ export {
     getInitials,
     getSources,
     normalizeAvatarName,
-    ROUNDED_AVATAR_RADIUS_BY_SIZE,
 }
 export type { AvatarImage, AvatarImageSource, AvatarShape, AvatarSize, ImageSources }