From fc95a30413bdf50105523643828f7b57e6ca5b2f Mon Sep 17 00:00:00 2001
From: Ezra Berch <ezraberch@mac.com>
Date: Mon, 7 Jun 2021 02:02:56 -0400
Subject: [PATCH] Allow DOMRenderer to render buttons with non-Text labels
 (#403)

---
 Sources/TokamakDOM/Views/Buttons/Button.swift | 40 ++++++++-----------
 Sources/TokamakDemo/ButtonStyleDemo.swift     | 29 ++++++++++++++
 2 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/Sources/TokamakDOM/Views/Buttons/Button.swift b/Sources/TokamakDOM/Views/Buttons/Button.swift
index 750326dda..fe290cd2b 100644
--- a/Sources/TokamakDOM/Views/Buttons/Button.swift
+++ b/Sources/TokamakDOM/Views/Buttons/Button.swift
@@ -18,9 +18,10 @@
 import TokamakCore
 import TokamakStaticHTML
 
-extension _Button: ViewDeferredToRenderer where Label == Text {
+extension _Button: ViewDeferredToRenderer {
   @_spi(TokamakCore)
   public var deferredBody: AnyView {
+    var attributes: [HTMLAttribute: String] = [:]
     let listeners: [String: Listener] = [
       "pointerdown": { _ in isPressed = true },
       "pointerup": { _ in
@@ -28,28 +29,21 @@ extension _Button: ViewDeferredToRenderer where Label == Text {
         action()
       },
     ]
-    if buttonStyle.type == DefaultButtonStyle.self {
-      return AnyView(DynamicHTML(
-        "button",
-        ["class": "_tokamak-buttonstyle-default"],
-        listeners: listeners
-      ) {
-        HTML("span", content: label.innerHTML(shouldSortAttributes: false) ?? "")
-      })
-    } else {
-      return AnyView(DynamicHTML(
-        "button",
-        ["class": "_tokamak-buttonstyle-reset"],
-        listeners: listeners
-      ) {
-        buttonStyle.makeBody(
-          configuration: _ButtonStyleConfigurationProxy(
-            label: AnyView(label),
-            isPressed: isPressed
-          ).subject
-        )
-        .colorScheme(.light)
-      })
+    if buttonStyle.type != DefaultButtonStyle.self {
+      attributes["class"] = "_tokamak-buttonstyle-reset"
     }
+    return AnyView(DynamicHTML(
+      "button",
+      attributes,
+      listeners: listeners
+    ) {
+      buttonStyle.makeBody(
+        configuration: _ButtonStyleConfigurationProxy(
+          label: AnyView(label),
+          isPressed: isPressed
+        ).subject
+      )
+      .colorScheme(.light)
+    })
   }
 }
diff --git a/Sources/TokamakDemo/ButtonStyleDemo.swift b/Sources/TokamakDemo/ButtonStyleDemo.swift
index 73608e059..3c469a353 100644
--- a/Sources/TokamakDemo/ButtonStyleDemo.swift
+++ b/Sources/TokamakDemo/ButtonStyleDemo.swift
@@ -30,12 +30,41 @@ public struct ButtonStyleDemo: View {
       Button("Default Style") {
         print("tapped")
       }
+      Button(action: { print("tapped") }, label: {
+        HStack {
+          Text("Default").padding(.trailing, 5)
+          Circle().frame(width: 10, height: 10, alignment: .center)
+          Text("Style").padding(.horizontal, 5)
+          Ellipse().fill(Color.red).frame(width: 20, height: 10, alignment: .center)
+          Text("With").padding(.horizontal, 5)
+          Capsule().fill(Color.green).frame(width: 20, height: 10, alignment: .center)
+          Text("Complex").padding(.horizontal, 5)
+          Rectangle().fill(Color.blue).frame(width: 10, height: 10, alignment: .center)
+          Text("Label").padding(.leading, 5)
+        }
+      })
       Button("Pressed Button Style") {
         print("tapped")
       }
       .buttonStyle(
         PressedButtonStyle(pressedColor: Color.red)
       )
+      Button(action: { print("tapped") }, label: {
+        HStack {
+          Text("Pressed").padding(.trailing, 5)
+          Circle().frame(width: 10, height: 10, alignment: .center)
+          Text("Style").padding(.horizontal, 5)
+          Ellipse().fill(Color.red).frame(width: 20, height: 10, alignment: .center)
+          Text("With").padding(.horizontal, 5)
+          Capsule().fill(Color.green).frame(width: 20, height: 10, alignment: .center)
+          Text("Complex").padding(.horizontal, 5)
+          Rectangle().fill(Color.blue).frame(width: 10, height: 10, alignment: .center)
+          Text("Label").padding(.leading, 5)
+        }
+      })
+      .buttonStyle(
+            PressedButtonStyle(pressedColor: Color.red)
+      )
     }
   }
 }