fix(build): update to PF6 betas #228

jenny-s51 · 2024-07-30T21:17:07Z

What

Update to beta versions.

Docs workspace looks good with PR updates (see below for generated link preview once build passes).

~~Demo app needs some CSS updates to viewport heights to fix the demos. This is a known issue - currently investigating and will push the updates here once resolved.~~

~~Updates CSS to fix demo viewport heights~~
Updates brand img to use new PF logo
Removes padding:0 to fix control bar positioning

Can see the current state of the demo-app here: https://v6-betas.surge.sh/

Type of change

patternfly-build · 2024-07-30T21:19:46Z

Preview: https://react-topology-pr-topology-228.surge.sh

Demo-app: https://v6-betas.surge.sh/

dlabaj

@jenny-s51 Looks like snap shots need updating.

jenny-s51

Updated to fix UI issues in the demo app, added changes to PR description.

@jeff-phillips-18 curious to get your thoughts, Topology Package and Styles -> Labels demos are cutting off the bottom part of the graph view with these updates. Is there a way to load in the graph at a smaller size for those demos?

jeff-phillips-18 · 2024-08-05T16:45:09Z

@jenny-s51 This is no different from the past. We could decrease the space between the rows if we wanted but it is really just dependent on the browser height. The user can pan the view to see those items not in view.

jenny-s51 · 2024-08-05T17:06:26Z

Thank you @jeff-phillips-18 for your clarity here. Marking this PR as ready for review with the existing updates cc @dlabaj @nicolethoen

nicolethoen · 2024-08-05T17:42:13Z

packages/demo-app-ts/src/Demo.css

@@ -77,4 +77,10 @@

 .pf-v6-c-toolbar__content.pf-m-hidden {
  display: none;
+}
+
+.pf-v6-c-page__main-container,


I think we introduced a prop that applies these styles to page sections. Let me ask the scrum channel

@jenny-s51 here's the response I got from @mcoker

The general setup is, if you have a page section(s) you want to fill the available space, you add isContentFilled to and that tells the container that wraps the page content to fill the viewport (the white background will extend the height of the viewport). Then you need to add isFilled to any page sections you want to fill that space.

Here's an example w/ those deets - https://staging-v6.patternfly.org/components/page#filled-page-sections

and here's a codesandbox - https://codesandbox.io/s/sweet-frog-pp7zcr?file=/index.tsx:1761-1776

(FWIW the old behavior in v5 was that the main content area always filled the viewport height, and the last page section (whichever matches :last-child) would be filled by default. If you wanted to, for example, have the first page section fill the viewport instead, you'd add isFilled to the first page section, then add isFilled={false} to the last page section

If you see isFilled={false} that's probably why. That's no longer needed in v6)

Nice catch, thank you @nicolethoen. I asked @mcoker a follow-up question in the Slack thread after applying these suggested changes , curious to get his thoughts on this. We want a StackItem to fill the height of the PageSection and currently without the height set on .pf-v6-c-page__main-body, the fill does not get applied even though StackItem has the pf-m-fill class as well.

Removed the custom styling on the page components - added hasBodyWrapper={false} to the filled <PageSections> per @mcoker 's suggestion which resolved the issue

nicolethoen · 2024-08-05T20:34:30Z

packages/demo-app-ts/src/Demo.css

@@ -23,6 +22,7 @@
 .pf-ri__topology-demo .pf-v6-c-toolbar {
  --pf-v6-c-toolbar__expandable-content--lg--PaddingBottom: 0;
  --pf-v6-c-toolbar--PaddingBottom: 0;
+  --pf-v6-c-toolbar--PaddingBlockStart: var(--pf-t--global--spacer--300);


I see some references to base tokens in this CSS. Ideally we would use semantic tokens without --300 or other numbers at the end.

Thanks @nicolethoen ! Updated to use semantic tokens with the exception of --pf-t--color--red--50 , which I couldn't find referenced with any semantic tokens in https://github.com/patternfly/patternfly/blob/v6/src/patternfly/base/tokens

jeff-phillips-18 · 2024-08-06T11:46:33Z

Do we know the cause of the changes to the toolbar alignment:

v5:

v6:

nicolethoen · 2024-08-06T13:18:10Z

@jeff-phillips-18 are you using a flex layout in the toolbar?

jenny-s51 · 2024-08-06T13:45:26Z

@nicolethoen yes we do wrap the toolbar items in a Flex layout

jeff-phillips-18 · 2024-08-06T13:48:18Z

@jeff-phillips-18 are you using a flex layout in the toolbar?

It is using Flex for the outer container, and Split for the layout label and dropdown.

nicolethoen · 2024-08-06T14:20:54Z

if you remove the Split, does it look better?

jeff-phillips-18 · 2024-08-06T14:24:42Z

Yes. Changing the Split to Flex and using the center align setting fixes the issue and aligns everything nicely. I've PR'd a fix to this PR for that.

Just kinda wondering why the difference between v5 and v6?

nicolethoen · 2024-08-06T14:27:21Z

Lots of spacing was streamlined and standardized to use the tokens. So more components should aligns and be spaced better out of the box 👍🏻

nicolethoen · 2024-08-06T14:50:34Z

packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx

-    <Split>
-      <SplitItem>
+    <Flex flexWrap={{ default: 'nowrap' }} gap={{ default: 'gapSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+      <FlexItem>


What if you don't have a flex layouts in the toolbar at all?

you could use:

<ToolbarItem variant='label'>Layout:</ToolbarItem> <ToolbarItem'><Dropdown.../></ToolbarItem>

Working on refactoring these instances where we use Flex layouts to use the syntax above

The reason I used a single ToolbarItem with a Flex for the label and input was so that the label and input would look more related (less space between them than between the input and the next label). Also, if the widow width is less, the new implementation cuts off the items rather than wrapping.

Before:

After:

Thanks for clarifying @jeff-phillips-18 , reverted back to your changes in jenny-s51#11

packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx

nicolethoen

LGTM

update PF icon, update styling to fix demo-app examples update snapshots fix brand height remove custom page styles, add props to fix page fill wip toolbar refactor for topology package update to semantic tokens refactor split and flex instances in favor of toolbar components remove unused split components revert toolbar refactor

github-actions · 2024-08-06T20:04:09Z

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

The release is available on:

Your semantic-release bot 📦🚀

jenny-s51 marked this pull request as draft July 30, 2024 21:17

dlabaj requested review from jeff-phillips-18, dlabaj and nicolethoen July 30, 2024 21:38

dlabaj reviewed Jul 30, 2024

View reviewed changes

jenny-s51 force-pushed the v6 branch 2 times, most recently from c850142 to a0f7809 Compare August 2, 2024 18:32

jenny-s51 changed the title ~~[WIP] fix(build): update to PF6 betas~~ fix(build): update to PF6 betas Aug 2, 2024

jenny-s51 commented Aug 2, 2024

View reviewed changes

jenny-s51 marked this pull request as ready for review August 5, 2024 17:06

jenny-s51 requested a review from dlabaj August 5, 2024 17:06

nicolethoen reviewed Aug 5, 2024

View reviewed changes

nicolethoen reviewed Aug 6, 2024

View reviewed changes

jenny-s51 force-pushed the v6 branch 2 times, most recently from b39ada4 to c9d584d Compare August 6, 2024 15:30

nicolethoen approved these changes Aug 6, 2024

View reviewed changes

jenny-s51 force-pushed the v6 branch from 2770525 to b6e1796 Compare August 6, 2024 17:28

jeff-phillips-18 approved these changes Aug 6, 2024

View reviewed changes

jeff-phillips-18 merged commit 40649ff into patternfly:v6 Aug 6, 2024
8 checks passed

github-actions bot added the released on @alpha label Aug 6, 2024

jenny-s51 mentioned this pull request Aug 7, 2024

Error with typedoc when pulling in latest v6 alphas #183

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(build): update to PF6 betas #228

fix(build): update to PF6 betas #228

jenny-s51 commented Jul 30, 2024 •

edited

Loading

patternfly-build commented Jul 30, 2024 •

edited

Loading

dlabaj left a comment

jenny-s51 left a comment

jeff-phillips-18 commented Aug 5, 2024

jenny-s51 commented Aug 5, 2024 •

edited

Loading

nicolethoen Aug 5, 2024

nicolethoen Aug 5, 2024

jenny-s51 Aug 5, 2024

jenny-s51 Aug 6, 2024

nicolethoen Aug 5, 2024 •

edited

Loading

jenny-s51 Aug 6, 2024

jeff-phillips-18 commented Aug 6, 2024

nicolethoen commented Aug 6, 2024

jenny-s51 commented Aug 6, 2024 •

edited

Loading

jeff-phillips-18 commented Aug 6, 2024

nicolethoen commented Aug 6, 2024

jeff-phillips-18 commented Aug 6, 2024 •

edited

Loading

nicolethoen commented Aug 6, 2024

nicolethoen Aug 6, 2024

jenny-s51 Aug 6, 2024

jeff-phillips-18 Aug 6, 2024

jenny-s51 Aug 6, 2024

nicolethoen left a comment

github-actions bot commented Aug 6, 2024

fix(build): update to PF6 betas #228

fix(build): update to PF6 betas #228

Conversation

jenny-s51 commented Jul 30, 2024 • edited Loading

What

Type of change

patternfly-build commented Jul 30, 2024 • edited Loading

dlabaj left a comment

Choose a reason for hiding this comment

jenny-s51 left a comment

Choose a reason for hiding this comment

jeff-phillips-18 commented Aug 5, 2024

jenny-s51 commented Aug 5, 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

nicolethoen Aug 5, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jeff-phillips-18 commented Aug 6, 2024

nicolethoen commented Aug 6, 2024

jenny-s51 commented Aug 6, 2024 • edited Loading

jeff-phillips-18 commented Aug 6, 2024

nicolethoen commented Aug 6, 2024

jeff-phillips-18 commented Aug 6, 2024 • edited Loading

nicolethoen commented Aug 6, 2024

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

nicolethoen left a comment

Choose a reason for hiding this comment

github-actions bot commented Aug 6, 2024

jenny-s51 commented Jul 30, 2024 •

edited

Loading

patternfly-build commented Jul 30, 2024 •

edited

Loading

jenny-s51 commented Aug 5, 2024 •

edited

Loading

nicolethoen Aug 5, 2024 •

edited

Loading

jenny-s51 commented Aug 6, 2024 •

edited

Loading

jeff-phillips-18 commented Aug 6, 2024 •

edited

Loading