Add border style to capsule style

Author: danielsaidi

Sources/TagKit/Views/TagCapsule.swift

@@ -35,11 +35,11 @@ public struct TagCapsule: View {
             .foregroundColor(style.foregroundColor)
             .materialCapsuleBackground(with: style.backgroundMaterial)
             .background(Capsule().fill(style.backgroundColor))
-            .padding(style.borderWidth)
+            .padding(style.border.width)
             .background(Capsule()
                 .strokeBorder(
-                    style.borderColor,
-                    lineWidth: style.borderWidth
+                    style.border.color,
+                    lineWidth: style.border.width
                 )
             )
             .compositingGroup()
@@ -81,23 +81,42 @@ private extension View {
                     TagCapsule("standard-selected")
                         .tagCapsuleStyle(.standardSelected)
                 }
-                
-                TagCapsule("spider-man")
-                    .tagCapsuleStyle(.init(
-                        foregroundColor: .black,
-                        backgroundColor: .red,
-                        borderColor: .blue,
-                        borderWidth: 4,
-                        padding: .init(
-                            top: 10,
-                            leading: 20,
-                            bottom: 12,
-                            trailing: 20
-                        )
-                    ))
-                    .shadow(radius: 0, y: 2)
+                HStack {
+                    TagCapsule("spider-man")
+                        .tagCapsuleStyle(.spiderman)
+                    TagCapsule("spider-man-selected")
+                        .tagCapsuleStyle(.spidermanSelected)
+                }
             }
             .padding(.top, 250)
         }
     }
 }
+
+private extension TagCapsuleStyle {
+    
+    static var spiderman: Self {
+        .init(
+            foregroundColor: .black,
+            backgroundColor: .red,
+            backgroundMaterial: .thin,
+            border: .init(
+                color: .blue,
+                width: 4
+            ),
+            padding: .init(
+                top: 10,
+                leading: 20,
+                bottom: 12,
+                trailing: 20
+            )
+        )
+    }
+    
+    static var spidermanSelected: Self {
+        var style = Self.spiderman
+        style.backgroundMaterial = .none
+        style.shadow = .standardSelected
+        return style
+    }
+}

Sources/TagKit/Views/TagCapsuleStyle.swift

@@ -19,24 +19,22 @@ import SwiftUI
 /// use a primary foreground color, a clear background color
 /// and a material background.
 public struct TagCapsuleStyle {
-
+    
     /// Create a new tag capsule style.
     ///
     /// - Parameters:
     ///   - foregroundColor: The foreground color, by default `.primary`.
     ///   - backgroundColor: The background color, by default `.clear`.
     ///   - backgroundMaterial: The background material, by default `.ultraThin`.
-    ///   - borderColor: The border color, by default `.clear`.
-    ///   - borderWidth: The border width, by default `1`.
+    ///   - border: The border style, by default ``Border/standard``.
     ///   - shadow: The shadow style, by default ``Shadow/standard``.
     ///   - padding: The intrinsic padding to apply, by default a small padding.
     public init(
         foregroundColor: Color = .primary,
         backgroundColor: Color = .clear,
         backgroundMaterial: Material? = .ultraThin,
-        borderColor: Color = .clear,
-        borderWidth: Double = 1,
-        shadowStyle: Shadow = .standard,
+        border: Border = .standard,
+        shadow: Shadow = .standard,
         padding: EdgeInsets? = nil
     ) {
         var defaultPadding: EdgeInsets
@@ -49,10 +47,32 @@ public struct TagCapsuleStyle {
         self.foregroundColor = foregroundColor
         self.backgroundColor = backgroundColor
         self.backgroundMaterial = backgroundMaterial
-        self.borderColor = borderColor
-        self.borderWidth = borderWidth
+        self.border = border
+        self.shadow = shadow
         self.padding = padding ?? defaultPadding
-        self.shadow = shadowStyle
+    }
+    
+    @available(*, deprecated, message: "Use the new borderStyle initializer instead.")
+    public init(
+        foregroundColor: Color = .primary,
+        backgroundColor: Color = .clear,
+        backgroundMaterial: Material? = .ultraThin,
+        borderColor: Color = .clear,
+        borderWidth: Double = 1,
+        shadow: Shadow = .standard,
+        padding: EdgeInsets? = nil
+    ) {
+        self.init(
+            foregroundColor: foregroundColor,
+            backgroundColor: backgroundColor,
+            backgroundMaterial: backgroundMaterial,
+            border: .init(
+                color: borderColor,
+                width: borderWidth
+            ),
+            shadow: shadow,
+            padding: padding
+        )
     }
 
     /// The foreground color.
@@ -64,19 +84,41 @@ public struct TagCapsuleStyle {
     /// The background material.
     public var backgroundMaterial: Material?
 
-    /// The border color.
-    public var borderColor: Color
-
-    /// The border width.
-    public var borderWidth: Double
+    /// The border style.
+    public var border: Border
 
-    // The shadow style.
+    /// The shadow style.
     public var shadow: Shadow
 
     /// The padding to apply to the text.
     public var padding: EdgeInsets
 }
 
+public extension TagCapsuleStyle {
+    
+    struct Border {
+        
+        /// Create a new tag capsule border style.
+        ///
+        /// - Parameters:
+        ///   - color: The border color, by default `.clear`.
+        ///   - width: The border width, by default `1`.
+        public init(
+            color: Color = .clear,
+            width: Double = 1
+        ) {
+            self.color = color
+            self.width = width
+        }
+
+        /// The border color.
+        public var color: Color
+
+        /// The border width.
+        public var width: Double
+    }
+}
+
 public extension TagCapsuleStyle {
 
     struct Shadow {
@@ -125,14 +167,15 @@ public extension TagCapsuleStyle {
     static var standardSelected: Self {
         .init(
             backgroundMaterial: .regular,
-            shadowStyle: .standardSelected
+            border: .standardSelected,
+            shadow: .standardSelected
         )
     }
 }
 
 public extension TagCapsuleStyle.Shadow {
 
-    /// The standard style.
+    /// The standard shadow style.
     static var standard: Self {
         .init()
     }
@@ -146,6 +189,19 @@ public extension TagCapsuleStyle.Shadow {
     }
 }
 
+public extension TagCapsuleStyle.Border {
+
+    /// The standard border style.
+    static var standard: Self {
+        .init()
+    }
+
+    /// The standard, selected border style.
+    static var standardSelected: Self {
+        .init()
+    }
+}
+
 public extension TagCapsuleStyle {
 
     @available(*, deprecated, renamed: "standard")

Sources/TagKit/Views/TagEditList.swift

@@ -212,16 +212,16 @@ private extension TagCapsuleStyle {
         .init(
             foregroundColor: .black,
             backgroundColor: .red,
-            borderWidth: 4
+            border: .init(width: 4)
         )
     }
 
     static var customSelected: TagCapsuleStyle {
         .init(
             foregroundColor: .black,
             backgroundColor: .red,
-            borderColor: .blue,
-            borderWidth: 4
+            border: .init(width: 4),
+            shadow: .standardSelected
         )
     }
 }