Skip to content
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

Jump to bottom

fix(styles): Replace workspace styles with content classes #4011

Merged
merged 6 commits into from
May 21, 2024
Merged

fix(styles): Replace workspace styles with content classes #4011

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
8cee64f
fix(styles): Replace workspace styles with content classes
wise-king-sullyman May 8, 2024
91e5638
fix(styles): revert content classes to ws where needed, replace globals
wise-king-sullyman May 14, 2024
b596b2a
Merge branch 'v6' into resolve-custom-styles-pf6
wise-king-sullyman May 14, 2024
c6d2a9f
Merge branch 'v6' into resolve-custom-styles-pf6
wise-king-sullyman May 20, 2024
402c341
chore(): Style and classname changes per review comments
wise-king-sullyman May 21, 2024
b783934
chore(styles): Fix token names
wise-king-sullyman May 21, 2024
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
5 changes: 3 additions & 2 deletions packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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); */
Comment on lines -92 to -97
Copy link
Contributor

Choose a reason for hiding this comment

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

🏆

/* --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
Open in desktop
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">
Copy link
Contributor

Choose a reason for hiding this comment

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

<AutoLinkHeader> uses a <Title> under the hood. That's basically assigning 2 heading component classes to it and could have conflicting styles. I wonder if we could just use the <Text> component in <AutoLinkHeader> instead of <Title>? It would really simplify this and the autolinkheader code.

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
Open in desktop
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
Loading