From 209c90066e730e9229e186c06b802ead7de8ed6b Mon Sep 17 00:00:00 2001 From: mcoker Date: Tue, 2 Sep 2025 20:01:03 -0500 Subject: [PATCH 1/6] fix: enable HC switcher, add beta label --- .../components/themeSelector/themeSelector.js | 11 +++++++++-- .../patternfly-docs/patternfly-docs.config.js | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/documentation-framework/components/themeSelector/themeSelector.js b/packages/documentation-framework/components/themeSelector/themeSelector.js index 39f9166922..e2d283bcf3 100644 --- a/packages/documentation-framework/components/themeSelector/themeSelector.js +++ b/packages/documentation-framework/components/themeSelector/themeSelector.js @@ -10,7 +10,8 @@ import { ToggleGroup, ToggleGroupItem, Icon, - Divider + Divider, + Label } from '@patternfly/react-core'; import { useTheme, THEME_TYPES } from '../../hooks/useTheme'; @@ -45,6 +46,12 @@ const DesktopIcon = ( ); +const HCGroupLabel = () => { + return ( +

High contrast  

+ ) +}; + export const ThemeSelector = ({ id }) => { const { mode: themeMode, setMode: setThemeMode, modes: colorModes } = useTheme(THEME_TYPES.COLOR); const { @@ -124,7 +131,7 @@ export const ThemeSelector = ({ id }) => { {process.env.hasHighContrastSwitcher && (<> - + diff --git a/packages/documentation-site/patternfly-docs/patternfly-docs.config.js b/packages/documentation-site/patternfly-docs/patternfly-docs.config.js index 19eb0c0809..b1f7f77705 100644 --- a/packages/documentation-site/patternfly-docs/patternfly-docs.config.js +++ b/packages/documentation-site/patternfly-docs/patternfly-docs.config.js @@ -31,7 +31,7 @@ if (process.env.EXTENSIONS_ONLY === 'true') { hasDesignGuidelines: true, hasThemeSwitcher: true, hasFeedbackButton: true, - hasHighContrastSwitcher: false, + hasHighContrastSwitcher: true, componentsData, sideNavItems: [ { section: 'get-started' }, From 22170f87c2549c1d6bd43e49a8884a9db3660fb5 Mon Sep 17 00:00:00 2001 From: mcoker Date: Mon, 15 Sep 2025 19:40:23 -0500 Subject: [PATCH 2/6] chore: add labels, popover to theme switcher --- .../components/themeSelector/themeSelector.js | 39 +++++++++++++++++-- 1 file changed, 36 insertions(+), 3 deletions(-) diff --git a/packages/documentation-framework/components/themeSelector/themeSelector.js b/packages/documentation-framework/components/themeSelector/themeSelector.js index e2d283bcf3..cb1034eb4e 100644 --- a/packages/documentation-framework/components/themeSelector/themeSelector.js +++ b/packages/documentation-framework/components/themeSelector/themeSelector.js @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import { + Content, Select, SelectGroup, SelectList, @@ -11,8 +12,11 @@ import { ToggleGroupItem, Icon, Divider, - Label + Label, + Popover, + Button } from '@patternfly/react-core'; +import { HelpIcon, ExternalLinkAltIcon } from '@patternfly/react-icons'; import { useTheme, THEME_TYPES } from '../../hooks/useTheme'; const SunIcon = ( @@ -47,8 +51,37 @@ const DesktopIcon = ( ); const HCGroupLabel = () => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + return ( -

High contrast  

+

+ High contrast{' '} + } component="a" isInline variant="link" href="https://medium.com/patternfly" target="_blank"> + Learn more (replace with link to blog post) + + } + isVisible={isPopoverOpen} + shouldClose={() => setIsPopoverOpen(false)} + aria-label="More info about high contrast" + appendTo={() => document.body} + > +

) }; @@ -116,7 +149,7 @@ export const ThemeSelector = ({ id }) => { preventOverflow: true }} > - + System From c03ab806cc6babcb2c176870a7516789259da6b0 Mon Sep 17 00:00:00 2001 From: mcoker Date: Tue, 16 Sep 2025 11:38:21 -0500 Subject: [PATCH 3/6] chore: theme selector updates --- .../components/themeSelector/themeSelector.js | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/documentation-framework/components/themeSelector/themeSelector.js b/packages/documentation-framework/components/themeSelector/themeSelector.js index cb1034eb4e..1e9051fd36 100644 --- a/packages/documentation-framework/components/themeSelector/themeSelector.js +++ b/packages/documentation-framework/components/themeSelector/themeSelector.js @@ -50,15 +50,24 @@ const DesktopIcon = ( ); -const HCGroupLabel = () => { +const ColorSchemeGroupLabel = () => { + return ( +
+ Color scheme +
+ ); +}; + +const HighContrastGroupLabel = () => { const [isPopoverOpen, setIsPopoverOpen] = useState(false); return ( -

+
High contrast{' '} e.stopPropagation()} headerContent={"Under development"} - headerComponent="h3" + 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." } @@ -67,8 +76,6 @@ const HCGroupLabel = () => { Learn more (replace with link to blog post) } - isVisible={isPopoverOpen} - shouldClose={() => setIsPopoverOpen(false)} aria-label="More info about high contrast" appendTo={() => document.body} > @@ -76,12 +83,11 @@ const HCGroupLabel = () => { variant="plain" hasNoPadding icon={} - onClick={() => setIsPopoverOpen(!isPopoverOpen)} aria-label="High contrast help" /> {' '}  -

+ ) }; @@ -149,8 +155,8 @@ export const ThemeSelector = ({ id }) => { preventOverflow: true }} > - - + + System @@ -164,7 +170,7 @@ export const ThemeSelector = ({ id }) => { {process.env.hasHighContrastSwitcher && (<> - + From 57004d34c7834ee6efa9ecc85e22beb1e17063a1 Mon Sep 17 00:00:00 2001 From: mcoker Date: Tue, 16 Sep 2025 15:58:58 -0500 Subject: [PATCH 4/6] chore: remove unused import --- .../components/themeSelector/themeSelector.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/documentation-framework/components/themeSelector/themeSelector.js b/packages/documentation-framework/components/themeSelector/themeSelector.js index 1e9051fd36..a731e44d7c 100644 --- a/packages/documentation-framework/components/themeSelector/themeSelector.js +++ b/packages/documentation-framework/components/themeSelector/themeSelector.js @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import { - Content, Select, SelectGroup, SelectList, From 89b819d7f80c98f101e98a2154ce7a7d3f409118 Mon Sep 17 00:00:00 2001 From: Michael Coker <35148959+mcoker@users.noreply.github.com> Date: Tue, 30 Sep 2025 13:35:23 -0500 Subject: [PATCH 5/6] Update packages/documentation-framework/components/themeSelector/themeSelector.js Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../components/themeSelector/themeSelector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-framework/components/themeSelector/themeSelector.js b/packages/documentation-framework/components/themeSelector/themeSelector.js index a731e44d7c..2ccee65ae4 100644 --- a/packages/documentation-framework/components/themeSelector/themeSelector.js +++ b/packages/documentation-framework/components/themeSelector/themeSelector.js @@ -71,7 +71,7 @@ const HighContrastGroupLabel = () => { "We are still working to add high contrast support across all PatternFly components and extensions. This beta allows you to preview our progress." } footerContent={ - } From 0816d83f8201ec896578b3da62a5a0500571887a Mon Sep 17 00:00:00 2001 From: Michael Coker <35148959+mcoker@users.noreply.github.com> Date: Tue, 30 Sep 2025 13:35:29 -0500 Subject: [PATCH 6/6] Update packages/documentation-framework/components/themeSelector/themeSelector.js Co-authored-by: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> --- .../components/themeSelector/themeSelector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation-framework/components/themeSelector/themeSelector.js b/packages/documentation-framework/components/themeSelector/themeSelector.js index 2ccee65ae4..d57de7f333 100644 --- a/packages/documentation-framework/components/themeSelector/themeSelector.js +++ b/packages/documentation-framework/components/themeSelector/themeSelector.js @@ -72,7 +72,7 @@ const HighContrastGroupLabel = () => { } footerContent={ } aria-label="More info about high contrast"