aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
Diffstat (limited to 'packages')
-rw-r--r--packages/react-docs/src/components/doc_reference.tsx8
-rw-r--r--packages/react-docs/src/components/signature_block.tsx2
-rw-r--r--packages/react-shared/src/components/markdown_section.tsx20
-rw-r--r--packages/react-shared/src/components/nested_sidebar_menu.tsx46
-rw-r--r--packages/website/ts/pages/documentation/developers_page.tsx2
5 files changed, 58 insertions, 20 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)}
>
diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index 3dc3efe12..9f5855d16 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -20,6 +20,7 @@ export interface MarkdownSectionProps {
headerSize?: HeaderSizes;
githubLink?: string;
shouldReformatTitle?: boolean;
+ alternativeSectionTitle?: string;
}
interface DefaultMarkdownSectionProps {
@@ -47,22 +48,25 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults;
const id = utils.getIdFromName(sectionName);
- const finalSectionName = this.props.shouldReformatTitle
+ const formattedSectionName = this.props.shouldReformatTitle
? utils.convertCamelCaseToSpaces(sectionName)
: sectionName;
+ const title = !_.isUndefined(this.props.alternativeSectionTitle)
+ ? this.props.alternativeSectionTitle
+ : formattedSectionName;
return (
<div
className="md-px1 sm-px2 overflow-hidden"
onMouseOver={this._setAnchorVisibility.bind(this, true)}
onMouseOut={this._setAnchorVisibility.bind(this, false)}
>
- <ScrollElement name={id}>
- <Container className="clearfix" marginBottom="20px">
+ <ScrollElement name={id} style={{ paddingBottom: 20 }}>
+ <Container className="clearfix" paddingTop="30px" paddingBottom="20px">
<div className="col lg-col-8 md-col-8 sm-col-12">
<span style={{ color: colors.grey700 }}>
<AnchorTitle
headerSize={headerSize}
- title={_.capitalize(finalSectionName)}
+ title={_.capitalize(title)}
id={id}
shouldShowAnchor={this.state.shouldShowAnchor}
/>
@@ -87,13 +91,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
paragraph: MarkdownParagraphBlock,
}}
/>
- <Container
- width={'100%'}
- height={'1px'}
- backgroundColor={colors.grey300}
- marginTop={'32px'}
- marginBottom={'32px'}
- />
+ <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'32px'} />
</ScrollElement>
</div>
);
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 1ad61fcca..87622310a 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -14,9 +14,12 @@ export interface NestedSidebarMenuProps {
sidebarHeader?: React.ReactNode;
shouldDisplaySectionHeaders?: boolean;
shouldReformatMenuItemNames?: boolean;
+ parentName?: string;
}
-export interface NestedSidebarMenuState {}
+export interface NestedSidebarMenuState {
+ scrolledToId: string;
+}
const styles: Styles = {
menuItemWithHeaders: {
@@ -40,7 +43,28 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
public static defaultProps: Partial<NestedSidebarMenuProps> = {
shouldDisplaySectionHeaders: true,
shouldReformatMenuItemNames: true,
+ parentName: 'default',
};
+ private _urlIntervalCheckId: number;
+ constructor(props: NestedSidebarMenuProps) {
+ super(props);
+ this.state = {
+ scrolledToId: '',
+ };
+ }
+ public componentDidMount(): void {
+ this._urlIntervalCheckId = window.setInterval(() => {
+ const scrollId = location.hash.slice(1);
+ if (scrollId !== this.state.scrolledToId) {
+ this.setState({
+ scrolledToId: scrollId,
+ });
+ }
+ }, 200);
+ }
+ public componentWillUnmount(): void {
+ window.clearInterval(this._urlIntervalCheckId);
+ }
public render(): React.ReactNode {
const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
@@ -48,7 +72,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
// tslint:disable-next-line:no-unused-variable
return (
<div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}>
- <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1">
+ <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1">
{finalSectionName.toUpperCase()}
</div>
{this._renderMenuItems(links)}
@@ -61,23 +85,37 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
return (
<div>
{this.props.sidebarHeader}
- <div className="pl1">{navigation}</div>
+ <div>{navigation}</div>
</div>
);
}
private _renderMenuItems(links: ALink[]): React.ReactNode[] {
+ const scrolledToId = this.state.scrolledToId;
const menuItemStyles = this.props.shouldDisplaySectionHeaders
? styles.menuItemWithHeaders
: styles.menuItemWithoutHeaders;
const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
const menuItems = _.map(links, link => {
+ const isScrolledTo = link.to === scrolledToId;
const finalMenuItemName = this.props.shouldReformatMenuItemNames
? utils.convertDashesToSpaces(link.title)
: link.title;
return (
<div key={`menuItem-${finalMenuItemName}`}>
<Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}>
- <MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles}>
+ <MenuItem
+ style={{
+ ...menuItemStyles,
+ paddingLeft: 8,
+ borderRadius: 6,
+ backgroundColor: isScrolledTo ? colors.lightLinkBlue : 'inherit',
+ }}
+ innerDivStyle={{
+ ...menuItemInnerDivStyles,
+ color: isScrolledTo ? colors.white : 'inherit',
+ fontWeight: isScrolledTo ? 'bold' : 'inherit',
+ }}
+ >
<span
style={{
textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none',
diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx
index 042d80c61..e35218a70 100644
--- a/packages/website/ts/pages/documentation/developers_page.tsx
+++ b/packages/website/ts/pages/documentation/developers_page.tsx
@@ -138,7 +138,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop
className="absolute"
style={{
...scrollableContainerStyles,
- paddingTop: 30,
+ paddingTop: 0,
paddingLeft: mainContentPadding,
paddingRight: this.state.isHoveringMainContent
? mainContentPadding - SCROLLER_WIDTH