feat: highlighted sidebar as you scroll on doc reference pages

2 files changed, 6 insertions, 4 deletions

diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx
index da05b04f8..3a909db7e 100644
--- a/packages/react-docs/src/components/doc_reference.tsx
+++ b/packages/react-docs/src/components/doc_reference.tsx
@@ -97,15 +97,15 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
         if (!_.isUndefined(markdownFileIfExists)) {
             // Special-case replace the `introduction` sectionName with the package name
             const isIntroductionSection = sectionName === 'introduction';
-            const finalSectionName = isIntroductionSection ? this.props.docsInfo.displayName : sectionName;
             const headerSize = isIntroductionSection ? HeaderSizes.H1 : HeaderSizes.H3;
             return (
                 <MarkdownSection
                     key={`markdown-section-${sectionName}`}
-                    sectionName={finalSectionName}
+                    sectionName={sectionName}
                     headerSize={headerSize}
                     markdownContent={markdownFileIfExists}
                     shouldReformatTitle={false}
+                    alternativeSectionTitle={isIntroductionSection ? this.props.docsInfo.displayName : undefined}
                 />
             );
         }
@@ -196,7 +196,9 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
                 )}
                 {!_.isEmpty(docSection.functions) && (
                     <div>
-                        {!isExportedFunctionSection && <h2 style={headerStyle}>Functions</h2>}
+                        {!isExportedFunctionSection && (
+                            <div style={{ ...headerStyle, fontSize: '1.5em' }}>Functions</div>
+                        )}
                         <div>{functionDefs}</div>
                     </div>
                 )}
diff --git a/packages/react-docs/src/components/signature_block.tsx b/packages/react-docs/src/components/signature_block.tsx
index 5ec82983a..819311953 100644
--- a/packages/react-docs/src/components/signature_block.tsx
+++ b/packages/react-docs/src/components/signature_block.tsx
@@ -55,7 +55,7 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu
             <div
                 id={`${this.props.sectionName}-${method.name}`}
                 style={{ overflow: 'hidden', width: '100%' }}
-                className="pb4"
+                className="pb4 pt2"
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >