refactor: Port copyable input, expandable sections and switch to PatternFly V6

Signed-off-by: Felicitas Pojtinger <[email protected]>

Author: pojntfx

pkg/components/copyable_input.go

@@ -16,7 +16,11 @@ func (c *CopyableInput) Render() app.UI {
 			app.Div().
 				Class("pf-v6-c-clipboard-copy__group").
 				Body(
-					c.Component,
+					app.Span().
+						Class("pf-v6-c-form-control").
+						Body(
+							c.Component,
+						),
 					app.Button().
 						Class("pf-v6-c-button pf-m-control").
 						Type("button").

pkg/components/expandable_section.go

@@ -25,33 +25,37 @@ func (c *ExpandableSection) Render() app.UI {
 			return classes
 		}()).
 		Body(
-			app.Button().
-				Type("button").
+			app.Div().
 				Class("pf-v6-c-expandable-section__toggle").
-				Aria("label", func() string {
-					message := c.ClosedTitle
-
-					if c.Open {
-						message = c.OpenTitle
-					}
-
-					return message
-				}()).
-				Aria("expanded", c.Open).
-				OnClick(func(ctx app.Context, e app.Event) {
-					c.OnToggle()
-				}).
 				Body(
-					app.Span().
-						Class("pf-v6-c-expandable-section__toggle-icon").
+					app.Button().
+						Type("button").
+						Class("pf-v6-c-button pf-m-link").
+						Aria("label", func() string {
+							message := c.ClosedTitle
+
+							if c.Open {
+								message = c.OpenTitle
+							}
+
+							return message
+						}()).
+						Aria("expanded", c.Open).
+						OnClick(func(ctx app.Context, e app.Event) {
+							c.OnToggle()
+						}).
 						Body(
-							app.I().
-								Class("fas fa-angle-right").
-								Aria("hidden", true),
+							app.Span().
+								Class("pf-v6-c-button__icon pf-m-start").
+								Body(
+									app.I().
+										Class("fas fa-angle-right").
+										Aria("hidden", true),
+								),
+							app.Span().
+								Class("pf-v6-c-button__text").
+								Text(c.Title),
 						),
-					app.Span().
-						Class("pf-v6-c-expandable-section__toggle-text").
-						Text(c.Title),
 				),
 			app.Div().
 				Class("pf-v6-c-expandable-section__content").

pkg/components/file_explorer.go

@@ -855,7 +855,8 @@ func (c *FileExplorer) Render() app.UI {
 												Class("pf-v6-c-form pf-m-horizontal pf-v6-u-mb-md").
 												Body(
 													&FormGroup{
-														NoTopPadding: true,
+														NoTopPadding:     true,
+														NoControlWrapper: true,
 														Label: app.Label().
 															For("use-advertised-ip-for-webdav").
 															Class("pf-v6-c-form__label").
@@ -878,7 +879,8 @@ func (c *FileExplorer) Render() app.UI {
 														},
 													},
 													&FormGroup{
-														NoTopPadding: true,
+														NoTopPadding:     true,
+														NoControlWrapper: true,
 														Label: app.Label().
 															For("use-davs").
 															Class("pf-v6-c-form__label").
@@ -1015,7 +1017,8 @@ func (c *FileExplorer) Render() app.UI {
 												Class("pf-v6-c-form pf-m-horizontal pf-v6-u-mb-md").
 												Body(
 													&FormGroup{
-														NoTopPadding: true,
+														NoTopPadding:     true,
+														NoControlWrapper: true,
 														Label: app.Label().
 															For("use-advertised-ip").
 															Class("pf-v6-c-form__label").
@@ -1038,7 +1041,8 @@ func (c *FileExplorer) Render() app.UI {
 														},
 													},
 													&FormGroup{
-														NoTopPadding: true,
+														NoTopPadding:     true,
+														NoControlWrapper: true,
 														Label: app.Label().
 															For("use-https").
 															Class("pf-v6-c-form__label").

pkg/components/form_group.go

@@ -5,10 +5,11 @@ import "github.com/maxence-charriere/go-app/v10/pkg/app"
 type FormGroup struct {
 	app.Compo
 
-	Required     bool
-	Label        app.UI
-	Input        app.UI
-	NoTopPadding bool
+	Required         bool
+	Label            app.UI
+	Input            app.UI
+	NoTopPadding     bool
+	NoControlWrapper bool
 }
 
 func (c *FormGroup) Render() app.UI {
@@ -38,12 +39,20 @@ func (c *FormGroup) Render() app.UI {
 			app.Div().
 				Class("pf-v6-c-form__group-control").
 				Body(
-					app.
-						Span().
-						Class("pf-v6-c-form-control").
-						Body(
-							c.Input,
-						),
+					app.If(
+						c.NoControlWrapper,
+						func() app.UI {
+							return c.Input
+						},
+					).Else(
+						func() app.UI {
+							return app.
+								Span().
+								Class("pf-v6-c-form-control").
+								Body(
+									c.Input,
+								)
+						}),
 				),
 		)
 }

pkg/components/switch.go

@@ -34,7 +34,7 @@ func (c *Switch) Render() app.UI {
 			app.Span().
 				Class("pf-v6-c-switch__toggle"),
 			app.If(
-				c.OnMessage != "",
+				c.OnMessage != "" && c.Open,
 				func() app.UI {
 					return app.Span().
 						Class("pf-v6-c-switch__label pf-m-on").
@@ -44,7 +44,7 @@ func (c *Switch) Render() app.UI {
 				},
 			),
 			app.If(
-				c.OffMessage != "",
+				c.OffMessage != "" && !c.Open,
 				func() app.UI {
 					return app.Span().
 						Class("pf-v6-c-switch__label pf-m-off").