Merge pull request #608 from kiwicom/606-extract-textsize-and-iconsiz…

…e-from-text-and-icon-to-modifier

Extract `textSize` and `iconSize` from `Text` and `Icon` to modifiers

Sources/Orbit/Components/Badge.swift

@@ -20,18 +20,18 @@ public struct Badge<LeadingIcon: View, TrailingIcon: View>: View {
         if isEmpty == false {
             HStack(spacing: .xxSmall) {
                 leadingIcon
+                    .iconSize(.small)
                     .font(.system(size: Icon.Size.small.value))
                     .foregroundColor(labelColor)
 
-                Text(
-                    label,
-                    size: .small
-                )
-                .fontWeight(.medium)
-                .textLinkColor(.custom(labelColor))
-                .frame(minWidth: minTextWidth)
+                Text(label)
+                    .textSize(.small)
+                    .fontWeight(.medium)
+                    .textLinkColor(.custom(labelColor))
+                    .frame(minWidth: minTextWidth)
 
                 trailingIcon
+                    .iconSize(.small)
                     .font(.system(size: Icon.Size.small.value))
                     .foregroundColor(labelColor)
             }
@@ -100,9 +100,9 @@ public extension Badge {
         style: BadgeStyle = .neutral
     ) where LeadingIcon == Icon, TrailingIcon == Icon {
         self.init(label, style: style) {
-            Icon(icon, size: .small)
+            Icon(icon)
         } trailingIcon: {
-            Icon(trailingIcon, size: .small)
+            Icon(trailingIcon)
         }
     }
 
@@ -225,11 +225,11 @@ struct BadgePreviews: PreviewProvider {
                 .iconColor(.pink)
 
                 Badge("Flag") {
-                    CountryFlag("us", size: .small)
+                    CountryFlag("us")
                 }
 
                 Badge("Flag", style: .status(.critical, inverted: true)) {
-                    CountryFlag("cz", size: .small)
+                    CountryFlag("cz")
                 }
             }
 

Sources/Orbit/Components/BadgeList.swift

@@ -13,8 +13,6 @@ public struct BadgeList<Icon: View>: View {
 
     let label: String
     let style: Style
-    let labelColor: LabelColor
-    let size: Size
     @ViewBuilder let icon: Icon
 
     public var body: some View {
@@ -27,17 +25,17 @@ public struct BadgeList<Icon: View>: View {
                     .padding(.xxSmall)
                     .background(badgeBackground)
 
-                Text(label, size: size.textSize)
-                    .textColor(textColor ?? labelColor.color)
+                Text(label)
                     .textAccentColor(textAccentColor ?? iconColor)
-                    .textLinkColor(.custom(labelColor.color))
+                    .textLinkColor(.custom(textColor ?? .inkDark))
             }
         }
     }
 
     @ViewBuilder var badge: some View {
         if icon.isEmpty {
-            Orbit.Icon(.grid, size: .small)
+            Orbit.Icon(.grid)
+                .iconSize(.small)
                 .opacity(0)
         } else {
             icon
@@ -86,17 +84,14 @@ public extension BadgeList {
     init(
         _ label: String = "",
         icon: Icon.Symbol? = nil,
-        style: Style = .neutral,
-        labelColor: LabelColor = .primary,
-        size: Size = .normal
+        style: Style = .neutral
     ) where Icon == Orbit.Icon {
         self.init(
             label,
-            style: style,
-            labelColor: labelColor,
-            size: size
+            style: style
         ) {
-            Icon(icon, size: .small)
+            Icon(icon)
+                .iconSize(.small)
         }
     }
 
@@ -107,14 +102,10 @@ public extension BadgeList {
     init(
         _ label: String = "",
         style: Style = .neutral,
-        labelColor: LabelColor = .primary,
-        size: Size = .normal,
         @ViewBuilder icon: () -> Icon
     ) {
         self.label = label
         self.style = style
-        self.labelColor = labelColor
-        self.size = size
         self.icon = icon()
     }
 }
@@ -123,39 +114,10 @@ public extension BadgeList {
 public extension BadgeList {
 
     enum Style: Equatable, Hashable {
-
         case neutral
         case status(_ status: Status?)
         case custom(iconColor: Color, backgroundColor: Color)
     }
-
-    enum LabelColor {
-        case primary
-        case secondary
-        case custom(_ color: Color)
-
-        var color: Color {
-            switch self {
-                case .primary:              return .inkDark
-                case .secondary:            return .inkNormal
-                case .custom(let color):    return color
-            }
-        }
-    }
-
-    enum Size: Equatable {
-        case small
-        case normal
-        case custom(_ size: Text.Size)
-
-        var textSize: Text.Size {
-            switch self {
-                case .small:              	return .small
-                case .normal:               return .normal
-                case .custom(let size):     return size
-            }
-        }
-    }
 }
 
 // MARK: - Previews
@@ -185,7 +147,9 @@ struct BadgeListPreviews: PreviewProvider {
     }
 
     static var smallSecondary: some View {
-        BadgeList("Neutral BadgeList", icon: .grid, labelColor: .secondary, size: .small)
+        BadgeList("Neutral BadgeList", icon: .grid)
+            .textSize(.small)
+            .textColor(.inkLight)
             .padding(.medium)
             .previewDisplayName()
     }
@@ -200,12 +164,14 @@ struct BadgeListPreviews: PreviewProvider {
                 BadgeList(label, icon: .alertCircle, style: .status(.critical))
             }
             VStack(alignment: .leading, spacing: .medium) {
-                BadgeList(longLabel, icon: .grid, labelColor: .secondary, size: .small)
-                BadgeList(label, icon: .informationCircle, style: .status(.info), labelColor: .secondary, size: .small)
-                BadgeList(label, icon: .checkCircle, style: .status(.success), labelColor: .secondary, size: .small)
-                BadgeList(label, icon: .alertCircle, style: .status(.warning), labelColor: .secondary, size: .small)
-                BadgeList(label, icon: .alertCircle, style: .status(.critical), labelColor: .secondary, size: .small)
+                BadgeList(longLabel, icon: .grid)
+                BadgeList(label, icon: .informationCircle, style: .status(.info))
+                BadgeList(label, icon: .checkCircle, style: .status(.success))
+                BadgeList(label, icon: .alertCircle, style: .status(.warning))
+                BadgeList(label, icon: .alertCircle, style: .status(.critical))
             }
+            .textColor(.inkNormal)
+            .textSize(.small)
         }
         .padding(.medium)
         .previewDisplayName()
@@ -214,16 +180,18 @@ struct BadgeListPreviews: PreviewProvider {
     static var mix: some View {
         VStack(alignment: .leading, spacing: .medium) {
             BadgeList("This is simple <ref>BadgeList</ref> item with <strong>SF Symbol</strong>", style: .status(.info)) {
-                Icon("info.circle.fill", size: .small)
+                Icon("info.circle.fill")
             }
             BadgeList("This is simple <ref>BadgeList</ref> item with <strong>CountryFlag</strong>", style: .status(.critical)) {
-                CountryFlag("us", size: .small)
+                CountryFlag("us")
             }
-            BadgeList("This is <ref>BadgeList</ref> item with no icon and custom color", labelColor: .custom(.blueDark))
+            BadgeList("This is <ref>BadgeList</ref> item with no icon and custom color")
+                .textColor(.blueDark)
             BadgeList("This is a <ref>BadgeList</ref> with <strong>status</strong> override", style: .status(nil)) {
-                Icon("info.circle.fill", size: .small)
+                Icon("info.circle.fill")
             }
         }
+        .iconSize(.small)
         .status(.success)
         .padding(.medium)
         .previewDisplayName()

Sources/Orbit/Components/Button.swift

@@ -33,7 +33,7 @@ public struct Button<LeadingIcon: View, TrailingIcon: View>: View {
     }
 
     @ViewBuilder var text: some View {
-        Text(label, size: size.textSize)
+        Text(label)
             .fontWeight(.medium)
     }
 }
@@ -59,9 +59,9 @@ public extension Button {
             size: size,
             action: action
         ) {
-            Icon(icon, size: size.textSize.iconSize)
+            Icon(icon)
         } disclosureIcon: {
-            Icon(disclosureIcon, size: size.textSize.iconSize)
+            Icon(disclosureIcon)
         }
     }
 
@@ -178,7 +178,8 @@ public struct OrbitButtonStyle<LeadingIcon: View, TrailingIcon: View>: Primitive
 
     @ViewBuilder func content(_ label: some View) -> some View {
         HStack(spacing: 0) {
-            TextStrut(size.textSize)
+            TextStrut()
+                .textSize(size.textSize)
 
             if disclosureIcon.isEmpty, idealSize.horizontal == nil {
                 Spacer(minLength: 0)
@@ -203,6 +204,7 @@ public struct OrbitButtonStyle<LeadingIcon: View, TrailingIcon: View>: Primitive
                 .iconColor(iconColor)
                 .foregroundColor(iconColor)
         }
+        .textSize(size.textSize)
         .textColor(resolvedTextColor)
         .padding(.leading, leadingPadding)
         .padding(.trailing, trailingPadding)
@@ -456,7 +458,7 @@ struct ButtonPreviews: PreviewProvider {
             Button("Button with Flag", type: .secondary) {
                 // No action
             } icon: {
-                CountryFlag("us", size: .normal)
+                CountryFlag("us")
             }
         }
         .padding(.medium)

Sources/Orbit/Components/Checkbox.swift

@@ -33,7 +33,8 @@ public struct Checkbox: View {
                             .fontWeight(.medium)
                             .accessibility(.checkboxTitle)
 
-                        Text(description, size: .small)
+                        Text(description)
+                            .textSize(.small)
                             .textColor(descriptionColor)
                             .accessibility(.checkboxDescription)
                     }
@@ -114,7 +115,8 @@ public extension Checkbox {
                         .fill(indicatorBackgroundColor(isPressed: isPressed))
                 )
                 .overlay(
-                    Icon(.check, size: .small)
+                    Icon(.check)
+                        .iconSize(.small)
                         .textColor(isEnabled ? .whiteNormal : .cloudNormal)
                         .opacity(isChecked ? 1 : 0)
                 )

Sources/Orbit/Components/ChoiceTile.swift

@@ -45,7 +45,7 @@ public struct ChoiceTile<Content: View, Icon: View, Header: View>: View {
                         centerIndicator
                     }
 
-                    TextStrut(.normal)
+                    TextStrut()
                         .padding(.vertical, .xxSmall)   // Minimum 52pt @ normal size
                 }
                 .frame(maxWidth: idealSize.horizontal == true ? nil: .infinity, alignment: .leading)
@@ -124,7 +124,8 @@ public struct ChoiceTile<Content: View, Icon: View, Header: View>: View {
 
     @ViewBuilder var iconView: some View {
         icon
-            .font(.system(size: titleStyle.iconSize.value))
+            .iconSize(custom: titleStyle.lineHeight)
+            .font(.system(size: Orbit.Icon.Size.fromTextSize(size: titleStyle.size)))
             .foregroundColor(.inkNormal)
             .accessibility(.choiceTileIcon)
     }
@@ -267,7 +268,7 @@ public extension ChoiceTile {
         } content: {
             content()
         } icon: {
-            Icon(icon, size: titleStyle.iconSize)
+            Icon(icon)
         } header: {
             header()
         }