diff --git a/.changeset/eight-windows-glow.md b/.changeset/eight-windows-glow.md
new file mode 100644
index 00000000000..1b62010e7ab
--- /dev/null
+++ b/.changeset/eight-windows-glow.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `initials` overflowing when `Avatar` is round
diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss
index 2d1473f0682..4aa1a8f3b54 100644
--- a/polaris-react/src/components/Avatar/Avatar.scss
+++ b/polaris-react/src/components/Avatar/Avatar.scss
@@ -28,11 +28,11 @@
}
.Text {
- font-size: var(--p-font-size-300);
+ font-size: var(--p-font-size-200);
font-weight: var(--p-font-weight-regular);
&.long {
- font-size: var(--p-font-size-100);
+ font-size: var(--p-font-size-75);
}
}
diff --git a/polaris-react/src/components/Avatar/Avatar.stories.tsx b/polaris-react/src/components/Avatar/Avatar.stories.tsx
index cbc0d7dc052..e21f10bd532 100644
--- a/polaris-react/src/components/Avatar/Avatar.stories.tsx
+++ b/polaris-react/src/components/Avatar/Avatar.stories.tsx
@@ -16,6 +16,10 @@ export function Default() {
return ;
}
+export function LongInitials() {
+ return ;
+}
+
export function ExtraSmall() {
const [active, setActive] = useState(true);
const toggleActive = useCallback(() => setActive((active) => !active), []);
@@ -67,32 +71,32 @@ export function SquareWithInitials() {
@@ -123,16 +127,16 @@ export function SizesWithInitials() {
return (
-
+
-
+
-
+
-
+
);
diff --git a/polaris.shopify.com/content/components/images-and-icons/avatar.md b/polaris.shopify.com/content/components/images-and-icons/avatar.md
index 193a933f675..75629b75f8b 100644
--- a/polaris.shopify.com/content/components/images-and-icons/avatar.md
+++ b/polaris.shopify.com/content/components/images-and-icons/avatar.md
@@ -22,6 +22,9 @@ examples:
- fileName: avatar-default.tsx
title: Default
description: Use to present an avatar for a merchant, customer, or business.
+ - fileName: avatar-initials.tsx
+ title: Initials
+ description: Use to present an avatar with initials for a merchant, customer, or business.
- fileName: avatar-extra-small.tsx
title: Extra small
description: Use to present an avatar in a condensed layout, such as a data table cell or an action list item.
diff --git a/polaris.shopify.com/pages/examples/avatar-initials.tsx b/polaris.shopify.com/pages/examples/avatar-initials.tsx
new file mode 100644
index 00000000000..2c9a5304ddf
--- /dev/null
+++ b/polaris.shopify.com/pages/examples/avatar-initials.tsx
@@ -0,0 +1,9 @@
+import {Avatar} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function AvatarExample() {
+ return ;
+}
+
+export default withPolarisExample(AvatarExample);