@patternfly/documentation-framework 6.34.1 → 6.35.1

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.35.1 (2026-02-11)
+
+
+### Bug Fixes
+
+* **trainings:** updated trainings and fixed linked codesandboxes ([#4923](https://github.com/patternfly/patternfly-org/issues/4923)) ([e76918a](https://github.com/patternfly/patternfly-org/commit/e76918a7653d0106e396685e5b5a027925a47327))
+
+
+
+
+
+# 6.35.0 (2026-02-06)
+
+
+### Features
+
+* allow full-page example utils to change position ([#4896](https://github.com/patternfly/patternfly-org/issues/4896)) ([d4b4ba3](https://github.com/patternfly/patternfly-org/commit/d4b4ba33277cd0c6173c0470502df3abfc810867))
+
+
+
+
+
 ## 6.34.1 (2026-02-06)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/components/example/example.css

@@ -72,12 +72,48 @@
 
 .ws-full-page-utils {
   position: fixed;
-  inset-inline-start: 0;
   inset-block-end: 0;
-  padding: var(--pf-t--global--spacer--lg);
+  padding: var(--pf-t--global--spacer--xl);
   z-index: var(--pf-t--global--z-index--2xl);
 }
 
+.ws-full-page-utils-position-btn {
+  --ws-full-page-utils-btn--inset: var(--pf-t--global--spacer--xs);
+  position: absolute;
+}
+
+:is(.ws-full-page-utils, .ws-full-page-utils-position-btn).pf-m-top-right {
+  top: var(--ws-full-page-utils-btn--inset, 0);
+  right: var(--ws-full-page-utils-btn--inset, 0);
+  bottom: auto;
+  left: auto;
+}
+
+:is(.ws-full-page-utils, .ws-full-page-utils-position-btn).pf-m-bottom-right {
+  top: auto;
+  right: var(--ws-full-page-utils-btn--inset, 0);
+  bottom: var(--ws-full-page-utils-btn--inset, 0);
+  left: auto;
+}
+
+:is(.ws-full-page-utils, .ws-full-page-utils-position-btn).pf-m-bottom-left {
+  top: auto;
+  right: auto;
+  bottom: var(--ws-full-page-utils-btn--inset, 0);
+  left: var(--ws-full-page-utils-btn--inset, 0);
+}
+
+:is(.ws-full-page-utils, .ws-full-page-utils-position-btn).pf-m-top-left {
+  top: var(--ws-full-page-utils-btn--inset, 0);
+  right: auto;
+  bottom: auto;
+  left: var(--ws-full-page-utils-btn--inset, 0);
+}
+
+.ws-full-page-utils-position-btn.pf-m-clicked {
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--text--color--regular);
+}
+
 .ws-full-page-utils::before {
   position: absolute;
   inset: 0;

package/components/example/example.js

@@ -34,6 +34,15 @@ import missingThumbnail from './missing-thumbnail.jpg';
 import { RtlContext } from '../../layouts';
 import { ThemeSelector } from '../themeSelector/themeSelector';
 
+import RhUiArrowCircleDownRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-down-right-icon';
+import RhUiArrowCircleDownLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-down-left-icon';
+import RhUiArrowCircleUpRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-up-right-icon';
+import RhUiArrowCircleUpLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-up-left-icon';
+import RhUiArrowCircleDownRightFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-down-right-fill-icon';
+import RhUiArrowCircleDownLeftFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-down-left-fill-icon';
+import RhUiArrowCircleUpRightFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-up-right-fill-icon';
+import RhUiArrowCircleUpLeftFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-arrow-circle-up-left-fill-icon';
+
 const errorComponent = (err) => <pre>{err.toString()}</pre>;
 
 class ErrorBoundary extends React.Component {
@@ -137,8 +146,22 @@ export const Example = ({
   }
 
   const [editorCode, setEditorCode] = React.useState(code);
+  const isBrowser = typeof window !== 'undefined' && window.localStorage;
+  const [fullPageUtilsPosition, setFullPageUtilsPosition] = React.useState(() => {
+    if (isBrowser) {
+      return localStorage.getItem('fullPageUtilsPosition') || 'pf-m-bottom-left';
+    }
+    return 'pf-m-bottom-left';
+  });
   const loc = useLocation();
   const isRTL = useContext(RtlContext);
+
+  // Save fullPageUtilsPosition to localStorage when it changes
+  useEffect(() => {
+    if (isBrowser) {
+      localStorage.setItem('fullPageUtilsPosition', fullPageUtilsPosition);
+    }
+  }, [fullPageUtilsPosition]);
   const scope = {
     ...liveContext,
     // These 2 are in the bundle anyways for the site since we dogfood
@@ -186,15 +209,51 @@ export const Example = ({
   const previewId = getExampleId(source, section[0], id, title);
   const className = getExampleClassName(source, section[0], id);
 
+  // Four corner position button props
+  const fullPageUtilsPositionProps = {
+    topLeft: {
+      className: 'pf-m-top-left',
+      label: 'Move to the top left corner',
+      tooltipPosition: 'bottom-start',
+      icon: <RhUiArrowCircleUpLeftIcon />,
+      iconClicked: <RhUiArrowCircleUpLeftFillIcon />
+    },
+    topRight: {
+      className: 'pf-m-top-right',
+      label: 'Move to the top right corner',
+      tooltipPosition: 'bottom-end',
+      icon: <RhUiArrowCircleUpRightIcon />,
+      iconClicked: <RhUiArrowCircleUpRightFillIcon />
+    },
+    bottomLeft: {
+      className: 'pf-m-bottom-left',
+      label: 'Move to the bottom left corner',
+      tooltipPosition: 'top-start',
+      icon: <RhUiArrowCircleDownLeftIcon />,
+      iconClicked: <RhUiArrowCircleDownLeftFillIcon />
+    },
+    bottomRight: {
+      className: 'pf-m-bottom-right',
+      label: 'Move to the bottom right corner',
+      tooltipPosition: 'top-end',
+      icon: <RhUiArrowCircleDownRightIcon />,
+      iconClicked: <RhUiArrowCircleDownRightFillIcon />
+    }
+  };
+
   if (isFullscreenPreview) {
+    const activeFullPageUtilsTooltipPosition = Object.values(fullPageUtilsPositionProps).find(
+      (props) => props.className === fullPageUtilsPosition
+    )?.tooltipPosition;
+
     return (
       <div id={previewId} className={css(className, 'pf-v6-u-h-100')}>
         {livePreview}
         {(hasThemeSwitcher || hasRTLSwitcher) && (
           <Flex
             direction={{ default: 'column' }}
-            gap={{ default: 'gapMd' }}
-            className="ws-full-page-utils pf-v6-m-dir-ltr"
+            gap={{ default: 'gapSm' }}
+            className={css('ws-full-page-utils', 'pf-v6-m-dir-ltr', fullPageUtilsPosition)}
           >
             {hasThemeSwitcher && <ThemeSelector id="ws-example-theme-select" />}
             {hasRTLSwitcher && (
@@ -209,6 +268,27 @@ export const Example = ({
                 }}
               />
             )}
+            {/* Four corner position buttons */}
+            {Object.entries(fullPageUtilsPositionProps).map(([key, utilsProps]) => (
+              <Tooltip
+                key={key}
+                content={utilsProps.label}
+                position={activeFullPageUtilsTooltipPosition || utilsProps.tooltipPosition}
+                enableFlip={false}
+                aria="none"
+                aria-live="off"
+              >
+                <Button
+                  variant="plain"
+                  size="sm"
+                  className={css('ws-full-page-utils-position-btn', utilsProps.className)}
+                  isClicked={fullPageUtilsPosition === utilsProps.className}
+                  onClick={() => setFullPageUtilsPosition(utilsProps.className)}
+                  aria-label={`${utilsProps.label}${fullPageUtilsPosition === utilsProps.className ? ', selected' : ''}`}
+                  icon={fullPageUtilsPosition === utilsProps.className ? utilsProps.iconClicked : utilsProps.icon}
+                />
+              </Tooltip>
+            ))}
           </Flex>
         )}
       </div>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.34.1",
+  "version": "6.35.1",
   "author": "Red Hat",
   "license": "MIT",
   "bin": {
@@ -12,7 +12,7 @@
     "@babel/preset-env": "7.27.1",
     "@babel/preset-react": "^7.24.1",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.4.0-alpha.339",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.341",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "@rspack/core": "^1.5.6",
     "@rspack/dev-server": "^1.1.4",
@@ -71,6 +71,7 @@
     "@patternfly/patternfly": "^6.5.0-prerelease.33",
     "@patternfly/react-code-editor": "^6.5.0-prerelease.26",
     "@patternfly/react-core": "^6.5.0-prerelease.24",
+    "@patternfly/react-icons": "^6.5.0-prerelease.11",
     "@patternfly/react-table": "^6.5.0-prerelease.24",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
@@ -91,5 +92,5 @@
     "http-cache-semantics": ">=4.1.1",
     "nanoid": "3.3.8"
   },
-  "gitHead": "ad3b543ee558a2cd5dffa59ec83b3d957292fcbe"
+  "gitHead": "89b2ca9cc6eb24548ce7baaf58b4a2fe25a547c3"
 }