diff --git a/Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift b/Examples/DemosApp/DemosApp/ComponentsPreview/Helpers/PreviewPickers.swift index e442e134..e97783d9 100644 --- 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 index 93e3b098..658a73d0 100644 --- 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 index 7f7715e6..19dc015b 100644 --- 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( 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 index a1731720..2af9e366 100644 --- 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 index 90c3bc45..bd9242fb 100644 --- a/Sources/ComponentsKit/Components/Button/Models/ButtonVM.swift +++ b/Sources/ComponentsKit/Components/Button/Models/ButtonVM.swift @@ -93,7 +93,7 @@ extension ButtonVM { case .light: let color = self.color?.background ?? .content1 return color.enabled(self.isInteractive) - case .plain, .bordered: + case .plain, .bordered, .minimal: return nil } } @@ -101,14 +101,14 @@ extension ButtonVM { 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 @@ -116,7 +116,7 @@ extension ButtonVM { } 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 index bc598997..0dc44879 100644 --- 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 }