refactor(cxl-tabs-slider): hide prev/next button on mobile

[paulkirspuu]

There should be a way to hide prev/next button on mobile.

[lkraav]

I would say "no", but there may be some opportunity to improve styling or something here.

It's clear from screenshot

• non-centered content visual seems... weird
• maybe the buttons don't need to be visible constantly, but only when.. um, tapping the testimonial, or.. not even sure what the best option for mobile would be - any popular sliders demos we could compare against and take notes?

cc @anoblet

[anoblet]

Hiding the arrows until the element is focused is easy, centering the content is going to be harder. Since this is a modified version of vaadin-tabs it's meant to accommodate items of various widths. I'm not sure modifying it further would be the best strategy, I would look into making something from scratch as they are relatively simple to create. Here's the code needed to hide the arrow:

ready() {
  super.ready();

  document.addEventListener('click', (event) => {
    let themes = this.getAttribute('theme').split(' ');

    if (this.contains(event.target)) {
      themes = themes.filter((item) => item !== 'hide-scroll-buttons');
    } else {
      if (!themes.includes('hide-scroll-buttons')) {
        themes.push('hide-scroll-buttons');
      }
    }

    this.setAttribute('theme', themes.join(' '));
  });
}

[anoblet]

Looking at this again, I don't believe it's a matter of centering, but rather the content is wider than the viewport.

We can snap/center content using scroll-snap-type: x mandatory on the tabs part, and use scroll-self-align: center on each vaadin-tab.

[anoblet]

Draft PR: #187
Demo: https://deploy-preview-187--conversionxl-aybolit.netlify.app/?path=/story/cxl-ui-cxl-tabs-slider--cxl-tabs-slider

Let me know if it's an improvement.

You will need to use dev tools and emulate mobile as it only responds to the touchstart event.