feat(v6): Update to PatternFly V6 Versions #54

jessiehuff · 2024-03-29T14:29:38Z

Closes #51

packages/module/patternfly-docs/content/examples/catalogTile.css

packages/module/sass/react-catalog-view-extension/_catalog-tile.scss

packages/module/patternfly-docs/content/examples/catalogTile.css

andrew-ronaldson · 2024-04-06T10:57:36Z

Here is a link to the Figma mocks.

…ly issues.

packages/module/patternfly-docs/content/examples/FilterSidePanel.md

dlabaj

LGTM @andrew-ronaldson any comments on this pr?

dlabaj · 2024-04-23T15:44:00Z

@jessiehuff Can you add a surge site to this PR?

jessiehuff · 2024-04-23T19:16:59Z

Surge link for preview: https://catalog-view-v6.surge.sh/

mcoker

It looks like the catalog view heading font is rendering oddly (below)... I think it's just the font-weight/size. I can make a suggestion if it's something we want to fix.

The top border on featured tile looks a little odd with the rounded corners. I think that's a question for the design folks on how to best handle that.

Also I'm sure there are lots of things that could still use updating - how detailed do we want to be in this PR? There are hex codes for colors in the examples, font-sizes/weights, margins/paddings, border-widths, etc that could all be converted to tokens to be closer to the new PF6 styles.

mcoker · 2024-04-23T00:06:15Z

packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md

@@ -33,7 +33,7 @@ import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
      label="Certified Level"
      value={
        <span>
-          <OkIcon style={{color: 'var(--pf-v5-global--success-color--100)'}} /> Certified
+          <OkIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Certified


If this is just the default success color, it's --pf-t--global--color--status--success--default. If you want a reference for icon status colors, you can look at the icon component styles and look for --m-[status], like --m-success and see which token is used

Suggested change

<OkIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Certified

<OkIcon style={{color: 'var(--pf-t--global--color--status--success--default)'}} /> Certified

mcoker · 2024-04-23T00:08:55Z

packages/module/sass/react-catalog-view-extension/_catalog-item.scss

@@ -20,6 +20,6 @@
 }

 .catalog-item-header-pf-subtitle {
-  color: var(--pf-v5-global--Color--200);
+  color: var(--pf-v6-global--Color--200);


The new secondary text color token is --pf-t--global--text--color--subtle

Suggested change

color: var(--pf-v6-global--Color--200);

color: var(--pf-t--global--text--color--subtle);

mcoker · 2024-04-23T00:09:50Z

packages/module/sass/react-catalog-view-extension/_catalog-tile.scss

@@ -27,7 +27,7 @@
  }

  .catalog-tile-pf-subtitle {
-    color: var(--pf-v5-global--Color--200);
+    color: var(--pf-t--global--text--color--subtle);


mcoker · 2024-04-24T01:06:11Z

packages/module/sass/react-catalog-view-extension/_variables.scss

+$vertical-tab-pf-color: var(--pf-v6-global--Color--100) !default;
+$vertical-tab-pf-active-color: var(--pf-v6-global--active-color--100) !default;


I'm not sure where all these vars are used, but looks like this is probably the update we want to make? FWIW they're used to create the vars below in the :root block - --vertical-tab-pf-color and --vertical-tab-pf-active-color

Suggested change

$vertical-tab-pf-color: var(--pf-v6-global--Color--100) !default;

$vertical-tab-pf-active-color: var(--pf-v6-global--active-color--100) !default;

$vertical-tab-pf-color: var(--pf-t--global--text--color--regular) !default;

$vertical-tab-pf-active-color: var(--pf-t--global--text--color--brand--clicked) !default;

It looks like you updated the use of --vertical-tab-pf-active-color in these 3 spots to just use the brand tokens directly:

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

Line 26 in bafc9de

color: var(--pf-t--global--text--color--brand--hover);

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

Line 44 in bafc9de

color: var(--pf-t--global--text--color--brand--clicked);

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

Line 47 in bafc9de

background: var( --pf-t--global--border--color--brand--clicked);

IMO that's fine, but you may also consider updating this line to use --pf-t--global--text--color--regular, which would be inline with the 3 updates above

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

Line 16 in bafc9de

color: var(--vertical-tab-pf-color);

If there are no other uses of --vertical-tab-pf-active-color and --vertical-tab-pf-color, you may be able to nix this stylesheet. Just a thought! That may be a horrible idea, since I really have no idea how this project is setup 😅

mcoker · 2024-04-24T01:15:14Z

packages/module/src/components/CatalogTile/CatalogTileBadge.tsx

@@ -28,7 +28,7 @@ export const CatalogTileBadge: React.FunctionComponent<CatalogTileBadgeProps> =
        <Tooltip id={id} content={title}>
          <span className={classes} {...props}>
            {children}
-            <span className="pf-v5-u-screen-reader">{title}</span>
+            <span className="pf-v6-u-screen-reader">{title}</span>


Assuming these components import PF's base styles, any use of pf-v6-u-screen-reader can be updated to use pf-v6-screen-reader.

andrew-ronaldson · 2024-04-25T14:19:28Z

Two things and I think Coker caught one. Thanks for working on this Jessie!

The blue border-top should be removed
The side filter panel that looks similar to our jump links component needs to be updated to match this mock.

mcoker · 2024-05-02T22:34:38Z

packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md

@@ -26,44 +26,42 @@ import OkIcon from '@patternfly/react-icons/dist/esm/icons/ok-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';

-<div style={{ display: 'inline-block', padding: '15px', border: '1px solid grey' }}>


Took this wrapper off just so it's clear what style is coming from <PropertiesSidePanel> and what's just in the example code.

mcoker · 2024-05-02T22:38:48Z

packages/module/patternfly-docs/content/examples/FilterSidePanel.md

@@ -118,7 +118,7 @@ class MockFilterSidePanelExample extends React.Component {
    const maxShowCount = 5;
    const leeway = 2;
    return (
-     <div style={{ width: '205px', border: '1px solid grey', paddingTop: '20px' }}>   
+     <div style={{ width: '205px' }}>   


Removed the border and example padding so it's clear what's coming from <FilterSidePanel> and what's part of the example. Left the width because there is no width on <FilterSidePanel> and I'm assuming this panel goes into some parent/container with a constrained width, so this will mimic closer how the component will display. Ideally I'd probably drop this width, too, so you're just seeing the extension styles.

Just dropping a note here but this and the properties side panel seem to share some styling - they're narrow, probably have padding around them. And <FilterSidePanel> has padding and no width, and <PropertiesSidePanel> has a width and no padding. I'm guessing that's fine, but wondering if there could be some consistency there.

mcoker · 2024-05-02T22:39:27Z

packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md

+    label="Certified Level"
+    value={
+      <span>
+        <OkIcon style={{color: '--pf-t--global--icon--color--status--success--default'}} /> Certified


updated this color token since the previous was just a generic success color and we have an icon specific success color.

mcoker · 2024-05-02T22:42:32Z

packages/module/patternfly-docs/content/examples/PropertiesSidePanel.md

+<PropertiesSidePanel>
+  <PropertyItem label="Operator Version" value="0.9.8 (latest)" />
+  <PropertyItem


Ideally this should just be a <DescriptionList>. That's how it's called out in the figma design but I wasn't sure if that would work for the extension, depending on how it's used. If you used <DescriptionList> there would be no custom styles here with maaayyyybe the exception of this width

react-catalog-view/packages/module/patternfly-docs/content/examples/propertiesSidePanel.css

Line 2 in d714e15

width: 165px;

Everything else comes for free 💸

mcoker · 2024-05-02T22:47:48Z

packages/module/patternfly-docs/content/examples/catalogTile.css

@@ -1,17 +1,13 @@
 .ws-react-e-catalog-tile .catalog-tile-pf:active, .ws-react-e-catalog-tile .catalog-tile-pf:hover, .ws-react-e-catalog-tile .catalog-tile-pf:focus, .ws-react-e-catalog-tile .catalog-tile-pf:visited {
-  color: inherit;


This seems a little weird. The link tile has blue text/stuff in it by default (since it's a link), but this style is making all of that black on :active, :hover, :focus, :visited. So I just matched what I'm seeing in the browser for the current extension and updated the black color to use our default font color.

Here's the current extension - you'll likely need to update the href on it to some non-visited link to see the default state (I updated to href="#")

and on hover

mcoker · 2024-05-02T22:48:44Z

packages/module/patternfly-docs/content/examples/catalogTile.css

-}
-.ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-title {
-  font-weight: 400;
-}
 .ws-react-e-catalog-tile .catalog-tile-pf-header .catalog-tile-pf-subtitle {


IMO this is a fair enhancement request for PF - a card subtitle. Then we could get rid of all of this, too.

mcoker · 2024-05-02T22:49:26Z

packages/module/patternfly-docs/content/examples/catalogTile.css

 .ws-react-e-catalog-tile .catalog-tile-pf-icon {
-  font-size: 40px;
-  height: 40px;
+  font-size: 37px;


Updated to 37px per figma, but I don't know that it really matters if that needs to change to something else?

mcoker · 2024-05-02T22:51:00Z

packages/module/patternfly-docs/content/examples/catalogTile.css

 .ws-react-e-catalog-tile .catalog-tile-pf-badge-container {
  display: flex;
  flex: 1;
  justify-content: flex-end;
-  margin-left: 10px;
+  margin-inline-start: var(--pf-t--global--spacer--sm);
 }
 .ws-react-e-catalog-tile .catalog-tile-pf-badge-container .catalog-tile-pf-badge {
-  font-size: 16px;
-  margin-left: 5px;
+  font-size: var(--pf-t--global--font--size--body--default);
+  margin-inline-start: var(--pf-t--global--spacer--xs);
 }


I'm not sure what all goes in this element but depending on what all it supports, this may be able to be improved.

mcoker · 2024-05-02T22:57:04Z

packages/module/patternfly-docs/content/examples/catalogTile.css

-  color: #4CB140;
+  color: var(--pf-t--global--icon--color--status--success--default);


I didn't see this in use, so maybe it can be removed?

mcoker · 2024-05-02T23:08:29Z

packages/module/patternfly-docs/content/examples/filterSidePanel.css

@@ -1,50 +1,46 @@
 .filter-panel-pf {


Ideally this whole thing would be a <Form>. I think the markup would be different since currently each block of checkboxes is in its own <form> HTML element but it should give exactly the styling needed. Here's a rough codesandbox https://codesandbox.io/p/sandbox/gallant-bouman-wcjx32?file=%2Findex.tsx%3A31%2C15. The margins and everything in the v6 <Form> matched the figma design for this panel as far as I could tell.

mcoker · 2024-05-02T23:11:03Z

packages/module/patternfly-docs/content/examples/filterSidePanel.css

 }

 .filter-panel-pf-category-item .item-icon {
-  padding-right: 3px;
+  padding-inline-end: var(--pf-t--global--spacer--xs);


It seems like this spacer/padding and the one on .item-count below could just come from regular space characters in the markup. The figma designs just use a space between the text and count.

mcoker · 2024-05-02T23:12:24Z

packages/module/patternfly-docs/content/examples/propertiesSidePanel.css

@@ -1,21 +1,18 @@
 .properties-side-panel-pf {


mentioned this above but all of the styles in this stylesheet come with the <DescriptionList> component

mcoker · 2024-05-02T23:14:40Z

packages/module/patternfly-docs/content/examples/verticalTab.css

@@ -32,22 +43,23 @@
  text-overflow: ellipsis;
  white-space: nowrap;
 }
-.ws-react-e-vertical-tabs .vertical-tabs-pf-tab.active > a {
-  color: var(--pf-t--global--text--color--brand--clicked);
+.ws-react-e-vertical-tabs .vertical-tabs-pf-tab > a.disabled {


I didn't see any examples of a disabled link in this extension, but it was in figma, so added support for <a class="disabled">

mcoker · 2024-05-02T23:17:49Z

packages/module/src/components/CatalogTile/CatalogTile.tsx

@@ -119,7 +119,7 @@ export class CatalogTile extends React.Component<CatalogTileProps> {
      >
        {(badges.length > 0 || iconImg || iconClass || icon || onClick) && (
          <CardHeader
-            actions={{ actions: badges.length > 0 && this.renderBadges(badges) }}
+            actions={{ actions: badges.length > 0 && this.renderBadges(badges), hasNoOffset: true }}


The card actions element is positioned above where it would normally flow in the doc since the main use case here is for plain actions. The actions element moves itself up by the value of the top padding of a plain button, so that the top of the icon in that plain button is aligned with the top of the card header. If the actions element just has a normal thing in it (something other than an element with transparent padding on the top of it like a plain button), hasNoOffset will position the actions element normally. You may want to adjust that depending on what all goes into the actions element of catalog tiles.

mcoker · 2024-05-03T01:14:29Z

@jessiehuff @dlabaj pushed some updates! Discussed this with @jessiehuff but I'm not 100% these are the right stylesheets, though the ones I edited are what update the workspace styles, so I went ahead there. Some thoughts:

The stylesheets I edited are prefixed with the docs framework workspace classes. Doesn't seem like this extension would ship with those?
If I had to guess, I'm assuming the styles we ship with the extension live in https://github.com/patternfly/react-catalog-view/tree/v6/packages/module/sass/react-catalog-view-extension
If those points are true, the updates I made should be able to be applied to the sass files linked above pretty easily

I'm not familiar with how this extension is used, where it goes in users' apps, what kinds of other/conflicting styles they may have in their app that some of the pre-existing extension styles may have been needed for. That said, I tried to leave most of styles in place that aren't needed to show the dev workspace examples properly, under the assumption they may be needed for other reasons. That said, I'd be more than happy to work with someone who could speak to how/where catalog view is used, and clean some of this stuff up. I don't suppose it's a big priority as there aren't all that many styles.

I left a couple of comments about this but I think the properties side panel could just be updated to use <DescriptionList> under the hood and likely wouldn't need any styles/overrides or anything to be kept in sync with PF going forward, which would be awesome. Same for filter side panel - that looks like an implementation of the <Form> component to me. I didn't make that decision/update in this PR though, but I'm happy to either do that or help out with it if we do want to make that update.

jessiehuff · 2024-05-03T16:00:59Z

Updated surge link: https://catalog-view-upgrade-v6.surge.sh/

github-actions · 2024-05-23T19:26:09Z

🎉 This PR is included in version 6.0.0-alpha.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

mcoker reviewed Apr 1, 2024

View reviewed changes

andrew-ronaldson reviewed Apr 6, 2024

View reviewed changes

packages/module/patternfly-docs/content/examples/catalogTile.css Outdated Show resolved Hide resolved

jessiehuff force-pushed the v6 branch from ba6c2da to 22d1af3 Compare April 8, 2024 15:21

dlabaj and others added 11 commits April 8, 2024 11:25

chore(pf-issues): Updated github actions to create issues in Patternf…

c25f883

…ly issues.

Upgrade to v6

8a3c479

Fix logo path

38abbf6

Update node version in github actions

852b12f

Missed a few node versions

131d72b

Update snapshots

d163927

Update with tokens

fe10357

Ignore experimental rule

bd81ee6

Update styles based on feedback

462fc7f

Update alpha versions

a63fe8c

Update featured card to secondary styling

17c18c5

jessiehuff force-pushed the v6 branch from 22d1af3 to 17c18c5 Compare April 8, 2024 15:27

Update snapshots

95b8499

jessiehuff mentioned this pull request Apr 9, 2024

feat(demo): Create V6 Demo #58

Open

nicolethoen linked an issue Apr 19, 2024 that may be closed by this pull request

catalog-view: Consume v6 alphas and build Penta demo #51

Closed

jessiehuff requested review from mcoker and andrew-ronaldson April 19, 2024 15:35

mcoker reviewed Apr 23, 2024

View reviewed changes

packages/module/patternfly-docs/content/examples/FilterSidePanel.md Outdated Show resolved Hide resolved

dlabaj approved these changes Apr 23, 2024

View reviewed changes

Update screen reader class

bafc9de

mcoker reviewed Apr 24, 2024

View reviewed changes

jessiehuff added 2 commits April 26, 2024 13:25

Update styling

f51c84a

Update snapshots

46bf5b3

fix(catalog-view): update to v6 styles

d714e15

mcoker reviewed May 2, 2024

View reviewed changes

chore(propertiessidepanel): fix icon color

5e8fdc0

mcoker reviewed May 2, 2024

View reviewed changes

chore(verticalTab): move blue accent from link to li

035f51f

Update snapshots

7d9783d

dlabaj merged commit 5b2d6e0 into patternfly:v6 May 3, 2024
4 checks passed

nicolethoen mentioned this pull request May 7, 2024

catalog-view: Consume v6 alphas and build Penta demo #51

Closed

github-actions bot added the released on @alpha label May 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(v6): Update to PatternFly V6 Versions #54

feat(v6): Update to PatternFly V6 Versions #54

jessiehuff commented Mar 29, 2024

andrew-ronaldson commented Apr 6, 2024

dlabaj left a comment

dlabaj commented Apr 23, 2024

jessiehuff commented Apr 23, 2024

mcoker left a comment

mcoker Apr 23, 2024

mcoker Apr 23, 2024

mcoker Apr 23, 2024

mcoker Apr 24, 2024

mcoker Apr 24, 2024

andrew-ronaldson commented Apr 25, 2024 •

edited

Loading

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker May 2, 2024

mcoker commented May 3, 2024

jessiehuff commented May 3, 2024

github-actions bot commented May 23, 2024

	<OkIcon style={{color: 'var(--pf-v6-global--success-color--100)'}} /> Certified
	<OkIcon style={{color: 'var(--pf-t--global--color--status--success--default)'}} /> Certified

	color: var(--pf-v6-global--Color--200);
	color: var(--pf-t--global--text--color--subtle);

		$vertical-tab-pf-color: var(--pf-v6-global--Color--100) !default;
		$vertical-tab-pf-active-color: var(--pf-v6-global--active-color--100) !default;

		@@ -1,17 +1,13 @@
		.ws-react-e-catalog-tile .catalog-tile-pf:active, .ws-react-e-catalog-tile .catalog-tile-pf:hover, .ws-react-e-catalog-tile .catalog-tile-pf:focus, .ws-react-e-catalog-tile .catalog-tile-pf:visited {
		color: inherit;

		color: #4CB140;
		color: var(--pf-t--global--icon--color--status--success--default);

feat(v6): Update to PatternFly V6 Versions #54

feat(v6): Update to PatternFly V6 Versions #54

Conversation

jessiehuff commented Mar 29, 2024

andrew-ronaldson commented Apr 6, 2024

dlabaj left a comment

Choose a reason for hiding this comment

dlabaj commented Apr 23, 2024

jessiehuff commented Apr 23, 2024

mcoker left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrew-ronaldson commented Apr 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcoker commented May 3, 2024

jessiehuff commented May 3, 2024

github-actions bot commented May 23, 2024

andrew-ronaldson commented Apr 25, 2024 •

edited

Loading