Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat HintView Alignment & Button Customization #283

Merged
merged 5 commits into from
Dec 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ public struct HintsView: View {
@State var isPresented2 = true

@State var isPresented3 = true

@State var isPresented4 = true

public var body: some View {
ScrollView {
Expand All @@ -17,7 +19,11 @@ public struct HintsView: View {

CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresented2)

CharcoalHint(text: "ヒントテキストヒントテキスト", maxWidth: .infinity, isPresenting: $isPresented3)
CharcoalHint(text: "ヒントテキストヒントテキスト", maxWidth: .infinity, isPresenting: $isPresented3, alignment: .leading)

CharcoalHint(text: "ヒントテキストヒントテキスト", maxWidth: .infinity, isPresenting: $isPresented4, buttonStyle: .default, action: CharcoalAction(title: "Button") {
isPresented = false
})
}
.padding()
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ final class HintsViewController: UIViewController {
hint.widthAnchor.constraint(equalTo: stackView.widthAnchor).isActive = true
}
}

}

@available(iOS 17.0, *)
Expand Down
38 changes: 38 additions & 0 deletions Sources/CharcoalSwiftUI/Components/Buttons/CharcoalButton.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import SwiftUI

public protocol CharcoalButtonModifier: ViewModifier {}

public enum CharcoalButtonStyle {
case primary(Configuration)
case `default`

@ViewBuilder
func apply<Content: View>(_ content: Content) -> some View {
switch self {
case let .primary(configuration):
content.charcoalPrimaryButton(size: configuration.size, isFixed: configuration.isFixed, primaryColor: configuration.primaryColor)
case .default:
content.charcoalDefaultButton(size: .medium, isFixed: true)
}
}
}

extension CharcoalButtonStyle {
public struct Configuration {
public var size: CharcoalButtonSize
public var isFixed: Bool
public var primaryColor: Color

public init(size: CharcoalButtonSize = .medium, isFixed: Bool = true, primaryColor: Color) {
self.size = size
self.isFixed = isFixed
self.primaryColor = primaryColor
}
}
}

extension View {
func charcoalButtonStyle(_ style: CharcoalButtonStyle) -> some View {
style.apply(self)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ struct CharcoalNavigationButtonStyleModifier: ViewModifier {

public extension View {
/// Set the style of the button to Charcoal's navigation button
///
///
/// - Parameters:
/// - size: The size of the button
/// - isFixed: Whether the button should have a fixed width
Expand Down
50 changes: 25 additions & 25 deletions Sources/CharcoalSwiftUI/Components/CharcoalSpinner.swift
Original file line number Diff line number Diff line change
Expand Up @@ -115,33 +115,33 @@ public extension View {
}

#if compiler(>=6.0)
@available(iOS 17, *)
#Preview {
@Previewable @State var isPresenting = true
@Previewable @State var isBigPresenting = true
@Previewable @State var isTransparentPresenting = true

ZStack {
Color.gray.opacity(0.2)
VStack {
Button {
isPresenting.toggle()
} label: {
Text("Toggle Spinner")
}
VStack {}
.frame(width: 100, height: 100)
.charcoalSpinner(isPresenting: $isPresenting)
@available(iOS 17, *)
#Preview {
@Previewable @State var isPresenting = true
@Previewable @State var isBigPresenting = true
@Previewable @State var isTransparentPresenting = true

VStack {}
.frame(width: 100, height: 150)
.charcoalSpinner(isPresenting: $isBigPresenting, spinnerSize: 100)
ZStack {
Color.gray.opacity(0.2)
VStack {
Button {
isPresenting.toggle()
} label: {
Text("Toggle Spinner")
}
VStack {}
.frame(width: 100, height: 100)
.charcoalSpinner(isPresenting: $isPresenting)

VStack {}
.frame(width: 100, height: 100)
.charcoalSpinner(isPresenting: $isTransparentPresenting, transparentBackground: true)
VStack {}
.frame(width: 100, height: 150)
.charcoalSpinner(isPresenting: $isBigPresenting, spinnerSize: 100)

VStack {}
.frame(width: 100, height: 100)
.charcoalSpinner(isPresenting: $isTransparentPresenting, transparentBackground: true)
}
}
.ignoresSafeArea()
}
.ignoresSafeArea()
}
#endif
62 changes: 31 additions & 31 deletions Sources/CharcoalSwiftUI/Components/CharcoalTextField.swift
Original file line number Diff line number Diff line change
Expand Up @@ -89,37 +89,37 @@ public extension View {
}

#if compiler(>=6.0)
@available(iOS 17, *)
#Preview {
@Previewable @State var text1 = ""
@Previewable @State var text2 = ""
@available(iOS 17, *)
#Preview {
@Previewable @State var text1 = ""
@Previewable @State var text2 = ""

VStack(spacing: 16) {
TextField("Simple text field", text: $text1)
.charcoalTextField()
TextField("Placeholder", text: $text2)
.charcoalTextField(
label: .constant("Label"),
countLabel: .init(
get: { "\(text2.count)/10" },
set: { _ in }
),
assistiveText: .init(
get: { text2.count > 10 ? "Error" : "OK" },
set: { _ in }
),
hasError: .init(
get: { text2.count > 10 },
set: { _ in }
VStack(spacing: 16) {
TextField("Simple text field", text: $text1)
.charcoalTextField()
TextField("Placeholder", text: $text2)
.charcoalTextField(
label: .constant("Label"),
countLabel: .init(
get: { "\(text2.count)/10" },
set: { _ in }
),
assistiveText: .init(
get: { text2.count > 10 ? "Error" : "OK" },
set: { _ in }
),
hasError: .init(
get: { text2.count > 10 },
set: { _ in }
)
)
)
TextField("", text: .constant("Text"))
.disabled(true)
.charcoalTextField(
label: .constant("Label"),
countLabel: .constant("0/10"),
assistiveText: .constant("Assistive text")
)
}.padding()
}
TextField("", text: .constant("Text"))
.disabled(true)
.charcoalTextField(
label: .constant("Label"),
countLabel: .constant("0/10"),
assistiveText: .constant("Assistive text")
)
}.padding()
}
#endif
52 changes: 31 additions & 21 deletions Sources/CharcoalSwiftUI/Components/Hint/CharcoalHint.swift
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import SwiftUI

public struct CharcoalHint: View {
/// The text of the tooltip
/// The text of the hint view
let text: String

/// The text of the tooltip
/// The subtitle text of the hint view
let subtitle: String?

let icon: CharcoalAsset.Images = .info16

/// The corner radius of the tooltip
/// The corner radius of the hint view
let cornerRadius: CGFloat = 8

let maxWidth: CGFloat?
Expand All @@ -19,20 +19,27 @@ public struct CharcoalHint: View {

let action: CharcoalAction?

@State var timer: Timer?
/// The alignment of hint view
let alignment: Alignment

let buttonStyle: CharcoalButtonStyle

public init(
text: String,
subtitle: String? = nil,
maxWidth: CGFloat? = nil,
isPresenting: Binding<Bool>,
alignment: Alignment = .center,
buttonStyle: CharcoalButtonStyle = .primary(.init(primaryColor: Color(CharcoalAsset.ColorPaletteGenerated.brand.color))),
action: CharcoalAction? = nil
) {
self.text = text
self.subtitle = subtitle
self.maxWidth = maxWidth
_isPresenting = isPresenting
self.action = action
self.alignment = alignment
self.buttonStyle = buttonStyle
}

public var body: some View {
Expand All @@ -53,11 +60,10 @@ public struct CharcoalHint: View {
action.actionCallback()
}) {
Text(action.title)
}
.charcoalPrimaryButton(size: .small)
}.charcoalButtonStyle(buttonStyle)
}
}
.frame(maxWidth: maxWidth)
.frame(maxWidth: maxWidth, alignment: alignment)
.padding(EdgeInsets(top: 12, leading: 16, bottom: 12, trailing: 16))
.background(charcoalColor: .surface3)
.cornerRadius(cornerRadius, corners: .allCorners)
Expand All @@ -66,23 +72,27 @@ public struct CharcoalHint: View {
}

#if compiler(>=6.0)
@available(iOS 17, *)
#Preview {
@Previewable @State var isPresenting = true
@Previewable @State var isPresenting2 = true
@Previewable @State var isPresenting3 = true
@available(iOS 17, *)
#Preview {
@Previewable @State var isPresenting = true
@Previewable @State var isPresenting2 = true
@Previewable @State var isPresenting3 = true
@Previewable @State var isPresenting4 = true
@Previewable @State var textOfLabel = "Hello"

@Previewable @State var textOfLabel = "Hello"
VStack {
CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresenting, action: CharcoalAction(title: "Button", actionCallback: {
isPresenting = false
}))

VStack {
CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresenting, action: CharcoalAction(title: "Button", actionCallback: {
isPresenting = false
}))
CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresenting2, buttonStyle: .default, action: CharcoalAction(title: "Button", actionCallback: {
isPresenting2 = false
}))

CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresenting2)
CharcoalHint(text: "ヒントテキストヒントテキスト", isPresenting: $isPresenting3)

CharcoalHint(text: "ヒントテキストヒントテキスト", maxWidth: .infinity, isPresenting: $isPresenting3)
CharcoalHint(text: "ヒントテキストヒントテキスト", maxWidth: .infinity, isPresenting: $isPresenting4, alignment: .leading)

}.padding()
}
}.padding()
}
#endif
Loading
Loading