@patternfly/documentation-framework 6.19.0 → 6.21.0

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.21.0 (2025-09-02)
+
+
+### Features
+
+* **Feedback:** Add a feedback button with qualtrics form ([#4755](https://github.com/patternfly/patternfly-org/issues/4755)) ([21a8823](https://github.com/patternfly/patternfly-org/commit/21a88238b7187e3c98fbb2f4d8c94483796dfcf0))
+
+
+
+
+
+# 6.20.0 (2025-08-28)
+
+
+### Features
+
+* **theme:** Add high contrast switcher feature flag ([#4761](https://github.com/patternfly/patternfly-org/issues/4761)) ([94b1bf1](https://github.com/patternfly/patternfly-org/commit/94b1bf11fdf0f9daa230671b9ea6cb8258190db2))
+
+
+
+
+
 # 6.19.0 (2025-08-26)
 
 

package/app.js

@@ -11,6 +11,7 @@ import './components/cssVariables/cssVariables.css';
 import './components/tableOfContents/tableOfContents.css';
 import './components/example/example.css';
 import './components/footer/footer.css';
+import './components/feedbackButton/feedbackButton.css';
 import './layouts/sideNavLayout/sideNavLayout.css';
 
 const AppRoute = ({ child, title, path }) => {

package/components/feedbackButton/feedbackButton.css

@@ -0,0 +1,48 @@
+.ws-feedback-button-container {
+  position: fixed;
+  right: 0;
+  top: 50vh;
+  transform: translateY(-50%);
+  transform: rotate(-90deg);
+  z-index: 9999;
+  pointer-events: auto;
+}
+
+.ws-feedback-button {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Ensure the button is visible on all screen sizes */
+@media (max-width: 768px) {
+  .ws-feedback-button-container {
+    right: -20px;
+  }
+}
+
+/* Ensure the button doesn't interfere with other elements */
+.ws-feedback-button-container .pf-v6-c-button {
+  min-width: auto;
+}
+
+/* Make the feedback modal taller */
+.ws-feedback-modal {
+  max-height: 90vh !important;
+}
+
+.ws-feedback-modal .pf-v6-c-modal-box {
+  max-height: 90vh !important;
+  height: 90vh !important;
+}
+
+.ws-feedback-modal .pf-v6-c-modal-box__body {
+  height: calc(90vh - 120px) !important;
+  overflow-y: auto;
+}
+
+/* Make the iframe fill the modal body */
+.ws-feedback-iframe {
+  width: 100% !important;
+  height: 100% !important;
+  border: none;
+  display: block;
+}

package/components/feedbackButton/feedbackButton.js

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  ModalFooter,
+  ModalVariant,
+  Label
+} from '@patternfly/react-core';
+import './feedbackButton.css';
+
+export const FeedbackButton = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <>
+      <div className="ws-feedback-button-container">
+        <Button variant="primary" size="sm" className="ws-feedback-button" onClick={handleModalToggle}>Give feedback</Button>
+      </div>
+
+      <Modal
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-label="PatternFly feedback modal"
+        aria-describedby="feedback-modal-description"
+        className="ws-feedback-modal"
+      >
+        <ModalBody tabIndex="0" id="feedback-modal-description">
+          <iframe 
+            src="https://www.feedback.redhat.com/jfe/form/SV_9MKBjq8H7muINMy" 
+            title="Give PatternFly feedback"
+            className="ws-feedback-iframe"
+          ></iframe>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};

package/components/index.js

@@ -10,4 +10,5 @@ export * from './topNav/topNav';
 export * from './link/link';
 export * from './tableOfContents/tableOfContents';
 export * from './inlineAlert/inlineAlert';
-export * from './themeSelector/themeSelector';
+export * from './themeSelector/themeSelector';
+export * from './feedbackButton/feedbackButton';

package/components/themeSelector/themeSelector.js

@@ -84,6 +84,7 @@ export const ThemeSelector = ({ id }) => {
         return DesktopIcon;
     }
   };
+
   return (
     <Select
       id={id}
@@ -116,6 +117,7 @@ export const ThemeSelector = ({ id }) => {
           </SelectOption>
         </SelectList>
       </SelectGroup>
+      {process.env.hasHighContrastSwitcher && (<>
       <Divider />
       <SelectGroup label="High Contrast">
         <MenuSearch>
@@ -143,6 +145,8 @@ export const ThemeSelector = ({ id }) => {
           </MenuSearchInput>
         </MenuSearch>
       </SelectGroup>
+      </>
+      )}
     </Select>
   );
 };

package/hooks/useTheme.js

@@ -39,7 +39,8 @@ class ThemeManager {
     if (!this.isBrowser) {
       return;
     }
-    return localStorage.getItem(this.storageKey);
+    const storedValue = localStorage.getItem(this.storageKey);
+    return storedValue || this.defaultMode;
   }
 
   setStoredValue(value) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.19.0",
+  "version": "6.21.0",
   "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.266",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.268",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "10.4.19",
     "babel-loader": "^9.1.3",
@@ -87,5 +87,5 @@
     "braces": ">=3.0.3",
     "ssri": ">=8.0.1"
   },
-  "gitHead": "60954ecaf27cf8c2449a5284f3991bc3059870d7"
+  "gitHead": "5569289688e8b1f4742359cb5879631cc85169d1"
 }

package/scripts/webpack/webpack.base.config.js

@@ -13,7 +13,9 @@ module.exports = (_env, argv) => {
     hasVersionSwitcher = false,
     hasDesignGuidelines = false,
     hasThemeSwitcher = false,
+    hasHighContrastSwitcher = false,
     hasRTLSwitcher = false,
+    hasFeedbackButton = false,
     componentsData = {},
     sideNavItems = [],
     topNavItems = [],
@@ -142,7 +144,9 @@ module.exports = (_env, argv) => {
         'process.env.hasVersionSwitcher': JSON.stringify(hasVersionSwitcher),
         'process.env.hasDesignGuidelines': JSON.stringify(hasDesignGuidelines),
         'process.env.hasThemeSwitcher': JSON.stringify(hasThemeSwitcher),
+        'process.env.hasHighContrastSwitcher': JSON.stringify(hasHighContrastSwitcher),
         'process.env.hasRTLSwitcher': JSON.stringify(hasRTLSwitcher),
+        'process.env.hasFeedbackButton': JSON.stringify(hasFeedbackButton),
         'process.env.componentsData': JSON.stringify(componentsData),
         'process.env.sideNavItems': JSON.stringify(sideNavItems),
         'process.env.topNavItems': JSON.stringify(topNavItems),

package/templates/mdx.js

@@ -18,7 +18,7 @@ import {
 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';
-import { CSSVariables, PropsTable, TableOfContents, Link, AutoLinkHeader, InlineAlert } from '../components';
+import { CSSVariables, PropsTable, TableOfContents, Link, AutoLinkHeader, InlineAlert, FeedbackButton } from '../components';
 import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
 import './mdx.css';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
@@ -167,6 +167,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
 };
 
 export const MDXTemplate = ({ title, sources = [], path, id, componentsData }) => {
+  const hasFeedbackButton = process.env.hasFeedbackButton;
   const isDeprecated =
     sources.some((source) => source.source === 'react-deprecated' || source.source === 'html-deprecated') &&
     !sources.some((source) => source.source === 'react' || source.source === 'html');
@@ -339,6 +340,7 @@ export const MDXTemplate = ({ title, sources = [], path, id, componentsData }) =
           )}
         </PageSection>
         <BackToTop className="ws-back-to-top" scrollableSelector="#ws-page-main" />
+        {hasFeedbackButton && <FeedbackButton />}
       </PageGroup>
     </React.Fragment>
   );