PF5 Component Review about patternfly-yew HOT 25 CLOSED

@ctron Re the next components. I presume they need changing to default implementation in v5?

Yea, so the next components will replace the current (non-next), the current will just be gone.

I didn't want to make that change on main now, as that would case some issues for you I fear. In any case, just ignore non-next stuff (which has a next variant).

I'll make the change then.

from patternfly-yew.

No worries, I am super happy you already did most of the work. I owe you a few beers (or whatever you like).

I am tempted to just take that branch and create a feature/pf_5 branch in this repo. So we can continue by adding PR to this feature branch, and the merge it into main once it is ready. And once all the basic stuff looks good, I would create a new -alpha release.

from patternfly-yew.

Yeah, that needs doing.

I've been adding examples to the quick start recently so I can do a comparison to make sure everything still works...

from patternfly-yew.

The about dialog no longer has a div for hero section. @ctron What do you want to do about this?
https://pf5.patternfly.org/components/about-modal

from patternfly-yew.

Looking at the css for the avatar component in specific: https://pf5.patternfly.org/components/avatar#usage , there are a few classes like .pf-m-sm{-on-[breakpoint]} I feel like we should implement this maybe

from patternfly-yew.

@ctron Re the next components. I presume they need changing to default implementation in v5?

from patternfly-yew.

@ctron Re the next components. I presume they need changing to default implementation in v5?

Yea, so the next components will replace the current (non-next), the current will just be gone.

I didn't want to make that change on main now, as that would case some issues for you I fear. In any case, just ignore non-next stuff (which has a next variant).

from patternfly-yew.

Looking at the css for the avatar component in specific: https://pf5.patternfly.org/components/avatar#usage , there are a few classes like .pf-m-sm{-on-[breakpoint]} I feel like we should implement this maybe

Makes sense, but I would add new stuff in a follow up PR.

from patternfly-yew.

The about dialog no longer has a div for hero section. @ctron What do you want to do about this? https://pf5.patternfly.org/components/about-modal

Looks like the are focusing on the background aspect now. Makes sense. So guess the current (overall) logic is fine, just needs to be renamed to "background style" (vs hero).

from patternfly-yew.

The about dialog no longer has a div for hero section. @ctron What do you want to do about this? https://pf5.patternfly.org/components/about-modal

Looks like the are focusing on the background aspect now. Makes sense. So guess the current (overall) logic is fine, just needs to be renamed to "background style" (vs hero).

You still want the custom style, that you added back in, just applied to the main div? I'm not sure what your use case is...

from patternfly-yew.

The about dialog no longer has a div for hero section. @ctron What do you want to do about this? https://pf5.patternfly.org/components/about-modal

Looks like the are focusing on the background aspect now. Makes sense. So guess the current (overall) logic is fine, just needs to be renamed to "background style" (vs hero).

You still want the custom style, that you added back in, just applied to the main div? I'm not sure what your use case is...

The use case is that we have some high and low res images. Maybe there is a better way, but the most flexible one is just setting the style: https://github.com/trustification/trustification/blob/f571378360981fae6c3bb89f4d854c9a9805a44a/spog/ui/src/about.rs#L17-L20

And maybe there is a better way.

from patternfly-yew.

@ctron Are you happy to take a look at forms, there seems to be a lot of next stuff in there?

It seems like the html has changed a bit, in that the form inputs do not directly have pf classes applied to them, instead they're wrapped in a div with the elements applied! ( https://pf5.patternfly.org/components/forms/form-control#textarea )

from patternfly-yew.

@phill-85 Sure, I am happy to take some parts of this. Not sure how to split it up from a technical perspective, as I would like to keep the main branch in a working condition. But we will figure it out.

Also a heads-up: I will be away from keyboard for the next week and a half. So don't expect much from me during that time 😉

from patternfly-yew.

@phill-85 Sure, I am happy to take some parts of this. Not sure how to split it up from a technical perspective, as I would like to keep the main branch in a working condition. But we will figure it out.

Also a heads-up: I will be away from keyboard for the next week and a half. So don't expect much from me during that time wink

I mean I can work through it, just didn't want to hold anything up, but if your'e going to be away...

from patternfly-yew.

There's no hurry, take your time. I also understand if you need some help, as it's a bigger task.

from patternfly-yew.

I'm struggling on getting the next version of the toolbar working after removing the next mod and import stuff.

from patternfly-yew.

@phill-85 Sure, I am happy to take some parts of this. Not sure how to split it up from a technical perspective, as I would like to keep the main branch in a working condition. But we will figure it out.

Also a heads-up: I will be away from keyboard for the next week and a half. So don't expect much from me during that time wink

I've started tackling the forms next stuff

from patternfly-yew.

The about dialog no longer has a div for hero section. @ctron What do you want to do about this? https://pf5.patternfly.org/components/about-modal

Looks like the are focusing on the background aspect now. Makes sense. So guess the current (overall) logic is fine, just needs to be renamed to "background style" (vs hero).

You still want the custom style, that you added back in, just applied to the main div? I'm not sure what your use case is...

The use case is that we have some high and low res images. Maybe there is a better way, but the most flexible one is just setting the style: https://github.com/trustification/trustification/blob/f571378360981fae6c3bb89f4d854c9a9805a44a/spog/ui/src/about.rs#L17-L20

And maybe there is a better way.

I've had a deeper look at this and the --pf-c-about-modal-box__hero--lg--BackgroundImage and --pf-c-about-modal-box__hero--sm--BackgroundImage css vars are no longer supported in PF5.

It looks like there are not any breakpoints for the background, so I think the only option is to introduce your own. I came up with this:

<style>
    {r#"
        @media only screen and (min-width: 576px) {
            .pf-v5-c-about-modal-box[style]  {
                --pf-v5-c-about-modal-box--BackgroundImage: url("https://www.patternfly.org/assets/images/pfbg_992.jpg") !important;
            }
        }
        @media only screen and (min-width: 992px) {
            .pf-v5-c-about-modal-box[style]  {
                --pf-v5-c-about-modal-box--BackgroundImage: url("https://www.patternfly.org/assets/images/[email protected]") !important;
            }
        }
    "#}
</style>

It looks like you will have to play with other styles, as PF5 only shows the background in the bottom left corner!

from patternfly-yew.

Wow, you've been busy! I will try to get up to speed and see how I can help.

from patternfly-yew.

Wow, you've been busy! I will try to get up to speed and see how I can help.

I got stuck on the tree component, so just commented out the mod and use statements. Got stuck in generic trait hell iirc.
Wasn't sure what to do with the background component either.

from patternfly-yew.

It looks like one task is also to add the new menu components, which replace a lot of the existing menu-style components (like AppLauncher, ContextSelector, …)

from patternfly-yew.

I fixed the icons. Looks good. I also added a way to manually extend the icon set, as there had been at least one missing in the original set.

from patternfly-yew.

Tree should be good too

from patternfly-yew.

I migrated the background too

from patternfly-yew.