@patternfly/documentation-framework 5.2.26 → 5.3.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.
 
+## 5.3.1 (2023-11-07)
+
+
+### Bug Fixes
+
+* **react-drag-drop:** add react-drag-drop to latest version ([#3801](https://github.com/patternfly/patternfly-org/issues/3801)) ([bbf20d4](https://github.com/patternfly/patternfly-org/commit/bbf20d4406303441a534c5fc9bd4667f72e55850))
+
+
+
+
+
+# 5.3.0 (2023-11-01)
+
+
+### Features
+
+* **dark-theme:** replace dark theme switcher with toggle group ([#3788](https://github.com/patternfly/patternfly-org/issues/3788)) ([0bf3c62](https://github.com/patternfly/patternfly-org/commit/0bf3c62484bc288386a9620fcb89c38da5d260af))
+
+
+
+
+
 ## 5.2.26 (2023-10-30)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/layouts/sideNavLayout/sideNavLayout.css

@@ -42,3 +42,9 @@
   --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--100);
 }
+
+.ws-masthead .pf-v5-c-toggle-group {
+  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-400);
+  --pf-v5-c-toggle-group__button--focus--BackgroundColor: transparent;
+  --pf-v5-c-toggle-group__button--hover--BackgroundColor: transparent;
+}

package/layouts/sideNavLayout/sideNavLayout.js

@@ -10,6 +10,7 @@ import {
   DropdownGroup,
   DropdownList,
   Divider,
+  Icon,
   Masthead,
   MastheadToggle,
   MastheadMain,
@@ -23,10 +24,14 @@ import {
   ToolbarItem,
   SkipToContent,
   Switch,
-  SearchInput
+  SearchInput,
+  ToggleGroup,
+  ToggleGroupItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
+import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
+import SunIcon from '@patternfly/react-icons/dist/esm/icons/sun-icon';
 import { SideNav, TopNav, GdprBanner } from '../../components';
 import staticVersions from '../../versions.json';
 import v5Logo from '../PF-HorizontalLogo-Reverse.svg';
@@ -50,6 +55,7 @@ const HeaderTools = ({
   const [isDropdownOpen, setDropdownOpen] = useState(false);
   const [searchValue, setSearchValue] = React.useState('');
   const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
+  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
 
   const getDropdownItem = (version, isLatest = false) => (
     <DropdownItem itemId={version.name} key={version.name} to={isLatest ? '/' : `/${version.name}`}>
@@ -65,6 +71,12 @@ const HeaderTools = ({
     setIsSearchExpanded(!isSearchExpanded);
   };
 
+  const toggleDarkTheme = (_evt, selected) => {
+    const darkThemeToggleClicked = !selected === isDarkTheme
+    document.querySelector('html').classList.toggle('pf-v5-theme-dark', darkThemeToggleClicked);
+    setIsDarkTheme(darkThemeToggleClicked);
+  };
+
   useEffect(() => {
     // reattach algolia to input each time search is expanded
     if (hasSearch && isSearchExpanded) {
@@ -86,8 +98,10 @@ const HeaderTools = ({
         >
           {hasDarkThemeSwitcher && (
             <ToolbarItem>
-              <Switch id="ws-theme-switch" label="Dark theme" defaultChecked={false} onChange={() =>
-                document.querySelector('html').classList.toggle('pf-v5-theme-dark')} />
+                <ToggleGroup aria-label="Dark theme toggle group">
+                  <ToggleGroupItem aria-label="light theme toggle" icon={<Icon size="md"><SunIcon /></Icon>} isSelected={!isDarkTheme} onChange={toggleDarkTheme} />
+                  <ToggleGroupItem aria-label="dark theme toggle" icon={<Icon size="md"><MoonIcon /></Icon>} isSelected={isDarkTheme} onChange={toggleDarkTheme} />
+                </ToggleGroup>
             </ToolbarItem>
           )}
           {hasRTLSwitcher && (

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "5.2.26",
+  "version": "5.3.1",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -17,7 +17,7 @@
     "@babel/plugin-transform-react-jsx": "7.17.12",
     "@babel/preset-env": "7.18.2",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.2.26",
+    "@patternfly/ast-helpers": "^1.3.1",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
     "babel-loader": "9.1.2",
@@ -87,5 +87,5 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "7eb15ac41be70c983a914eaed7805d9b2dd08870"
+  "gitHead": "87583d31a161c8cbda53256bbc8500db2c5c0c2d"
 }

package/versions.json

@@ -33,6 +33,7 @@
         "@patternfly/react-icons": "5.0.0",
         "@patternfly/react-styles": "5.0.0",
         "@patternfly/react-table": "5.0.0",
+        "@patternfly/react-drag-drop": "5.0.0-alpha.0",
         "@patternfly/react-tokens": "5.0.0",
         "@patternfly/react-catalog-view-extension": "5.0.0",
         "@patternfly/react-console": "5.0.0",