Skip to content

feat(labels): add deprecated/demo/beta labels to headers + nav items #3547

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
evwilkin merged 6 commits into from
May 25, 2023
Merged

feat(labels): add deprecated/demo/beta labels to headers + nav items #3547

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
56f7aa7
feat(labels): add deprecated/demo/beta labels to headers + nav items
nicolethoen Apr 10, 2023
b84efbd
add banner to react-deprecated tab every time
nicolethoen May 23, 2023
a142e8f
reorder tabs
nicolethoen May 23, 2023
36a67d6
cssPrefix arrays make multiple CSS Var tables
nicolethoen May 23, 2023
4e86fb5
update spacers on navItems
nicolethoen May 23, 2023
b677a4a
update per review comments
nicolethoen May 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 18 additions & 13 deletions packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Title } from '@patternfly/react-core';
import { Title, Flex, FlexItem } from '@patternfly/react-core';
import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
import { Link } from '../link/link';
import { slugger } from '../../helpers/slugger';
Expand All @@ -25,17 +25,22 @@ export const AutoLinkHeader = ({
const slug = id || slugger(children);

return (
<Title
id={slug}
size={sizes[size]}
headingLevel={headingLevel || size}
className={`ws-heading ${className}`}
tabIndex={-1}
>
<Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
<LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
</Link>
{children} {metaText}
</Title>
<Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: 'spaceItemsNone' }}>
<FlexItem>
<Title
id={slug}
size={sizes[size]}
headingLevel={headingLevel || size}
className={`ws-heading ${className}`}
tabIndex={-1}
>
<Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
<LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
</Link>
{children}
</Title>
</FlexItem>
<FlexItem> {metaText}</FlexItem>
</Flex>
)
};
11 changes: 5 additions & 6 deletions packages/documentation-framework/components/cssVariables/cssVariables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
Tbody,
Td
} from "@patternfly/react-table";
import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex";
import global_spacer_md from "@patternfly/react-tokens/dist/esm/global_spacer_md";
import LevelUpAltIcon from "@patternfly/react-icons/dist/esm/icons/level-up-alt-icon";
Expand Down Expand Up @@ -59,12 +60,9 @@ const flattenList = files => {
export class CSSVariables extends React.Component {
constructor(props) {
super(props);
// Ensure array in case of multiple prefixes
this.prefix =
typeof props.prefix === "string" ? [props.prefix] : props.prefix;
const prefixTokens = this.prefix.map(prefix => prefix.replace("pf-", "").replace(/-+/g, "_"));
const prefixToken = props.prefix.replace("pf-v5-", "").replace(/-+/g, "_");
const applicableFiles = Object.entries(tokensModule)
.filter(([key, val]) => prefixTokens.includes(key))
.filter(([key, val]) => prefixToken === key)
.sort(([key1], [key2]) => key1.localeCompare(key2))
.map(([key, val]) => {
if (props.selector) {
Expand Down Expand Up @@ -170,10 +168,11 @@ export class CSSVariables extends React.Component {
render() {
return (
<React.Fragment>
{this.props.autoLinkHeader && <AutoLinkHeader size="h3" className="pf-v5-u-mt-lg pf-v5-u-mb-md">{`Prefixed with '${this.props.prefix}'`}</AutoLinkHeader>}
<CSSSearch getDebouncedFilteredRows={this.getDebouncedFilteredRows} />
<Table
variant="compact"
aria-label={`CSS Variables for prefixes ${this.prefix.join(" ")}`}
aria-label={`CSS Variables prefixed with ${this.props.prefix}`}
>
<Thead>
<Tr>
Expand Down
34 changes: 31 additions & 3 deletions packages/documentation-framework/components/example/example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { useLocation } from '@reach/router';
import { Badge, CodeBlock, CodeBlockCode, debounce, Switch } from '@patternfly/react-core';
import { Button, CodeBlock, CodeBlockCode, debounce, Label, Switch, Tooltip } from '@patternfly/react-core';
import * as reactCoreModule from '@patternfly/react-core';
import * as reactCoreNextModule from '@patternfly/react-core/next';
import * as reactCoreDeprecatedModule from '@patternfly/react-core/deprecated';
Expand Down Expand Up @@ -71,7 +71,11 @@ export const Example = ({
// The image src thumbnail for the example
thumbnail = missingThumbnail,
// Whether the example shows demo capability
isDemo,
// Whether the example is open to further evolution
isBeta,
// Whether the example is deprecated
isDeprecated,
// Slugified source + title
id,
// Section in frontmatter of MD file (components, demos, etc)
Expand Down Expand Up @@ -173,12 +177,36 @@ export const Example = ({
+ (loc.pathname.endsWith(source) ? '' : `/${source}`)
+ '/'
+ slugger(title);

return (
<div className="ws-example">
<div className="ws-example-header">
<AutoLinkHeader
metaText={isBeta && <Badge className="ws-beta-badge pf-v5-u-ml-xs">Beta</Badge>}
metaText={
<React.Fragment>
{isBeta && (
<Tooltip content="This beta component is currently under review and is still open for further evolution.">
<Button variant="plain">
<Label isCompact color="blue">Beta</Label>
</Button>
</Tooltip>
)}
{isDemo && (
<Tooltip content="Demos show how multiple components can be used in a single design.">
<Button variant="plain">
<Label isCompact color="purple">Demo</Label>
</Button>
</Tooltip>
)}
{isDeprecated && (
<Tooltip content="Deprecated components are available for use but are no longer being maintained or enhanced.">
Copy link
Member

@evwilkin evwilkin May 24, 2023

Choose a reason for hiding this comment

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

Maybe a Surge issue not updating from a previous commit, but I'm seeing slightly different tooltip messages for these three items (Beta, Demo, Deprecated)

Screenshot 2023-05-24 at 4 55 25 PM

Copy link
Collaborator Author

@nicolethoen nicolethoen May 24, 2023

Choose a reason for hiding this comment

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

good catch! i'll fix that

Copy link
Member

@evwilkin evwilkin May 24, 2023

Choose a reason for hiding this comment

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

Sorry - the text in my screenshot above actually maps to the tooltip in mdx.js, but curious if this text should match or maybe live in a single variable somewhere that can be referenced?

Copy link
Collaborator Author

@nicolethoen nicolethoen May 25, 2023

Choose a reason for hiding this comment

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

I made them match. We don't right now have like a constants or strings file. Maybe that's something else we can clean up to add when we clean up the docs-framework in the future.

<Button variant="plain">
<Label isCompact color="grey">Deprecated</Label>
</Button>
</Tooltip>
)}
</React.Fragment>
}
size="h4"
headingLevel="h3"
className="ws-example-heading"
Expand Down
33 changes: 24 additions & 9 deletions packages/documentation-framework/components/sideNav/sideNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { Link } from '../link/link';
import { Nav, NavList, NavExpandable, PageContextConsumer, capitalize } from '@patternfly/react-core';
import { Label, Nav, NavList, NavExpandable, PageContextConsumer, capitalize, Flex, FlexItem } from '@patternfly/react-core';
import { css } from '@patternfly/react-styles';
import { Location } from '@reach/router';
import { makeSlug } from '../../helpers';
Expand All @@ -14,7 +14,7 @@ const getIsActive = (location, section, subsection = null) => {

const defaultValue = 50;

const NavItem = ({ text, href }) => {
const NavItem = ({ text, href, isDeprecated, isBeta, isDemo }) => {
const isMobileView = window.innerWidth < Number.parseInt(globalBreakpointXl.value, 10);
return (
<PageContextConsumer key={href + text}>
Expand All @@ -33,7 +33,18 @@ const NavItem = ({ text, href }) => {
}
tabIndex={isNavOpen ? undefined : -1}
>
{text}
<Flex spaceItems={{ default: 'spaceItemsSm'}}>
<FlexItem>{text}</FlexItem>
{(isBeta || isDemo || isDeprecated) && (
<FlexItem>
{isBeta && (<Label color="blue" isCompact>Beta</Label>)}
{!isBeta && isDemo && (<Label color="purple" isCompact>Demo</Label>)}
{!isBeta && !isDemo && isDeprecated && (<Label color="grey" isCompact>Deprecated</Label>)}
</FlexItem>
)}
</Flex>


</Link>
</li>
)}
Expand Down Expand Up @@ -70,18 +81,22 @@ const ExpandableNav = ({groupedRoutes, location, section, subsection = null}) =>
>
{Object.entries(routes || {})
.filter(([id, navObj]) => !Boolean(navObj.hideNavItem) && (Object.entries(navObj).length > 0))
.map(([id, { slug, isSubsection = false, sortValue = defaultValue, subsectionSortValue = defaultValue }]) => ({ text: id, href: slug, isSubsection, sortValue: (isSubsection ? subsectionSortValue : sortValue) }))
.map(([id, { slug, isSubsection = false, sortValue = defaultValue, subsectionSortValue = defaultValue, sources }]) => ({ text: id, href: slug, isSubsection, sortValue: (isSubsection ? subsectionSortValue : sortValue), sources }))
.sort(({text: text1, sortValue: sortValue1}, {text: text2, sortValue: sortValue2}) => {
if (sortValue1 === sortValue2) {
return text1.localeCompare(text2);
}
return sortValue1 > sortValue2 ? 1 : -1;
})
.map(navObj => navObj.isSubsection
? ExpandableNav({groupedRoutes, location, section, subsection: navObj.text})
: NavItem(navObj)
)
}
? ExpandableNav({groupedRoutes, location, section, subsection: navObj.text})
: NavItem({
...navObj,
isDeprecated: navObj.href?.includes('components') && navObj.sources.some(source => source.source === "react-deprecated") && !navObj.sources.some(source => source.source === "react"),
isBeta: navObj.sources.some(source => source.beta),
isDemo: navObj.sources.some(source => source.source === "react-demos" || source.source === "html-demos") && !navObj.sources.some(source => source.source === "react" || source.source === "html")
})
)}
</NavExpandable>
);
}
Expand All @@ -101,7 +116,7 @@ export const SideNav = ({ groupedRoutes = {}, navItems = [] }) => {
lastElement.scrollIntoView({ block: 'center' });
}
}, []);

return (
<Nav aria-label="Side Nav" theme="light">
<NavList className="ws-side-nav-list">
Expand Down
8 changes: 4 additions & 4 deletions packages/documentation-framework/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,10 @@
"webpack-merge": "5.8.0"
},
"peerDependencies": {
"@patternfly/patternfly": "^5.0.0-alpha.46",
"@patternfly/react-code-editor": "^5.0.0-alpha.92",
"@patternfly/react-core": "^5.0.0-alpha.91",
"@patternfly/react-table": "^5.0.0-alpha.93",
"@patternfly/patternfly": "^5.0.0-alpha.64",
"@patternfly/react-code-editor": "^5.0.0-alpha.116",
"@patternfly/react-core": "^5.0.0-alpha.115",
"@patternfly/react-table": "^5.0.0-alpha.117",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
}
Expand Down
4 changes: 1 addition & 3 deletions packages/documentation-framework/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,8 @@ const groupedRoutes = Object.entries(routes)
const sourceOrder = {
react: 1,
'react-next': 1.1,
'react-composable': 1.2,
'react-deprecated': 1.3,
'react-legacy': 1.4,
'react-demos': 2,
'react-deprecated': 2.1,
html: 3,
'html-demos': 4,
'design-guidelines': 99,
Expand Down
9 changes: 6 additions & 3 deletions packages/documentation-framework/scripts/md/parseMD.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,10 @@ function toReactComponent(mdFilePath, source, buildMode) {
id: frontmatter.id,
section: frontmatter.section || '',
subsection: frontmatter.subsection || '',
deprecated: frontmatter.deprecated || false,
beta: frontmatter.beta || false,
demo: frontmatter.demo || false,
newImplementationLink: frontmatter.newImplementationLink || false,
source,
tabName: frontmatter.tabName || null,
slug,
Expand Down Expand Up @@ -133,9 +137,6 @@ function toReactComponent(mdFilePath, source, buildMode) {
if (frontmatter.optIn) {
pageData.optIn = frontmatter.optIn;
}
if (frontmatter.beta) {
pageData.beta = frontmatter.beta;
}
if (frontmatter.cssPrefix) {
pageData.cssPrefix = Array.isArray(frontmatter.cssPrefix)
? frontmatter.cssPrefix
Expand Down Expand Up @@ -293,6 +294,8 @@ function sourceMDFile(file, source, buildMode) {
tabName: pageData.tabName,
...(pageData.hideNavItem && { hideNavItem: pageData.hideNavItem }),
...(pageData.beta && { beta: pageData.beta }),
...(pageData.deprecated && { deprecated: pageData.deprecated }),
...(pageData.demo && { demo: pageData.demo }),
...(pageData.sortValue && { sortValue: pageData.sortValue }),
...(pageData.subsectionSortValue && { subsectionSortValue: pageData.subsectionSortValue })
};
Expand Down
Loading