From 7d9a477aab4f3b77aaf97e9fdb52697a8a139b65 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Mon, 2 Dec 2024 16:13:08 -0500 Subject: [PATCH 1/2] fix(styling): Allow for spacing between paragraphs of non-stack text --- packages/documentation-framework/templates/mdx.css | 2 +- packages/documentation-site/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/documentation-framework/templates/mdx.css b/packages/documentation-framework/templates/mdx.css index ac41f7cb44..acf5467e4c 100644 --- a/packages/documentation-framework/templates/mdx.css +++ b/packages/documentation-framework/templates/mdx.css @@ -1,4 +1,4 @@ -p.pf-v6-c-content--p.ws-p { +.pf-v6-l-stack > p.pf-v6-c-content--p.ws-p { margin: 0; } diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json index edfd0285f9..7e65fceae0 100644 --- a/packages/documentation-site/package.json +++ b/packages/documentation-site/package.json @@ -17,7 +17,7 @@ "screenshots": "pf-docs-framework screenshots" }, "dependencies": { - "@patternfly/documentation-framework": "6.0.12", + "@patternfly/documentation-framework": "6.0.13", "@patternfly/react-catalog-view-extension": "6.0.0", "@patternfly/react-console": "6.0.0", "@patternfly/react-docs": "7.0.0", From 4e44bdf9eabf3233a5b393f44327c499eb2b91f1 Mon Sep 17 00:00:00 2001 From: mcoker Date: Mon, 16 Dec 2024 10:15:58 -0600 Subject: [PATCH 2/2] chore(docs): updatin spacin --- .../autoLinkHeader/autoLinkHeader.css | 3 ++- .../autoLinkHeader/autoLinkHeader.js | 26 +++++++++---------- .../components/example/example.css | 9 +++++-- .../components/example/example.js | 4 +-- .../documentation-framework/templates/mdx.css | 12 +++++++-- .../documentation-framework/templates/mdx.js | 2 +- .../usage-and-behavior/usage-and-behavior.md | 2 -- 7 files changed, 35 insertions(+), 23 deletions(-) diff --git a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css index 58ee09e9bd..703b521ed7 100644 --- a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css +++ b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css @@ -4,11 +4,12 @@ .ws-heading-anchor { color: var(--pf-t--global--icon--color--regular); - transform: translate(calc(-100% - var(--pf-t--global--spacer--xs)), -50%); + transform: translate(-100%, -50%); opacity: 0; position: absolute; left: 0; top: 50%; + padding-inline-end: var(--pf-t--global--spacer--xs); } .ws-heading-anchor-icon { diff --git a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js index 3ed28a6df8..8d6f374563 100644 --- a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js +++ b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js @@ -15,22 +15,22 @@ export const AutoLinkHeader = ({ const slug = id || slugger(children); return ( - + + - - - - - {children} - + + + + {children} {metaText && {metaText}} + ) }; diff --git a/packages/documentation-framework/components/example/example.css b/packages/documentation-framework/components/example/example.css index 2018d81b5a..4315bab61b 100644 --- a/packages/documentation-framework/components/example/example.css +++ b/packages/documentation-framework/components/example/example.css @@ -2,8 +2,9 @@ --ws-code-editor--tooltip--MaxWidth: 16ch; } -.ws-code-editor:not(.ws-example-code-expanded) > .pf-v6-c-code-editor__header::before { - --pf-v6-c-code-editor__header--before--BorderBottomWidth: 0; +.ws-code-editor { + --pf-v6-c-code-editor__header-content--PaddingInlineStart: 0; + --pf-v6-c-code-editor__header-content--PaddingInlineEnd: 0; } .ws-code-editor-control { @@ -86,3 +87,7 @@ opacity: 0.8; box-shadow: var(--pf-t--global--box-shadow--sm); } + +.ws-example-toolbar { + margin-block-end: var(--pf-t--global--spacer--lg); +} \ No newline at end of file diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index b1343fd34e..de0db2b461 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -294,7 +294,7 @@ export const Example = ({ {children} - + {isFullscreen ? (
)} - + p.pf-v6-c-content--p.ws-p { - margin: 0; +.ws-content.pf-v6-l-stack > [class*="pf-v6-c-content"] { + margin-bottom: 0; +} + +.ws-content { + max-width: 825px; } .ws-code { @@ -23,3 +27,7 @@ .ws-back-to-top { z-index: var(--pf-t--global--z-index--2xl); } + +.ws-autolink-header:not(:first-child) { + margin-top: var(--pf-t--global--spacer--md); +} \ No newline at end of file diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js index dbf51542a6..db14ba4dfe 100644 --- a/packages/documentation-framework/templates/mdx.js +++ b/packages/documentation-framework/templates/mdx.js @@ -154,7 +154,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => { {toc.length > 1 && } {InlineAlerts} diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/usage-and-behavior.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/usage-and-behavior.md index a0936eaabd..be0ba22514 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/usage-and-behavior.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/usage-and-behavior.md @@ -3,8 +3,6 @@ id: Usage and behavior section: design-foundations --- -# PatternFly component usage and behavior guidelines - As you design with PatternFly, you might encounter common use cases where multiple components could be used. These guidelines outline which component to use in these situations and shares where to find more detailed usage guidelines. ## Displaying structured data