@patternfly/documentation-framework 6.0.0-alpha.47 → 6.0.0-alpha.49

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 6.0.0-alpha.49 (2024-06-20)
+
+
+### Bug Fixes
+
+* cleaning out example.css ([#4081](https://github.com/patternfly/patternfly-org/issues/4081)) ([c06d13d](https://github.com/patternfly/patternfly-org/commit/c06d13d63df648f64e1c07f4e0ddb24e845ef405))
+
+
+
+
+
+# 6.0.0-alpha.48 (2024-06-18)
+
+
+### Bug Fixes
+
+* add component groups alpha docs ([#4105](https://github.com/patternfly/patternfly-org/issues/4105)) ([f9c2be1](https://github.com/patternfly/patternfly-org/commit/f9c2be12f74dad69e390ba66af5cc34a350fa619))
+
+
+
+
+
 # 6.0.0-alpha.47 (2024-06-17)
 
 

package/components/example/example.css

@@ -2,19 +2,6 @@
   --ws-code-editor--tooltip--MaxWidth: 16ch;
 }
 
-.ws-example {
-  margin-top: var(--pf-t--global--spacer--lg);
-  margin-bottom: var(--pf-t--global--spacer--lg);
-}
-
-.ws-example > .ws-example-header {
-  padding: var(--pf-t--global--spacer--md);
-}
-
-.ws-example-header > .ws-example-heading:not(:last-child) {
-  margin-bottom: var(--pf-t--global--spacer--md);
-}
-
 .ws-code-editor:not(.ws-example-code-expanded) > .pf-v6-c-code-editor__header::before {
   --pf-v6-c-code-editor__header--before--BorderBottomWidth: 0;
 }
@@ -30,27 +17,6 @@
   --pf-v6-c-button--after--BorderWidth: 0;
 }
 
-.ws-preview {
-  padding: var(--pf-t--global--spacer--md);
-/*   background-color: var(--pf-v6-global--BackgroundColor--100); */
-/*   border-bottom: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--300); */
-  transition: width .2s ease-in-out;
-}
-
-.ws-core-c-page.ws-preview > .ws-preview-html,
-.ws-react-c-page.ws-preview > .pf-v6-c-page {
-  overflow: hidden;
-}
-
-.ws-editor {
-/*   font-size: var(--pf-v6-global--FontSize--md); */
-}
-
-.ws-editor .token.punctuation,
-.ws-editor .token.operator {
-/*   color: var(--pf-v6-global--danger-color--100); */
-}
-
 .ws-preview__thumbnail-link {
   position: relative;
   line-height: 0;
@@ -100,14 +66,8 @@
   color: rgba(255,255,255,.4);
 }
 
-.pf-v6-c-badge.ws-beta-badge {
-/*   --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-global--BackgroundColor--100); */
-/*   --pf-v6-c-badge--m-unread--Color: var(--pf-v6-global--primary-color--100); */
-/*   border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--primary-color--100); */
-}
-
 .ws-prop-required {
-/*   color: var(--pf-v6-global--danger-color--100); */
+  color: var(--pf-t--global--text--color--status--danger--default);
 }
 
 .ws-full-page-utils {
@@ -115,18 +75,14 @@
   right: 0;
   bottom: 0;
   padding: var(--pf-t--global--spacer--lg);
-/*   z-index: var(--pf-v6-global--ZIndex--2xl); */
+  z-index: var(--pf-t--global--z-index--2xl);
 }
 
 .ws-full-page-utils::before {
   position: absolute;
   inset: 0;
   content: "";
-/*   background-color: var(--pf-v6-global--BackgroundColor--100); */
+  background-color: var(--pf-t--global--background--color--floating--default);
   opacity: 0.8;
-/*   box-shadow: var(--pf-v6-global--BoxShadow--sm); */
-}
-
-.pf-v6-theme-dark .ws-theme-switch-full-page::before {
-/*   background-color: var(--pf-v6-global--BackgroundColor--300); */
+  box-shadow: var(--pf-t--global--box-shadow--sm);
 }

package/components/example/example.js

@@ -9,6 +9,8 @@ import {
   Label,
   Switch,
   Tooltip,
+  Stack,
+  StackItem
 } from '@patternfly/react-core';
 import * as reactCoreModule from '@patternfly/react-core';
 import * as reactCoreNextModule from '@patternfly/react-core/next';
@@ -152,7 +154,6 @@ export const Example = ({
     livePreview = (
       <div
         className={css(
-          'ws-preview-html',
           isFullscreenPreview && 'pf-v6-u-h-100'
         )}
         dangerouslySetInnerHTML={{ __html: editorCode }}
@@ -282,55 +283,57 @@ export const Example = ({
   const metaText = hasMetaText && tooltips
 
   return (
-    <div className="ws-example">
-      <div className="ws-example-header">
+    <Stack hasGutter>
+      <StackItem>
         <AutoLinkHeader
           metaText={metaText}
           headingLevel="h3"
-          className="ws-example-heading"
         >
           {title}
         </AutoLinkHeader>
         {children}
-      </div>
-      {isFullscreen ? (
-        <div className="ws-preview">
-          <a
-            className="ws-preview__thumbnail-link"
-            href={fullscreenLink}
-            target="_blank"
-            aria-label={`Open fullscreen ${title} example`}
+      </StackItem>
+      <StackItem>
+        {isFullscreen ? (
+          <div>
+            <a
+              className="ws-preview__thumbnail-link"
+              href={fullscreenLink}
+              target="_blank"
+              aria-label={`Open fullscreen ${title} example`}
+            >
+              <img
+                src={thumbnail.src}
+                width={thumbnail.width}
+                height={thumbnail.height}
+                alt={`${title} screenshot`}
+              />
+            </a>
+          </div>
+        ) : (
+          <div
+            id={previewId}
+            className={css(
+              className,
+              isRTL && 'pf-v6-m-dir-rtl'
+            )}
           >
-            <img
-              src={thumbnail.src}
-              width={thumbnail.width}
-              height={thumbnail.height}
-              alt={`${title} screenshot`}
-            />
-          </a>
-        </div>
-      ) : (
-        <div
-          id={previewId}
-          className={css(
-            className,
-            isFullscreen ? 'ws-preview-fullscreen' : 'ws-preview',
-            isRTL && 'pf-v6-m-dir-rtl'
-          )}
-        >
-          {livePreview}
-        </div>
-      )}
-      <ExampleToolbar
-        lang={lang}
-        isFullscreen={isFullscreen}
-        fullscreenLink={fullscreenLink}
-        originalCode={code}
-        code={editorCode}
-        setCode={debounce(setEditorCode, 300)}
-        codeBoxParams={codeBoxParams}
-        exampleTitle={title}
-      />
-    </div>
+            {livePreview}
+          </div>
+        )}
+      </StackItem>
+      <StackItem>
+        <ExampleToolbar
+          lang={lang}
+          isFullscreen={isFullscreen}
+          fullscreenLink={fullscreenLink}
+          originalCode={code}
+          code={editorCode}
+          setCode={debounce(setEditorCode, 300)}
+          codeBoxParams={codeBoxParams}
+          exampleTitle={title}
+        />
+      </StackItem>
+    </Stack>
   );
 };

package/components/propsTable/propsTable.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Badge } from "@patternfly/react-core";
+import { Label } from "@patternfly/react-core";
 import {
   Table,
   Caption,
@@ -62,12 +62,16 @@ export const PropsTable = ({ title, description, rows, allPropComponents }) => (
                     ""
                   )}
                   {row.beta && (
-                    <Badge
-                      key={`${row.name}-${idx}`}
-                      className="ws-beta-badge pf-v6-u-ml-sm"
-                    >
-                      Beta
-                    </Badge>
+                    <>
+                      {" "}
+                      <Label
+                        key={`${row.name}-${idx}`}
+                        color="blue"
+                        isCompact
+                      >
+                        Beta
+                      </Label>
+                    </>
                   )}
                 </TableText>
               </Td>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.0.0-alpha.47",
+  "version": "6.0.0-alpha.49",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -13,7 +13,7 @@
     "@babel/preset-env": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.4.0-alpha.36",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.38",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
     "babel-loader": "^9.1.3",
@@ -80,5 +80,5 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "dc491607328d5182bf4c16432b416ed415c9a74f"
+  "gitHead": "11e7cf09028ab556765ba853f4db8fad15738122"
 }

package/templates/mdx.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PageSection, Title, Tooltip, PageSectionVariants, Button, BackToTop, Flex, FlexItem, PageGroup, Page, Text, TextContent, Label } from '@patternfly/react-core';
+import { PageSection, Title, Tooltip, PageSectionVariants, Button, BackToTop, Flex, FlexItem, PageGroup, Page, Text, TextContent, Label, Stack, StackItem } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import { Router, useLocation } from '@reach/router';
@@ -52,18 +52,11 @@ const MDXChildTemplate = ({
     }
     ensureID(toc);
   }
-  const innerContentWrapperClass = () => {
-    if (source === 'landing-pages') {
-      return 'landing-pages';
-    }
-    if (source === 'release-notes') {
-      return '';
-    }
-    return 'ws-mdx-content-content'
-  };
 
-  const InlineAlerts = (
-    <React.Fragment>
+  const isComponentCodeDocs = ['react', 'react-demos', 'html', 'html-demos', 'react-templates'].includes(source);
+
+  const InlineAlerts = (optIn || beta || deprecated || source === 'react-deprecated' || source === 'html-deprecated' || template || source === 'react-template') && (
+    <StackItem>
       {optIn && (
         <InlineAlert title="Opt-in feature">
           {optIn}
@@ -90,28 +83,27 @@ const MDXChildTemplate = ({
           {`This page showcases templates for the ${id.toLowerCase()} component. A template combines a component with logic that supports a specific use case, with a streamlined API that offers additional, limited customization.`}
         </InlineAlert>
       )}
-    </React.Fragment>
+    </StackItem>
   );
   // Create dynamic component for @reach/router
   const ChildComponent = () => (
-    <div className="pf-v6-u-display-flex ws-mdx-child-template">
+    <div className={source !== 'landing-pages' ? 'pf-v6-l-flex' : ''}>
       {toc.length > 1 && (
         <TableOfContents items={toc} />
       )}
-      <div>
-        <div className={innerContentWrapperClass()}>
-          {InlineAlerts}
+      <div className={isComponentCodeDocs && 'pf-v6-l-stack pf-m-gutter'} style={{...(source !== 'landing-pages' && {maxWidth: "825px"})}}>
+        {InlineAlerts}
           <Component />
           {functionDocumentation.length > 0 && (
-            <React.Fragment>
+            <StackItem>
               <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="functions">
                 Functions
               </AutoLinkHeader>
               <FunctionsTable functionDescriptions={functionDocumentation}/>
-            </React.Fragment>
+            </StackItem>
           )}
           {propsTitle && (
-            <React.Fragment>
+            <StackItem>
               <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="props">
                 {propsTitle}
               </AutoLinkHeader>
@@ -124,25 +116,24 @@ const MDXChildTemplate = ({
                   allPropComponents={propComponents}
                 />
               ))}
-            </React.Fragment>
+            </StackItem>
           )}
           {cssPrefix.length > 0 && (
-            <React.Fragment>
+            <StackItem>
               <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="css-variables">
                 {cssVarsTitle}
               </AutoLinkHeader>
               {cssPrefix.map((prefix, index) => (
                 <CSSVariables key={index} autoLinkHeader={cssPrefix.length > 1} prefix={prefix} />
               ))}
-            </React.Fragment>
+            </StackItem>
           )}
           {sourceLink && (
-            <React.Fragment>
+            <StackItem>
               <br />
               <a href={sourceLink} target="_blank" onClick={() => trackEvent('view_source_click', 'click_event', source.toUpperCase())}>View source on GitHub</a>
-            </React.Fragment>
+            </StackItem>
           )}
-        </div>
       </div>
     </div>
   );