Keep firefox highlight fix className on the HighlightDecoration (v9) (#…

…2014)
the-guild-org · Jan 24, 2025 · 8f334d9 · 8f334d9
1 parent 8fc2c3b
commit 8f334d9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/neat-pears-give.md b/.changeset/neat-pears-give.md
@@ -0,0 +1,5 @@
+---
+"@theguild/components": patch
+---
+
+Keep firefox highlight fix className on the HighlightDecoration (v9)
diff --git a/packages/components/src/components/decorations/index.tsx b/packages/components/src/components/decorations/index.tsx
@@ -1,8 +1,8 @@
 import { cn } from '../../cn';
+import { ReactComponent as HighlightDecorationSvg } from './highlight-decoration.svg';
 
 export { ReactComponent as ArchDecoration } from './arch-decoration.svg';
 export { ReactComponent as ArchDecorationGradientDefs } from './arch-decoration-gradient-defs.svg';
-export { ReactComponent as HighlightDecoration } from './highlight-decoration.svg';
 export { ReactComponent as LargeHiveIconDecoration } from './large-hive-icon-decoration.svg';
 
 export type DecorationIsolationProps = React.HTMLAttributes<HTMLDivElement>;
@@ -18,3 +18,9 @@ export function DecorationIsolation(props: DecorationIsolationProps) {
     />
   );
 }
+
+// Components created from .svg import don't preserve className
+export const HighlightDecoration = (props: React.SVGProps<SVGSVGElement>) => (
+  // eslint-disable-next-line tailwindcss/no-custom-classname
+  <HighlightDecorationSvg {...props} className={cn(props.className, 'firefox-highlight-fix')} />
+);