Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

QA: A few cosmetic issues #342

Closed
8 tasks done
jasmussen opened this issue Nov 6, 2023 · 11 comments
Closed
8 tasks done

QA: A few cosmetic issues #342

jasmussen opened this issue Nov 6, 2023 · 11 comments
Assignees
Labels
Milestone

Comments

@jasmussen
Copy link
Collaborator

jasmussen commented Nov 6, 2023

Did a quick round of QA on the work in progress site. Overall it's looking really solid, a huge step forward in every way. I didn't find any big issues, and as such, collecting what I've found so far here in a single issue. But let me know if you'd like me to extract some of these to separate issues. Anything in the "Nice to have" category is not urgent, especially if tricky. In general, all of this feedback applies to both the Developer Resources site, but also to any other section that uses these patterns.

  • We should underline related links on hover:

underline on hover


Nice to have: This dropdown could ideally be a button that opened a custom dropdown.

long term, be a button

long term, be a custom dropdown

A smaller fix would be to have the focus style only be as big as the default content side the select, which may also be nontrivial.


  • The focus, active, and focus+active states for the search box is missing.

Focus:

focus

Focus + active, note that this also causes a layout shift:

focus plus active gives layout shift


Nice to have: hovering the mid-dot in pagination should not be the same as hovering the "Next" button. Shown here, I'm hovering the mid dot.

hovering the ·

The mid-dot is just meant to be text. It's not a big deal.


  • Headings in search results should be underlined on hover

underline on title hover


  • Back to top should not appear until you've scrolled a bit

back to top ideally only when scrolled

This one is somewhere between nice to have and good to fix for launch. We don't have a "back to top" link on the site today, so if this one is tricky to address, one thing we could do is to just omit the back to top link until such a time as we can implement it with the "appear on scroll" behavior.


  • Wrong items linked in the CLI resources

There are 4 items linked in the CLI page that don't seem like they should be there:
these should probably not be visible on cli commands


Nice to have: The Edit links are a bit clunky:

edit links are a bit awkward, maybe just hide in the sidebar -- do we need the icon?

I would hide them from the Chapters list, remove the icon, and make them a fixed font-size, say 14px.


Nice to have: These notices could be better:
content, but bad

It's not entirely clear to me if these are "content", and therefore separate from the refresh or not, but noting for reference that the visual style and icon of this yellow notice is incorrect. If it's content, it's nice to have, if it's part of the refresh, we should address it.

You can use one of these callouts instead.

callouts


  • Style the JSX/Plain tabs

unstyled tabs

They could look like this:

can style like this


  • Fix list item issues with TOC

On this page, the TOC wraps a bit awkwardly:

awkward toc on block deprecation

There appears to be a nested list margin causing trouble here:
Screenshot 2023-11-06 at 11 34 05

Not sure if that's obsolete per some of the TOC changes discussed here or not.


  • The Copy button is a bit big

copy button a bit big

I believe this is the pattern to follow:

Screenshot 2023-11-06 at 11 37 07

@adamwoodnz
Copy link
Contributor

Thanks @jasmussen, great work!

Yeah lots of these are being tracked in other issues, I'll go through and link them up.

@adamwoodnz adamwoodnz added this to the MVP milestone Nov 6, 2023
@adamwoodnz adamwoodnz self-assigned this Nov 6, 2023
@adamwoodnz
Copy link
Contributor

  • The Copy button is a bit big

Fixed by #326

@adamwoodnz
Copy link
Contributor

The Edit links are a bit clunky:

Fixed by #346

@adamwoodnz
Copy link
Contributor

adamwoodnz commented Nov 9, 2023

  • Wrong items linked in the CLI resources

These are there in prod, but at the start of the list. Perhaps the bottom (like staging) is better?

Screenshot 2023-11-09 at 1 36 28 PM

@jasmussen
Copy link
Collaborator Author

These are there in prod, but at the start of the list. Perhaps the bottom (like staging) is better?

Oh, my mistake!

I'm actually very happy to defer to you or anyone better versed in this content than myself, so we can scratch it from the list. My main confusion was not seeing it at the bottom like the other, but also that those 4 items lack descriptions. Simply adding descriptions would go a long way.

@adamwoodnz
Copy link
Contributor

  • Back to top should not appear until you've scrolled a bit

Created a next iteration issue for this WordPress/wporg-mu-plugins#508

@adamwoodnz
Copy link
Contributor

  • Fix list item issues with TOC

The ToC styles have been updated in WordPress/wporg-mu-plugins#499, however https://developer.wordpress.org/redesign-test/block-editor/reference-guides/block-api/block-deprecation/ is still not right. Seems like it could be a content issue with that markdown. Needs more digging.

@ndiego if you have time could you please take a look to see whether there is anything unusual there? Other Block Editor pages don't seem to have this issue.

@adamwoodnz
Copy link
Contributor

adamwoodnz commented Nov 20, 2023

  • The focus, active, and focus+active states for the search box is missing.

Created a new issue in parent theme for this, it's also present on Showcase.

@ndiego
Copy link
Member

ndiego commented Nov 20, 2023

@ndiego if you have time could you please take a look to see whether there is anything unusual there? Other Block Editor pages don't seem to have this issue.

@adamwoodnz I think I figured it out. That doc has incorrect headings, an H3 appears before an H2. This seems to break the TOC. I can fix the doc, but perhaps we need a patch for the TOC generator as well? I have no doubt that this could happen again 😅

@adamwoodnz
Copy link
Contributor

  • Style the JSX/Plain tabs

Fixed by #352

@adamwoodnz
Copy link
Contributor

adamwoodnz commented Nov 22, 2023

Closing now, as I believe everything has been addressed or has a separate issue raised.

Haven't previously noted that callouts are covered by #315

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants