Skip to content

Commit

Permalink
[docs] tags on pages appear in nav (#2740)
Browse files Browse the repository at this point in the history
* pages can define `tag: message` in metadata to appear next to nav item

* mark some pages as new

* remove intent import
  • Loading branch information
giladgray authored Jul 31, 2018
1 parent 5f5d5bc commit 13b574a
Show file tree
Hide file tree
Showing 8 changed files with 53 additions and 16 deletions.
1 change: 1 addition & 0 deletions packages/core/src/components/html/html.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
reference: html
tag: new
---

@# HTML elements
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/components/overflow-list/overflow-list.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
tag: new
---

@# Overflow list

`OverflowList` takes a generic list of items and renders as many items as can
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/components/slider/sliders.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
tag: new
---

@# Slider

A slider is a numeric input for choosing numbers between lower and upper bounds.
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/docs/classes.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
tag: new
---

@# Classes

Blueprint packages provide React components in JS files and associated styles in a CSS file. Each package exports a `Classes` constants object in JavaScript that contains keys of the form `NAMED_CONSTANT` for every CSS class used. This separation allows us to change CSS classes between versions without breaking downstream users (although in practice this happens very rarely).
Expand Down
41 changes: 29 additions & 12 deletions packages/docs-app/src/components/blueprintDocs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Licensed under the terms of the LICENSE file distributed with this project.
*/

import { AnchorButton, Classes, setHotkeysDialogProps } from "@blueprintjs/core";
import { AnchorButton, Classes, setHotkeysDialogProps, Tag } from "@blueprintjs/core";
import { IDocsCompleteData } from "@blueprintjs/docs-data";
import { Documentation, IDocumentationProps, INavMenuItemProps, NavMenuItem } from "@blueprintjs/docs-theme";
import classNames from "classnames";
Expand Down Expand Up @@ -82,21 +82,26 @@ export class BlueprintDocs extends React.Component<IBlueprintDocsProps, { themeN

private renderNavMenuItem = (props: INavMenuItemProps) => {
const { route, title } = props.section;
if (isPageNode(props.section) && props.section.level === 1) {
return (
<div className={classNames("docs-nav-package", props.className)} data-route={route}>
<a className={Classes.MENU_ITEM} href={props.href} onClick={props.onClick}>
<NavIcon route={route} />
<span>{title}</span>
</a>
{this.maybeRenderPackageLink(`@blueprintjs/${route}`)}
</div>
);
}
if (isNavSection(props.section)) {
// non-interactive header that expands its menu
return <div className="docs-nav-section docs-nav-expanded">{title}</div>;
}
if (isPageNode(props.section)) {
if (props.section.level === 1) {
return (
<div className={classNames("docs-nav-package", props.className)} data-route={route}>
<a className={Classes.MENU_ITEM} href={props.href} onClick={props.onClick}>
<NavIcon route={route} />
<span>{title}</span>
</a>
{this.maybeRenderPackageLink(`@blueprintjs/${route}`)}
</div>
);
} else {
// pages can define `tag: message` in metadata to appear next to nav item.
return <NavMenuItem {...props}>{this.maybeRenderPageTag(props.section.reference)}</NavMenuItem>;
}
}
return <NavMenuItem {...props} />;
};

Expand All @@ -112,6 +117,18 @@ export class BlueprintDocs extends React.Component<IBlueprintDocsProps, { themeN
);
}

private maybeRenderPageTag(reference: string) {
const tag = this.props.docs.pages[reference].metadata.tag;
if (tag == null) {
return null;
}
return (
<Tag className="docs-nav-tag" minimal={true} intent={tag === "new" ? "success" : "none"}>
{tag}
</Tag>
);
}

private renderViewSourceLinkText(entry: ITsDocBase) {
return `@blueprintjs/${entry.fileName.split("/", 2)[1]}`;
}
Expand Down
5 changes: 5 additions & 0 deletions packages/docs-app/src/styles/_nav.scss
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,11 @@ $dark-package-colors: (
overflow: auto;
}

.docs-nav-tag {
padding-top: 0;
padding-bottom: 0;
}

.docs-nav-package-icon {
margin-right: $pt-grid-size;
border-radius: $pt-border-radius * 3;
Expand Down
4 changes: 4 additions & 0 deletions packages/docs-app/src/whats-new-3.0.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
---
tag: new
---

@# What's new in 3.0

Blueprint 3.0 supports multiple major versions of Blueprint on the same page through removing global styles and deconflicting selectors by changing the namespace. It also restores support for React 15 in most packages.
Expand Down
6 changes: 2 additions & 4 deletions packages/docs-theme/src/components/navMenuItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,6 @@ import { IHeadingNode, IPageNode } from "documentalist/dist/client";
import * as React from "react";

export interface INavMenuItemProps {
/** This element never receives `children`. */
children?: never;

/** CSS classes to apply to the root element, for proper appearance in the tree. */
className: string;

Expand All @@ -36,7 +33,8 @@ export const NavMenuItem: React.SFC<INavMenuItemProps> = props => {
const { className, isActive, isExpanded, section, ...htmlProps } = props;
return (
<a className={classNames(Classes.MENU_ITEM, className)} {...htmlProps}>
<span className={Classes.FILL}>{section.title}</span>
<span>{section.title}</span>
{props.children}
</a>
);
};
Expand Down

1 comment on commit 13b574a

@blueprint-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[docs] tags on pages appear in nav (#2740)

Preview: documentation | landing | table

Please sign in to comment.