Store: Clean up header on smaller screens

[ryelle]

This PR is just an idea – rather than drop down to icons-only for the action header on smaller screens, or a split button (which we would have to use for all sizes), why not bring back the small site header, and conditionally drop the breadcrumbs?

There are more screenshots in this gallery, some are at 320px wide, and some are around 430px.

Technical details

I've unhidden the SidebarNavigation (that top section with the site icon, name, and section title) on the store screens, and fixed an issue where it was being called twice on a few screens. This also updates ActionHeader to add classes when there are action buttons, and specifically when there are multiple actions (which requires the buttons to be passed as an array).

On screens smaller than 480px wide, if the ActionHeader has…

• One action, we do nothing - show both breadcrumbs and action button (see order list, product list)
• Multiple actions, we hide the breadcrumbs (see edit product, single order)
• No actions, we hide the entire bar, as it's duplicated from the SidebarNavigation above it (see reviews, dashboard)

There is an issue with the section title not updating correctly, I have another PR for that #22501

This was just an idea I had while trying out the orders mobile styling from #17910 – the < from the SidebarNavigation was acting janky (it stayed in place while the page scrolled), so I went to fix that & found this entire component 🙂

[matticbot]

Test live: https://calypso.live/?branch=update/store-header-small-screen

[timmyc]

Screenshots look fab! Eagerly awaiting the designer feedback on this one. Also /cc @shaunandrews for any thoughts on how smaller viewports might handle the new sidebar navigation concepts... maybe he has some designs around this already too.

[shaunandrews]

maybe he has some designs around this already too.

I don't have anything for this yet — we'll likely be using the SidebarNavigation for a while longer. At some point, we may combine it with the sidebar rather than having it as a separate component people need to remember to include.

[timmyc]

Overall i'm really like how this is working/looking - nice job @ryelle!

I did notice a few minor oddities. The first being when editing an existing product - there is a range between breakpoints where the action button, in this case 'Update' is cut off and off screen. Also note the redundant display of the fact you are Editing a Product:

Here is another instance where we show the current page/tab action 3x - seems a bit overkill:

I did browse through all views - orders, products, promotions, reviews, and settings and everything was looking quite nice.

[jameskoster]

Nice idea!

I agree with Timmy about the repetition, and I think there's some value in the breadcrumbs so I'd like to see us keep them if possible. How about something that combines the smaller site header / crumbs? Then keep the primary action button in the header and have secondary actions 1 click away via an ellipsis button.

[ryelle]

Trying this out – which means totally refactoring how the ActionHeader component works, but in a good way 🙂 So far it looks like this:

I'll have to adjust how it looks on larger screens, and I'll switch the actions to a SplitButton. I'll also try to add some smart space detection like the SectionNav does, so the buttons only collapse down at the right time. Switching this back to In Progress while I continue to work on it.

[jameskoster]

Looks good, nice work! :)

I know I'm splitting hairs and it might be more trouble than it's worth, but...

Orders / Order #315 Details

Could just be

Orders / #315

I know we might end up with wrapping on products with long names but it'd be nice if we could strive to avoid it. We might also consider putting a max-width in the crumb trail and fading the overflow to totally rule out wrapping as an alternative.

[timmyc]

That is looking fantastic @ryelle 😍

[ryelle]

Ok, I've got the SplitButton working, it should switch down to the split button when the buttons run out of room. There is a small margin of size where the buttons get cut off, but I want to get feedback on this approach before hammering on CSS more.

Single order	with open dropdown

Single button does not split	No button does nothing 🙂

Other sizes:

There are some issues that should be fixed in following PRs, maybe with some CSS-savy designer help?

The product category label is too long, pushes off the button	At 320px, the split button wraps

[timmyc]

I think the split button works quite nicely here - but will defer to @kellychoffman / @jameskoster 😁

[kellychoffman]

Looks amazing! Agree we should fix those other issues in separate PRs.

[ryelle]

@kellychoffman @jameskoster @shaunandrews @timmyc – I don't think I got a final 👍 / 👎 on whether this should be merged, which is partially my fault since I didn't flip it back to needs review. Knowing that it's not perfect, should this be merged as-is?

[jameskoster]

Thumbs up from me.

I would echo that "Order #318 details" could just be "#318" which would help with potential wrapping.

"Products / Edit Product" could probably be "Products / Edit" as well.

But yeah, we can do that in separate PRs.

[timmyc]

Took it for another spin, looks great.

[kellychoffman]

Getting this at around 400px width in Chrome when I shrink my window down:

[jameskoster]

Getting this at around 400px width in Chrome when I shrink my window down:

That would be fixed by my suggestion above. If it's not too much work it might be worth including @ryelle

[ryelle]

That would be fixed by my suggestion above.

Since it's not a single line/single file change, I'd rather see it in a different PR. That also wouldn't fix the issue in the Product / Category page, which was the other issue I mentioned above