From 6a675b4dff5aa7ebb9f72fa68bfaf5dcb977548b Mon Sep 17 00:00:00 2001 From: reabbotted Date: Tue, 17 Dec 2024 16:36:51 -0700 Subject: [PATCH 01/11] Adding the icon only button type --- .../HorizonUI.ButtonStyles.Storybook.swift | 147 ++++------ .../Button/HorizonUI.ButtonStyles.swift | 252 +++++++++++++----- 2 files changed, 238 insertions(+), 161 deletions(-) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift index f14a532ade..868344d455 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift @@ -19,109 +19,68 @@ import SwiftUI extension HorizonUI.ButtonStyles { + + private struct StorybookConfiguration: Identifiable { + var id: String { title } + + let isSmall: Bool + let isDisabled: Bool + let title: String + } + struct Storybook: View { var body: some View { ScrollView { VStack(alignment: .leading, spacing: 24) { - Section(header: header("Regular Height - Relative Width Buttons")) { - VStack(alignment: .leading, spacing: 16) { - Button("Black Button") {} - .buttonStyle( - HorizonUI.ButtonStyles.black( - leading: HorizonUI.icons.addCircle, - trailing: HorizonUI.icons.addCircle - ) - ) - - Button("White Button") {} - .buttonStyle( - HorizonUI.ButtonStyles.white( - leading: HorizonUI.icons.addCircle, - trailing: HorizonUI.icons.addCircle - ) - ) - .huiElevation(level: .level3) - - Button("AI Button") {} - .buttonStyle(HorizonUI.ButtonStyles.ai()) - - Button("Blue Button") {} - .buttonStyle(HorizonUI.ButtonStyles.blue()) - - Button("Beige Button") {} - .buttonStyle(HorizonUI.ButtonStyles.beige()) - .huiElevation(level: .level3) - } - } - - Section(header: header("Small Height - Block Width Buttons")) { - VStack(alignment: .leading, spacing: 16) { - Button("Small Black Button") {} - .buttonStyle( - HorizonUI.ButtonStyles.black( - isSmall: true, - fillsWidth: true - ) - ) - Button("Small White Button") {} - .buttonStyle( - HorizonUI.ButtonStyles.white( - isSmall: true, - fillsWidth: true - ) - ) - .huiElevation(level: .level3) - Button("Small AI Button") {} - .buttonStyle( - HorizonUI.ButtonStyles.ai( - isSmall: true, - fillsWidth: true - ) - ) - Button("Small Blue Button") {} - .buttonStyle( - HorizonUI.ButtonStyles.blue( - isSmall: true, - fillsWidth: true - ) - ) - Button("Small Beige Button") {} - .buttonStyle( - HorizonUI.ButtonStyles.beige( - isSmall: true, - fillsWidth: true - ) - ) - .huiElevation(level: .level3) - } + ForEach( + [ + StorybookConfiguration( + isSmall: false, + isDisabled: false, + title: "Regular Height - Relative Width Buttons" + ), + StorybookConfiguration(isSmall: true, isDisabled: false, title: "Small Height - Block Width Buttons"), + StorybookConfiguration(isSmall: false, isDisabled: true, title: "Disabled Buttons"), + ] + ) { storybookConfiguration in + section(storybookConfiguration) } + .padding(16) + } + .background(Color(red: 88 / 100, green: 88 / 100, blue: 88 / 100)) + .navigationTitle("Buttons") + .navigationBarTitleDisplayMode(.large) + } + } - Section(header: header("Disabled Buttons")) { - VStack(alignment: .leading, spacing: 16) { - Button("Disabled Black Button") {} - .buttonStyle(HorizonUI.ButtonStyles.black()) - .disabled(true) - Button("Disabled White Button") {} - .buttonStyle(HorizonUI.ButtonStyles.white()) - .disabled(true) - .huiElevation(level: .level3) - Button("Disabled AI Button") {} - .buttonStyle(HorizonUI.ButtonStyles.ai()) - .disabled(true) - Button("Disabled Blue Button") {} - .buttonStyle(HorizonUI.ButtonStyles.blue()) - .disabled(true) - Button("Disabled Beige Button") {} - .buttonStyle(HorizonUI.ButtonStyles.beige()) - .disabled(true) - .huiElevation(level: .level3) - } + private func section(_ storybookConfiguration: StorybookConfiguration) -> some View { + Section(header: header(storybookConfiguration.title)) { + VStack(alignment: .leading, spacing: 16) { + ForEach(HorizonUI.ButtonStyles.ButtonType.allCases) { type in + row(type: type, isSmall: storybookConfiguration.isSmall, isDisabled: storybookConfiguration.isDisabled) } } - .padding(16) } - .navigationTitle("Buttons") - .navigationBarTitleDisplayMode(.large) + } + + private func row( + type: HorizonUI.ButtonStyles.ButtonType, + isSmall: Bool, + isDisabled: Bool + ) -> some View { + HStack(spacing: 16) { + Button("\(type.rawValue) Icon Button") {} + .buttonStyle( + HorizonUI.ButtonStyles.iconOnly(type, isSmall: isSmall, badge: "99") + ) + .disabled(isDisabled) + + Button("\(type.rawValue) Button") {} + .buttonStyle( + HorizonUI.ButtonStyles.primary(type, isSmall: isSmall, fillsWidth: isSmall) + ) + .disabled(isDisabled) + } } private func header(_ title: String) -> some View { diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift index 72e8b71d41..c5778ae4ae 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift @@ -20,14 +20,26 @@ import SwiftUI extension HorizonUI { struct ButtonStyles: ButtonStyle { + // MARK: - Common Dependencies + @Environment(\.isEnabled) private var isEnabled private let background: AnyShapeStyle private let foreground: Color private let isSmall: Bool + + // MARK: - Primary and Secondary Button Dependencies + private let fillsWidth: Bool private let leading: Image? private let trailing: Image? + // MARK: - Icon Button Dependencies + + private let badge: String? + private let badgeColor: Color? + private let badgeTextColor: Color? + private let icon: Image? + fileprivate init( background: any ShapeStyle, foreground: Color, @@ -42,9 +54,43 @@ extension HorizonUI { self.fillsWidth = fillsWidth self.leading = leading self.trailing = trailing + + self.badge = nil + self.badgeColor = nil + self.badgeTextColor = nil + self.icon = nil + } + + fileprivate init( + background: any ShapeStyle, + foreground: Color, + badgeColor: Color, + badgeTextColor: Color, + isSmall: Bool = false, + icon: Image, + badge: String? = nil + ) { + self.background = AnyShapeStyle(background) + self.badge = badge + self.badgeColor = badgeColor + self.badgeTextColor = badgeTextColor + self.foreground = foreground + self.icon = icon + self.isSmall = isSmall + + self.fillsWidth = false + self.leading = nil + self.trailing = nil } func makeBody(configuration: Configuration) -> some View { + if icon != nil { + return AnyView(makeIconOnlyButtonType(configuration: configuration)) + } + return AnyView(makePrimaryButtonType(configuration: configuration)) + } + + private func makePrimaryButtonType(configuration: Configuration) -> any View { HStack { leading? .renderingMode(.template) @@ -57,7 +103,6 @@ extension HorizonUI { .foregroundColor(foreground) } .huiTypography(.buttonTextLarge) - .tracking(100) .padding(.horizontal, 16) .frame(height: isSmall ? 40 : 44) .frame(maxWidth: fillsWidth ? .infinity : nil) @@ -66,74 +111,131 @@ extension HorizonUI { .cornerRadius(isSmall ? 20 : 22) .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) } + + private func makeIconOnlyButtonType(configuration: Configuration) -> any View { + guard let icon = icon else { + return EmptyView() + } + return ZStack { + icon + .renderingMode(.template) + .frame(width: isSmall ? 40 : 44, height: isSmall ? 40 : 44) + .background(background) + .foregroundStyle(foreground) + .cornerRadius(isSmall ? 20 : 22) + .foregroundColor(foreground) + .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) + + if let badge = badge, + let badgeColor = badgeColor, + let badgeTextColor = badgeTextColor + { + Text(badge) + .frame(width: 19, height: 19) + .huiTypography(.tag) + .background(badgeColor) + .foregroundStyle(badgeTextColor) + .cornerRadius(10) + .multilineTextAlignment(.center) + .alignmentGuide(.top) { _ in 0 } + .alignmentGuide(.trailing) { _ in 0 } + .offset(x: 15, y: -15) + } + } + } } } extension HorizonUI.ButtonStyles { - static func ai( - isSmall: Bool = false, - fillsWidth: Bool = false, - leading: Image? = nil, - trailing: Image? = nil - ) -> HorizonUI.ButtonStyles { - self.init( - background: LinearGradient( - gradient: Gradient(colors: [ - Color.huiColors.surface.aiGradientStart, - Color.huiColors.surface.aiGradientEnd - ]), - startPoint: .top, - endPoint: .bottom - ), - foreground: Color.huiColors.text.surfaceColored, - isSmall: isSmall, - fillsWidth: fillsWidth, - leading: leading, - trailing: trailing - ) - } + enum ButtonType: String, CaseIterable, Identifiable { + case ai = "AI" + case beige = "Beige" + case blue = "Blue" + case black = "Black" + case white = "White" - static func beige( - isSmall: Bool = false, - fillsWidth: Bool = false, - leading: Image? = nil, - trailing: Image? = nil - ) -> HorizonUI.ButtonStyles { - self.init( - background: Color.huiColors.surface.pagePrimary, - foreground: Color.huiColors.text.title, - isSmall: isSmall, - fillsWidth: fillsWidth, - leading: leading, - trailing: trailing - ) - } + var id: String { rawValue } - static func black( - isSmall: Bool = false, - fillsWidth: Bool = false, - leading: Image? = nil, - trailing: Image? = nil - ) -> HorizonUI.ButtonStyles { - .init( - background: Color.huiColors.surface.inversePrimary, - foreground: Color.huiColors.text.surfaceColored, - isSmall: isSmall, - fillsWidth: fillsWidth, - leading: leading, - trailing: trailing - ) + var background: any ShapeStyle { + switch self { + case .ai: + return LinearGradient( + gradient: Gradient(colors: [ + Color(hexString: "#09508C"), + Color(hexString: "#02672D"), + ]), + startPoint: .top, + endPoint: .bottom + ) + case .beige: + return Color.huiColors.surface.pagePrimary + case .blue: + return Color.huiColors.surface.institution + case .black: + return Color.huiColors.surface.inversePrimary + case .white: + return Color.huiColors.surface.pageSecondary + } + } + + var foregroundColor: Color { + switch self { + case .ai: + return Color.huiColors.text.surfaceColored + case .beige: + return Color.huiColors.text.title + case .blue: + return Color.huiColors.text.surfaceColored + case .black: + return Color.huiColors.text.surfaceColored + case .white: + return Color.huiColors.text.title + } + } + + var badgeColor: Color { + switch self { + case .ai: + return Color.huiColors.surface.pageSecondary + case .beige: + return Color.huiColors.surface.institution + case .blue: + return Color.huiColors.surface.pageSecondary + case .black: + return Color.huiColors.surface.pageSecondary + case .white: + return Color.huiColors.surface.institution + } + } + + var badgeTextColor: Color { + switch self { + case .ai: + return Color.huiColors.text.body + case .beige: + return Color.huiColors.text.surfaceColored + case .blue: + return Color.huiColors.text.body + case .black: + return Color.huiColors.text.body + case .white: + return Color.huiColors.text.surfaceColored + } + } } +} - static func blue( +extension HorizonUI.ButtonStyles { + public static func primary( + _ type: HorizonUI.ButtonStyles.ButtonType, isSmall: Bool = false, fillsWidth: Bool = false, leading: Image? = nil, trailing: Image? = nil ) -> HorizonUI.ButtonStyles { .init( - background: Color.huiColors.surface.institution, - foreground: Color.huiColors.text.surfaceColored, + background: type.background, + foreground: type.foregroundColor, isSmall: isSmall, fillsWidth: fillsWidth, leading: leading, @@ -141,24 +243,40 @@ extension HorizonUI.ButtonStyles { ) } - static func white( + public static func iconOnly( + _ type: HorizonUI.ButtonStyles.ButtonType, isSmall: Bool = false, - fillsWidth: Bool = false, - leading: Image? = nil, - trailing: Image? = nil + badge: String? = nil, + icon: Image? = nil ) -> HorizonUI.ButtonStyles { .init( - background: Color.huiColors.surface.pageSecondary, - foreground: Color.huiColors.text.title, + background: type.background, + foreground: type.foregroundColor, + badgeColor: type.badgeColor, + badgeTextColor: type.badgeTextColor, isSmall: isSmall, - fillsWidth: fillsWidth, - leading: leading, - trailing: trailing + icon: icon ?? (type == .ai ? HorizonUI.icons.ai : HorizonUI.icons.add), + badge: badge ) } } -extension HorizonUI.Colors.Surface { - var aiGradientStart: Color { Color(hexString: "#09508C") } - var aiGradientEnd: Color { Color(hexString: "#02672D") } +#Preview(traits: .sizeThatFitsLayout) { + NavigationStack { + ScrollView { + VStack(spacing: 16) { + ForEach(HorizonUI.ButtonStyles.ButtonType.allCases, id: \.self) { type in + HStack { + Button("AI Icon Button") {} + .buttonStyle(HorizonUI.ButtonStyles.iconOnly(type, badge: "99")) + .disabled(true) + Button("AI Button") {} + .buttonStyle(HorizonUI.ButtonStyles.primary(type)) + } + } + } + .frame(maxWidth: .infinity, maxHeight: .infinity) + } + .background(Color(red: 88 / 100, green: 88 / 100, blue: 88 / 100)) + } } From 285317daaaa1a457cc7ce1d63b00e3a2ad0d6b06 Mon Sep 17 00:00:00 2001 From: reabbotted Date: Tue, 17 Dec 2024 16:48:05 -0700 Subject: [PATCH 02/11] Formatting --- .../Button/HorizonUI.ButtonStyles.Storybook.swift | 1 - .../Components/Button/HorizonUI.ButtonStyles.swift | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift index 868344d455..c5f28dfe26 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift @@ -19,7 +19,6 @@ import SwiftUI extension HorizonUI.ButtonStyles { - private struct StorybookConfiguration: Identifiable { var id: String { title } diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift index c5778ae4ae..472aa3e931 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift @@ -127,8 +127,8 @@ extension HorizonUI { .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) if let badge = badge, - let badgeColor = badgeColor, - let badgeTextColor = badgeTextColor + let badgeColor = badgeColor, + let badgeTextColor = badgeTextColor { Text(badge) .frame(width: 19, height: 19) @@ -226,7 +226,7 @@ extension HorizonUI.ButtonStyles { } extension HorizonUI.ButtonStyles { - public static func primary( + static func primary( _ type: HorizonUI.ButtonStyles.ButtonType, isSmall: Bool = false, fillsWidth: Bool = false, @@ -243,7 +243,7 @@ extension HorizonUI.ButtonStyles { ) } - public static func iconOnly( + static func iconOnly( _ type: HorizonUI.ButtonStyles.ButtonType, isSmall: Bool = false, badge: String? = nil, From ded2553281815c09335f07567286c46b781496f3 Mon Sep 17 00:00:00 2001 From: reabbotted Date: Wed, 18 Dec 2024 09:16:58 -0700 Subject: [PATCH 03/11] Swapping out the badge in the icon button with the badge component --- .../Components/Badge/HorizonUI.Badge.swift | 1 + .../Button/HorizonUI.ButtonStyles.swift | 57 +++++-------------- 2 files changed, 15 insertions(+), 43 deletions(-) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Badge/HorizonUI.Badge.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Badge/HorizonUI.Badge.swift index 993ee4c332..eb3663a6cf 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Badge/HorizonUI.Badge.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Badge/HorizonUI.Badge.swift @@ -52,6 +52,7 @@ public extension HorizonUI { .huiTypography(.tag) .frame(minWidth: 19, minHeight: 19) .padding(.huiSpaces.primitives.xxSmall) + .multilineTextAlignment(.center) case .icon(let icon): icon .resizable() diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift index 472aa3e931..30dc5f92c4 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift @@ -36,8 +36,7 @@ extension HorizonUI { // MARK: - Icon Button Dependencies private let badge: String? - private let badgeColor: Color? - private let badgeTextColor: Color? + private let badgeStyle: HorizonUI.Badge.Style? private let icon: Image? fileprivate init( @@ -56,24 +55,21 @@ extension HorizonUI { self.trailing = trailing self.badge = nil - self.badgeColor = nil - self.badgeTextColor = nil + self.badgeStyle = nil self.icon = nil } fileprivate init( background: any ShapeStyle, foreground: Color, - badgeColor: Color, - badgeTextColor: Color, + badgeStyle: HorizonUI.Badge.Style, isSmall: Bool = false, icon: Image, badge: String? = nil ) { self.background = AnyShapeStyle(background) self.badge = badge - self.badgeColor = badgeColor - self.badgeTextColor = badgeTextColor + self.badgeStyle = badgeStyle self.foreground = foreground self.icon = icon self.isSmall = isSmall @@ -103,7 +99,7 @@ extension HorizonUI { .foregroundColor(foreground) } .huiTypography(.buttonTextLarge) - .padding(.horizontal, 16) + .padding(.horizontal, .huiSpaces.primitives.mediumSmall) .frame(height: isSmall ? 40 : 44) .frame(maxWidth: fillsWidth ? .infinity : nil) .background(background) @@ -127,18 +123,9 @@ extension HorizonUI { .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) if let badge = badge, - let badgeColor = badgeColor, - let badgeTextColor = badgeTextColor + let badgeStyle = badgeStyle { - Text(badge) - .frame(width: 19, height: 19) - .huiTypography(.tag) - .background(badgeColor) - .foregroundStyle(badgeTextColor) - .cornerRadius(10) - .multilineTextAlignment(.center) - .alignmentGuide(.top) { _ in 0 } - .alignmentGuide(.trailing) { _ in 0 } + HorizonUI.Badge(type: .number(badge), style: badgeStyle) .offset(x: 15, y: -15) } } @@ -193,33 +180,18 @@ extension HorizonUI.ButtonStyles { } } - var badgeColor: Color { + var badgeStyle: HorizonUI.Badge.Style { switch self { case .ai: - return Color.huiColors.surface.pageSecondary - case .beige: - return Color.huiColors.surface.institution - case .blue: - return Color.huiColors.surface.pageSecondary - case .black: - return Color.huiColors.surface.pageSecondary - case .white: - return Color.huiColors.surface.institution - } - } - - var badgeTextColor: Color { - switch self { - case .ai: - return Color.huiColors.text.body + return .primaryWhite case .beige: - return Color.huiColors.text.surfaceColored + return .primary case .blue: - return Color.huiColors.text.body + return .primaryWhite case .black: - return Color.huiColors.text.body + return .primaryWhite case .white: - return Color.huiColors.text.surfaceColored + return .primary } } } @@ -252,8 +224,7 @@ extension HorizonUI.ButtonStyles { .init( background: type.background, foreground: type.foregroundColor, - badgeColor: type.badgeColor, - badgeTextColor: type.badgeTextColor, + badgeStyle: type.badgeStyle, isSmall: isSmall, icon: icon ?? (type == .ai ? HorizonUI.icons.ai : HorizonUI.icons.add), badge: badge From 0517508a3211b19e7c6b94f975062db8b4cff9e0 Mon Sep 17 00:00:00 2001 From: reabbotted Date: Wed, 18 Dec 2024 11:31:54 -0700 Subject: [PATCH 04/11] Update HorizonUI.ButtonStyles.swift Updating the access levels for some of the items so they can be used in the project --- .../Components/Button/HorizonUI.ButtonStyles.swift | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift index 30dc5f92c4..b030fa45e8 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift @@ -19,7 +19,7 @@ import SwiftUI extension HorizonUI { - struct ButtonStyles: ButtonStyle { + public struct ButtonStyles: ButtonStyle { // MARK: - Common Dependencies @Environment(\.isEnabled) private var isEnabled @@ -79,7 +79,7 @@ extension HorizonUI { self.trailing = nil } - func makeBody(configuration: Configuration) -> some View { + public func makeBody(configuration: Configuration) -> some View { if icon != nil { return AnyView(makeIconOnlyButtonType(configuration: configuration)) } @@ -134,14 +134,14 @@ extension HorizonUI { } extension HorizonUI.ButtonStyles { - enum ButtonType: String, CaseIterable, Identifiable { + public enum ButtonType: String, CaseIterable, Identifiable { case ai = "AI" case beige = "Beige" case blue = "Blue" case black = "Black" case white = "White" - var id: String { rawValue } + public var id: String { rawValue } var background: any ShapeStyle { switch self { @@ -198,7 +198,7 @@ extension HorizonUI.ButtonStyles { } extension HorizonUI.ButtonStyles { - static func primary( + public static func primary( _ type: HorizonUI.ButtonStyles.ButtonType, isSmall: Bool = false, fillsWidth: Bool = false, @@ -215,7 +215,7 @@ extension HorizonUI.ButtonStyles { ) } - static func iconOnly( + public static func iconOnly( _ type: HorizonUI.ButtonStyles.ButtonType, isSmall: Bool = false, badge: String? = nil, From 84cbc79d06b43a3d8edc4009532e12cac4ec3962 Mon Sep 17 00:00:00 2001 From: reabbotted Date: Thu, 19 Dec 2024 09:53:33 -0700 Subject: [PATCH 05/11] Renaming badge to badgeNumber --- .../HorizonUI.ButtonStyles.Storybook.swift | 2 +- .../Button/HorizonUI.ButtonStyles.swift | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift index c5f28dfe26..7da002eb51 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift @@ -70,7 +70,7 @@ extension HorizonUI.ButtonStyles { HStack(spacing: 16) { Button("\(type.rawValue) Icon Button") {} .buttonStyle( - HorizonUI.ButtonStyles.iconOnly(type, isSmall: isSmall, badge: "99") + HorizonUI.ButtonStyles.iconOnly(type, isSmall: isSmall, badgeNumber: "99") ) .disabled(isDisabled) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift index b030fa45e8..c44b4075c0 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift @@ -35,7 +35,7 @@ extension HorizonUI { // MARK: - Icon Button Dependencies - private let badge: String? + private let badgeNumber: String? private let badgeStyle: HorizonUI.Badge.Style? private let icon: Image? @@ -54,7 +54,7 @@ extension HorizonUI { self.leading = leading self.trailing = trailing - self.badge = nil + self.badgeNumber = nil self.badgeStyle = nil self.icon = nil } @@ -65,10 +65,10 @@ extension HorizonUI { badgeStyle: HorizonUI.Badge.Style, isSmall: Bool = false, icon: Image, - badge: String? = nil + badgeNumber: String? = nil ) { self.background = AnyShapeStyle(background) - self.badge = badge + self.badgeNumber = badgeNumber self.badgeStyle = badgeStyle self.foreground = foreground self.icon = icon @@ -122,10 +122,10 @@ extension HorizonUI { .foregroundColor(foreground) .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) - if let badge = badge, + if let badgeNumber = badgeNumber, let badgeStyle = badgeStyle { - HorizonUI.Badge(type: .number(badge), style: badgeStyle) + HorizonUI.Badge(type: .number(badgeNumber), style: badgeStyle) .offset(x: 15, y: -15) } } @@ -218,7 +218,7 @@ extension HorizonUI.ButtonStyles { public static func iconOnly( _ type: HorizonUI.ButtonStyles.ButtonType, isSmall: Bool = false, - badge: String? = nil, + badgeNumber: String? = nil, icon: Image? = nil ) -> HorizonUI.ButtonStyles { .init( @@ -227,7 +227,7 @@ extension HorizonUI.ButtonStyles { badgeStyle: type.badgeStyle, isSmall: isSmall, icon: icon ?? (type == .ai ? HorizonUI.icons.ai : HorizonUI.icons.add), - badge: badge + badgeNumber: badgeNumber ) } } @@ -239,7 +239,7 @@ extension HorizonUI.ButtonStyles { ForEach(HorizonUI.ButtonStyles.ButtonType.allCases, id: \.self) { type in HStack { Button("AI Icon Button") {} - .buttonStyle(HorizonUI.ButtonStyles.iconOnly(type, badge: "99")) + .buttonStyle(HorizonUI.ButtonStyles.iconOnly(type, badgeNumber: "99")) .disabled(true) Button("AI Button") {} .buttonStyle(HorizonUI.ButtonStyles.primary(type)) From 8779d93c87503810f88cbd813367a142327f9cbc Mon Sep 17 00:00:00 2001 From: reabbotted Date: Thu, 19 Dec 2024 09:58:14 -0700 Subject: [PATCH 06/11] Appending Color to the foreground and background argument names --- .../Button/HorizonUI.ButtonStyles.swift | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift index c44b4075c0..5c98d9cabb 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift @@ -23,8 +23,8 @@ extension HorizonUI { // MARK: - Common Dependencies @Environment(\.isEnabled) private var isEnabled - private let background: AnyShapeStyle - private let foreground: Color + private let backgroundColor: AnyShapeStyle + private let foregroundColor: Color private let isSmall: Bool // MARK: - Primary and Secondary Button Dependencies @@ -40,15 +40,15 @@ extension HorizonUI { private let icon: Image? fileprivate init( - background: any ShapeStyle, - foreground: Color, + backgroundColor: any ShapeStyle, + foregroundColor: Color, isSmall: Bool = false, fillsWidth: Bool = false, leading: Image? = nil, trailing: Image? = nil ) { - self.background = AnyShapeStyle(background) - self.foreground = foreground + self.backgroundColor = AnyShapeStyle(backgroundColor) + self.foregroundColor = foregroundColor self.isSmall = isSmall self.fillsWidth = fillsWidth self.leading = leading @@ -60,17 +60,17 @@ extension HorizonUI { } fileprivate init( - background: any ShapeStyle, - foreground: Color, + backgroundColor: any ShapeStyle, + foregroundColor: Color, badgeStyle: HorizonUI.Badge.Style, isSmall: Bool = false, icon: Image, badgeNumber: String? = nil ) { - self.background = AnyShapeStyle(background) + self.backgroundColor = AnyShapeStyle(backgroundColor) self.badgeNumber = badgeNumber self.badgeStyle = badgeStyle - self.foreground = foreground + self.foregroundColor = foregroundColor self.icon = icon self.isSmall = isSmall @@ -90,20 +90,20 @@ extension HorizonUI { HStack { leading? .renderingMode(.template) - .foregroundColor(foreground) + .foregroundColor(foregroundColor) configuration.label trailing? .renderingMode(.template) - .foregroundColor(foreground) + .foregroundColor(foregroundColor) } .huiTypography(.buttonTextLarge) .padding(.horizontal, .huiSpaces.primitives.mediumSmall) .frame(height: isSmall ? 40 : 44) .frame(maxWidth: fillsWidth ? .infinity : nil) - .background(background) - .foregroundStyle(foreground) + .background(backgroundColor) + .foregroundStyle(foregroundColor) .cornerRadius(isSmall ? 20 : 22) .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) } @@ -116,10 +116,10 @@ extension HorizonUI { icon .renderingMode(.template) .frame(width: isSmall ? 40 : 44, height: isSmall ? 40 : 44) - .background(background) - .foregroundStyle(foreground) + .background(backgroundColor) + .foregroundStyle(foregroundColor) .cornerRadius(isSmall ? 20 : 22) - .foregroundColor(foreground) + .foregroundColor(foregroundColor) .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) if let badgeNumber = badgeNumber, @@ -206,8 +206,8 @@ extension HorizonUI.ButtonStyles { trailing: Image? = nil ) -> HorizonUI.ButtonStyles { .init( - background: type.background, - foreground: type.foregroundColor, + backgroundColor: type.background, + foregroundColor: type.foregroundColor, isSmall: isSmall, fillsWidth: fillsWidth, leading: leading, @@ -222,8 +222,8 @@ extension HorizonUI.ButtonStyles { icon: Image? = nil ) -> HorizonUI.ButtonStyles { .init( - background: type.background, - foreground: type.foregroundColor, + backgroundColor: type.background, + foregroundColor: type.foregroundColor, badgeStyle: type.badgeStyle, isSmall: isSmall, icon: icon ?? (type == .ai ? HorizonUI.icons.ai : HorizonUI.icons.add), From cdde61fbfe997eba1f3e5c3dc468eda444ca0fb9 Mon Sep 17 00:00:00 2001 From: reabbotted Date: Thu, 19 Dec 2024 10:07:21 -0700 Subject: [PATCH 07/11] Removing the use of AnyView --- .../Button/HorizonUI.ButtonStyles.swift | 74 +++++++++---------- 1 file changed, 33 insertions(+), 41 deletions(-) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift index 5c98d9cabb..083ca4412f 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift @@ -80,53 +80,45 @@ extension HorizonUI { } public func makeBody(configuration: Configuration) -> some View { - if icon != nil { - return AnyView(makeIconOnlyButtonType(configuration: configuration)) - } - return AnyView(makePrimaryButtonType(configuration: configuration)) - } - - private func makePrimaryButtonType(configuration: Configuration) -> any View { - HStack { - leading? - .renderingMode(.template) - .foregroundColor(foregroundColor) + ZStack { + if let icon = icon { + ZStack { + icon + .renderingMode(.template) + .frame(width: isSmall ? 40 : 44, height: isSmall ? 40 : 44) + .background(backgroundColor) + .foregroundStyle(foregroundColor) + .cornerRadius(isSmall ? 20 : 22) + .foregroundColor(foregroundColor) + .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) + + if let badgeNumber = badgeNumber, + let badgeStyle = badgeStyle + { + HorizonUI.Badge(type: .number(badgeNumber), style: badgeStyle) + .offset(x: 15, y: -15) + } + } + } else { + HStack { + leading? + .renderingMode(.template) + .foregroundColor(foregroundColor) - configuration.label + configuration.label - trailing? - .renderingMode(.template) - .foregroundColor(foregroundColor) - } - .huiTypography(.buttonTextLarge) - .padding(.horizontal, .huiSpaces.primitives.mediumSmall) - .frame(height: isSmall ? 40 : 44) - .frame(maxWidth: fillsWidth ? .infinity : nil) - .background(backgroundColor) - .foregroundStyle(foregroundColor) - .cornerRadius(isSmall ? 20 : 22) - .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) - } - - private func makeIconOnlyButtonType(configuration: Configuration) -> any View { - guard let icon = icon else { - return EmptyView() - } - return ZStack { - icon - .renderingMode(.template) - .frame(width: isSmall ? 40 : 44, height: isSmall ? 40 : 44) + trailing? + .renderingMode(.template) + .foregroundColor(foregroundColor) + } + .huiTypography(.buttonTextLarge) + .padding(.horizontal, .huiSpaces.primitives.mediumSmall) + .frame(height: isSmall ? 40 : 44) + .frame(maxWidth: fillsWidth ? .infinity : nil) .background(backgroundColor) .foregroundStyle(foregroundColor) .cornerRadius(isSmall ? 20 : 22) - .foregroundColor(foregroundColor) .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) - - if let badgeNumber = badgeNumber, - let badgeStyle = badgeStyle - { - HorizonUI.Badge(type: .number(badgeNumber), style: badgeStyle) - .offset(x: 15, y: -15) } } } From b764b1535cc4a29e68619fafbe6d4620c21fc328 Mon Sep 17 00:00:00 2001 From: reabbotted Date: Thu, 19 Dec 2024 10:12:57 -0700 Subject: [PATCH 08/11] Using the corner radius view modifier --- .../Sources/Components/Button/HorizonUI.ButtonStyles.swift | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift index 083ca4412f..4cce4db562 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift @@ -88,7 +88,7 @@ extension HorizonUI { .frame(width: isSmall ? 40 : 44, height: isSmall ? 40 : 44) .background(backgroundColor) .foregroundStyle(foregroundColor) - .cornerRadius(isSmall ? 20 : 22) + .huiCornerRadius(level: .level6) .foregroundColor(foregroundColor) .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) @@ -117,7 +117,7 @@ extension HorizonUI { .frame(maxWidth: fillsWidth ? .infinity : nil) .background(backgroundColor) .foregroundStyle(foregroundColor) - .cornerRadius(isSmall ? 20 : 22) + .huiCornerRadius(level: .level6) .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) } } From 0fe0adc28362e931bfdc27ebe2cf71aa362e6136 Mon Sep 17 00:00:00 2001 From: reabbotted Date: Thu, 19 Dec 2024 10:21:25 -0700 Subject: [PATCH 09/11] Putting small and large button size values into constant properties --- .../Components/Button/HorizonUI.ButtonStyles.swift | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift index 4cce4db562..24070ca6f3 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift @@ -32,6 +32,8 @@ extension HorizonUI { private let fillsWidth: Bool private let leading: Image? private let trailing: Image? + private let smallButtonSize = 40.0 + private let largeButtonSize = 44.0 // MARK: - Icon Button Dependencies @@ -85,16 +87,15 @@ extension HorizonUI { ZStack { icon .renderingMode(.template) - .frame(width: isSmall ? 40 : 44, height: isSmall ? 40 : 44) + .frame(width: isSmall ? smallButtonSize : largeButtonSize, + height: isSmall ? smallButtonSize : largeButtonSize) .background(backgroundColor) .foregroundStyle(foregroundColor) .huiCornerRadius(level: .level6) .foregroundColor(foregroundColor) .opacity(isEnabled ? (configuration.isPressed ? 0.8 : 1.0) : 0.5) - if let badgeNumber = badgeNumber, - let badgeStyle = badgeStyle - { + if let badgeNumber = badgeNumber, let badgeStyle = badgeStyle { HorizonUI.Badge(type: .number(badgeNumber), style: badgeStyle) .offset(x: 15, y: -15) } @@ -113,7 +114,7 @@ extension HorizonUI { } .huiTypography(.buttonTextLarge) .padding(.horizontal, .huiSpaces.primitives.mediumSmall) - .frame(height: isSmall ? 40 : 44) + .frame(height: isSmall ? smallButtonSize : largeButtonSize) .frame(maxWidth: fillsWidth ? .infinity : nil) .background(backgroundColor) .foregroundStyle(foregroundColor) From 8e38d7cf51f6a6c5d13399d002e71b19bfc62f17 Mon Sep 17 00:00:00 2001 From: reabbotted Date: Thu, 19 Dec 2024 10:23:58 -0700 Subject: [PATCH 10/11] Swapping out hardcoded color values in the ai button gradient for references to other values --- .../Sources/Components/Button/HorizonUI.ButtonStyles.swift | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift index 24070ca6f3..33173c30bc 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift @@ -141,8 +141,8 @@ extension HorizonUI.ButtonStyles { case .ai: return LinearGradient( gradient: Gradient(colors: [ - Color(hexString: "#09508C"), - Color(hexString: "#02672D"), + .huiColors.surface.institution, + .huiColors.primitives.green70 ]), startPoint: .top, endPoint: .bottom From 80af03c3292d9bf9cde45557c03a7970b6cd36c2 Mon Sep 17 00:00:00 2001 From: reabbotted Date: Thu, 19 Dec 2024 10:24:43 -0700 Subject: [PATCH 11/11] Renaming iconOnly to simply icon --- .../Components/Button/HorizonUI.ButtonStyles.Storybook.swift | 2 +- .../Sources/Components/Button/HorizonUI.ButtonStyles.swift | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift index 7da002eb51..a7e2852d05 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift @@ -70,7 +70,7 @@ extension HorizonUI.ButtonStyles { HStack(spacing: 16) { Button("\(type.rawValue) Icon Button") {} .buttonStyle( - HorizonUI.ButtonStyles.iconOnly(type, isSmall: isSmall, badgeNumber: "99") + HorizonUI.ButtonStyles.icon(type, isSmall: isSmall, badgeNumber: "99") ) .disabled(isDisabled) diff --git a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift index 33173c30bc..dd06de08c2 100644 --- a/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift +++ b/packages/HorizonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.swift @@ -208,7 +208,7 @@ extension HorizonUI.ButtonStyles { ) } - public static func iconOnly( + public static func icon( _ type: HorizonUI.ButtonStyles.ButtonType, isSmall: Bool = false, badgeNumber: String? = nil, @@ -232,7 +232,7 @@ extension HorizonUI.ButtonStyles { ForEach(HorizonUI.ButtonStyles.ButtonType.allCases, id: \.self) { type in HStack { Button("AI Icon Button") {} - .buttonStyle(HorizonUI.ButtonStyles.iconOnly(type, badgeNumber: "99")) + .buttonStyle(HorizonUI.ButtonStyles.icon(type, badgeNumber: "99")) .disabled(true) Button("AI Button") {} .buttonStyle(HorizonUI.ButtonStyles.primary(type))