feat: use patternfly v6

Author: MarcAntoine-Arnaud

Cargo.lock

@@ -13,7 +13,7 @@ browser-panic-hook = "0.2"
 chrono = { version = "0.4.30", default-features = false, features = ["wasmbind"] }
 gloo-utils = "0.2"
 log = "0.4"
-patternfly-yew = { version = "0.6.1", features = ["tree", "icons-fab"] }
+patternfly-yew = { version = "0.6.3", features = ["tree", "icons-fab"] }
 popper-rs = { version = "0.4", features = ["yew", "debug"] }
 serde_json = "1"
 strum = { version = "0.27", features = ["derive"] }
@@ -35,8 +35,8 @@ features = [
 ]
 
 [patch.crates-io]
-#patternfly-yew = { path = "../patternfly-yew" }
-#patternfly-yew = { git = "https://github.com/patternfly-yew/patternfly-yew", rev = "00b862fd1c72a98229b8c56cf13f9009992cf70c" } # FIXME: awaiting release
+# patternfly-yew = { path = "../patternfly-yew" }
+patternfly-yew = { git = "https://github.com/luminvent/patternfly-yew", branch = "feat/patternfly6" } # FIXME: awaiting release
 #yew-nested-router = { path = "../yew-nested-router" }
 #yew-more-hooks = { git = "https://github.com/ctron/yew-more-hooks", rev = "f535bb2e7b227aac7010035215c11d4aeae6cb62" } # FIXME: awaiting release
 #yew-more-hooks = { path = "../yew-more-hooks" }

Cargo.toml

@@ -1,5 +1,5 @@
 // only required if you are using the icons-far or icons-fab feature
-$fa-font-path: "webfonts";
+// $fa-font-path: "webfonts";
 @import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
 @import "../node_modules/@fortawesome/fontawesome-free/scss/brands";
 

assets/images/pf-logo.svg

@@ -6,8 +6,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.5.2",
-    "@patternfly/patternfly": "^5.3.0"
+    "@fortawesome/fontawesome-free": "^7.1.0",
+    "@patternfly/patternfly": "^6.4.0"
   },
   "//dependencies": {
     "@fortawesome/fontawesome-free": "Only required if you are enabling the icons-fab or icons-far feature"

assets/style.scss

@@ -24,7 +24,6 @@ pub enum Component {
     Button,
     Card,
     Clipboard,
-    Chip,
     CodeBlock,
     Date(Date),
     DescriptionList,
@@ -144,7 +143,6 @@ fn switch_app_route(target: AppRoute) -> Html {
         Component::Breadcrumb => html! {<components::BreadcrumbExample/>},
         Component::Button => html! {<components::ButtonExample/>},
         Component::Card => html! {<components::CardExample/>},
-        Component::Chip => html! {<components::ChipExample/>},
         Component::Clipboard => html! {<components::ClipboardExample/>},
         Component::CodeBlock => html! {<components::CodeBlockExample/>},
         Component::Date(Date::Calendar) => html! {<components::CalendarExample/>},
@@ -268,7 +266,7 @@ fn page(props: &PageProps) -> Html {
                         <NavRouterItem<AppRoute> to={AppRoute::Counter}>{"Counter"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Icons}>{"Icons"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Panic}>{"Panic"}</NavRouterItem<AppRoute>>
-                        <NavLink href="https://github.com/patternfly-yew/patternfly-yew" target="_blank">{"PatternFly Yew "} {Icon::ExternalLinkAlt.with_classes(classes!("pf-v5-u-ml-sm", "pf-v5-u-color-200"))}</NavLink>
+                        <NavLink href="https://github.com/patternfly-yew/patternfly-yew" target="_blank">{"PatternFly Yew "} {Icon::ExternalLinkAlt.with_classes(classes!("pf-v6-u-ml-sm", "pf-v6-u-color-200"))}</NavLink>
                     </NavExpandable>
                     <NavExpandable title="Components">
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Accordion)}>{"Accordion"}</NavRouterItem<AppRoute>>
@@ -280,7 +278,6 @@ fn page(props: &PageProps) -> Html {
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Breadcrumb)}>{"Breadcrumb"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Button)}>{"Button"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Card)}>{"Card"}</NavRouterItem<AppRoute>>
-                        <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Chip)}>{"Chip"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Clipboard)}>{"Clipboard"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::CodeBlock)}>{"Code Block"}</NavRouterItem<AppRoute>>
                         <NavExpandable title="Date">
@@ -348,7 +345,9 @@ fn page(props: &PageProps) -> Html {
 
     let brand = html! (
         <MastheadBrand>
-            <Brand src="assets/images/pf-logo.svg" alt="Patternfly Logo" style="--pf-v5-c-brand--Height: 36px;"/>
+            <div className="show-light">
+                <Brand src="/images/pf-logo.svg" alt="Patternfly Logo" style="--pf-v6-c-brand--Height: 36px;"/>
+            </div>
         </MastheadBrand>
     );
 
@@ -377,7 +376,7 @@ fn page(props: &PageProps) -> Html {
 
     // apply dark mode
     use_effect_with(*darkmode, |state| match state {
-        true => gloo_utils::document_element().set_class_name("pf-v5-theme-dark"),
+        true => gloo_utils::document_element().set_class_name("pf-v6-theme-dark"),
         false => gloo_utils::document_element().set_class_name(""),
     });
 
@@ -388,7 +387,7 @@ fn page(props: &PageProps) -> Html {
         <Toolbar full_height=true>
             <ToolbarContent>
                 <ToolbarGroup
-                    modifiers={ToolbarElementModifier::Right.all()}
+                    modifiers={ToolbarElementModifier::End.all()}
                     variant={GroupVariant::IconButton}
                 >
                     <ToolbarItem>

package-lock.json

@@ -1,3 +1,3 @@
 html!(
-    <Brand src="assets/images/pf_logo.svg" alt="PatternFly logo" />
+    <Brand src="/images/pf-logo.svg" alt="PatternFly logo" />
 )

package.json

@@ -38,7 +38,6 @@
         let flat = use_state(|| false);
         let full_height = use_state(|| false);
         let plain = use_state(|| false);
-        let rounded = use_state(|| false);
 
         let change_callback = |handle: &UseStateHandle<bool>| {
             let handle = handle.clone();
@@ -54,9 +53,8 @@
                         <ListItem><Switch label="flat" checked={*flat} onchange={change_callback(&flat)} /></ListItem>
                         <ListItem><Switch label="full height" checked={*full_height} onchange={change_callback(&full_height)} /></ListItem>
                         <ListItem><Switch label="plain" checked={*plain} onchange={change_callback(&plain)} /></ListItem>
-                        <ListItem><Switch label="rounded" checked={*rounded} onchange={change_callback(&rounded)} /></ListItem>
                         <ListItem>
-                            <Dropdown text={card_size_to_text(*size)}>
+                            <Dropdown text={html!{card_size_to_text(*size)}}>
                                 <SizeAction size={CardSize::Default} onchange={change_size.clone()} />
                                 <SizeAction size={CardSize::Compact} onchange={change_size.clone()} />
                                 <SizeAction size={CardSize::Large} onchange={change_size.clone()} />
@@ -71,7 +69,6 @@
                         flat={*flat}
                         full_height={*full_height}
                         plain={*plain}
-                        rounded={*rounded}
                         >
                         <CardBody>{ "Body" }</CardBody>
                         <CardFooter>{ "Footer" }</CardFooter>