Skip to content

Commit e4cff7c

Browse files
Merge pull request #91 from componentskit/new-button-styles
Add `minimal` button style
2 parents aed772d + 6641e46 commit e4cff7c

File tree

6 files changed

+51
-34
lines changed

6 files changed

+51
-34
lines changed

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ struct AutocapitalizationPicker: View {
3636

3737
struct BorderWidthPicker: View {
3838
@Binding var selection: BorderWidth
39-
39+
4040
var body: some View {
4141
Picker("Border Width", selection: self.$selection) {
4242
Text("None").tag(BorderWidth.none)
@@ -47,6 +47,22 @@ struct BorderWidthPicker: View {
4747
}
4848
}
4949

50+
struct ButtonStylePicker: View {
51+
@Binding var selection: ComponentsKit.ButtonStyle
52+
53+
var body: some View {
54+
Picker("Style", selection: $selection) {
55+
Text("Filled").tag(ButtonStyle.filled)
56+
Text("Plain").tag(ButtonStyle.plain)
57+
Text("Light").tag(ButtonStyle.light)
58+
Text("Minimal").tag(ButtonStyle.minimal)
59+
Text("Bordered with small border").tag(ButtonStyle.bordered(.small))
60+
Text("Bordered with medium border").tag(ButtonStyle.bordered(.medium))
61+
Text("Bordered with large border").tag(ButtonStyle.bordered(.large))
62+
}
63+
}
64+
}
65+
5066
// MARK: - ComponentColorPicker
5167

5268
struct ComponentColorPicker: View {

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -115,14 +115,7 @@ struct AlertPreview: View {
115115
ComponentRadiusPicker(selection: buttonVM.cornerRadius) {
116116
Text("Custom: 20px").tag(ComponentRadius.custom(20))
117117
}
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)
126119
}
127120
}
128121

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

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import SwiftUI
33
import UIKit
44

55
struct ButtonPreview: View {
6+
private static let title = "Button"
67
@State private var model = ButtonVM {
7-
$0.title = "Button"
8+
$0.title = Self.title
89
}
910

1011
var body: some View {
@@ -43,18 +44,11 @@ struct ButtonPreview: View {
4344
Toggle("Show Title", isOn: Binding<Bool>(
4445
get: { !self.model.title.isEmpty },
4546
set: { newValue in
46-
self.model.title = newValue ? "Button" : ""
47+
self.model.title = newValue ? Self.title : ""
4748
}
4849
))
4950
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)
5852
}
5953
}
6054
}

Sources/ComponentsKit/Components/Alert/UKAlertController.swift

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,11 +143,14 @@ public class UKAlertController: UKCenterModalController {
143143
self.buttonsStackView.removeArrangedSubview(self.secondaryButton)
144144
self.buttonsStackView.insertArrangedSubview(self.secondaryButton, at: 0)
145145
self.buttonsStackView.axis = .horizontal
146+
self.buttonsStackView.distribution = .fillEqually
146147
case .vertical:
147148
self.buttonsStackView.axis = .vertical
149+
self.buttonsStackView.distribution = .fillProportionally
148150
}
149151
} else {
150152
self.buttonsStackView.axis = .vertical
153+
self.buttonsStackView.distribution = .fillProportionally
151154
}
152155
}
153156
}
@@ -173,7 +176,6 @@ extension UKAlertController {
173176
}
174177

175178
static func buttonsStackView(_ stackView: UIStackView) {
176-
stackView.distribution = .fillEqually
177179
stackView.spacing = AlertVM.buttonsSpacing
178180
}
179181
}

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

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -93,30 +93,30 @@ extension ButtonVM {
9393
case .light:
9494
let color = self.color?.background ?? .content1
9595
return color.enabled(self.isInteractive)
96-
case .plain, .bordered:
96+
case .plain, .bordered, .minimal:
9797
return nil
9898
}
9999
}
100100
var foregroundColor: UniversalColor {
101101
let color = switch self.style {
102102
case .filled:
103103
self.color?.contrast ?? .foreground
104-
case .plain, .light, .bordered:
104+
case .plain, .light, .bordered, .minimal:
105105
self.color?.main ?? .foreground
106106
}
107107
return color.enabled(self.isInteractive)
108108
}
109109
var borderWidth: CGFloat {
110110
switch self.style {
111-
case .filled, .plain, .light:
111+
case .filled, .plain, .light, .minimal:
112112
return 0.0
113113
case .bordered(let borderWidth):
114114
return borderWidth.value
115115
}
116116
}
117117
var borderColor: UniversalColor? {
118118
switch self.style {
119-
case .filled, .plain, .light:
119+
case .filled, .plain, .light, .minimal:
120120
return nil
121121
case .bordered:
122122
if let color {
@@ -140,11 +140,16 @@ extension ButtonVM {
140140
return .lgButton
141141
}
142142
}
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+
}
148153
}
149154
}
150155
var imageSide: CGFloat {
@@ -155,10 +160,15 @@ extension ButtonVM {
155160
}
156161
}
157162
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+
}
162172
}
163173
}
164174
}
@@ -196,7 +206,7 @@ extension ButtonVM {
196206
width = contentSize.width + 2 * self.horizontalPadding
197207
}
198208

199-
return .init(width: width, height: self.height)
209+
return .init(width: width, height: self.height ?? contentSize.height)
200210
}
201211
func shouldUpdateImagePosition(_ oldModel: Self?) -> Bool {
202212
guard let oldModel else { return true }

Sources/ComponentsKit/Shared/Types/ButtonStyle.swift

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,6 @@ public enum ButtonStyle: Hashable {
1010
case light
1111
/// A button with a transparent background and a border.
1212
case bordered(BorderWidth)
13+
/// A button with no background or padding, sized strictly to fit its content.
14+
case minimal
1315
}

0 commit comments

Comments
 (0)