Add Black Boundary on White Button

[KunJeongPark]

Reason for changes

Inbound from Merchant LI-47312 asking for parity on appearance of white button having
black boundary on Android SDK vs none in iOS SDK (no black boundary on white button)

Summary of changes

• Add black boundary if chosen color is white.

Before:

After:

Checklist

• Added a changelog entry

Authors

List GitHub usernames for everyone who contributed to this pull request.

• @KunJeongPark

[jaxdesmarais]

Suggested change

	if self.color == .white {
	self.containerView.layer.borderColor = UIColor.black.cgColor
	self.containerView.layer.borderWidth = 2
	} else {
	self.containerView.layer.borderColor = UIColor.clear.cgColor
	self.containerView.layer.borderWidth = 0
	}
	containerView.layer.borderColor = color == .white ? UIColor.black.cgColor : UIColor.clear.cgColor
	containerView.layer.borderWidth = color == .white ? 2 : 0

[KunJeongPark]

addressed here: f55c9fe

[jaxdesmarais]

How does Android handle the boarder in dark mode? It seems like it'd have the same issue as a white button. Not sure if we want to consider triple checking with a designer on how/if the boarder on the white button should be handled for light vs dark mode.

[KunJeongPark]

How does Android handle the boarder in dark mode? It seems like it'd have the same issue as a white button. Not sure if we want to consider triple checking with a designer on how/if the boarder on the white button should be handled for light vs dark mode.

I looked at Android code and they have logic in there where if color is white, black border with 2 points is made.
Nirvan made a decision to stay consistent with JS and Android and have black border around white button. Merchant wanted parity between Android and iOS either way.

I will post design docs on Slack, looks like there was black boundary around it.

Let me check how it looks on dark mode, that's a good point.
It looks same in dark mode. ✅
I think as long as system colors are not used, there is no automatic handling of color scheme for light/dark modes.
Android also has light and dark modes, I believe, but there is no separate handling of this for the black border on white buttons.

I guess issue would be visibility around white button against white or off white background colors if there is no border.

Since there is no separate treatment on the button colors on dark/light themes, I think that should be a separate ticket.
We did make a decision on parity between Android and iOS.

I can check on devices, check if their look is consistent across different modes and system background colors.

[stechiu]

What does Android use for border width? Looks like it's 1px but I'm not sure because the Merchant's image of the buttons you shared in Slack is very small. Figma designs show 1px https://www.figma.com/design/gn4AXdmJUOMVlrCMpyhfrf/QL---Checkout-Buttons?node-id=1-73&t=C9Kq3Q5LMzl7DqsD-0

[KunJeongPark]

Ah thank you! I saw 2 in Android. But it did look a bit thick to me on screenshot for iOS.

It was 1 point in Android defined as a constant. Will make the change.

[jaxdesmarais]

Thanks for following up on my questions! 🚀