Switch to DisclosureGroup

Author: nolannbiron

packages/gitbook/src/components/DocumentView/OpenAPI/style.css

@@ -334,7 +334,7 @@
 }
 
 .openapi-securities-scopes ul {
-    @apply !my-0 !list-none !pl-0;
+    @apply !my-0 ml-4 pl-0;
 }
 
 .openapi-securities-url {
@@ -1016,11 +1016,7 @@ body:has(.openapi-select-popover) {
 }
 
 .openapi-required-scopes {
-    @apply ring-1 ring-tint-subtle text-base font-medium mx-0;
-}
-
-.openapi-required-scopes .openapi-disclosure-trigger-label {
-    @apply top-1/2 -translate-y-1/2;
+    @apply border text-base rounded-md straight-corners:rounded-none circular-corners:rounded-md font-medium mx-0;
 }
 
 .openapi-required-scopes .openapi-required-scopes-header {
@@ -1029,4 +1025,15 @@ body:has(.openapi-select-popover) {
 
 .openapi-required-scopes .openapi-required-scopes-header svg {
     @apply size-3.5 text-tint-subtle rotate-none;
+}
+
+.openapi-required-scopes .openapi-disclosure-group-panel {
+    @apply px-3 pb-3;
+}
+.openapi-required-scopes .openapi-securities-scopes {
+    @apply ml-6;
+}
+
+.openapi-required-scopes .openapi-required-scopes-description {
+    @apply text-xs text-tint-subtle font-normal mb-2;
 }

packages/react-openapi/src/OpenAPIDisclosureGroup.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'classnames';
 import { createContext, useContext, useRef } from 'react';
 import { mergeProps, useButton, useDisclosure, useFocusRing, useId } from 'react-aria';
 import {
@@ -17,6 +18,7 @@ interface Props {
     selectStateKey?: string;
     /** Icon to display for the select */
     selectIcon?: React.ReactNode;
+    className?: string;
 }
 
 type TDisclosureGroup = {
@@ -35,14 +37,15 @@ const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(n
  * Display an interactive OpenAPI disclosure group.
  */
 export function OpenAPIDisclosureGroup(props: DisclosureGroupProps & Props) {
-    const { icon, groups, selectStateKey, selectIcon } = props;
+    const { icon, groups, selectStateKey, selectIcon, className } = props;
 
     const state = useDisclosureGroupState(props);
 
     return (
         <DisclosureGroupStateContext.Provider value={state}>
             {groups.map((group) => (
                 <DisclosureItem
+                    className={className}
                     selectStateKey={selectStateKey}
                     selectIcon={selectIcon}
                     icon={icon}
@@ -59,8 +62,9 @@ function DisclosureItem(props: {
     icon?: React.ReactNode;
     selectStateKey?: string;
     selectIcon?: React.ReactNode;
+    className?: string;
 }) {
-    const { icon, group, selectStateKey, selectIcon } = props;
+    const { icon, group, selectStateKey, selectIcon, className } = props;
 
     const defaultId = useId();
     const id = group.key || defaultId;
@@ -95,7 +99,10 @@ function DisclosureItem(props: {
     const selectedTab = group.tabs?.find((tab) => tab.key === store.key) || group.tabs?.[0];
 
     return (
-        <div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
+        <div
+            className={clsx('openapi-disclosure-group', className)}
+            aria-expanded={state.isExpanded}
+        >
             <div
                 slot="trigger"
                 ref={triggerRef}

packages/react-openapi/src/OpenAPIRequiredScopes.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { OpenAPICopyButton } from './OpenAPICopyButton';
-import { OpenAPIDisclosure } from './OpenAPIDisclosure';
+import { OpenAPIDisclosureGroup } from './OpenAPIDisclosureGroup';
 import { useSelectState } from './OpenAPISelect';
 import type { OpenAPIClientContext } from './context';
 import { t } from './translate';
@@ -39,20 +39,28 @@ export function OpenAPIRequiredScopes(props: {
     }
 
     return (
-        <OpenAPIDisclosure
-            defaultExpanded
+        <OpenAPIDisclosureGroup
             className="openapi-required-scopes"
-            header={
-                <div className="openapi-required-scopes-header">
-                    {context.icons.lock}
-                    <span>{t(context.translation, 'required_scopes')}</span>
-                </div>
-            }
-            icon={context.icons.plus}
-            label=""
-        >
-            <OpenAPISchemaScopes scopes={scopes} context={context} />
-        </OpenAPIDisclosure>
+            icon={context.icons.chevronRight}
+            groups={[
+                {
+                    key: 'required-scopes',
+                    label: (
+                        <div className="openapi-required-scopes-header">
+                            {context.icons.lock}
+                            <span>{t(context.translation, 'required_scopes')}</span>
+                        </div>
+                    ),
+                    tabs: [
+                        {
+                            key: 'scopes',
+                            label: '',
+                            body: <OpenAPISchemaScopes scopes={scopes} context={context} />,
+                        },
+                    ],
+                },
+            ]}
+        />
     );
 }
 
@@ -64,6 +72,9 @@ function OpenAPISchemaScopes(props: {
 
     return (
         <div className="openapi-securities-scopes openapi-markdown">
+            <div className="openapi-required-scopes-description">
+                This endpoint requires the following scopes:
+            </div>
             <ul>
                 {scopes.map((scope) => (
                     <OpenAPIScopeItem key={scope[0]} scope={scope} context={context} />