Skip to content

fix(vertical tabs): update with unified tokens #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mcoker merged 5 commits into from
Jun 24, 2026
Merged

fix(vertical tabs): update with unified tokens #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
05db76c
update scss import to use
jcmill Jun 8, 2026
2199e5b
update indicator background color, border radius, and animation, upda…
jcmill Jun 9, 2026
ccde457
version bumps
jcmill Jun 9, 2026
8c1cc83
test update with new snapshots
jcmill Jun 9, 2026
1021b3f
update 3px to suggested token, update text color based on state
jcmill Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions packages/module/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,20 +41,20 @@
"patternfly"
],
"dependencies": {
"@patternfly/react-core": "^6.1.0",
"@patternfly/react-styles": "^6.1.0"
"@patternfly/react-core": "^6.5.1",
"@patternfly/react-styles": "^6.5.1"
},
"peerDependencies": {
"react": "^17 || ^18 || ^19",
"react-dom": "^17 || ^18 || ^19"
},
"devDependencies": {
"@octokit/rest": "^18.0.0",
"@patternfly/documentation-framework": "6.28.9",
"@patternfly/patternfly": "^6.1.0",
"@patternfly/documentation-framework": "6.44.0",
"@patternfly/patternfly": "^6.5.2",
"@patternfly/patternfly-a11y": "^4.3.1",
"@patternfly/react-code-editor": "^6.1.0",
"@patternfly/react-table": "^6.1.0",
"@patternfly/react-code-editor": "^6.5.1",
"@patternfly/react-table": "^6.5.1",
"monaco-editor": "0.34.1",
"react-monaco-editor": "0.51.0",
"rimraf": "^2.6.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/module/sass/react-catalog-view-extension.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
// Extensions StyleSheets
@import './react-catalog-view-extension/react-catalog-view-extension';
@use './react-catalog-view-extension/react-catalog-view-extension' as *;
12 changes: 6 additions & 6 deletions packages/module/sass/react-catalog-view-extension/_react-catalog-view-extension.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/**
Patternfly React Extensions Partials
*/
@import 'variables';
@import 'catalog-item';
@import 'catalog-tile';
@import 'vertical-tabs';
@import 'properties-side-panel';
@import 'filter-side-panel';
@use 'variables' as *;
@use 'catalog-item' as *;
@use 'catalog-tile' as *;
@use 'vertical-tabs' as *;
@use 'properties-side-panel' as *;
@use 'filter-side-panel' as *;
34 changes: 25 additions & 9 deletions packages/module/sass/react-catalog-view-extension/_vertical-tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,30 @@
margin-inline-start: var(--pf-t--global--spacer--md);

@nicolethoen nicolethoen Jun 18, 2026

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.

Looking at the figma file, the gap between the accent color and the nav item is smaller than it appears in the preview. I think this is supposed to be a small spacer.

Image

@jcmill jcmill Jun 22, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

@andrew-ronaldson, I can see the difference Nicole is pointing out but could you clarify? In the dev notes I'm seeing a calc(spacer-md - 3px) (3px currently = --pf-t--global--border--width--extra-strong) between the indicator and where the padding starts for the a tag. Then the padding around the text for the a tag is set to top/bottom spacer-xs and left/right spacer md.

@andrew-ronaldson andrew-ronaldson Jun 23, 2026

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.

The way you have the spacing aligns with the visual presentation of vertical Tabs component just implemented differently. Dropping down to a small makes a 5px gap and that feels too narrow. We could change the accent to be outset of the container but then it has a negative margin and messes with left alignment. I think this is fine as you have it and we can tinker more as needed.

}

&::before {
background: var(--pf-t--global--color--brand--accent--default);
border-radius: var(--pf-t--global--border--radius--pill);
content: "\00a0"; //  
inset-inline-start: 0;
inset-block-start: var(--pf-t--global--spacer--xs);
position: absolute;
width: var(--pf-t--global--border--width--extra-strong);
pointer-events: none;
transition-timing-function: var(--pf-t--global--motion--timing-function--decelerate);
transition-duration: 0ms;
transition-property: scale;
scale: 1 0;
}

> a {
color: var( --pf-t--global--text--color--regular);
color: var( --pf-t--global--text--color--subtle);

@mcoker mcoker Jun 10, 2026

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 want to make sure this was confirmed in design? It matches figma, but wasn't called out as a change to make. Also figma uses the default text color for the active/selected tab state, so if we would want to confirm that if we make this change, too.

@jcmill jcmill Jun 11, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Got more info from Design on this and updated for default to be subtle and hover/active to be default.

text-decoration: none;
display: block;
margin-inline-start: var(--pf-t--global--spacer--md);
margin-inline-start: calc(var(--pf-t--global--spacer--md) - var(--pf-t--global--border--width--extra-strong));
padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--sm);
vertical-align: top;
word-break: break-word;
border-radius: var(--pf-t--global--border--radius--small);
border-radius: var(--pf-t--global--border--radius--action--plain--default);
position: relative;

&::after {
Expand All @@ -40,6 +55,7 @@

&:hover,
&:focus {
color: var( --pf-t--global--text--color--regular);
background-color: var(--pf-t--global--background--color--action--plain--hover);
text-decoration: none;

Expand All @@ -62,13 +78,13 @@
}

&.active {
> a {
color: var( --pf-t--global--text--color--regular);
}

&::before {
background: var( --pf-t--global--border--color--brand--clicked);
content: "\00a0"; //  
inset-inline-start: 0;
inset-block-start: var(--pf-t--global--spacer--xs);
position: absolute;
width: var(--pf-t--global--border--width--extra-strong);
transition-duration: var(--pf-t--global--motion--duration--fade--default);
scale: 1 1;
}
}

Expand Down
4 changes: 2 additions & 2 deletions ...ges/module/src/components/CatalogItemHeader/__snapshots__/CatalogItemHeader.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ exports[`simple catalog item header 1`] = `
>
<h1
class="pf-v6-c-title pf-m-h1 catalog-item-header-pf-title"
data-ouia-component-id="OUIA-Generated-Title-1"
data-ouia-component-id="OUIA-Generated-Title-:r0:"
data-ouia-component-type="PF6/Title"
data-ouia-safe="true"
>
PatternFly
</h1>
<p
class="pf-v6-c-content--p catalog-item-header-pf-subtitle"
data-ouia-component-id="OUIA-Generated-Content-1"
data-ouia-component-id="OUIA-Generated-Content-:r1:"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
Expand Down
92 changes: 70 additions & 22 deletions packages/module/src/components/CatalogTile/__snapshots__/CatalogTile.test.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 25 additions & 13 deletions ...module/src/components/PropertiesSidePanel/__snapshots__/PropertiesSidePanel.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ exports[`PropertiesSidePanel renders properly 1`] = `
>
<h5
class="pf-v6-c-content--h5 properties-side-panel-pf-property-label"
data-ouia-component-id="OUIA-Generated-Content-2"
data-ouia-component-id="OUIA-Generated-Content-:r1:"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
Expand All @@ -28,7 +28,7 @@ exports[`PropertiesSidePanel renders properly 1`] = `
>
<h5
class="pf-v6-c-content--h5 properties-side-panel-pf-property-label"
data-ouia-component-id="OUIA-Generated-Content-3"
data-ouia-component-id="OUIA-Generated-Content-:r2:"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
Expand Down Expand Up @@ -62,7 +62,7 @@ exports[`PropertiesSidePanel renders properly 1`] = `
>
<h5
class="pf-v6-c-content--h5 properties-side-panel-pf-property-label"
data-ouia-component-id="OUIA-Generated-Content-4"
data-ouia-component-id="OUIA-Generated-Content-:r3:"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
Expand All @@ -80,7 +80,7 @@ exports[`PropertiesSidePanel renders properly 1`] = `
>
<h5
class="pf-v6-c-content--h5 properties-side-panel-pf-property-label"
data-ouia-component-id="OUIA-Generated-Content-5"
data-ouia-component-id="OUIA-Generated-Content-:r4:"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
Expand All @@ -98,7 +98,7 @@ exports[`PropertiesSidePanel renders properly 1`] = `
>
<h5
class="pf-v6-c-content--h5 properties-side-panel-pf-property-label"
data-ouia-component-id="OUIA-Generated-Content-6"
data-ouia-component-id="OUIA-Generated-Content-:r5:"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
Expand All @@ -120,7 +120,7 @@ exports[`PropertiesSidePanel renders properly 1`] = `
>
<h5
class="pf-v6-c-content--h5 properties-side-panel-pf-property-label"
data-ouia-component-id="OUIA-Generated-Content-7"
data-ouia-component-id="OUIA-Generated-Content-:r6:"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
Expand All @@ -140,12 +140,24 @@ exports[`PropertiesSidePanel renders properly 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
/>
<svg
class="pf-v6-icon-default"
viewBox="0 0 512 512"
>
<path
d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M28.5 2h-25C2.673 2 2 2.673 2 3.5v25c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-25c0-.827-.673-1.5-1.5-1.5Zm-3.375 17a1.125 1.125 0 0 1-2.25 0v-8.284L11.796 21.795a1.122 1.122 0 0 1-1.592 0 1.127 1.127 0 0 1 0-1.591l11.08-11.08H13a1.125 1.125 0 0 1 0-2.25h10.5c.896 0 1.625.729 1.625 1.625v10.5Z"
/>
</svg>
</svg>
</a>
</div>
Expand All @@ -155,7 +167,7 @@ exports[`PropertiesSidePanel renders properly 1`] = `
>
<h5
class="pf-v6-c-content--h5 properties-side-panel-pf-property-label"
data-ouia-component-id="OUIA-Generated-Content-8"
data-ouia-component-id="OUIA-Generated-Content-:r7:"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
Expand Down Expand Up @@ -188,7 +200,7 @@ exports[`PropertiesSidePanel renders properly 1`] = `
>
<h5
class="pf-v6-c-content--h5 properties-side-panel-pf-property-label"
data-ouia-component-id="OUIA-Generated-Content-9"
data-ouia-component-id="OUIA-Generated-Content-:r8:"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
Expand Down Expand Up @@ -216,7 +228,7 @@ exports[`PropertyItem renders properly 1`] = `
>
<h5
class="pf-v6-c-content--h5 properties-side-panel-pf-property-label"
data-ouia-component-id="OUIA-Generated-Content-1"
data-ouia-component-id="OUIA-Generated-Content-:r0:"
data-ouia-component-type="PF6/Content"
data-ouia-safe="true"
data-pf-content="true"
Expand Down
Loading
Loading