Update components to match size with new text and icon sizing

kiwicom · Jan 2, 2023 · 318c8d5 · 318c8d5
1 parent 240c893
commit 318c8d5
Show file tree

Hide file tree

Showing 29 changed files with 260 additions and 305 deletions.
diff --git a/Sources/Orbit/Components/Alert.swift b/Sources/Orbit/Components/Alert.swift
@@ -40,8 +40,8 @@ public struct Alert<Content: View>: View {
     @ViewBuilder let content: Content
 
     public var body: some View {
-        HStack(alignment: .firstTextBaseline, spacing: .xSmall) {
-            Icon(content: iconContent, size: .normal)
+        HStack(alignment: .top, spacing: .xSmall) {
+            Icon(content: iconContent)
                 .foregroundColor(status.color)
                 .accessibility(.alertIcon)
 

diff --git a/Sources/Orbit/Components/Badge.swift b/Sources/Orbit/Components/Badge.swift
@@ -8,33 +8,28 @@ import SwiftUI
 /// - Note: [Orbit definition](https://orbit.kiwi/components/badge/)
 public struct Badge: View {
 
-    public static let verticalPadding: CGFloat = 4 + 1/3 // Results in ±24 height at normal text size
-    public static let textSize: Text.Size = .small
+    @Environment(\.sizeCategory) var sizeCategory
 
     let label: String
     let iconContent: Icon.Content
     var style: Style
 
     public var body: some View {
         if isEmpty == false {
-            HStack(spacing: 0) {
-                HStack(spacing: .xxSmall) {
-                    Icon(content: iconContent, size: .small)
-
-                    Text(
-                        label,
-                        size: Self.textSize,
-                        color: .none,
-                        weight: .medium,
-                        linkColor: .custom(style.labelColor)
-                    )
-                    .padding(.vertical, Self.verticalPadding)
-                }
-                .foregroundColor(Color(style.labelColor))
-
-                TextStrut(Self.textSize)
-                    .padding(.vertical, Self.verticalPadding)
+            HStack(spacing: .xxSmall) {
+                Icon(content: iconContent, size: .small)
+
+                Text(
+                    label,
+                    size: .small,
+                    color: nil,
+                    weight: .medium,
+                    linkColor: .custom(style.labelColor)
+                )
+                .frame(minWidth: minTextWidth)
             }
+            .foregroundColor(Color(style.labelColor))
+            .padding(.vertical, .xxSmall) // = 24 height @ normal size
             .padding(.horizontal, .xSmall)
             .background(
                 style.background
@@ -47,6 +42,10 @@ public struct Badge: View {
         }
     }
 
+    var minTextWidth: CGFloat {
+        Text.Size.small.lineHeight * sizeCategory.ratio - .xSmall
+    }
+
     var shape: some InsettableShape {
         Capsule()
     }
@@ -142,12 +141,10 @@ struct BadgePreviews: PreviewProvider {
         PreviewWrapper {
             standalone
             sizing
-
             statuses
             gradients
             mix
         }
-        .padding(.medium)
         .previewLayout(.sizeThatFits)
     }
 
@@ -157,6 +154,7 @@ struct BadgePreviews: PreviewProvider {
             Badge()    // EmptyView
             Badge("")  // EmptyView
         }
+        .padding(.medium)
         .previewDisplayName()
     }
 
@@ -170,6 +168,7 @@ struct BadgePreviews: PreviewProvider {
             }
             .measured()
         }
+        .padding(.medium)
         .previewDisplayName()
     }
 
@@ -192,6 +191,7 @@ struct BadgePreviews: PreviewProvider {
                 Badge("Very very very very very long badge")
             }
         }
+        .padding(.medium)
         .previewDisplayName()
     }
 
@@ -201,6 +201,7 @@ struct BadgePreviews: PreviewProvider {
             gradientBadge(.bundleMedium)
             gradientBadge(.bundleTop)
         }
+        .padding(.medium)
         .previewDisplayName()
     }
 
@@ -231,14 +232,10 @@ struct BadgePreviews: PreviewProvider {
                 Badge("SF Symbol", icon: .sfSymbol("info.circle.fill"), style: .status(.warning, inverted: true))
             }
         }
+        .padding(.medium)
         .previewDisplayName()
     }
 
-    static var snapshot: some View {
-        statuses
-            .padding(.medium)
-    }
-
     static func badges(_ style: Badge.Style) -> some View {
         HStack(spacing: .small) {
             Badge("label", style: style)

diff --git a/Sources/Orbit/Components/BadgeList.swift b/Sources/Orbit/Components/BadgeList.swift
@@ -7,8 +7,6 @@ import SwiftUI
 /// - Note: [Orbit definition](https://orbit.kiwi/components/information/badgelist/)
 public struct BadgeList: View {
 
-    public static let spacing: CGFloat = .xSmall
-
     let label: String
     let iconContent: Icon.Content
     let style: Style
@@ -18,7 +16,7 @@ public struct BadgeList: View {
 
     public var body: some View {
         if isEmpty == false {
-            HStack(alignment: .firstTextBaseline, spacing: Self.spacing) {
+            HStack(alignment: alignment, spacing: .xSmall) {
                 badgeOrEmptySpace
                     .foregroundColor(.init(style.iconColor))
                     .padding(.xxSmall)
@@ -38,8 +36,8 @@ public struct BadgeList: View {
 
     @ViewBuilder var badgeOrEmptySpace: some View {
         if iconContent.isEmpty {
-            Icon(content: .grid, size: .small)
-                .opacity(0)
+            Color.clear
+                .frame(width: .medium, height: .medium)
         } else {
             Icon(content: iconContent, size: .small)
         }
@@ -52,12 +50,12 @@ public struct BadgeList: View {
         }
     }
 
-    var isEmpty: Bool {
-        label.isEmpty && iconContent.isEmpty
+    var alignment: VerticalAlignment {
+        iconContent.isEmpty ? .top : .firstTextBaseline
     }
 
-    var textLeadingPadding: CGFloat {
-        iconContent.isEmpty ? (Icon.Size.small.value + Self.spacing) : 0
+    var isEmpty: Bool {
+        label.isEmpty && iconContent.isEmpty
     }
 }
 
@@ -128,7 +126,7 @@ public extension BadgeList {
         }
     }
 
-    enum Size {
+    enum Size: Equatable {
         case small
         case normal
         case custom(_ size: Text.Size)
@@ -152,11 +150,10 @@ struct BadgeListPreviews: PreviewProvider {
     static var previews: some View {
         PreviewWrapper {
             standalone
-            standaloneSmallSecondary
+            smallSecondary
             statuses
             mix
         }
-        .padding(.medium)
         .previewLayout(.sizeThatFits)
     }
 
@@ -166,11 +163,13 @@ struct BadgeListPreviews: PreviewProvider {
             BadgeList()   // EmptyView
             BadgeList("") // EmptyView
         }
+        .padding(.medium)
         .previewDisplayName()
     }
 
-    static var standaloneSmallSecondary: some View {
+    static var smallSecondary: some View {
         BadgeList("Neutral BadgeList", icon: .grid, labelColor: .secondary, size: .small)
+            .padding(.medium)
             .previewDisplayName()
     }
 
@@ -191,6 +190,7 @@ struct BadgeListPreviews: PreviewProvider {
                 BadgeList(label, icon: .alertCircle, style: .status(.critical), labelColor: .secondary, size: .small)
             }
         }
+        .padding(.medium)
         .previewDisplayName()
     }
 
@@ -201,11 +201,7 @@ struct BadgeListPreviews: PreviewProvider {
             BadgeList("This is simple <ref>BadgeList</ref> item with custom image", icon: .image(.orbit(.facebook)), style: .status(.success))
             BadgeList("This is <ref>BadgeList</ref> item with no icon and custom color", labelColor: .custom(.blueDark))
         }
+        .padding(.medium)
         .previewDisplayName()
     }
-
-    static var snapshot: some View {
-        statuses
-            .padding(.medium)
-    }
 }
diff --git a/Sources/Orbit/Components/Button.swift b/Sources/Orbit/Components/Button.swift
@@ -27,23 +27,20 @@ public struct Button: View {
                         Spacer(minLength: 0)
                     }
 
-                    HStack(alignment: .firstTextBaseline, spacing: .xSmall) {
-                        Icon(content: iconContent, size: iconSize)
+                    HStack(spacing: .xSmall) {
+                        Icon(content: iconContent, size: size.textSize.iconSize)
                             .foregroundColor(style.foregroundColor)
-                        text
-                            .padding(.vertical, size.verticalPadding)
+                        textWrapper
                     }
 
                     if idealSize.horizontal == nil {
                         Spacer(minLength: 0)
                     }
 
-                    TextStrut(size.textSize)
-                        .padding(.vertical, size.verticalPadding)
-
-                    Icon(content: disclosureIconContent, size: iconSize)
+                    Icon(content: disclosureIconContent, size: size.textSize.iconSize)
                         .foregroundColor(style.foregroundColor)
                 }
+                .padding(.vertical, size.verticalPadding)
                 .padding(.leading, leadingPadding)
                 .padding(.trailing, trailingPadding)
             }
@@ -52,35 +49,29 @@ public struct Button: View {
         .frame(maxWidth: idealSize.horizontal == true ? nil : .infinity)
     }
 
-    @ViewBuilder var text: some View {
+    @ViewBuilder var textWrapper: some View {
         if #available(iOS 14.0, *) {
-            Text(
-                label,
-                size: size.textSize,
-                color: .custom(style.foregroundUIColor),
-                weight: .medium,
-                linkColor: .custom(style.foregroundUIColor)
-            )
+            text
         } else {
-            Text(
-                label,
-                size: size.textSize,
-                color: .custom(style.foregroundUIColor),
-                weight: .medium,
-                linkColor: .custom(style.foregroundUIColor)
-            )
-            // Prevents text value animation issue due to different iOS13 behavior
-            .animation(nil)
+            text
+                // Prevents text value animation issue due to different iOS13 behavior
+                .animation(nil)
         }
     }
 
+    @ViewBuilder var text: some View {
+        Text(
+            label,
+            size: size.textSize,
+            color: .custom(style.foregroundUIColor),
+            weight: .medium,
+            linkColor: .custom(style.foregroundUIColor)
+        )
+    }
+
     var isIconOnly: Bool {
         iconContent.isEmpty == false && label.isEmpty
     }
-
-    var iconSize: Icon.Size {
-        size == .small ? .small : .normal
-    }
 
     var leadingPadding: CGFloat {
         label.isEmpty == false && iconContent.isEmpty ? size.horizontalPadding : size.horizontalIconPadding
@@ -246,8 +237,8 @@ extension Button {
 
         public var verticalPadding: CGFloat {
             switch self {
-                case .default:      return .small + 1          // Results in ±44 height at normal text size
-                case .small:        return .xSmall + 1/3       // Results in ±32 height at normal text size
+                case .default:      return .small   // = 44 height @ normal size
+                case .small:        return .xSmall  // = 32 height @ normal size
             }
         }
     }
@@ -330,8 +321,10 @@ struct ButtonPreviews: PreviewProvider {
             Group {
                 Button("Button")
                 Button("Button", icon: .grid)
+                Button(.grid)
                 Button("Button small", size: .small)
                 Button("Button small", icon: .grid, size: .small)
+                Button(.grid, size: .small)
             }
             .measured()
         }