Make it possible to define tabs orientation through CSS

[Artur-]

Describe your motivation

When you do a responsive layout, you do the responsiveness in CSS using media queries. You are able to redefine the sizes of components and for flex based layouts, you can change the direction for devices of various sizes. It would be beneficial if the orientation of tabs could also be changed in the same way, using CSS

Describe the solution you'd like

For a flex layout you can do e.g.

@media screen and (max-width: 740px) {
  .mylayout {
    flex-direction: column;
  }

similarly you would want to do e.g.

@media screen and (max-width: 740px) {
  .mytabs {
    --tabs-orientation: vertical;
  }

As long as there is no way to listen to css property value changes from JS, a potential way of implementing this in a "quite good" manner would be to check the variable in the resize observer in tabs

Describe alternatives you've considered

No response

Additional context

No response

[web-padawan]

Workaround from the internal Slack thread by @tomivirkki:

 <style>
   /* Component styles */
   @keyframes vertical {}
   @keyframes horizontal {}
   
   vaadin-tabs {
     animation: var(--tabs-orientation, horizontal);
   }
 
   /* Application styles */
   @media screen and (max-width: 740px) {
     vaadin-tabs {
       --tabs-orientation: vertical;
     }
   }
 
 </style>
 
 <script type="module">
   import '@vaadin/tabs';
 
   /* Component js */
   const tabs = document.querySelector('vaadin-tabs');
   tabs.addEventListener('animationstart', e => tabs.orientation = e.animationName);
 </script>

[lkraav]

Indeed, in our vaadin-tabs-extending navbar solution, we currently listen for wide attribute change, and re-orient tabs in JS.

https://github.com/conversionxl/aybolit/blob/107febd094e20be1df1d53574534240128b2acb5/packages/cxl-ui/src/components/cxl-marketing-nav.js#L404-L424

CSS would probably be cleaner, OTOH this JS has also worked without fail.

[jouni]

That workaround by Tomi is so clever, I’m tempted to use that to control all component theme variants through CSS custom properties. That it would be possible to set the theme attribute value through a CSS custom property as well. Not sure what all the use cases would be, but I’m sure there are some.

One use case previously was the need to control the button variants inside the date picker overlay, use a different theme variant in the Lumo and Material themes.