Merge pull request #91 from componentskit/new-button-styles

mikhailChelbaev · web-flow · commit e4cff7c4703f · 2025-04-28T12:28:09.000+03:00
Add `minimal` button style
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift b/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 {
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/AlertPreview.swift b/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)
     }
   }
   
diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/ButtonPreview.swift b/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)
       }
     }
   }
diff --git a/Sources/ComponentsKit/Components/Alert/UKAlertController.swift b/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
     }
   }
diff --git a/Sources/ComponentsKit/Components/Button/Models/ButtonVM.swift b/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 }
diff --git a/Sources/ComponentsKit/Shared/Types/ButtonStyle.swift b/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
 }

Original file line number	Diff line number	Diff line change
`@@ -115,14 +115,7 @@ struct AlertPreview: View {`
`115`	`115`	`ComponentRadiusPicker(selection: buttonVM.cornerRadius) {`
`116`	`116`	`Text("Custom: 20px").tag(ComponentRadius.custom(20))`
`117`	`117`	`}`
`118`		`- Picker("Style", selection: buttonVM.style) {`
`119`		`- Text("Filled").tag(ButtonStyle.filled)`
`120`		`- Text("Plain").tag(ButtonStyle.plain)`
`121`		`- Text("Light").tag(ButtonStyle.light)`
`122`		`- Text("Bordered with small border").tag(ButtonStyle.bordered(.small))`
`123`		`- Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium))`
`124`		`- Text("Bordered with large border").tag(ButtonStyle.bordered(.large))`
`125`		`- }`
	`118`	`+ ButtonStylePicker(selection: buttonVM.style)`
`126`	`119`	`}`
`127`	`120`	`}`
`128`	`121`
Original file line number	Diff line number	Diff line change
`@@ -3,8 +3,9 @@ import SwiftUI`
`3`	`3`	`import UIKit`
`4`	`4`
`5`	`5`	`struct ButtonPreview: View {`
	`6`	`+ private static let title = "Button"`
`6`	`7`	`@State private var model = ButtonVM {`
`7`		`- $0.title = "Button"`
	`8`	`+ $0.title = Self.title`
`8`	`9`	`}`
`9`	`10`
`10`	`11`	`var body: some View {`
`@@ -43,18 +44,11 @@ struct ButtonPreview: View {`
`43`	`44`	`Toggle("Show Title", isOn: Binding<Bool>(`
`44`	`45`	`get: { !self.model.title.isEmpty },`
`45`	`46`	`set: { newValue in`
`46`		`- self.model.title = newValue ? "Button" : ""`
	`47`	`+ self.model.title = newValue ? Self.title : ""`
`47`	`48`	`}`
`48`	`49`	`))`
`49`	`50`	`SizePicker(selection: self.$model.size)`
`50`		`- Picker("Style", selection: self.$model.style) {`
`51`		`- Text("Filled").tag(ButtonStyle.filled)`
`52`		`- Text("Plain").tag(ButtonStyle.plain)`
`53`		`- Text("Light").tag(ButtonStyle.light)`
`54`		`- Text("Bordered with small border").tag(ButtonStyle.bordered(.small))`
`55`		`- Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium))`
`56`		`- Text("Bordered with large border").tag(ButtonStyle.bordered(.large))`
`57`		`- }`
	`51`	`+ ButtonStylePicker(selection: self.$model.style)`
`58`	`52`	`}`
`59`	`53`	`}`
`60`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -143,11 +143,14 @@ public class UKAlertController: UKCenterModalController {`
`143`	`143`	`self.buttonsStackView.removeArrangedSubview(self.secondaryButton)`
`144`	`144`	`self.buttonsStackView.insertArrangedSubview(self.secondaryButton, at: 0)`
`145`	`145`	`self.buttonsStackView.axis = .horizontal`
	`146`	`+ self.buttonsStackView.distribution = .fillEqually`
`146`	`147`	`case .vertical:`
`147`	`148`	`self.buttonsStackView.axis = .vertical`
	`149`	`+ self.buttonsStackView.distribution = .fillProportionally`
`148`	`150`	`}`
`149`	`151`	`} else {`
`150`	`152`	`self.buttonsStackView.axis = .vertical`
	`153`	`+ self.buttonsStackView.distribution = .fillProportionally`
`151`	`154`	`}`
`152`	`155`	`}`
`153`	`156`	`}`
`@@ -173,7 +176,6 @@ extension UKAlertController {`
`173`	`176`	`}`
`174`	`177`
`175`	`178`	`static func buttonsStackView(_ stackView: UIStackView) {`
`176`		`- stackView.distribution = .fillEqually`
`177`	`179`	`stackView.spacing = AlertVM.buttonsSpacing`
`178`	`180`	`}`
`179`	`181`	`}`
Original file line number	Diff line number	Diff line change
`@@ -93,30 +93,30 @@ extension ButtonVM {`
`93`	`93`	`case .light:`
`94`	`94`	`let color = self.color?.background ?? .content1`
`95`	`95`	`return color.enabled(self.isInteractive)`
`96`		`- case .plain, .bordered:`
	`96`	`+ case .plain, .bordered, .minimal:`
`97`	`97`	`return nil`
`98`	`98`	`}`
`99`	`99`	`}`
`100`	`100`	`var foregroundColor: UniversalColor {`
`101`	`101`	`let color = switch self.style {`
`102`	`102`	`case .filled:`
`103`	`103`	`self.color?.contrast ?? .foreground`
`104`		`- case .plain, .light, .bordered:`
	`104`	`+ case .plain, .light, .bordered, .minimal:`
`105`	`105`	`self.color?.main ?? .foreground`
`106`	`106`	`}`
`107`	`107`	`return color.enabled(self.isInteractive)`
`108`	`108`	`}`
`109`	`109`	`var borderWidth: CGFloat {`
`110`	`110`	`switch self.style {`
`111`		`- case .filled, .plain, .light:`
	`111`	`+ case .filled, .plain, .light, .minimal:`
`112`	`112`	`return 0.0`
`113`	`113`	`case .bordered(let borderWidth):`
`114`	`114`	`return borderWidth.value`
`115`	`115`	`}`
`116`	`116`	`}`
`117`	`117`	`var borderColor: UniversalColor? {`
`118`	`118`	`switch self.style {`
`119`		`- case .filled, .plain, .light:`
	`119`	`+ case .filled, .plain, .light, .minimal:`
`120`	`120`	`return nil`
`121`	`121`	`case .bordered:`
`122`	`122`	`if let color {`
`@@ -140,11 +140,16 @@ extension ButtonVM {`
`140`	`140`	`return .lgButton`
`141`	`141`	`}`
`142`	`142`	`}`
`143`		`- var height: CGFloat {`
`144`		`- return switch self.size {`
`145`		`- case .small: 36`
`146`		`- case .medium: 44`
`147`		`- case .large: 52`
	`143`	`+ var height: CGFloat? {`
	`144`	`+ switch self.style {`
	`145`	`+ case .minimal:`
	`146`	`+ return nil`
	`147`	`+ case .light, .filled, .bordered, .plain:`
	`148`	`+ return switch self.size {`
	`149`	`+ case .small: 36`
	`150`	`+ case .medium: 44`
	`151`	`+ case .large: 52`
	`152`	`+ }`
`148`	`153`	`}`
`149`	`154`	`}`
`150`	`155`	`var imageSide: CGFloat {`
`@@ -155,10 +160,15 @@ extension ButtonVM {`
`155`	`160`	`}`
`156`	`161`	`}`
`157`	`162`	`var horizontalPadding: CGFloat {`
`158`		`- return switch self.size {`
`159`		`- case .small: 16`
`160`		`- case .medium: 20`
`161`		`- case .large: 24`
	`163`	`+ switch self.style {`
	`164`	`+ case .minimal:`
	`165`	`+ return 0`
	`166`	`+ case .light, .filled, .bordered, .plain:`
	`167`	`+ return switch self.size {`
	`168`	`+ case .small: 16`
	`169`	`+ case .medium: 20`
	`170`	`+ case .large: 24`
	`171`	`+ }`
`162`	`172`	`}`
`163`	`173`	`}`
`164`	`174`	`}`
`@@ -196,7 +206,7 @@ extension ButtonVM {`
`196`	`206`	`width = contentSize.width + 2 * self.horizontalPadding`
`197`	`207`	`}`
`198`	`208`
`199`		`- return .init(width: width, height: self.height)`
	`209`	`+ return .init(width: width, height: self.height ?? contentSize.height)`
`200`	`210`	`}`
`201`	`211`	`func shouldUpdateImagePosition(_ oldModel: Self?) -> Bool {`
`202`	`212`	`guard let oldModel else { return true }`
Original file line number	Diff line number	Diff line change
`@@ -10,4 +10,6 @@ public enum ButtonStyle: Hashable {`
`10`	`10`	`case light`
`11`	`11`	`/// A button with a transparent background and a border.`
`12`	`12`	`case bordered(BorderWidth)`
	`13`	`+ /// A button with no background or padding, sized strictly to fit its content.`
	`14`	`+ case minimal`
`13`	`15`	`}`