Merge pull request square#145 from nononoah/noahb/box-rounded-corners

[Box] Add support for boxes with semicircular edges

BlueprintUICommonControls/Sources/Box.swift

@@ -48,8 +48,8 @@ public struct Box: Element {
                     view.backgroundColor = self.backgroundColor
                 }
 
-                if self.cornerStyle.radius != view.layer.cornerRadius {
-                    view.layer.cornerRadius = self.cornerStyle.radius
+                if self.cornerStyle.radius(for: bounds) != view.layer.cornerRadius {
+                    view.layer.cornerRadius = self.cornerStyle.radius(for: bounds)
                 }
 
                 if self.borderStyle.color?.cgColor != view.layer.borderColor {
@@ -83,8 +83,8 @@ public struct Box: Element {
                     view.contentView.clipsToBounds = self.clipsContent
                 }
 
-                if self.cornerStyle.radius != view.contentView.layer.cornerRadius {
-                    view.contentView.layer.cornerRadius = self.cornerStyle.radius
+                if self.cornerStyle.radius(for: bounds) != view.contentView.layer.cornerRadius {
+                    view.contentView.layer.cornerRadius = self.cornerStyle.radius(for: bounds)
                 }
 
             })
@@ -102,6 +102,7 @@ extension Box {
 
     public enum CornerStyle {
         case square
+        case capsule
         case rounded(radius: CGFloat)
     }
 
@@ -140,10 +141,12 @@ public extension Element {
 
 extension Box.CornerStyle {
 
-    fileprivate var radius: CGFloat {
+    fileprivate func radius(for bounds: CGRect) -> CGFloat {
         switch self {
         case .square:
             return 0
+        case .capsule:
+            return min(bounds.height, bounds.width) / 2.0
         case let .rounded(radius: radius):
             return radius
         }

BlueprintUICommonControls/Tests/Sources/BoxTests.swift

@@ -18,13 +18,31 @@ class BoxTests: XCTestCase {
             identifier: "clear")
     }
 
-    func test_cornerRadius() {
-        var box = Box()
-        box.backgroundColor = .blue
-        box.cornerStyle = .rounded(radius: 10.0)
-        compareSnapshot(
-            of: box,
-            size: CGSize(width: 100, height: 100))
+    func test_cornerStyle() {
+        do {
+            var box = Box()
+            box.backgroundColor = .blue
+            box.cornerStyle = .capsule
+            compareSnapshot(
+                of: box,
+                size: CGSize(width: 200, height: 100),
+                identifier: "wideCapsule")
+
+            compareSnapshot(
+                of: box,
+                size: CGSize(width: 100, height: 200),
+                identifier: "longCapsule")
+        }
+
+        do {
+            var box = Box()
+            box.backgroundColor = .blue
+            box.cornerStyle = .rounded(radius: 10.0)
+            compareSnapshot(
+                of: box,
+                size: CGSize(width: 100, height: 100),
+                identifier: "rounded")
+        }
     }
 
     func test_shadow() {

CHANGELOG.md

@@ -13,6 +13,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add `addFixed(child:)` and `addFlexible(child:)` methods to `StackElement` for adding children with a grow & shrink priority of 0.0 and 1.0 respectively.
 
+- Add `capsule` case to `Box.CornerStyle` ([#145]). This addition sugars the following pattern  
+
+```
+GeometryReader { geometry in
+  Box(cornerStyle: .rounded(geometry.constraint.height.maximum / 2.0))
+}
+```
+
+into
+
+```
+Box(cornerStyle: .capsule)
+```
+
 ### Removed
 
 ### Changed