diff --git a/BlueprintUICommonControls/Sources/Box.swift b/BlueprintUICommonControls/Sources/Box.swift index 29289a1b0..c53ed30ab 100644 --- a/BlueprintUICommonControls/Sources/Box.swift +++ b/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 } diff --git a/BlueprintUICommonControls/Tests/Sources/BoxTests.swift b/BlueprintUICommonControls/Tests/Sources/BoxTests.swift index 6844736ec..aa8d2a720 100644 --- a/BlueprintUICommonControls/Tests/Sources/BoxTests.swift +++ b/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() { diff --git a/BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerStyle_longCapsule.png b/BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerStyle_longCapsule.png new file mode 100644 index 000000000..5123ac496 Binary files /dev/null and b/BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerStyle_longCapsule.png differ diff --git a/BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerRadius_.png b/BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerStyle_rounded.png similarity index 79% rename from BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerRadius_.png rename to BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerStyle_rounded.png index 3013312ab..372861fcf 100644 Binary files a/BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerRadius_.png and b/BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerStyle_rounded.png differ diff --git a/BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerStyle_wideCapsule.png b/BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerStyle_wideCapsule.png new file mode 100644 index 000000000..7f83fc244 Binary files /dev/null and b/BlueprintUICommonControls/Tests/Sources/ReferenceImages/BoxTests/test_cornerStyle_wideCapsule.png differ diff --git a/CHANGELOG.md b/CHANGELOG.md index ef0a42689..a02d7653b 100644 --- a/CHANGELOG.md +++ b/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