Cockpit UI change - Plugins should upgrade to new style to be consistent

[Venefilyn]

I figured I'd make this early even though it is not released yet. (Edit: Cockpit 337 includes Patternfly v6 migration) We recently merged a big PR to upgrade from Patternfly (PF) v5 to Patternfly v6 which includes a big redesign:

• Migration to Patternfly v6 #21611

Guide

If you want to upgrade your plugin to match here is what I would suggest at the moment:

• Make sure to base your dev environment to the latest Cockpit main-branch
• Update your own package.json Patternfly dependencies to 6.1.0 or newer. Using for example

npm install @patternfly/patternfly@6.1.0 @patternfly/react-core@6.1.0 @patternfly/react-icons@6.1.0 @patternfly/react-styles@6.1.0 @patternfly/react-table@6.1.0 @patternfly/react-tokens@6.1.0

• Run npx @patternfly/pf-codemods@latest ./src --v6 --fix -- this will update all the components to the new PF6, note this only runs for the ./src folder
• Run npx @patternfly/class-name-updater ./src --v6 --fix -- this will update all the css styling you have here and there, note this only runs for the ./src folder
• Add .no-masthead-sidebar class to <Page> components - if you don't have a Page component but PageContent, wrap it all in a Page component with said class. We need this due to plugins being in iframes
• Comment out a lot of the custom CSS code you have and run to see how it all looks
• Enable CSS one by one to see what is and isn't necessary
• Search for pf-v5 to see what needs to be updated - spacers and colors are probably the main culprit here!
• Colors can be upgraded by choosing a semantic color from https://www.patternfly.org/design-foundations/colors
• Spacers can be upgraded by checking https://www.patternfly.org/design-foundations/spacers/

If there is anything specific you want help with, just shout in here and I'll help out!

Notes

• Semantic colors are just CSS variables that include a style that changes depending on light and dark theme, so it will be two different colors depending on if it's in light or dark mode
• Check Patternfly website for their components if you need component specific CSS updated
• There are regressions documented here that will be addressed over time Upgrade to Patternfly v6 #21651
• We likely haven't fixed everything, shout if you find something weird! Even if you might think the issue is on your end!