Add minimal button style

Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift

@@ -36,7 +36,7 @@ struct AutocapitalizationPicker: View {
 
 struct BorderWidthPicker: View {
   @Binding var selection: BorderWidth
-  
+
   var body: some View {
     Picker("Border Width", selection: self.$selection) {
       Text("None").tag(BorderWidth.none)
@@ -47,6 +47,22 @@ struct BorderWidthPicker: View {
   }
 }
 
+struct ButtonStylePicker: View {
+  @Binding var selection: ComponentsKit.ButtonStyle
+
+  var body: some View {
+    Picker("Style", selection: $selection) {
+      Text("Filled").tag(ButtonStyle.filled)
+      Text("Plain").tag(ButtonStyle.plain)
+      Text("Light").tag(ButtonStyle.light)
+      Text("Minimal").tag(ButtonStyle.minimal)
+      Text("Bordered with small border").tag(ButtonStyle.bordered(.small))
+      Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium))
+      Text("Bordered with large border").tag(ButtonStyle.bordered(.large))
+    }
+  }
+}
+
 // MARK: - ComponentColorPicker
 
 struct ComponentColorPicker: View {

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/AlertPreview.swift

@@ -115,14 +115,7 @@ struct AlertPreview: View {
       ComponentRadiusPicker(selection: buttonVM.cornerRadius) {
         Text("Custom: 20px").tag(ComponentRadius.custom(20))
       }
-      Picker("Style", selection: buttonVM.style) {
-        Text("Filled").tag(ButtonStyle.filled)
-        Text("Plain").tag(ButtonStyle.plain)
-        Text("Light").tag(ButtonStyle.light)
-        Text("Bordered with small border").tag(ButtonStyle.bordered(.small))
-        Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium))
-        Text("Bordered with large border").tag(ButtonStyle.bordered(.large))
-      }
+      ButtonStylePicker(selection: buttonVM.style)
     }
   }
 

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift

@@ -3,8 +3,9 @@ import SwiftUI
 import UIKit
 
 struct ButtonPreview: View {
+  private static let title = "Button"
   @State private var model = ButtonVM {
-    $0.title = "Button"
+    $0.title = Self.title
   }
 
   var body: some View {
@@ -43,18 +44,11 @@ struct ButtonPreview: View {
         Toggle("Show Title", isOn: Binding<Bool>(
           get: { !self.model.title.isEmpty },
           set: { newValue in
-            self.model.title = newValue ? "Button" : ""
+            self.model.title = newValue ? Self.title : ""
           }
         ))
         SizePicker(selection: self.$model.size)
-        Picker("Style", selection: self.$model.style) {
-          Text("Filled").tag(ButtonStyle.filled)
-          Text("Plain").tag(ButtonStyle.plain)
-          Text("Light").tag(ButtonStyle.light)
-          Text("Bordered with small border").tag(ButtonStyle.bordered(.small))
-          Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium))
-          Text("Bordered with large border").tag(ButtonStyle.bordered(.large))
-        }
+        ButtonStylePicker(selection: self.$model.style)
       }
     }
   }

Sources/ComponentsKit/Components/Alert/UKAlertController.swift

@@ -143,11 +143,14 @@ public class UKAlertController: UKCenterModalController {
         self.buttonsStackView.removeArrangedSubview(self.secondaryButton)
         self.buttonsStackView.insertArrangedSubview(self.secondaryButton, at: 0)
         self.buttonsStackView.axis = .horizontal
+        self.buttonsStackView.distribution = .fillEqually
       case .vertical:
         self.buttonsStackView.axis = .vertical
+        self.buttonsStackView.distribution = .fillProportionally
       }
     } else {
       self.buttonsStackView.axis = .vertical
+      self.buttonsStackView.distribution = .fillProportionally
     }
   }
 }
@@ -173,7 +176,6 @@ extension UKAlertController {
     }
 
     static func buttonsStackView(_ stackView: UIStackView) {
-      stackView.distribution = .fillEqually
       stackView.spacing = AlertVM.buttonsSpacing
     }
   }

Sources/ComponentsKit/Components/Button/Models/ButtonVM.swift

@@ -93,30 +93,30 @@ extension ButtonVM {
     case .light:
       let color = self.color?.background ?? .content1
       return color.enabled(self.isInteractive)
-    case .plain, .bordered:
+    case .plain, .bordered, .minimal:
       return nil
     }
   }
   var foregroundColor: UniversalColor {
     let color = switch self.style {
     case .filled:
       self.color?.contrast ?? .foreground
-    case .plain, .light, .bordered:
+    case .plain, .light, .bordered, .minimal:
       self.color?.main ?? .foreground
     }
     return color.enabled(self.isInteractive)
   }
   var borderWidth: CGFloat {
     switch self.style {
-    case .filled, .plain, .light:
+    case .filled, .plain, .light, .minimal:
       return 0.0
     case .bordered(let borderWidth):
       return borderWidth.value
     }
   }
   var borderColor: UniversalColor? {
     switch self.style {
-    case .filled, .plain, .light:
+    case .filled, .plain, .light, .minimal:
       return nil
     case .bordered:
       if let color {
@@ -140,11 +140,16 @@ extension ButtonVM {
       return .lgButton
     }
   }
-  var height: CGFloat {
-    return switch self.size {
-    case .small: 36
-    case .medium: 44
-    case .large: 52
+  var height: CGFloat? {
+    switch self.style {
+    case .minimal:
+      return nil
+    case .light, .filled, .bordered, .plain:
+      return switch self.size {
+      case .small: 36
+      case .medium: 44
+      case .large: 52
+      }
     }
   }
   var imageSide: CGFloat {
@@ -155,10 +160,15 @@ extension ButtonVM {
     }
   }
   var horizontalPadding: CGFloat {
-    return switch self.size {
-    case .small: 16
-    case .medium: 20
-    case .large: 24
+    switch self.style {
+    case .minimal:
+      return 0
+    case .light, .filled, .bordered, .plain:
+      return switch self.size {
+      case .small: 16
+      case .medium: 20
+      case .large: 24
+      }
     }
   }
 }
@@ -196,7 +206,7 @@ extension ButtonVM {
       width = contentSize.width + 2 * self.horizontalPadding
     }
 
-    return .init(width: width, height: self.height)
+    return .init(width: width, height: self.height ?? contentSize.height)
   }
   func shouldUpdateImagePosition(_ oldModel: Self?) -> Bool {
     guard let oldModel else { return true }

Sources/ComponentsKit/Shared/Types/ButtonStyle.swift

@@ -10,4 +10,6 @@ public enum ButtonStyle: Hashable {
   case light
   /// A button with a transparent background and a border.
   case bordered(BorderWidth)
+  /// A button with no background or padding, sized strictly to fit its content.
+  case minimal
 }