Skip to content

Commit

Permalink
fix(styles): Replace workspace styles with content classes (#4011)
Browse files Browse the repository at this point in the history 
* fix(styles): Replace workspace styles with content classes

* fix(styles): revert content classes to ws where needed, replace globals

* chore(): Style and classname changes per review comments

* chore(styles): Fix token names
  • Loading branch information
@wise-king-sullyman
wise-king-sullyman authored May 21, 2024
1 parent 402dff5 commit f6faa02
Show file tree
Hide file tree
Showing 51 changed files with 285 additions and 493 deletions.
5 changes: 3 additions & 2 deletions packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from 'react';
import { Title, Flex, FlexItem } from '@patternfly/react-core';
import { Title, Flex, FlexItem, Text } 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';
import { css } from '@patternfly/react-styles';

// "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
const sizes = {
Expand Down Expand Up @@ -31,7 +32,7 @@ export const AutoLinkHeader = ({
id={slug}
size={sizes[size]}
headingLevel={headingLevel || size}
className={`ws-heading ${className}`}
className={css('ws-heading', className)}
tabIndex={-1}
>
<Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
Expand Down
4 changes: 2 additions & 2 deletions packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const HeaderTools = ({
// useEffect(() => {
// // reattach algolia to input each time search is expanded
// if (hasSearch && isSearchExpanded) {
// attachDocSearch(algolia, '.ws-global-search .pf-v5-c-text-input-group__text-input', 1000);
// attachDocSearch(algolia, '.ws-global-search .pf-v6-c-text-input-group__text-input', 1000);
// }
// }, [isSearchExpanded])

Expand Down Expand Up @@ -225,7 +225,7 @@ export function attachDocSearch(algolia, inputSelector, timeout) {
inputSelector,
autocompleteOptions: {
hint: false,
appendTo: `.ws-global-search .pf-v5-c-text-input-group`,
appendTo: `.ws-global-search .pf-v6-c-text-input-group`,
},
debug: process.env.NODE_ENV !== 'production',
...algolia
Expand Down
33 changes: 20 additions & 13 deletions packages/documentation-framework/scripts/md/styled-tags.js
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,53 @@
const visit = require('unist-util-visit');

const styledMdTags = [
const contentStyledMdTags = [
'p',
'ul',
'ul',
'ul',
'ol',
'li',
'dl',
'blockquote',
'small',
'hr',
'dt',
'dd'
];

const styledMdTags = [
...contentStyledMdTags,
'code',
'table',
'img'
];
]

function styledTags() {
return tree => {
visit(tree, 'element', node => {
if (contentStyledMdTags.includes(node.tagName)) {
node.properties.className += `pf-v6-c-content--${node.tagName}`;
}

if (styledMdTags.includes(node.tagName)) {
node.properties.className = node.properties.className || '';
node.properties.className += node.properties.className ? ' ' : '';
node.properties.className += `ws-${node.tagName}`;
// Match pf-v5-c-table implementation
node.properties.className += `ws-${node.tagName} `;
// Match pf-v6-c-table implementation
// https://pf4.patternfly.org/components/table/html/basic-table/
if (node.tagName === 'table') {
node.properties.className += ' pf-v5-c-table pf-m-grid-lg pf-m-compact';
node.properties.className += ' pf-v6-c-table pf-m-grid-lg pf-m-compact';
node.properties.role = 'grid';
let columnHeaders = [];
for (let child of node.children) {
if (child.tagName === 'thead') {
child.properties.className = 'pf-v5-c-table__thead';
child.properties.className = 'pf-v6-c-table__thead';
// Find column headers
const tr = child.children.find(child => child.tagName === 'tr');
tr.properties.role = 'row';
tr.properties.className = 'pf-v5-c-table__tr';
tr.properties.className = 'pf-v6-c-table__tr';
tr.children
.filter(child => child.tagName === 'th')
.forEach(th => {
th.properties.className = `${th.properties.className} pf-v5-c-table__th pf-m-wrap`;
th.properties.className = `${th.properties.className} pf-v6-c-table__th pf-m-wrap`;
th.properties.role = 'columnheader';
th.properties.scope = 'col';
let colName = '';
Expand All @@ -57,17 +64,17 @@ function styledTags() {
}
else if (child.tagName === 'tbody') {
child.properties.role = 'rowgroup';
child.properties.className = 'pf-v5-c-table__tbody';
child.properties.className = 'pf-v6-c-table__tbody';
child.children
.filter(tr => tr.tagName === 'tr')
.forEach(tr => {
tr.properties.role = 'row';
tr.properties.className = 'pf-v5-c-table__tr';
tr.properties.className = 'pf-v6-c-table__tr';
tr.children
.filter(td => td.tagName === 'td')
.forEach((td, i) => {
td.properties.role = 'cell';
td.properties.className = 'pf-v5-c-table__td';
td.properties.className = 'pf-v6-c-table__td';
if (columnHeaders[i]) {
td.properties['data-label'] = columnHeaders[i];
}
Expand Down
212 changes: 0 additions & 212 deletions packages/documentation-framework/templates/mdx.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,6 @@
/* font-family: var(--pf-v6-global--FontFamily--monospace); */
}

.ws-p + .ws-code {
margin-bottom: var(--pf-v6-c-content--MarginBottom);
}

.ws-image {
text-align: center;
width: "600px";
Expand Down Expand Up @@ -89,220 +85,12 @@
vertical-align: top;
}

/*
* Copied from pf-v6-c-content.
*/
:root {
--pf-v6-c-content--MarginBottom: var(--pf-t--global--spacer--md);
/* --pf-v6-c-content--LineHeight: var(--pf-v6-global--LineHeight--md); */
/* --pf-v6-c-content--FontSize: var(--pf-v6-global--FontSize--md); */
/* --pf-v6-c-content--FontWeight: var(--pf-v6-global--FontWeight--normal); */
/* --pf-v6-c-content--Color: var(--pf-v6-global--Color--100); */
/* --pf-v6-c-content--heading--FontFamily: var(--pf-v6-global--FontFamily--heading); */
--pf-v6-c-content--h1--MarginTop: var(--pf-t--global--spacer--lg);
--pf-v6-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
/* --pf-v6-c-content--h1--LineHeight: var(--pf-v6-global--LineHeight--sm); */
/* --pf-v6-c-content--h1--FontSize: var(--pf-v6-global--FontSize--2xl); */
/* --pf-v6-c-content--h1--FontWeight: var(--pf-v6-global--FontWeight--normal); */
--pf-v6-c-content--h2--MarginTop: var(--pf-t--global--spacer--lg);
--pf-v6-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
/* --pf-v6-c-content--h2--LineHeight: var(--pf-v6-global--LineHeight--sm); */
/* --pf-v6-c-content--h2--FontSize: var(--pf-v6-global--FontSize--xl); */
/* --pf-v6-c-content--h2--FontWeight: var(--pf-v6-global--FontWeight--normal); */
--pf-v6-c-content--h3--MarginTop: var(--pf-t--global--spacer--lg);
--pf-v6-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
/* --pf-v6-c-content--h3--LineHeight: var(--pf-v6-global--LineHeight--md); */
/* --pf-v6-c-content--h3--FontSize: var(--pf-v6-global--FontSize--lg); */
/* --pf-v6-c-content--h3--FontWeight: var(--pf-v6-global--FontWeight--normal); */
--pf-v6-c-content--h4--MarginTop: var(--pf-t--global--spacer--lg);
--pf-v6-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
/* --pf-v6-c-content--h4--LineHeight: var(--pf-v6-global--LineHeight--md); */
/* --pf-v6-c-content--h4--FontSize: var(--pf-v6-global--FontSize--md); */
/* --pf-v6-c-content--h4--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
--pf-v6-c-content--h5--MarginTop: var(--pf-t--global--spacer--lg);
--pf-v6-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
/* --pf-v6-c-content--h5--LineHeight: var(--pf-v6-global--LineHeight--md); */
/* --pf-v6-c-content--h5--FontSize: var(--pf-v6-global--FontSize--md); */
/* --pf-v6-c-content--h5--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
--pf-v6-c-content--h6--MarginTop: var(--pf-t--global--spacer--lg);
--pf-v6-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
/* --pf-v6-c-content--h6--LineHeight: var(--pf-v6-global--LineHeight--md); */
/* --pf-v6-c-content--h6--FontSize: var(--pf-v6-global--FontSize--md); */
/* --pf-v6-c-content--h6--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
--pf-v6-c-content--small--MarginBottom: var(--pf-t--global--spacer--md);
/* --pf-v6-c-content--small--LineHeight: var(--pf-v6-global--LineHeight--md); */
/* --pf-v6-c-content--small--FontSize: var(--pf-v6-global--FontSize--sm); */
/* --pf-v6-c-content--small--Color: var(--pf-v6-global--Color--200); */
/* --pf-v6-c-content--small--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
/* --pf-v6-c-content--a--Color: var(--pf-v6-global--link--Color); */
/* --pf-v6-c-content--a--TextDecoration: var(--pf-v6-global--link--TextDecoration); */
/* --pf-v6-c-content--a--hover--Color: var(--pf-v6-global--link--Color--hover); */
/* --pf-v6-c-content--a--hover--TextDecoration: var(--pf-v6-global--link--TextDecoration--hover); */
--pf-v6-c-content--blockquote--PaddingTop: var(--pf-t--global--spacer--md);
--pf-v6-c-content--blockquote--PaddingRight: var(--pf-t--global--spacer--md);
--pf-v6-c-content--blockquote--PaddingBottom: var(--pf-t--global--spacer--md);
--pf-v6-c-content--blockquote--PaddingLeft: var(--pf-t--global--spacer--md);
/* --pf-v6-c-content--blockquote--FontWeight: var(--pf-v6-global--FontWeight--light); */
/* --pf-v6-c-content--blockquote--Color: var(--pf-v6-global--Color--200); */
/* --pf-v6-c-content--blockquote--BorderLeftColor: var(--pf-v6-global--BorderColor--100); */
/* --pf-v6-c-content--blockquote--BorderLeftWidth: var(--pf-v6-global--BorderWidth--lg); */
--pf-v6-c-content--ol--PaddingLeft: var(--pf-t--global--spacer--lg);
--pf-v6-c-content--ol--MarginTop: var(--pf-t--global--spacer--md);
--pf-v6-c-content--ol--MarginLeft: var(--pf-t--global--spacer--lg);
--pf-v6-c-content--ol--nested--MarginTop: var(--pf-t--global--spacer--sm);
--pf-v6-c-content--ol--nested--MarginLeft: var(--pf-t--global--spacer--sm);
--pf-v6-c-content--ul--PaddingLeft: var(--pf-t--global--spacer--lg);
--pf-v6-c-content--ul--MarginTop: var(--pf-t--global--spacer--md);
--pf-v6-c-content--ul--MarginLeft: var(--pf-t--global--spacer--lg);
--pf-v6-c-content--ul--nested--MarginTop: var(--pf-t--global--spacer--sm);
--pf-v6-c-content--ul--nested--MarginLeft: var(--pf-t--global--spacer--sm);
/* --pf-v6-c-content--ul--ListStyle: var(--pf-v6-global--ListStyle); */
--pf-v6-c-content--li--MarginTop: var(--pf-t--global--spacer--sm);
--pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
--pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
/* --pf-v6-c-content--dt--FontWeight: var(--pf-v6-global--FontWeight--semi-bold); */
--pf-v6-c-content--dt--MarginTop: var(--pf-t--global--spacer--md);
--pf-v6-c-content--dt--sm--MarginTop: 0;
/* --pf-v6-c-content--hr--Height: var(--pf-v6-global--BorderWidth--sm); */
/* --pf-v6-c-content--hr--BackgroundColor: var(--pf-v6-global--BorderColor--100); */
font-size: var(--pf-v6-c-content--FontSize);
line-height: var(--pf-v6-c-content--LineHeight);
color: var(--pf-v6-c-content--Color); }
.ws-li + li {
margin-top: var(--pf-v6-c-content--li--MarginTop); }
.ws-p:not(:last-child),
.ws-dl:not(:last-child),
.ws-ol:not(:last-child),
.ws-ul:not(:last-child),
.ws-blockquote:not(:last-child),
.ws-small:not(:last-child),
.ws-pre:not(:last-child),
.ws-hr:not(:last-child),
.ws-table:not(:last-child),
.ws-content-table:not(:last-child) {
margin-bottom: var(--pf-v6-c-content--MarginBottom); }
.ws-h1,
.ws-h2,
.ws-h3,
.ws-h4,
.ws-h5,
.ws-h6 {
margin: 0;
font-family: var(--pf-v6-c-content--heading--FontFamily); }
.ws-ol,
.ws-ul {
margin: 0; }
.ws-h1 {
margin-bottom: var(--pf-v6-c-content--h1--MarginBottom);
font-size: var(--pf-v6-c-content--h1--FontSize);
font-weight: var(--pf-v6-c-content--h1--FontWeight);
line-height: var(--pf-v6-c-content--h1--LineHeight); }
.ws-h1:not(:first-child) {
margin-top: var(--pf-v6-c-content--h1--MarginTop); }
.ws-h2 {
margin-bottom: var(--pf-v6-c-content--h2--MarginBottom);
font-size: var(--pf-v6-c-content--h2--FontSize);
font-weight: var(--pf-v6-c-content--h2--FontWeight);
line-height: var(--pf-v6-c-content--h2--LineHeight);
margin-top: var(--pf-v6-c-content--h2--MarginTop); }
.ws-h3 {
margin-bottom: var(--pf-v6-c-content--h3--MarginBottom);
font-size: var(--pf-v6-c-content--h3--FontSize);
font-weight: var(--pf-v6-c-content--h3--FontWeight);
line-height: var(--pf-v6-c-content--h3--LineHeight); }
.ws-h3:not(:first-child) {
margin-top: var(--pf-v6-c-content--h3--MarginTop); }
.ws-h4 {
margin-bottom: var(--pf-v6-c-content--h4--MarginBottom);
font-size: var(--pf-v6-c-content--h4--FontSize);
font-weight: var(--pf-v6-c-content--h4--FontWeight);
line-height: var(--pf-v6-c-content--h4--LineHeight); }
.ws-h4:not(:first-child) {
margin-top: var(--pf-v6-c-content--h4--MarginTop); }
.ws-h5 {
margin-bottom: var(--pf-v6-c-content--h5--MarginBottom);
font-size: var(--pf-v6-c-content--h5--FontSize);
font-weight: var(--pf-v6-c-content--h5--FontWeight);
line-height: var(--pf-v6-c-content--h5--LineHeight); }
.ws-h5:not(:first-child) {
margin-top: var(--pf-v6-c-content--h5--MarginTop); }
.ws-h6 {
margin-bottom: var(--pf-v6-c-content--h6--MarginBottom);
font-size: var(--pf-v6-c-content--h6--FontSize);
font-weight: var(--pf-v6-c-content--h6--FontWeight);
line-height: var(--pf-v6-c-content--h6--LineHeight); }
.ws-h6:not(:first-child) {
margin-top: var(--pf-v6-c-content--h6--MarginTop); }
.ws-small {
display: block;
font-size: var(--pf-v6-c-content--small--FontSize);
line-height: var(--pf-v6-c-content--small--LineHeight);
color: var(--pf-v6-c-content--small--Color); }
.ws-small:not(:last-child) {
margin-bottom: var(--pf-v6-c-content--small--MarginBottom); }
.ws-blockquote {
padding: var(--pf-v6-c-content--blockquote--PaddingTop) var(--pf-v6-c-content--blockquote--PaddingRight) var(--pf-v6-c-content--blockquote--PaddingBottom) var(--pf-v6-c-content--blockquote--PaddingLeft);
font-weight: var(--pf-v6-c-content--blockquote--FontWeight);
color: var(--pf-v6-c-content--blockquote--Color);
border-left: var(--pf-v6-c-content--blockquote--BorderLeftWidth) solid var(--pf-v6-c-content--blockquote--BorderLeftColor); }
.ws-hr {
height: var(--pf-v6-c-content--hr--Height);
background-color: var(--pf-v6-c-content--hr--BackgroundColor);
border: none; }
.ws-ol {
padding-left: var(--pf-v6-c-content--ol--PaddingLeft);
margin-top: var(--pf-v6-c-content--ol--MarginTop);
margin-left: var(--pf-v6-c-content--ol--MarginLeft); }
.ws-ol ul {
--pf-v6-c-content--ul--MarginTop: var(--pf-v6-c-content--ul--nested--MarginTop);
--pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft); }
.ws-ol ol {
--pf-v6-c-content--ol--MarginTop: var(--pf-v6-c-content--ol--nested--MarginTop);
--pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft); }
.ws-ul {
padding-left: var(--pf-v6-c-content--ul--PaddingLeft);
margin-top: var(--pf-v6-c-content--ul--MarginTop);
margin-left: var(--pf-v6-c-content--ul--MarginLeft);
list-style: var(--pf-v6-c-content--ul--ListStyle); }
.ws-ul ul {
--pf-v6-c-content--ul--MarginTop: var(--pf-v6-c-content--ul--nested--MarginTop);
--pf-v6-c-content--ul--MarginLeft: var(--pf-v6-c-content--ul--nested--MarginLeft); }
.ws-ul ol {
--pf-v6-c-content--ol--MarginTop: var(--pf-v6-c-content--ol--nested--MarginTop);
--pf-v6-c-content--ol--MarginLeft: var(--pf-v6-c-content--ol--nested--MarginLeft); }
.ws-dl {
display: grid;
grid-template-columns: 1fr; }
@media screen and (min-width: 576px) {
.ws-dl {
grid-template: auto / auto 1fr;
grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
grid-row-gap: var(--pf-v6-c-content--dl--RowGap); } }
.ws-dt {
font-weight: var(--pf-v6-c-content--dt--FontWeight); }
.ws-dt:not(:first-child) {
margin-top: var(--pf-v6-c-content--dt--MarginTop); }
@media screen and (min-width: 576px) {
.ws-dt:not(:first-child) {
--pf-v6-c-content--dt--MarginTop: var(--pf-v6-c-content--dt--sm--MarginTop); } }
@media screen and (min-width: 576px) {
.ws-dt {
grid-column: 1; } }
@media screen and (min-width: 576px) {
.ws-dd {
grid-column: 2; } }

@media screen and (max-width: 1450px) {
.ws-mdx-child-template {
flex-direction: column;
}
}

.ws-mdx-content {
flex-grow: 1;
min-width: 0;
}

/* Design asked for this. A nice side effect is that the TOC doesn't "jump" between pages */
.ws-mdx-content-content {
max-width: 832px;
Expand Down
8 changes: 4 additions & 4 deletions packages/documentation-framework/templates/mdx.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,21 +98,21 @@ const MDXChildTemplate = ({
{toc.length > 1 && (
<TableOfContents items={toc} />
)}
<div className="ws-mdx-content">
<div>
<div className={innerContentWrapperClass()}>
{InlineAlerts}
<Component />
{functionDocumentation.length > 0 && (
<React.Fragment>
<AutoLinkHeader size="h2" className="ws-h2" id="functions">
<AutoLinkHeader size="h2" className="pf-v6-c-content--h2" id="functions">
Functions
</AutoLinkHeader>
<FunctionsTable functionDescriptions={functionDocumentation}/>
</React.Fragment>
)}
{propsTitle && (
<React.Fragment>
<AutoLinkHeader size="h2" className="ws-h2" id="props">
<AutoLinkHeader size="h2" className="pf-v6-c-content--h2" id="props">
{propsTitle}
</AutoLinkHeader>
{propComponents.map(component => (
Expand All @@ -128,7 +128,7 @@ const MDXChildTemplate = ({
)}
{cssPrefix.length > 0 && (
<React.Fragment>
<AutoLinkHeader size="h2" className="ws-h2" id="css-variables">
<AutoLinkHeader size="h2" className="pf-v6-c-content--h2" id="css-variables">
{cssVarsTitle}
</AutoLinkHeader>
{cssPrefix.map((prefix, index) => (
Expand Down
2 changes: 1 addition & 1 deletion packages/documentation-site/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"screenshots": "pf-docs-framework screenshots"
},
"dependencies": {
"@patternfly/documentation-framework": "6.0.0-alpha.28",
"@patternfly/documentation-framework": "6.0.0-alpha.30",
"@patternfly/quickstarts": "^5.1.0",
"@patternfly/react-catalog-view-extension": "5.0.0",
"@patternfly/react-console": "5.0.0",
Expand Down
Loading

0 comments on commit f6faa02

Please sign in to comment.