[NT-227] Cancel Pledge UI #864

ifbarrera · 2019-10-01T18:24:27Z

📲 What

Builds the UI components of the cancel pledge screen. Note that this PR does not include the text field functionality, that will be added as part of the implementation for the full cancel pledge UX.

🤔 Why

For the Cancel Pledge feature.

🛠 How

Adds all UI elements as part of a root stack view. Notice that here I've preferred to use setCustomSpacing(after) to tweak spacing between certain views, instead of creating sub-stackviews. Open to feedback on that approach.

Note that the following will be addressed in a follow-up PR:

accessibility label on the cancellation reason text field
highlight/disabled states of the redButtonStyle are TBD

👀 See

Trello, screenshots, external resources?

iPhone 8	Dynamic Type	Landscape

♿️ Accessibility

Tap targets use minimum of 44x44 pts dimensions
Works with VoiceOver
Supports Dynamic Type

✅ Acceptance criteria

Navigate to a backed project with the "Native Checkout" and "Native Checkout Pledge View" feature flags turned on. Tap the menu button on the top right. Select "Cancel Pledge". You should be taken to the cancel pledge screen. Tap "No, go back". You should be taken back to the Manage Pledge screen.

…cancel-backing-UI # Conflicts: # Kickstarter-iOS/Views/Controllers/CancelPledgeViewController.swift # Kickstarter-iOS/Views/Controllers/CancelPledgeViewControllerTests.swift # Library/ViewModels/CancelPledgeViewModel.swift # Library/ViewModels/CancelPledgeViewModelTests.swift

dusi

Couple minor suggestions / questions and than was wondering about UX when a user might have font set to a larger size (maybe on a smaller device) which would result into keyboard overlapping the input field...so the question is - should we remove the top space when the keyboard is on as well (not only when the traits are accessibility+)?

See bellow

Kickstarter-iOS/Views/Controllers/CancelPledgeViewController.swift

dusi · 2019-10-02T22:13:00Z

Kickstarter-iOS/Views/Controllers/CancelPledgeViewController.swift

+    |> \.textAlignment .~ NSTextAlignment.center
+    |> \.numberOfLines .~ 0


These could technically be reused for multi-line centered style ¯_(ツ)_/¯

dusi · 2019-10-02T22:13:32Z

Library/Styles/ButtonStyles.swift

@@ -34,6 +34,14 @@ public let apricotButtonStyle = baseButtonStyle
  <> UIButton.lens.backgroundColor(for: .highlighted) .~ UIColor.ksr_apricot_500.mixDarker(0.12)
  <> UIButton.lens.backgroundColor(for: .disabled) .~ UIColor.ksr_apricot_500.mixLighter(0.36)

+// MARK: - Red
+
+public let redButtonStyle = baseButtonStyle


My apologies, I removed this previously since we didn't use it

ifbarrera · 2019-10-03T16:53:14Z

Couple minor suggestions / questions and than was wondering about UX when a user might have font set to a larger size (maybe on a smaller device) which would result into keyboard overlapping the input field...so the question is - should we remove the top space when the keyboard is on as well (not only when the traits are accessibility+)?

See bellow

I'd hate to have a bunch of custom UI configuration for dynamic sizing + smaller devices etc. Although it overlaps the text field on smaller devices with larger sizes set, the contentInset.bottom is still updated to accommodate the presence of the keyboard, which means all a user would have to do is scroll the text field into place. This feels acceptable enough for such a small edge case. What do you think?

…s-oss into cancel-backing-UI

…cancel-backing-UI

ksr-ci-bot · 2019-10-03T17:02:12Z

	1 Warning
⚠️	Big PR

Generated by 🚫 Danger

dusi · 2019-10-03T18:01:36Z

I'd hate to have a bunch of custom UI configuration for dynamic sizing + smaller devices etc. Although it overlaps the text field on smaller devices with larger sizes set, the contentInset.bottom is still updated to accommodate the presence of the keyboard, which means all a user would have to do is scroll the text field into place. This feels acceptable enough for such a small edge case. What do you think?

I see your point Isabel and I don't have strong feelings so I'd be OK with this approach...one other edge case will be landscape mode where basically the textfield will be completely hidden...I mentioned this because the implementation is in my opinion trivial to achieve.

dusi

🚢 🚢 🚢
🚢 🚢 🚢
🚢 🚢 🚢

ifbarrera added 21 commits September 30, 2019 12:53

Add CancelBacking VC, VM

08a1134

Rename to CancelPledge for naming consistency with the rest of app

ec4328a

Updating tests

1b5dd9a

Adding CancelPledgeViewControllerTests

7136b64

Formatting

9f5af44

Remove line setting shadowImage to nil

6a8a7a5

Cancel pledge subviews and view configuration

3db9574

Add attributedText handling

4d04a95

Functionality for goBackButton

481af8e

Attributed string dynamic type support

7bd7437

Fix rootStackview height constraints etc

0dc6fea

Cancel pledge view model tests

0f33d62

Adding redButtonStyle and setCustomSpacing ksr helper

77c8af3

Adding stack view tests

d8af402

Tweaks for accessbility

e76f8ae

Screenshot tests

d8edb29

Fix stack view test

71fba10

Formatting

e7f1bdd

Adding missed assertion

6ac94f6

Formatting

a4fe0d9

ifbarrera assigned dusi Oct 1, 2019

ifbarrera added the needs review label Oct 1, 2019

ifbarrera requested a review from justinswart October 1, 2019 18:31

Merge branch 'master' into cancel-backing-UI

0ff85f7

dusi reviewed Oct 2, 2019

View reviewed changes

ifbarrera added 3 commits October 3, 2019 12:45

Moving NSAttributedString creation to the view model & updating tests

073ad9c

Removing lineBreakMode and other small tweaks

c9a4088

Formatting

912ac0e

ifbarrera added 2 commits October 3, 2019 12:54

Merge branch 'cancel-backing-UI' of https://github.com/kickstarter/io…

9750561

…s-oss into cancel-backing-UI

Merge branch 'master' of https://github.com/kickstarter/ios-oss into …

3a65fab

…cancel-backing-UI

ifbarrera requested a review from dusi October 3, 2019 16:55

Fixing a naming issue on a helper function

5d2f1fe

dusi approved these changes Oct 3, 2019

View reviewed changes

Merge branch 'master' into cancel-backing-UI

621287b

ifbarrera merged commit 3d7825d into master Oct 3, 2019

ifbarrera deleted the cancel-backing-UI branch October 3, 2019 19:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[NT-227] Cancel Pledge UI #864

[NT-227] Cancel Pledge UI #864

ifbarrera commented Oct 1, 2019 •

edited

Loading

dusi left a comment

dusi Oct 2, 2019

dusi Oct 2, 2019

ifbarrera commented Oct 3, 2019

ksr-ci-bot commented Oct 3, 2019 •

edited

Loading

dusi commented Oct 3, 2019

dusi left a comment

		\|> \.textAlignment .~ NSTextAlignment.center
		\|> \.numberOfLines .~ 0

[NT-227] Cancel Pledge UI #864

[NT-227] Cancel Pledge UI #864

Conversation

ifbarrera commented Oct 1, 2019 • edited Loading

📲 What

🤔 Why

🛠 How

👀 See

♿️ Accessibility

✅ Acceptance criteria

dusi left a comment

Choose a reason for hiding this comment

dusi Oct 2, 2019

Choose a reason for hiding this comment

dusi Oct 2, 2019

Choose a reason for hiding this comment

ifbarrera commented Oct 3, 2019

ksr-ci-bot commented Oct 3, 2019 • edited Loading

dusi commented Oct 3, 2019

dusi left a comment

Choose a reason for hiding this comment

ifbarrera commented Oct 1, 2019 •

edited

Loading

ksr-ci-bot commented Oct 3, 2019 •

edited

Loading