feat: add data attributes to relevant components for better css targeting (#593)

* Update search-toggle.tsx

* feat: add further class names

* Create three-countries-appear.md

* Update search-toggle.tsx

* Update theme-toggle.tsx

* Update toc.tsx

* chore: add data attribute to large search toggle

* Update toc.tsx

* Update search-toggle.tsx

---------

Co-authored-by: Fuma Nama <[email protected]>

.changeset/three-countries-appear.md

@@ -0,0 +1,5 @@
+---
+"fumadocs-ui": patch
+---
+
+Add data attributes to certain components to improve CSS targeting

packages/ui/src/components/layout/search-toggle.tsx

@@ -20,6 +20,7 @@ export function SearchToggle(
           className: props.className,
         }),
       )}
+      data-search
       aria-label="Open Search"
       onClick={useCallback(() => {
         setOpenSearch(true);
@@ -39,6 +40,7 @@ export function LargeSearchToggle(
   return (
     <button
       type="button"
+      data-search-full
       {...props}
       className={cn(
         'inline-flex items-center gap-2 rounded-full border bg-secondary/50 p-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',

packages/ui/src/components/layout/theme-toggle.tsx

@@ -31,6 +31,7 @@ export function ThemeToggle({
         'inline-flex items-center rounded-full border p-0.5',
         className,
       )}
+      data-theme-toggle
       aria-label="Toggle Theme"
       onClick={onToggle}
       {...props}

packages/ui/src/components/layout/toc.tsx

@@ -38,7 +38,7 @@ export function Toc({ items, header, footer }: TOCProps): ReactElement {
   const { text } = useI18n();
 
   return (
-    <div className="sticky top-0 flex h-dvh w-[220px] shrink-0 flex-col gap-4 pe-2 pt-12 max-lg:hidden xl:w-[260px]">
+    <div data-toc className="sticky top-0 flex h-dvh w-[220px] shrink-0 flex-col gap-4 pe-2 pt-12 max-lg:hidden xl:w-[260px]">
       {header}
       <h3 className="-mb-1 -ms-0.5 inline-flex items-center gap-1.5 text-sm text-muted-foreground">
         <Text className="size-4" />
@@ -71,6 +71,7 @@ export function TocPopover({
         align="start"
         side="bottom"
         className="flex max-h-[80vh] w-[260px] flex-col gap-4 p-3"
+        data-toc-popover
       >
         {header}
         <TOCItems items={items} isMenu />