diff --git a/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css b/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css index 09d723796b7ae..f82326fb8d069 100644 --- a/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css +++ b/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css @@ -14,6 +14,20 @@ dark:bg-neutral-900/40; } +/* + * A top-level return (not nested inside a `.children` group) attaches to the + * items above it as a full-bleed footer: it bleeds past the container padding + * and is separated by a divider rather than floating on its own. + */ +.return:not(:first-child, .children .return) { + @apply -mx-4 + -mb-3 + rounded-t-none + border-t + border-neutral-200 + dark:border-neutral-900; +} + .children { @apply relative flex diff --git a/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx b/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx index 79e3f145b0d84..d8762d8d57c6e 100644 --- a/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx +++ b/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx @@ -14,10 +14,15 @@ const SignatureRoot: FC> = ({ const titleId = useId(); return ( -
-
- {title} -
+
+ {title && ( +
+ {title} +
+ )}
{children}
); diff --git a/packages/ui-components/src/Common/Signature/index.tsx b/packages/ui-components/src/Common/Signature/index.tsx index e24ef4fca18cc..fb22b332279bf 100644 --- a/packages/ui-components/src/Common/Signature/index.tsx +++ b/packages/ui-components/src/Common/Signature/index.tsx @@ -21,7 +21,9 @@ const Signature: FC> = ({ title, children, }) => { - if (title) { + // A Signature without its own name or type is the grouping container, with + // an optional title. Everything else renders as an individual item. + if (!name && !type) { return {children}; } diff --git a/packages/ui-components/src/Containers/FunctionSignature/index.tsx b/packages/ui-components/src/Containers/FunctionSignature/index.tsx index 0f661394643d8..ab84c0c0f5f2e 100644 --- a/packages/ui-components/src/Containers/FunctionSignature/index.tsx +++ b/packages/ui-components/src/Containers/FunctionSignature/index.tsx @@ -27,32 +27,10 @@ const renderSignature = (param: SignatureDefinition, index: number) => ( ); -const FunctionSignature: FC = ({ title, items }) => { - if (title) { - const attributes: Array = []; - const returnTypes: Array = []; - - for (const item of items) { - const target = item.kind === 'return' ? returnTypes : attributes; - - target.push(item); - } - - return ( - <> - - {attributes.map((param, i) => renderSignature(param, i))} - - - {returnTypes.length > 0 && - returnTypes.map((param, i) => - renderSignature(param, attributes.length + i) - )} - - ); - } - - return items.map((param, i) => renderSignature(param, i)); -}; +const FunctionSignature: FC = ({ title, items }) => ( + + {items.map((param, i) => renderSignature(param, i))} + +); export default FunctionSignature;