Skip to content
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.

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

Migration to Patternfly v6 #21611

Draft
wants to merge 13 commits into
base: main
Choose a base branch
from
Draft

Conversation

Venefilyn
Copy link
Member

@Venefilyn Venefilyn commented Feb 12, 2025

WIP while we work through what can be skipped, what can be improved before merging, and what is fine to merge. Treat as a spike for #21611

To redo codemod simply reset the commit, revert changes you don't want, and run

npx @patternfly/pf-codemods@latest ./pkg --v6 --fix --exclude=button-moveIcons-icon-prop,menuToggle-warn-iconOnly-toggle,helperTextItem-warn-screenReaderText-update
  • button-moveIcons-icon-prop is excluded as it only makes it have a small margin (can be added later)
  • menuToggle-warn-iconOnly-toggle same as above icon exclusion
  • helperTextItem-warn-screenReaderText-update is excluded for now as things should work still for most cases

Items fixed or documented

When we are about to merge these should all be on our minds so we can fix either in this or preferably in upcoming PRs

  • pf-codemods introduce extra <Content>, need to be verified manually post-merge TextContent + Text results in two Content components patternfly/pf-codemods#825
  • All @patternfly/patternfly/*-theme-dark.css stuff is removed due to PF Tokens
  • All dark-theme color changes are unnecessary once the light-theme has changed to a Patternfly semantic CSS variable
  • SCSS global--breakpoint variables should start using rem instead
  • Global CSS spacers --pf-v5-global--spacer-- need to be renamed to --pf-t--global--spacer--
  • EmptyStateIconProps and EmptyStateHeaderProps are merged into EmptyStateProps
  • iframes use Page component as it should but we need an override to prevent whitespace in its grid Page - Allow main grid without sidebar and masthead patternfly/patternfly#7357
  • PF Nav needs NavLinkText and NavLinkIcon under NavLink now
    • Remember to move the hint to be after NavLinkIcon and not in it
  • Icons needs to be changed to use vars like --pf-t--global--icon--color--status--info--default
  • Sidebar
    • Host selection requires a full revamp (and ideally migration to React component) as Patternfly no longer has Select but rather Menu component.
    • For now host selection has more CSS to get rid of border and remove padding (as it needs a revamp it'll be a big refactor so should be skipped in this PR)
  • Masthead doesn't need much extra change apart from background CSS rules
  • Currently mobile toolbar at the bottom of the screen is broken

All new upstream issues deriving from this upgrade

Related PRs

@Venefilyn Venefilyn marked this pull request as draft February 12, 2025 13:48
@jelly jelly added the no-test For doc/workflow changes, or experiments which don't need a full CI run, label Feb 12, 2025
<Toolbar className="ct-alert-toolbar">
<ToolbarContent>
<ToolbarGroup spaceItems={{ default: "spaceItemsMd" }}>
Copy link
Member

Choose a reason for hiding this comment

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

So this no longer does any layout, what replaces this?

Copy link
Member Author

Choose a reason for hiding this comment

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

IIRC I changed this after messing about with the wrap issue. Can check soon

patternfly/patternfly#3713


// REVIEW @Venefilyn: Is this still true?
/* Import our own fonts since the PF4 font-face rules are filtered out in build.js */
Copy link
Member

Choose a reason for hiding this comment

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

This is a good first prio target :)

@Venefilyn Venefilyn mentioned this pull request Feb 25, 2025
26 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
no-test For doc/workflow changes, or experiments which don't need a full CI run,
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants