diff --git a/.changeset/popular-pumas-sin.md b/.changeset/popular-pumas-sin.md new file mode 100644 index 00000000000..b49d867553e --- /dev/null +++ b/.changeset/popular-pumas-sin.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Ensure Avatar has no background color if an source prop is passed in to allow for transparent images diff --git a/polaris-react/src/components/Avatar/Avatar.scss b/polaris-react/src/components/Avatar/Avatar.scss index 3e9699fd857..879774563ff 100644 --- a/polaris-react/src/components/Avatar/Avatar.scss +++ b/polaris-react/src/components/Avatar/Avatar.scss @@ -28,6 +28,10 @@ // stylelint-enable background: var(--p-color-avatar-background-experimental); color: var(--p-color-avatar-color-experimental); + + &.imageHasLoaded { + background: transparent; + } } @media (forced-colors: active) {