fix(ui2): disclosure hover (#102206)

in UI2, only use the hover effects of the transparent button instead of
styling the surrounding container. No changes in UI2, only UI2:

| before | after |
|--------|--------|
| <img width="454" height="85" alt="Screenshot 2025-10-28 at 13 28 19"
src="https://github.com/user-attachments/assets/d34482bb-ad8e-4be6-abe0-ca41d6bd65c7"
/> | <img width="466" height="91" alt="Screenshot 2025-10-28 at 13 28
43"
src="https://github.com/user-attachments/assets/2cf558fc-9435-4a21-a05e-ac4dcbd8e261"
/> |
| <img width="463" height="86" alt="Screenshot 2025-10-28 at 13 28 36"
src="https://github.com/user-attachments/assets/4571a5cb-f197-487b-ad55-73da83afed93"
/> | <img width="460" height="81" alt="Screenshot 2025-10-28 at 13 28
12"
src="https://github.com/user-attachments/assets/a84c6794-a816-4761-aff3-873e567814a7"
/> |

Author: TkDodo

static/app/components/core/disclosure/disclosure.mdx

@@ -191,16 +191,13 @@ function LocalStorageDisclosure() {
 
 Disclosures can maintain their expanded state across page reloads by using URL state.
 
+import {parseAsBoolean, useQueryState} from 'nuqs';
+
 export function URLStateDisclosure() {
-    const [expanded, setExpanded] = useState(new URLSearchParams(window.location.search).get('my-disclosure-key') === 'true');
+    const [expanded, setExpanded] = useQueryState('my-disclosure-key', parseAsBoolean.withDefault(false));
 
     return (
-        <Disclosure defaultExpanded={expanded} onExpandedChange={(expanded) => {
-            const url = new URL(window.location.href);
-            url.searchParams.set('my-disclosure-key', expanded ? 'true' : 'false');
-            window.history.pushState({}, '', url.toString());
-            setExpanded(expanded);
-        }}>
+        <Disclosure defaultExpanded={expanded} onExpandedChange={setExpanded}>
             <Disclosure.Title>The expanded state is saved to URL state</Disclosure.Title>
             <Disclosure.Content>Reload the page to see the expanded state is remembered and new params are added to the URL</Disclosure.Content>
         </Disclosure>
@@ -215,21 +212,16 @@ export function URLStateDisclosure() {
 </Storybook.Demo>
 
 ```tsx
+import {parseAsBoolean, useQueryState} from 'nuqs';
+
 function URLStateDisclosure() {
-  const [expanded, setExpanded] = useState<boolean>(
-    new URLSearchParams(window.location.search).get('my-disclosure-key') === 'true'
+  const [expanded, setExpanded] = useQueryState(
+    'my-disclosure-key',
+    parseAsBoolean.withDefault(false)
   );
 
   return (
-    <Disclosure
-      defaultExpanded={expanded}
-      onExpandedChange={expanded => {
-        const url = new URL(window.location.href);
-        url.searchParams.set('my-disclosure-key', expanded ? 'true' : 'false');
-        window.history.pushState({}, '', url.toString());
-        setExpanded(expanded);
-      }}
-    >
+    <Disclosure defaultExpanded={expanded} onExpandedChange={setExpanded}>
       <Disclosure.Title>The expanded state is saved to URL state</Disclosure.Title>
       <Disclosure.Content>
         Reload the page to see the expanded state is remembered

static/app/components/core/disclosure/disclosure.tsx

@@ -111,20 +111,21 @@ function Title({children, trailingItems, ...rest}: DisclosureTitleProps) {
 }
 
 const HoverStyleFlex = styled(Flex)`
-  &:hover {
-    background-color: ${p => p.theme.backgroundSecondary};
-  }
+  ${p =>
+    p.theme.isChonk
+      ? ''
+      : css`
+          &:hover {
+            background-color: ${p.theme.backgroundSecondary};
+          }
+        `}
 `;
 
 const StretchedButton = styled(Button)`
   flex-grow: 1;
   justify-content: flex-start;
   padding-left: ${p => p.theme.space.xs};
 
-  &:hover {
-    background-color: transparent;
-  }
-
   ${p =>
     p.theme.isChonk
       ? ''