Announcements slideshow

[eugenekasimov]

PR Summary:

This PR changes the way announcement blocks are displayed. Instead of being stacked under each other now they are displayed as a slideshow.

The width of the slider is aligned with the width of the header.

Why are these changes introduced?

Fixes #398.

What approach did you take?

• I reused the existing slideshow component, deleted unnecessary classes from it and added new classes to make it look properly for our purpose. 
• I also adjusted the current JS logic for the slideshow component to make it work properly for both the slideshow section and the announcements slideshow.

Other considerations

To make the slider follow the width of the header I had to use quite complex combinations of css selectors. Although it works, maybe it's not worth it and we could use JS to achieve the same result 🤔.

Decision log

#	Decision	Alternatives	Rationale	Downsides
1

Visual impact on existing themes

Testing steps/scenarios

• Add a few announcement blocks.
• Make at least one of the blocks has a long text for a few lines.
• Test it with different screen sizes
• Test it with different menus (Dropdown and Drawer)

Demo links

• Editor

Checklist

• Added PR summary for release notes
• Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
• Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[YoannJailin]

When hovering one announcement that has a link, would that be possible to extend the color background change so it affects the whole section background? The current effect cover the text only but not the background behind the arrows. Also when one announcement in longer, the shorter one has that kind of hover :

[kmeleta]

Behavior is looking good so far, but mostly did a quick first pass on code. Let me know if any of my feedback is confusing or you disagree with it.

[eugenekasimov]

When hovering one announcement that has a link, would that be possible to extend the color background change so it affects the whole section background? The current effect cover the text only but not the background behind the arrows.

Hey @YoannJailin

1. It doesn't seem really possible to change background of the whole section while hovering a link inside the slider 🤔
2. Maybe we don't even want it because this section (utility bar) is going to have a few other components. Let's say we have social-media icons and/or sub-menu, do we really want to change a background color for the whole section?

Also when one announcement in longer, the shorter one has that kind of hover :

I fixed this 👆

[eugenekasimov]

@YoannJailin and I agreed to remove the hover effect for the announcement links background. c8ad9a7

[kmeleta]

Seems like it's working beautifully to me 👍 Thanks for taking the time to consider all the heavily opinionated code nitpicks.

[kmeleta]

I'm not sure we need all these styles applied to both of these classes. I know we've moved some classes around, so I feel like some of these are redundant now. I should have flagged this sooner though and I don't want to send us backward. If we feel we can confidently clean some of this up that'd be great but I won't block this PR for it.

[kmeleta]

Not something we need to address here or at all, just thinking aloud in case it appealed to anyone. With the arrows kind of serving as a frame, it might be a nice little improvement if the boundaries of the slider area had a little fade out/gradient overlay so the scrolling content doesn't just disappear at a harsh line. Something similar may have come up before though (maybe during slideshow development) and I know we didn't roll with that.

[ludoboludo]

How do we feel about having announcement specific styling in this general slider file ?

Usually feature specific code doesn't go into the general styling file used by other features. For example, product page specific slider code is in section-main-product.css and not in component-slider.css 🤔

[ludoboludo]

Here I think we might have issues during theme upgrades as we're moving a setting from a block level to a section level 🤔
Could be worth checking/confirming with the team that could help us have a fix for it or we can test a theme upgrade ourselves and see how it behaves.

[eugenekasimov]

Ludo and I have come to an agreement that we simply need to observe what happens after upgrading with announcements, and from that, we will determine if a warning about manual update settings for merchants is necessary.

[ludoboludo]

So I tested a manual update and the experience isn't too bad.
Things you're losing:

• the color scheme (moved to a section level setting instead of block)
• the text alignment, the setting was removed

But otherwise the blocks are keeping the links they had and coming up as a slider as expected.

Screenshot

So we will still need to warn merchants when upgrading but it shouldn't be too bad of an experience.

[ludoboludo]

Not a huge fan of how far the arrows are from the content: video

[eugenekasimov]

Hey Ludo, thanks for the opinion. I'm afraid there is no optimal way to set it right, because it really depends on the message size. Setting the width for the slider based on the first slide might have the same visual issue if the first slide is wide and the next is super narrow. I think the current design decision works well for the average case, plus a merchant can always set the menu to a different type such as the dropdown to make it more narrow. Plus, we are about to start adding other features into it and it's going to be more compact anyway.

[eugenekasimov]

Hey @YoannJailin this needs your attention. Thanks.

[YoannJailin]

Hello @eugenekasimov @ludoboludo i think it could be good to make the arrow icons more centered so the user can see them more easily / he won't have to go too far to hover it on large screens.

Let's just add the additional options for now (selectors, social media icons) that will shrink the Announcements slider to the middle including the arrows. We can still make that narrow version of the slider default later, even if there's no other options activated.

[ludoboludo]

Tweaking the height seem to mess with the size of the arrow icons. They should be 44px by 44px ideally to keep them accessible and easy to click on.
If the announcement is a link, on mobile it can be very easy to click on the link when you meant to click on the arrow.

[eugenekasimov]

I had to proceed this way because Yoann wanted me to keep the default height of the announcement bar the same as it used to be. If we set a fix height for the buttons 44px then the minimal height of the announcement bar will be bigger.

[ludoboludo]

We gotta do what's best for the user experience. So we, at least for mobile, need to have buttons be 44 by 44.
cc: @YoannJailin

[eugenekasimov]

@YoannJailin after discussing it with Ludo, I have to admit that his argument is quite valuable and important. I remember that we discussed it with you and you wanted to keep the default height of the announcement bar the same as it used to be. But because we added arrow buttons and there is a requirement for accessibility we should set those buttons at least 44px height and the announcement bar is going to have a minimum height of 44px as well.

[kmeleta]

Still looks good to me with the latest changes

[melissaperreault]

Exciting team! I was just looking at the experience on our main branch and came here to share some observations. I'd like to raise a few key points for a follow up refinement for accessibility and usability before our next release.

1. It is recommended to provide a "Play/Pause" control that stops the auto-rotating behaviour, like the Slideshow section. This can then be used explicitly by users, in addition to the current behaviour where it is paused as soon as the user's mouse/pointer is over the slide/section.
2. Once a user has explicitly activated one of these previous/next buttons, the auto-rotating functionality should stop. If users are currently reading/interacting with content in the carousel, and the slide that they are currently on is advanced and replaced with new content the experience will be disorienting, as they may not realize the reason why the content they were currently on suddenly disappeared.