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.

Sign up for GitHub

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

[Horizon] Icon Buttons #3036

Open
wants to merge 11 commits into
base: feature/horizon
Choose a base branch
from
Open

[Horizon] Icon Buttons #3036

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6a675b4
Adding the icon only button type
reabbotted Dec 17, 2024
285317d
Formatting
reabbotted Dec 17, 2024
ded2553
Swapping out the badge in the icon button with the badge component
reabbotted Dec 18, 2024
0517508
Update HorizonUI.ButtonStyles.swift
reabbotted Dec 18, 2024
84cbc79
Renaming badge to badgeNumber
reabbotted Dec 19, 2024
8779d93
Appending Color to the foreground and background argument names
reabbotted Dec 19, 2024
cdde61f
Removing the use of AnyView
reabbotted Dec 19, 2024
b764b15
Using the corner radius view modifier
reabbotted Dec 19, 2024
0fe0adc
Putting small and large button size values into constant properties
reabbotted Dec 19, 2024
8e38d7c
Swapping out hardcoded color values in the ai button gradient for ref…
reabbotted Dec 19, 2024
80af03c
Renaming iconOnly to simply icon
reabbotted Dec 19, 2024
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
1 change: 1 addition & 0 deletions packages/HorizonUI/Sources/HorizonUI/Sources/Components/Badge/HorizonUI.Badge.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
146 changes: 52 additions & 94 deletions ...izonUI/Sources/HorizonUI/Sources/Components/Button/HorizonUI.ButtonStyles.Storybook.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,109 +19,67 @@
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.icon(type, isSmall: isSmall, badgeNumber: "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 {
Expand Down
Loading