feat(ui): onboarding refresh #837

rudolfs · 2020-08-28T08:28:54Z

New header text throughout the whole flow
New header font size
New descriptions throughout the whole flow
New description text color
New button text throughout the whole flow
password
re-enter password
use enter key to submit forms
animations between screens ([prototype here] (https://www.figma.com/proto/owmgsbs6lnUt8R1bixstCA/%F0%9F%8C%B1%F0%9F%86%99-Radicle-Upstream?node-id=3506%3A0&viewport=-644%2C647%2C0.5761544108390808&scaling=min-zoom&hotspot-hints=0))

Note: I couldn't get the outtro animation working, it's breaking routing and I don't know how to fix it at the moment.

ui/DesignSystem/Primitive/Input/Password.svelte

sarahscott · 2020-08-31T22:03:33Z

ui/Screen/Onboarding/EnterPassphrase.svelte

+    fullMessages: false,
+  };
+
+  validatejs.validators.optional = (value, options) => {


If we move validation logic out of the component, we can unit test it & also maintain consistency in how we validate

Converted the NameEntry component.
Couldn't do it for PasswordEntry because the validation fields there depend on each other and our current validations.ts wrapper doesn't support that.

Go figure.

MeBrei

I added some small comments in line. Will click through the flow now.

If you have time in this PR, you could change the px to rem #303

cypress/integration/onboarding.spec.js

ui/Screen/Onboarding/Welcome.svelte

ui/src/identity.ts

MeBrei

the description texts should be foreground-level-6

need instead of enter in the header
additional whitespace after Radicle ID
keyboard shortcuts (eg search) should not work on the onboarding screens

rudolfs · 2020-09-03T11:27:07Z

ui/DesignSystem/Primitive/Input/Password.svelte

@@ -0,0 +1,127 @@
+<script>


Note: adding this component only because Svelte didn't allow me to make the input type of <Input.Text> variable:
[svelte invalid-type] [E] 'type' attribute cannot be dynamic if input uses two-way binding.

rudolfs · 2020-09-03T11:39:52Z

If you have time in this PR, you could change the px to rem #303

6d2b297

sveltejs/prettier-plugin-svelte#116

xla

Really like the structure and readability of the onboarding screen.

xla · 2020-09-03T12:02:03Z

ui/DesignSystem/Primitive/Input/Password.svelte

@@ -0,0 +1,127 @@
+<script>


Suggested change

<script>

<script lang="ts">

Now that our tooling works for tsed components lets always use it for new ones.

ui/DesignSystem/Primitive/Input/Password.svelte

xla · 2020-09-03T12:15:00Z

ui/Screen/Onboarding.svelte

@@ -0,0 +1,116 @@
+<script>


Suggested change

<script>

<script lang="ts">

xla · 2020-09-03T12:15:12Z

ui/Screen/Onboarding/EnterPassphrase.svelte

@@ -0,0 +1,172 @@
+<script>


Suggested change

<script>

<script lang="ts">

xla · 2020-09-03T12:15:25Z

ui/Screen/Onboarding/Success.svelte

@@ -0,0 +1,59 @@
+<script>


Suggested change

<script>

<script lang="ts">

xla · 2020-09-03T12:15:40Z

ui/Screen/Onboarding/Welcome.svelte

@@ -0,0 +1,53 @@
+<script>


Suggested change

<script>

<script lang="ts">

ui/Screen/Onboarding/EnterPassphrase.svelte

rudolfs · 2020-09-04T13:20:15Z

Now that our tooling works for tsed components lets always use it for new ones.

xla: I wish I could, but that would mean I'd have to convert all the components that we use in those screens to TS as well. We should tackle that in a separate PR.

MeBrei · 2020-09-04T13:29:43Z

ui/Screen/Onboarding/EnterName.svelte

-    fullMessages: false,
-  };
+  $: beginValidation && validationStore.validate(handle);
+  $: allowNext = (handle && validationPasses()) || !validationStarted();


Why is validationStarted needed? If no handle is provided, it shouldn't allowNext and if one is provided, but validationPasses returns false it should not allowNext, ie if the validationStore.status is anything other than ValidationStatus.Success

If we don't have that check, then the button stays disabled forever.

hm ok, I also couldn't figure it out. Seems repetitive somehow

xla

📮 🚧 ⛺️ 🚿

MeBrei

⭐

Adjust existing onboarding visuals

f1bee8d

rudolfs requested review from xla, brandonhaslegs and MeBrei August 28, 2020 08:28

rudolfs self-assigned this Aug 28, 2020

rudolfs added 11 commits August 28, 2020 10:46

Split out component

fb5f8f7

Add "enter passphrase" screen

059199c

Fix clearing session ends up on blank screen

0e4adfe

Rename identity creation flow to onboarding

c311432

Fix tests

1320355

Move identity creation logic to top-level screen

0e6b552

Improve spec readability

683b618

Extend tests

6c122f6

Replace cancel buttons with one back button

d1fed85

Update success screen styling

46564b1

Add password validations

d03577d

rudolfs changed the title ~~style(ui): onboarding style refresh~~ feat(ui): onboarding refresh Aug 31, 2020

Use enter key to progress through onboarding

d800114

sarahscott reviewed Aug 31, 2020

View reviewed changes

ui/DesignSystem/Primitive/Input/Password.svelte Outdated Show resolved Hide resolved

sarahscott reviewed Aug 31, 2020

View reviewed changes

rudolfs added 10 commits September 1, 2020 09:31

Simplify event names

0139345

Extract common function

cfdf985

Fix spec

aee2ed3

Add keyboard navigation spec

51c0e60

Merge branch 'master' into rudolfs/onboarding-refresh

d9f0d56

Merge branch 'master' into rudolfs/onboarding-refresh

825c2fe

Fixup

8f52fc2

Make onboarding spec less flaky

3eb1850

Merge branch 'master' into rudolfs/onboarding-refresh

7fee443

Update success page

8808fa9

rudolfs added 3 commits September 2, 2020 17:09

Debounce actions

09c0b26

Merge branch 'master' into rudolfs/onboarding-refresh

f93c2a4

The outtro animation breaks all our routing

77caf2e

Go figure.

rudolfs marked this pull request as ready for review September 3, 2020 09:38

MeBrei suggested changes Sep 3, 2020

View reviewed changes

cypress/integration/onboarding.spec.js Outdated Show resolved Hide resolved

ui/Screen/Onboarding/Welcome.svelte Outdated Show resolved Hide resolved

ui/src/identity.ts Show resolved Hide resolved

MeBrei suggested changes Sep 3, 2020

View reviewed changes

rudolfs commented Sep 3, 2020

View reviewed changes

Convert px to rem

6d2b297

rudolfs added 4 commits September 3, 2020 13:45

Fix text colors

584f84c

Fix prettier messing up whitespace in HTML

825ba5d

sveltejs/prettier-plugin-svelte#116

Fix copy

2821497

Shuffle order

d2a1aeb

xla suggested changes Sep 3, 2020

View reviewed changes

rudolfs added 5 commits September 3, 2020 15:04

Merge branch 'master' into rudolfs/onboarding-refresh

c449b38

Ordnung muss sein

1e2f5b6

Appease new prettier

509d82d

Make specs more robust

4fc717f

Disable global hotkeys during onboarding

86b9cd8

MeBrei reviewed Sep 4, 2020

View reviewed changes

ui/Screen/Onboarding/EnterPassphrase.svelte Outdated Show resolved Hide resolved

rudolfs added 2 commits September 4, 2020 10:39

Use validations properly in EnterName screen

028beff

Merge branch 'master' into rudolfs/onboarding-refresh

bd3899e

Fixup

edeb5d7

MeBrei reviewed Sep 4, 2020

View reviewed changes

xla approved these changes Sep 4, 2020

View reviewed changes

MeBrei approved these changes Sep 4, 2020

View reviewed changes

rudolfs merged commit bd9aed4 into master Sep 4, 2020

rudolfs deleted the rudolfs/onboarding-refresh branch September 4, 2020 14:12

rudolfs mentioned this pull request Sep 17, 2020

Cannot submit forms with enter key #623

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): onboarding refresh #837

feat(ui): onboarding refresh #837

rudolfs commented Aug 28, 2020 •

edited

Loading

sarahscott Aug 31, 2020

rudolfs Sep 4, 2020

MeBrei left a comment

MeBrei left a comment •

edited by rudolfs

Loading

rudolfs Sep 3, 2020 •

edited

Loading

rudolfs commented Sep 3, 2020 •

edited

Loading

xla left a comment

xla Sep 3, 2020

xla Sep 3, 2020

xla Sep 3, 2020

xla Sep 3, 2020

xla Sep 3, 2020

rudolfs commented Sep 4, 2020

MeBrei Sep 4, 2020

rudolfs Sep 4, 2020

MeBrei Sep 4, 2020

xla left a comment

MeBrei left a comment

feat(ui): onboarding refresh #837

feat(ui): onboarding refresh #837

Conversation

rudolfs commented Aug 28, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MeBrei left a comment

Choose a reason for hiding this comment

MeBrei left a comment • edited by rudolfs Loading

Choose a reason for hiding this comment

rudolfs Sep 3, 2020 • edited Loading

Choose a reason for hiding this comment

rudolfs commented Sep 3, 2020 • edited Loading

xla 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

rudolfs commented Sep 4, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xla left a comment

Choose a reason for hiding this comment

MeBrei left a comment

Choose a reason for hiding this comment

rudolfs commented Aug 28, 2020 •

edited

Loading

MeBrei left a comment •

edited by rudolfs

Loading

rudolfs Sep 3, 2020 •

edited

Loading

rudolfs commented Sep 3, 2020 •

edited

Loading