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);