feat(high contrast): add border to some hover states #91

srambach · 2025-10-23T19:31:57Z

Fixes #87

Adds a high contrast border on a pseudoelement for filter side panel and vertical tabs when hovered.

Will need PatternFly 6.4 for the high contrast tokens.
Since there is no theme switcher, add pf-v6-theme-high-contrast to the html tag to trigger high contrast mode.

srambach · 2025-10-24T13:44:59Z

The build for this is failing, and cursor says

"The error indicates that your project is configured to use Yarn 4.5.3 (as specified in the packageManager field), but the CI environment is using Yarn 1.22.22. The solution is to enable Corepack, which manages package manager versions automatically."

and recommends adding

name: Enable Corepack
run: corepack enable

before running yarn install --frozen-lockfile
Can someone advise? @nicole, @wise-king-sullyman ?

thatblindgeye

This should be good to rebase after a PR for workflows was merged in. Just a note below.

thatblindgeye · 2025-10-28T19:15:07Z

packages/module/package.json

+    "@patternfly/react-core": "^6.4.0",
+    "@patternfly/react-styles": "^6.4.0"


Nicole had suggested I try keeping the patternfly versions in extensions as what they were, and just updating the docs framework version to the latest (6.28.9). We could try that here so that at least the docs build will allow showing the high contrast styles.

We would also probably want to add to the patternfly-docs.config.js file the following to get the switchers showing up and make it easier to test HC styles:

hasThemeSwitcher: true, hasHighContrastSwitcher: true

patternfly-build · 2025-10-29T13:56:27Z

Preview: https://catalog-view-pr-catalog-view-91.surge.sh

A11y report: https://catalog-view-pr-catalog-view-91-a11y.surge.sh

lboehling · 2025-10-29T20:46:46Z

The vertical tabs look good in high contrast, but i'm seeing some additional hover states being applied to the filters in this PR. I don't think we need the bkg color/high contrast border on the filter checkbox items. otherwise this looks good!

srambach · 2025-10-30T13:21:46Z

packages/module/sass/react-catalog-view-extension/_filter-side-panel.scss


  &:hover {
    background-color: var(--pf-t--global--background--color--action--plain--hover);
-  }


@lboehling @thatblindgeye I didn't add the hover background, just the outline. Git blame points to a change by @nicolethoen - anyone know why this was added?

There is this issue that might handle this: #88

So it looks like maybe it was applied to the filter side panel by accident and was only meant to be the vertical tabs?
#73 comments talk about a hover background on vertical tabs but it was also applied to the filter side panel, perhaps erroneously?

srambach · 2025-11-19T16:29:42Z

@thatblindgeye IDK if I still need to revert some of the dependency stuff or not?
Also I'm a little confused about the packages/module/src/components/react-catalog-view-extension.css file and whether it's actually needed or not.

mcoker

Just one change por favor. Also want to double check that this visual diff looks OK. From what I see, this change:

Indents the entire list so that the blue line is not flush-left with the left edge of the container.
- Before
- After
Reduces the padding around the nav link/box. That makes the layout space a bit more compact. It also changes the link padding so that it matches the height of the blue accent, instead of being taller than the accent.
Moves the blue accent outside of the link box
- Before
- After

mcoker · 2025-12-03T20:19:31Z

packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss

+      bottom: 0;
+      border-width: var(--pf-t--global--border--width--high-contrast--regular);
+      border-style: solid;
+      border-color: transparent;


Just a nit, we can use the action-plain border width token and change it for :hover below

Suggested change

border-color: transparent;

inset: 0;

border: var(--pf-t--global--border--width--action--plain--default) solid var(--pf-t--global--border--color--high-contrast);

mcoker · 2025-12-03T20:20:52Z

packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss

      text-decoration: none;
+
+      &::after {
+        border-color: var(--pf-t--global--border--color--high-contrast);


Suggested change

border-color: var(--pf-t--global--border--color--high-contrast);

border-width: var(--pf-t--global--border--width--action--plain--hover);

srambach · 2025-12-04T14:23:06Z

Just one change por favor. Also want to double check that this visual diff looks OK. From what I see, this change:

For clarity - what you see in this PR should hopefully match what you currently see on https://www.patternfly.org/extensions/catalog-view/vertical-tabs There's a whole bunch of custom styling done on .org that's now in the extension.

mcoker

LGTM!

mcoker

Oops just noticed a small bug. The links are currently wider than the container because they have width: 100% and an inline margin. I replaced width: 100% with display: block and it seemed to address it? You can see it's causing a horizontal scrollbar in the screenshot below.

mcoker · 2025-12-04T23:59:24Z

@thatblindgeye @lboehling just want to double check that this PR will introduce a few changes.

More compact padding/spacing so the list takes up less space overall
Font size of the links/tabs changes from 13px to match whatever the body font size is (probably 14px)
The blue accent is now always beside the tab text, it's most visible when your current tab is indented.

Here are some screenshots

Before:

After:

thatblindgeye

I think the above changes are probably mostly fine, just wondering if the accent being indented along with nested items will be an issue for consumers/other designers who may prefer the accent being consistently placed along the left-most edge of the container.

Maybe we don't change anything for now, but do we think it'd be an easy lift if we have to come back to maybe make that aspect an opt-in?

srambach · 2025-12-16T14:30:49Z

I don't think it would be hard since it was like that minus the .org styling - this is how it appears on .org now since there was local styling applied for whatever reason.

github-actions · 2025-12-17T17:59:54Z

🎉 This PR is included in version 6.3.0-prerelease.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

srambach added 2 commits October 23, 2025 15:27

feat(high contrast): add border to some hover states

69dbd1a

feat(high contrast): update PF version

a54b4a3

thatblindgeye reviewed Oct 28, 2025

View reviewed changes

feat(high contrast): adjust versions used and enable switcher

c196cd7

srambach requested a review from thatblindgeye October 29, 2025 13:57

thatblindgeye approved these changes Oct 29, 2025

View reviewed changes

srambach commented Oct 30, 2025

View reviewed changes

srambach assigned srambach and unassigned srambach Oct 30, 2025

feat(high contrast): remove bg on filter, fix styles on props side panel

b705114

srambach requested a review from thatblindgeye November 19, 2025 16:26

mcoker reviewed Dec 4, 2025

View reviewed changes

srambach added 3 commits December 4, 2025 09:30

feat(high contrast): use hc tokens

9e794ed

feat(high contrast): fix indentation

5d3c295

feat(high contrast): remove comments

b1fdfc5

mcoker approved these changes Dec 4, 2025

View reviewed changes

mcoker reviewed Dec 4, 2025

View reviewed changes

feat(high contrast): fix horizontal scroll

43eb2ba

thatblindgeye approved these changes Dec 16, 2025

View reviewed changes

mcoker mentioned this pull request Dec 17, 2025

High contrast theme - extensions+charts patternfly/patternfly#7724

Open

24 tasks

mcoker merged commit 0e5884c into patternfly:main Dec 17, 2025
5 checks passed

github-actions bot added the released on @prerelease label Dec 17, 2025

		"@patternfly/react-core": "^6.4.0",
		"@patternfly/react-styles": "^6.4.0"

	border-color: transparent;
	inset: 0;
	border: var(--pf-t--global--border--width--action--plain--default) solid var(--pf-t--global--border--color--high-contrast);

	border-color: var(--pf-t--global--border--color--high-contrast);
	border-width: var(--pf-t--global--border--width--action--plain--hover);

feat(high contrast): add border to some hover states #91

feat(high contrast): add border to some hover states #91

Conversation

srambach commented Oct 23, 2025

Uh oh!

srambach commented Oct 24, 2025

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

thatblindgeye Oct 28, 2025

Choose a reason for hiding this comment

Uh oh!

patternfly-build commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lboehling commented Oct 29, 2025

Uh oh!

srambach Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

thatblindgeye Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

srambach Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

srambach commented Nov 19, 2025

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

mcoker Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

srambach commented Dec 4, 2025

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker left a comment

Choose a reason for hiding this comment

Uh oh!

mcoker commented Dec 4, 2025

Before:

After:

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

srambach commented Dec 16, 2025

Uh oh!

Uh oh!

github-actions bot commented Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

patternfly-build commented Oct 29, 2025 •

edited

Loading

srambach Oct 30, 2025 •

edited

Loading