Skip to content

fix(tabs): add side borders to selected box tab in high contrast - #7809

Merged
mcoker merged 3 commits into
patternfly:mainfrom
srambach:7798-box-tab-inline-border-hi-c
Sep 9, 2025
Merged

mcoker merged 3 commits into
patternfly:mainfrom
srambach:7798-box-tab-inline-border-hi-c

Conversation

@srambach

@srambach srambach commented Sep 8, 2025

Copy link
Copy Markdown
Member

Fixes #7798

NOTE: This exposes that the current tab decorator (blue line) is 1px too long on the left side. It comes from line 110, and I think this could be removed along with a couple of other lines - it will break visual regression tests but is also technically a bug fix. I have NOT included it here until confirmation that it's truly not needed and we want to make the change.

--#{$tabs}__link--before--InsetInlineStart: calc(var(--#{$tabs}__link--before--border-width--base) * -1);

image

@srambach
srambach requested review from lboehling and mcoker September 8, 2025 18:37
@patternfly-build

patternfly-build commented Sep 8, 2025 •

Copy link
Copy Markdown
Collaborator

@mcoker mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one thing por favor

Comment on lines +318 to +321
--#{$tabs}__link--before--BorderInlineStartColor: var(--#{$tabs}__link--m-current--before--BorderInlineStartColor);
--#{$tabs}__link--before--BorderInlineStartWidth: var(--#{$tabs}__link--m-current--before--BorderInlineStartWidth);
--#{$tabs}__link--before--BorderInlineEndColor: var(--#{$tabs}__link--m-current--before--BorderInlineEndColor);
--#{$tabs}__link--before--BorderInlineEndWidth: var(--#{$tabs}__link--m-current--before--BorderInlineEndWidth);

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you put --m-box in front of these? The vars before them are set to --m-box vars but for whatever reason they're declared above and down here...

https://github.com/srambach/patternfly/blob/3d9bacdc8d904c43f49fe7bb9913c37848b80c71/src/patternfly/components/Tabs/tabs.scss#L293

@mcoker mcoker left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

L🗂️TM!

@mcoker
mcoker merged commit 42c8739 into patternfly:main Sep 9, 2025
4 checks passed
@patternfly-build

Copy link
Copy Markdown
Collaborator

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

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug - Tabs - add inline high contrast borders to box tabs

3 participants