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 8 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

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
  • 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

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
@@ -150,17 +150,17 @@ export const ApplicationList = ({ metainfo_db, appProgress, appProgressTitle, ac
} else {
refresh_progress = null;
refresh_button = (
<Button variant="secondary" onClick={refresh} id="refresh" aria-label={ _("Update package information") }>
<RebootingIcon />
<Button icon={<RebootingIcon />} variant="secondary" onClick={refresh} id="refresh" aria-label={_("Update package information")}>
Copy link
Member

Choose a reason for hiding this comment

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

You mentioned that this is just a stylistic thing, as there are tons of changes regarding to PF6 I think it makes sense to keep this codemod turned off

Copy link
Member Author

Choose a reason for hiding this comment

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

Agreed, I'll find the culprit and update the command ran in the description. I ran a test to see what exactly changes visually but found nothing

image

Copy link
Member Author

Choose a reason for hiding this comment

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

Copy link
Member Author

Choose a reason for hiding this comment

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

Removed from codemods for now and commit updated

<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 :)

</Text>
</TextContent>
</Content>
</Content>
Copy link
Member

Choose a reason for hiding this comment

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

Copy link
Member Author

Choose a reason for hiding this comment

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

That's a v5 component and not in v6. Somehow the link albeit removed is still there showing v5 stuff. After the discussion on Matrix on Friday about it I've created upstream issues about it

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