@patternfly/documentation-framework 6.26.1 → 6.26.3

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.26.3 (2025-10-09)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 6.26.2 (2025-10-08)
+
+
+### Bug Fixes
+
+* enable HC switcher, add beta label ([#4766](https://github.com/patternfly/patternfly-org/issues/4766)) ([bdcd2b8](https://github.com/patternfly/patternfly-org/commit/bdcd2b80a0939ae8362d8ebcd4d14f79ef0c1831))
+
+
+
+
+
 ## 6.26.1 (2025-10-08)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/components/autoLinkHeader/autoLinkHeader.css

@@ -7,8 +7,20 @@
   transform: translate(calc(-100% - var(--pf-t--global--spacer--xs)), -50%);
   opacity: 0;
   position: absolute;
+  display: flex;
   left: 0;
   top: 50%;
+  background: none;
+  border: none;
+  padding: 0;
+  tab-index: -1;
+}
+
+.ws-heading-anchor::before {
+  content: ''; 
+  position: absolute;
+  inset: 0;
+  margin: calc(var(--pf-t--global--spacer--xs) * -1);
 }
 
 .ws-heading-anchor-icon {

package/components/autoLinkHeader/autoLinkHeader.js

@@ -1,7 +1,6 @@
-import React from 'react';
-import { Flex, FlexItem, Content } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { Flex, FlexItem, Content, Tooltip } 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';
 
@@ -13,6 +12,15 @@ export const AutoLinkHeader = ({
   className
 }) => {
   const slug = id || slugger(children);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyUrl = (e) => {
+    e.preventDefault();
+    const url = `${window.location.origin}${window.location.pathname}#${slug}`;
+    navigator.clipboard.writeText(url).then(() => {
+      setCopied(true);
+    });
+  };
 
   return (
     <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: "spaceItemsSm" }}>
@@ -24,9 +32,21 @@ export const AutoLinkHeader = ({
           tabIndex={-1}
           isEditorial
         >
-          <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
-            <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
-          </Link>
+          <Tooltip
+            content={copied ? "Link copied" : "Copy link to clipboard"}
+            exitDelay={copied ? 1600 : 300}
+            onTooltipHidden={() => setCopied(false)}
+          >
+            <button 
+              onClick={handleCopyUrl}
+              className="ws-heading-anchor" 
+              tabIndex="-1" 
+              aria-hidden
+              aria-label={`Copy link to ${children}`}
+            >
+              <LinkIcon className="ws-heading-anchor-icon" />
+            </button>
+          </Tooltip>
           {children}
         </Content>
       </FlexItem>

package/components/themeSelector/themeSelector.js

@@ -10,8 +10,12 @@ import {
   ToggleGroup,
   ToggleGroupItem,
   Icon,
-  Divider
+  Divider,
+  Label,
+  Popover,
+  Button
 } from '@patternfly/react-core';
+import { HelpIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { useTheme, THEME_TYPES } from '../../hooks/useTheme';
 
 const SunIcon = (
@@ -45,6 +49,47 @@ const DesktopIcon = (
   </svg>
 );
 
+const ColorSchemeGroupLabel = () => {
+  return (
+    <div className="pf-v6-c-menu__group-title" id="theme-selector-color-scheme-title">
+      Color scheme
+    </div>
+  );
+};
+
+const HighContrastGroupLabel = () => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  return (
+    <div className="pf-v6-c-menu__group-title">
+      High contrast{' '}
+      <Popover
+        onClick={(e) => e.stopPropagation()}
+        headerContent={"Under development"}
+        headerComponent="h1"
+        bodyContent={
+          "We are still working to add high contrast support across all PatternFly components and extensions. This beta allows you to preview our progress."
+        }
+        footerContent={
+          <Button icon={<ExternalLinkAltIcon />} component="a" isInline variant="link" href="/design-foundations/theming" target="_blank">
+            Learn more
+          </Button>
+        }
+        aria-label="More info about high contrast"
+        appendTo={() => document.body}
+      >
+        <Button
+          variant="plain"
+          hasNoPadding
+          icon={<HelpIcon />}
+          aria-label="High contrast help"
+        />
+      </Popover>{' '}&nbsp;
+      <Label color="blue" isCompact>Beta</Label>
+    </div>
+  )
+};
+
 export const ThemeSelector = ({ id }) => {
   const { mode: themeMode, setMode: setThemeMode, modes: colorModes } = useTheme(THEME_TYPES.COLOR);
   const {
@@ -109,8 +154,8 @@ export const ThemeSelector = ({ id }) => {
         preventOverflow: true
       }}
     >
-      <SelectGroup>
-        <SelectList aria-label="Light/Dark theme switcher">
+      <SelectGroup label={ColorSchemeGroupLabel}>
+        <SelectList aria-labelledby="theme-selector-color-scheme-title">
           <SelectOption value={colorModes.SYSTEM} icon={DesktopIcon} description="Follow system preference">
             System
           </SelectOption>
@@ -124,7 +169,7 @@ export const ThemeSelector = ({ id }) => {
       </SelectGroup>
       {process.env.hasHighContrastSwitcher && (<>
       <Divider />
-      <SelectGroup label="High Contrast">
+      <SelectGroup label={HighContrastGroupLabel}>
         <MenuSearch>
           <MenuSearchInput>
             <ToggleGroup aria-label="High contrast theme switcher">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.26.1",
+  "version": "6.26.3",
   "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.286",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.288",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "10.4.19",
     "babel-loader": "^9.1.3",
@@ -95,5 +95,5 @@
     "http-cache-semantics": ">=4.1.1",
     "nanoid": "3.3.8"
   },
-  "gitHead": "175a84c791db0f38f04dd6c9bf323066f3621ded"
+  "gitHead": "e82225dc040a0e72d930004a05587785ce5227a4"
 }