Wanna run full suite of Android and iOS UI tests? Click here and 'Approve' CI job!

@mkevins @SylvesterWilmott I had a chance to give the latest build a proper spin, and I noted a few additional things that I think could be ironed out. I also made some sketches (attached below) in an effort to visualize my suggestions.

Labeling

• Can we match the placeholder labels on the table row placeholder and the placeholder on the expanded sheet? (Search or type URL)
• I believe the label on the expanded sheet should match the table row title (Link to)

Initial Sheet

• Considering the transition from the initial sheet to the expanded one is utilizing the sheet-to-subsheet transition when you tap the Link to row (which might soon become a more prominent page-push transition), I think we should display a chevron/disclosure indicator on the right side of the row (see Buttons block color settings example)

Full Sheet

• It looks like a few things are out of alignment, but I think this would likely be fixed by simply applying 16px of margin on the left and right of the row (eg. the icon and "URL" label, and placeholder label are all ~16 off). (Example)
• Rather than display the URL title, would it make more sense to left-align the input placeholder/label in its place (at the 72 keyline, with the icon left of it)? This would give the input more breathing room and also feel a little more balanced, I think. We could even remove the icon so that the text input would span full-width (minus 16px margins on each side, of course)
• Would it make sense to show a checkmark/"done" icon on the top right of the sheet header?
• The spinner that shows while searching is okay, but I think it'd be preferable to use the native Android spinner if possible, and perhaps bump it down slightly (or centered vertically in the space between the last result and the keyboard)

Here is what all of the above would look like (yellow lines == matching labels, pink == tap gesture):

Other Questions

• Will this also be applied to other instances of links, such as the Button link URL on Button, Link to on Image, etc?

Thanks for the awesome design feedback Thomas!

Labeling

• Can we match the placeholder labels on the table row placeholder and the placeholder on the expanded sheet? (Search or type URL)
• I believe the label on the expanded sheet should match the table row title (Link to)

✔️ Done

Initial Sheet

• Considering the transition from the initial sheet to the expanded one is utilizing the sheet-to-subsheet transition when you tap the Link to row (which might soon become a more prominent page-push transition), I think we should display a chevron/disclosure indicator on the right side of the row (see Buttons block color settings example)

✔️ Done

Full Sheet

• It looks like a few things are out of alignment, but I think this would likely be fixed by simply applying 16px of margin on the left and right of the row (eg. the icon and "URL" label, and placeholder label are all ~16 off). (Example)

✔️ Done

• Rather than display the URL title, would it make more sense to left-align the input placeholder/label in its place (at the 72 keyline, with the icon left of it)? This would give the input more breathing room and also feel a little more balanced, I think. We could even remove the icon so that the text input would span full-width (minus 16px margins on each side, of course)

I agree this makes more sense. I have updated without the icon. Let me know what you think, or if I should add it back. Thanks for the great suggestions!

• Would it make sense to show a checkmark/"done" icon on the top right of the sheet header?

I think it does make sense. Following the example from the custom color picker, I added the checkmark for Android, and the word "Apply" for iOS. Do you think that makes sense?

• The spinner that shows while searching is okay, but I think it'd be preferable to use the native Android spinner if possible, and perhaps bump it down slightly (or centered vertically in the space between the last result and the keyboard)

✔️ Done - I added a 150 px container for the spinner (centered vertically within), and it stops displaying the extra space when we know we've reached the end of results. Let me know what you think of it, or if it needs adjusting the height.

Other Questions

• Will this also be applied to other instances of links, such as the Button link URL on Button, Link to on Image, etc?

I believe this is the plan for further iterations. At the moment, there is still some ongoing work with the bottomsheet navigation, so I think it'd make sense for that to land before implementing in other bottomsheets, but I've had the other use-cases in mind while forming the interfaces, so it should be fairly straightforward to reuse the underlying components.

Thanks again for all your help @iamthomasbishop and @SylvesterWilmott !

Updated builds:
Android: https://63686-9306568-gh.circle-artifacts.com/0/Artifacts/WordPress-pr-12438-build-63686.apk
iOS: wordpress-mobile/WordPress-iOS#14537 (comment)

@mkevins thanks for the update and for taking care of all of those changes so quickly! Testing out the latest Android and now iOS builds, and it's getting really close! I have some updated suggestions, and again I'd be curious to hear what @SylvesterWilmott thinks — and as always, feel free to point out if you disagree with anything!

I believe this is the plan for further iterations

Sounds good!

Expanded sheet

• Input Alignment: I'm still not 100% sure about the alignment on the search input. I'd suggest we remove the margins on the left/right of the input so the input itself (and as a result, its border) is flush against the left/right edges of the screen. I would also keep the icon (either the previous "link" icon or a "search" icon) and align it to the 16px keyline — then align the label to the 72px keyline — 56px on iOS. Note: It might make sense to apply a slightly different input style for iOS, but I think this should work for both as a start.
• Height on iOS: is it possible to also use a not-quite-full screen height on the sheet on iOS like we're doing on Android? What I mean is that the top of the sheet would be flush agains the bottom of the Status Bar. Having the UI go full-screen feels odd because you can't swipe from the left to go back as you'd typically do in iOS when you see a < Back button. If we have to keep it full screen, maybe we can do one of the following to remove that friction:
  • Find a way to allow the natural swipe gesture to close the sheet, or
  • Change the < Back button to Close

Search results

• Very much a nitpick and not a blocker, but Is it possible to apply a unique subtitle (rather than "add this link") on the subtitles for mailto, tel? Eg. "add this link" makes sense for a standard URL, but for mailto it would make more sense to be "add email" or "email address", and for tel something like "add telephone number" or "telephone number" might make more sense, imo
• Similar to the last bullet point, is it possible to show unique icons for tel and mailto (whereas right now, we're showing the "globe" icon — this isn't a blocker, but would be a nice refinement)
• Should we change the color of the subtitle on each search result row to a lighter/secondary color and potentially make the label slightly smaller?

After selection

• After an item is chosen from the expanded sheet, can we possibly display a cleaner label in the small sheet? Specifically for a post or page result, I think I'd rather see the post/page title. I think showing the raw URL for a url, tel , and mailto is fine.

That's all I've got for now! It's getting super close, and very usable already, so well done @mkevins !

Hi @iamthomasbishop , thanks for taking another look 😄

Expanded sheet

• Input Alignment: I'm still not 100% sure about the alignment on the search input. I'd suggest we remove the margins on the left/right of the input so the input itself (and as a result, its border) is flush against the left/right edges of the screen. I would also keep the icon (either the previous "link" icon or a "search" icon) and align it to the 16px keyline — then align the label to the 72px keyline — 56px on iOS. Note: It might make sense to apply a slightly different input style for iOS, but I think this should work for both as a start.

✔️ Done

• Height on iOS: is it possible to also use a not-quite-full screen height on the sheet on iOS like we're doing on Android? What I mean is that the top of the sheet would be flush agains the bottom of the Status Bar. Having the UI go full-screen feels odd because you can't swipe from the left to go back as you'd typically do in iOS when you see a < Back button. If we have to keep it full screen, maybe we can do one of the following to remove that friction:

  • Find a way to allow the natural swipe gesture to close the sheet, or

This one might be a little tricky with the current bottomsheet, but might be possible with the navigation in the bottomsheet that is currently underway. cc: @dratwas 👋 😃 any thoughts on this 👆 ?

• Change the < Back button to Close

This is achievable, but to clarify, do you mean for it to close the bottomsheet altogether, or just modify the button text (and still return to the smaller link editing sheet)?

Search results

• Very much a nitpick and not a blocker, but Is it possible to apply a unique subtitle (rather than "add this link") on the subtitles for mailto, tel? Eg. "add this link" makes sense for a standard URL, but for mailto it would make more sense to be "add email" or "email address", and for tel something like "add telephone number" or "telephone number" might make more sense, imo

Thanks for the suggestion. I've updated the summaries as follows: for email: "Add this email link", for telephone: "Add this telephone link". I can also remove the word "link" from those, but it felt weird without it, imo.

• Similar to the last bullet point, is it possible to show unique icons for tel and mailto (whereas right now, we're showing the "globe" icon — this isn't a blocker, but would be a nice refinement)

Certainly! I looked around a bit in the Icons package, and also Gridicons, but I didn't find anything obvious for these. Once we have some Icons to use, it'll be easy to add. Btw, currently, it should not show the globe icon for those kinds of links.. did you encounter that? If so, perhaps the input value was missing the :? i.e. "tel" will not be detected as a telephone link, but "tel:" will.

After selection

• After an item is chosen from the expanded sheet, can we possibly display a cleaner label in the small sheet? Specifically for a post or page result, I think I'd rather see the post/page title. I think showing the raw URL for a url, tel , and mailto is fine.

This one is a little tricky. The current behavior is that the post or page title will populate the "Link text" field upon returning, as long as it is empty (i.e. it will not overwrite that value if it is already populated). But, the values there directly correspond with the underlying rich text. We could hypothetically hide the full url, displaying only the the title instead, but I think we'll still need to display the link text. Some problems I can foresee are:

• Link text and "URL" or "link" (or whatever we call that hybrid field) might be "duplicate" in that case
• The post / page title doesn't uniquely identify the content (i.e. two can have the same title) - I'm not sure if this would be a major concern in practice though
• After dismissing the modal, the post / page title is not persisted with the link, so tapping the link button again would show different information in the hybrid field

Are any of the remaining items considered "blockers" for this iteration? Thanks again for all your helpful guidance! 😄 👍

Updated builds:
WordPress-Android: https://64073-9306568-gh.circle-artifacts.com/0/Artifacts/WordPress-pr-12438-build-64073.apk
WordPress-iOS: wordpress-mobile/WordPress-iOS#14537 (comment)

@dratwas Looking really good overall! A couple of tiny things:

Android-only

• I'm seeing a weird issue when trying to submit the search query, where the keyboard hides but the sheet stays in place. (video).
• Also in this video ⬆️ , you'll see when the link is applied on the block, the string is doubled somehow (screenshot). This happens every time you apply a link from the sheet.
• We can probably use a slightly dimmer gray for the cancel icon (meaning lighter in light mode, darker in dark mode). (example using current $gray (left) and one shade lighter, $gray-lighten-10 (right))
• Now that we are allowing the sheet to go up to the status bar and also not allowing the user to swipe down to dismiss, is it possible to remove the border-radii from the top left/right corners of the sheet so that it's more obviously "docked" to the top?

iOS-only

• Would it make sense to try a more "standard" input style on iOS? For example, either the standard white background w/ a gray fill around it, or a gray-filled-background input style (examples). Do you have any thoughts or opinions on this @SylvesterWilmott ? It would def match our search input in the apps a bit more closely. If this is something we'd like to do, I can provide the exact colors.

Thanks for your feedback @iamthomasbishop! I made a list below to track all of your suggestions. Could you please take a look and answer to the questions i asked in section Need details? :)

Need details

• Colors of the icon

We can probably use a slightly dimmer gray for the cancel icon (meaning lighter in light mode, darker in dark mode). (example using current $gray (left) and one shade lighter, $gray-lighten-10 (right))

1. Is it Android-only thing?
2. Could you please provide the color for the dark mode as well? :)

• Issue with doubled link string

Also in this video ⬆️ , you'll see when the link is applied on the block, the string is doubled somehow (screenshot). This happens every time you apply a link from the sheet.

I can not see it on the video because the modal is open from the very beginning but - how you open the link settings?
Do you select the Link word and the open link settings or you open link settings, type title, select link and close the bottom-sheet? Asking because i can not reproduce it as well.

I tried something like this:

In progress

• Issue with empty bottom space

I'm seeing a weird issue when trying to submit the search query, where the keyboard hides but the sheet stays in place. (video).

Hmmm i haven't seen this before but finally, i reproduced that after a lot of switches between screens.

Done

• Now that we are allowing the sheet to go up to the status bar and also not allowing the user to swipe down to dismiss, is it possible to remove the border-radii from the top left/right corners of the sheet so that it's more obviously "docked" to the top?

Need Decision

• Would it make sense to try a more "standard" input style on iOS? For example, either the standard white background w/ a gray fill around it, or a gray-filled-background input style (examples). Do you have any thoughts or opinions on this @SylvesterWilmott ? It would def match our search input in the apps a bit more closely. If this is something we'd like to do, I can provide the exact colors.

Thank you @dratwas!

Is it Android-only thing?

The reason I put it under Android-only is that I think we're going to for-sure keep the current (in this build) input style, so I provided the color values w/ that in mind.

Could you please provide the color for the dark mode as well?

Sure thing! I took a look at our current color variables, and I think we can use the $dark-quaternary fill for the "clear" icon. Also, I noticed that on iOS dark mode, we aren't using the updated neutral gray on the icons (we're using one of the "old" blue-ish grays -- might currently be using either the standard light mode $toolbar-button or $gray variables, from the looks of it). Can we change that to use the standard gray, the same one we're using on the block toolbar icons (not exactly sure which color variable we are currently using)?

(Note: there are other places that we will also need to update, but while we're here, let's fix these instances on the sheet 😄 )

I can not see it on the video because the modal is open from the very beginning but - how you open the link settings?

Sorry the video might not have been super clear. The issue is happening at the same time as the keyboard-position issue -- when I have a link already. So to clarify, it's happening when I have an existing link, tap the "link to" cell to open the full sheet (to edit), then hit ✔️ on the keyboard ("done"). You'll see in the video that when I do this, the keyboard hides, the sheet transitions back to the top-level sheet, but its position isn't adjusted as the keyboard is dismissed and the string is doubled.

Sure thing! I took a look at our current color variables, and I think we can use the $dark-quaternary fill for the "clear" icon. Also, I noticed that on iOS dark mode, we aren't using the updated neutral gray on the icons (we're using one of the "old" blue-ish grays -- might currently be using either the standard light mode $toolbar-button or $gray variables, from the looks of it). Can we change that to use the standard gray, the same one we're using on the block toolbar icons (not exactly sure which color variable we are currently using)?

Yeah, i was surprised that the color is passed by the color prop but should be passed by the fill prop. I thought that it is intentional and didn't fix that :) Basically, it affects all Cells

Hey @iamthomasbishop :)
I created new builds with fixes except one with "double link string" since i couldn't reproduce that one.

Android

iOS

Could you please review it one more time? :)

@dratwas Got a chance to review again, thanks for the updated builds! Here are my notes:

• I played around w/ the clear button a bit more in the flow and realized we might want to change the close/⬅️ action (on the sheet header) to cancel/X. For example, if I open an existing link and clear the URL, I expect that "close" button to basically discard the changes (and "Apply" to, well, apply). If there are any objections or complications that might come with this change, I'm all ears. // cc @SylvesterWilmott what do you think?

• Only colors thing that I'm seeing is on Android: it looks like the clear icon is using a "stronger" gray than desired (iOS looks "right" in dark/light modes)

• On Android, when the sheet is retracted (from full height to short), the transition/cross-fade looks a tiny bit choppy. I'm not sure if it's a performance issue or something else, bc I'm not seeing it on iOS. It's pretty subtle. (video of choppiness -- apologies in advance, it's a bit hard to see bc the video is low-resolution 😬 )

Hey, @iamthomasbishop thanks for this review :)

played around w/ the clear button a bit more in the flow and realized we might want to change the close/⬅️ action (on the sheet header) to cancel/X. For example, if I open an existing link and clear the URL, I expect that "close" button to basically discard the changes (and "Apply" to, well, apply). If there are any objections or complications that might come with this change, I'm all ears. // cc @SylvesterWilmott what do you think?

Done

Only colors thing that I'm seeing is on Android: it looks like the clear icon is using a "stronger" gray than desired (iOS looks "right" in dark/light modes)

Hmmm, I use the same color for both platforms (these ones you provided in previous comments )
Light mode : $gray-lighten-10
Dark mode: $dark-quaternary

Should I change them for Android? If yes, please provide correct values :)

On Android, when the sheet is retracted (from full height to short), the transition/cross-fade looks a tiny bit choppy. I'm not sure if it's a performance issue or something else, bc I'm not seeing it on iOS. It's pretty subtle. (video of choppiness -- apologies in advance, it's a bit hard to see bc the video is low-resolution 😬 )

On it, however, it doesn't happen every time, just sometimes, and is quite hard to find the root cause.

Hmmm, I use the same color for both platforms (these ones you provided in previous comments )

Interesting, here's what I'm seeing in the latest test builds:

On it, however, it doesn't happen every time, just sometimes, and is quite hard to find the root cause.

Yea, it's hard to pin down. It's a very subtle thing, if we need to create a separate ticket for it that's fine.

@iamthomasbishop

Interesting, here's what I'm seeing in the latest test builds:

Hmmm, weird... I'm pretty sure that the corners are not rounded when the bottom-sheet is in full height mode on Android latest build.

Latest build should looks like this:

Yea, it's hard to pin down. It's a very subtle thing, if we need to create a separate ticket for it that's fine.

Will spend some time on it tomorrow and if I fail I will create an issue

@dratwas ahh, I wonder if the build I tested on Android wasn't the latest. I'll try to update again and double check.

@dratwas Sure enough, I wasn't on the latest build. Colors look good on Android as well 👍

I'm still seeing the same actions in the sheet header -- to clarify, here's what I was trying to explain in my previous comment:

@dratwas Are you still unable to reproduce the "double-string" issue? I'm able to reproduce it with no issue. Steps:

• Add text to a paragraph block
• Select text, tap link button in block toolbar
• Add URL (wordpress.org, for example), tap enter
• See link text is doubled (with only the second string as a link)

Video

Hey @iamthomasbishop thanks for the exact steps to reproduce. I fixed it and generated a new build with the latest changes.

Android
iOS - PR

@dratwas @lukewalczak Just took the latest builds of iOS and Android for a spin, and I think it's looking good-to-go. I will spend some time next week documenting (in the form of a new GH ticket) the things we would like to attack in the next iteration — most importantly extending this UI/flow to other places that have link settings (image block, buttons, etc). Thanks y'all for all of the great work on this, stoked we're going to ship it!