web: proposal - add a small show more button in each section with more than 20 items #5483
Conversation
|
This is very much a "Minimum Viable Fix" UI - something that we can push out quickly without changing the "default" experience or introducing much complexity. If a section of the sidebar has more than 20 elements, cap it and add a little button. It might make sense to make the cap even smaller - like 10 elements. wdyt? |
|
Love the quick fix ! |
|
|
There was a problem hiding this comment.
this looks good to me! i tested with my "hundreds of resources" example, with and without labels, and it worked well.
do you feel strongly about the 20 max items? it's an easy threshhold to change if people complain about it, though i'm mindful that the "show more" display doesn't persist if you switch views, so i could see someone getting annoyed if they want to view a resource that doesn't make the cut off.
i was just looking at the "Resource counts in last 28 days for known teams" chart we have to get a sense of how that 20 threshhold relates. about half of the teams run more than 20 resources at once on average, but because that doesn't consider how many resources are in each label group, that may not be a helpful metric!
these are more general thoughts than specific / actionable feedback.
| @@ -203,6 +267,7 @@ function SidebarListSectionItems(props: SidebarSectionProps) { | |||
| resourceView={props.resourceView} | |||
| /> | |||
| ))} | |||
| {showMoreItemsButton} | |||
There was a problem hiding this comment.
two small optional a11y improvements we could make:
-
adding a
aria-describedbyattribute to the sidebar items container with the id of theShowMoreRow. (it may be a pain to conditionally add the aria link if there aren't enough resources to hide, so i'll leave that up to you!) -
add some screen-reader only text to make the functionality clearer, so the button reads "Show More Resources (# hidden)" like this:
...Show More <SrOnly>Resources</SrOnly>
<span>{" "}({remaining}{" "}<SrOnly>hidden</SrOnly>)</span> // but ignore how illegible this code is lol
There was a problem hiding this comment.
For color accessibility, please note the following color change:
There was a problem hiding this comment.
i don't think that would be an accurate use of describedby?
updated the SrOnly text and colors!
web/src/SidebarResources.tsx
Outdated
| function SidebarListSectionItems(props: SidebarSectionProps) { | ||
| let [maxItems, setMaxItems] = useState(defaultMaxItems) | ||
| let items = props.items |
There was a problem hiding this comment.
(tiny nit) could you rename this var so it doesn't echo the prop name, something like itemsToDisplay? it took me a second to realize this was a var that's potentially getting reassigned elsewhere, rather than the prop data.
There was a problem hiding this comment.
To speak to the high-level question - nope, I don't have a strong attachment to max=20
for what it's worth - as the set of resources gets more heterogenous (with clusters and registries and k8s secrets and k8s servers and local jobs all being presented as "sidebar items"), I suspect that the sidebar won't even make sense anymore as a way to navigate them...
Hello @lizzthabet,
Please review the following commits I made in branch nicks/window:
5ed0743 (2022-02-11 11:12:23 -0500)
web: proposal - add a small show more button in each section with more than 20 items
Code review reminders, by giving a LGTM you attest that: