Use CSS class over :has() for Firefox compatibility (#64)

element-hq · Aug 24, 2023 · 1361a4a · 1361a4a
1 parent b6004b0
commit 1361a4a
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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"