Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Box] Add support for boxes with semicircular edges #145

Merged
merged 3 commits into from
Sep 14, 2020
Merged

[Box] Add support for boxes with semicircular edges #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c6eba1d
[Box] Add support for boxes with semicircular edges
nononoah Sep 12, 2020
5b59899
[Gardening] Add changelog note
nononoah Sep 13, 2020
e2772d1
[Gardening] Rename semicircular to capsule, handle narrow capsule case
nononoah Sep 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions BlueprintUICommonControls/Sources/Box.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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)
}

})
Expand All @@ -102,6 +102,7 @@ extension Box {

public enum CornerStyle {
case square
case capsule
case rounded(radius: CGFloat)
}

Expand Down Expand Up @@ -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
}
Expand Down
32 changes: 25 additions & 7 deletions BlueprintUICommonControls/Tests/Sources/BoxTests.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,31 @@ class BoxTests: XCTestCase {
identifier: "clear")
}

func test_cornerRadius() {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you delete the old image please?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you mean this file, which has been deleted, though it's a bit tricky to tell from Github.

Screen Shot 2020-09-13 at 11 55 12 PM

Please let me know if you're referring to another one.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh oops, yeah sorry. GitHub on my phone really didn't want me to see it. Thanks!

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() {
Expand Down
Binary file added ...ontrols/Tests/Sources/ReferenceImages/BoxTests/test_cornerStyle_longCapsule.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file renamed ...nceImages/BoxTests/test_cornerRadius_.png → ...ges/BoxTests/test_cornerStyle_rounded.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ontrols/Tests/Sources/ReferenceImages/BoxTests/test_cornerStyle_wideCapsule.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down