Bug fix(Avatar): Changed rounded border calculation for the "square" Avatar to better align with existing border styles (#5077)

jonrohan · web-flow · commit 6490b27bde15 · 2024-10-07T18:46:30.000Z
* Bug fix, make the "square" rounded border match existing borders better.

* Create large-plants-unite.md
diff --git a/.changeset/large-plants-unite.md b/.changeset/large-plants-unite.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix(Avatar): Changed rounded border calculation for the "square" Avatar to better align with existing border styles
diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css
@@ -13,7 +13,8 @@
   box-shadow: 0 0 0 1px var(--avatar-borderColor);
 
   &:where([data-square]) {
-    border-radius: var(--borderRadius-medium);
+    /* stylelint-disable-next-line primer/borders */
+    border-radius: clamp(4px, calc(var(--avatarSize-regular) - 24px), var(--borderRadius-medium));
   }
 
   &:where([data-responsive]) {

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@primer/react": patch
 +---
++
 +Bug fix(Avatar): Changed rounded border calculation for the "square" Avatar to better align with existing border styles
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,8 @@`
`13`	`13`	`box-shadow: 0 0 0 1px var(--avatar-borderColor);`
`14`	`14`
`15`	`15`	`&:where([data-square]) {`
`16`		`- border-radius: var(--borderRadius-medium);`
	`16`	`+ /* stylelint-disable-next-line primer/borders */`
	`17`	`+ border-radius: clamp(4px, calc(var(--avatarSize-regular) - 24px), var(--borderRadius-medium));`
`17`	`18`	`}`
`18`	`19`
`19`	`20`	`&:where([data-responsive]) {`