From 1361a4a114b1d1d78096b6abe0f653e7673da340 Mon Sep 17 00:00:00 2001
From: Germain <germain@souquet.com>
Date: Thu, 24 Aug 2023 14:55:03 +0100
Subject: [PATCH] Use CSS class over :has() for Firefox compatibility (#64)

---
 src/components/Avatar/Avatar.module.css                  | 2 +-
 src/components/Avatar/Avatar.tsx                         | 4 +++-
 src/components/Avatar/__snapshots__/Avatar.test.tsx.snap | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Avatar/Avatar.module.css b/src/components/Avatar/Avatar.module.css
index 11a41880..0c09f097 100644
--- a/src/components/Avatar/Avatar.module.css
+++ b/src/components/Avatar/Avatar.module.css
@@ -53,7 +53,7 @@ button.avatar:disabled {
   overflow: hidden;
 }
 
-.avatar:not(:has(.image)) {
+.avatar-imageless {
   /* In the future we'd prefer to pass the HEX code as the data attr
      and use `attr(data-color)` to avoid the style declaration from below
      but this is currently not supported in all browsers */
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index dc8f2fad..a8668269 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -105,7 +105,9 @@ export const Avatar = forwardRef<
       ...props,
       "data-type": type,
       "data-color": useIdColorHash(id),
-      className: classnames(styles.avatar, className),
+      className: classnames(styles.avatar, className, {
+        [styles["avatar-imageless"]]: !src,
+      }),
       style: {
         ...style,
         "--cpd-avatar-size": size,
diff --git a/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap b/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap
index b2c0a6b5..b5c4d3e9 100644
--- a/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap
+++ b/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Avatar > renders the image-less avatar 1`] = `
 <DocumentFragment>
   <span
     aria-label=""
-    class="_avatar_de1988"
+    class="_avatar_de1988 _avatar-imageless_de1988"
     data-color="8"
     data-type="round"
     role="img"