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

nononoah · 2020-09-12T19:16:39Z

Summary

This PR adds the capsule case to Box.CornerStyle. This case sugars the following pattern

GeometryReader { geometry in
  Box(cornerStyle: .rounded(geometry.constraint.height.maximum / 2.0))
}

into

Box(cornerStyle: .capsule)

Given the effect of GeometryReader's closure on rightward drift and capture semantics and the relative ubiquity of this design element, I believe that this sugar is merited. I would further argue that this change comes at a small cost: a slight expansion of API surface area, and almost no implementation disruption.

Changes

updates var radius: CGFloat on Box.CornerStyle to func radius(for:) -> CGFloat
extends and organizes relevant snapshot tests

Additional comments

This is my first PR, so I'm likely to have made a few process mistakes. Please correct me where I've gone wrong.

kyleve

Looks good! Can you also update the Changelog.md in the root of the repo with this change?

kyleve · 2020-09-12T21:14:25Z

BlueprintUICommonControls/Sources/Box.swift

@@ -102,6 +102,7 @@ extension Box {

    public enum CornerStyle {
        case square
+        case semicircular


I wonder if “pill” might be clearer? No preference, but in my head that makes me more immediately realize what it does.

I'm open to changing it of course, but biased towards semicircular because

it fits grammatically with the other cases (as an adjective)

it is a generally understood geometric term (like square)

In my mind, pill is jargon and no different than chip, what Google's Material calls it. If you're familiar with the argot, it's familiar. Since most people working with Blueprint share this familiarity, I think it's a fine choice.

Way overthought bikeshed:

I think part of the issue here is that the existing cases are purely the corner style where this new case is wanting to describe a shape as a whole (that is, affecting more than each corner individually). And I think we're left trying avoid using a “shape” word to describe a “corner.”

And my mind still reads it as a shape and expects a half a circle that's flat on the other side (that is to say, a literal semicircle).

FWIW SwiftUI avoids this issue by having this as a shape type (called Capsule) rather than a corner style.

I could see a few options:

Rename this type/property to be “Shape” and then something like “Capsule” or “Pill” seems more right to me

Put this into its own element type altogether (again, as Pill or Capsule IMO)

Land as-is with the same or a different name (in which case I'd probably still lean against “semicircle” and just accept conflating shape and corner a bit)

(And Google's wrong, “chip” is a weird name)

capsule is also a good name for this property

I wouldn't make this a different element since we'd have to duplicate all the shadow and border style stuff.

Given the enthusiasm for capsule , I updated it. Still, I think it stands in contrast to its sibling cases.

And my mind still reads it as a shape and expects a half a circle that's flat on the other side (that is to say, a literal semicircle).

That's fair, though this is one impression I tried to avoid when renaming it from semicircle to semicircular. The latter may be ascribed to an object forming a semicircle, which is a fair attribution to such corners. This is similar if not identical semantically to square, I'd argue.

Yeah, we've definitely got a less than idea parallelism here. I think were this has landed is more intuitive, though less … precise.

nononoah · 2020-09-13T14:39:52Z

Pending additional review, this is ready to be merged.

If someone with write access would like to bring it home, I'd appreciate that.

kylebshr · 2020-09-13T19:59:44Z

BlueprintUICommonControls/Sources/Box.swift

        switch self {
        case .square:
            return 0
+        case .semicircular:
+            return bounds.height / 2.0


I think we should use the min of height and width so it works for vertical rects too

Good call. Updated and added a snapshot test for it.

bencochran · 2020-09-14T01:26:31Z

BlueprintUICommonControls/Tests/Sources/BoxTests.swift

@@ -18,13 +18,31 @@ class BoxTests: XCTestCase {
            identifier: "clear")
    }

-    func test_cornerRadius() {


Could you delete the old image please?

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

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

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

bencochran · 2020-09-14T01:33:11Z

BlueprintUICommonControls/Sources/Box.swift

@@ -102,6 +102,7 @@ extension Box {

    public enum CornerStyle {
        case square
+        case semicircular


Yeah, we've definitely got a less than idea parallelism here. I think were this has landed is more intuitive, though less … precise.

nononoah force-pushed the noahb/box-rounded-corners branch from c43a8e4 to e06f649 Compare September 12, 2020 19:52

[Box] Add support for boxes with semicircular edges

c6eba1d

nononoah force-pushed the noahb/box-rounded-corners branch from ff0ed20 to c6eba1d Compare September 12, 2020 19:59

kyleve approved these changes Sep 12, 2020

View reviewed changes

[Gardening] Add changelog note

5b59899

kylebshr approved these changes Sep 13, 2020

View reviewed changes

[Gardening] Rename semicircular to capsule, handle narrow capsule case

e2772d1

kylebshr approved these changes Sep 14, 2020

View reviewed changes

bencochran approved these changes Sep 14, 2020

View reviewed changes

kylebshr merged commit af5c605 into square:main Sep 14, 2020

nononoah deleted the noahb/box-rounded-corners branch September 17, 2020 20:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

nononoah commented Sep 12, 2020 •

edited

Loading

kyleve left a comment

kyleve Sep 12, 2020

nononoah Sep 13, 2020

bencochran Sep 13, 2020

kyleve Sep 13, 2020

nononoah Sep 14, 2020

bencochran Sep 14, 2020

nononoah commented Sep 13, 2020

kylebshr Sep 13, 2020

nononoah Sep 14, 2020 •

edited

Loading

bencochran Sep 14, 2020

nononoah Sep 14, 2020

bencochran Sep 14, 2020

bencochran Sep 14, 2020

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

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

Conversation

nononoah commented Sep 12, 2020 • edited Loading

Summary

Changes

Additional comments

kyleve left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nononoah commented Sep 13, 2020

Choose a reason for hiding this comment

nononoah Sep 14, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nononoah commented Sep 12, 2020 •

edited

Loading

nononoah Sep 14, 2020 •

edited

Loading