Addressing Viewport Challenges in Web Components

[thejfreitas]

I am reaching out to discuss a challenge we've encountered in our Web Components projects related to viewport handling, particularly when dealing with components that exhibit different formats on narrow screens.

In the Pie Notification component we have the option to stack action buttons, however the design docs say to allow stacking these buttons only on narrow screens: https://www.figma.com/file/pPSC73rPin4csb8DiK1CRr/branch/r96WaDE105zDbe5itnleVv/%E2%9C%A8-%5BCore%5D-Web-Components-%5BPIE-3%5D?node-id=3119%3A77568&mode=dev

In the moment that I wrote this topic in our codebase I saw that we have some mixins coming from foozie but these are only available on pie-docs.

@include f.media('>=wide') {
        grid-template: var(--header-height) 1fr max-content / var(--sidenav-width-wide) 1fr;
        grid-template-areas:
            'header header'
            'nav main'
            'nav footer';
    }

Also in the web components we already have some using viewports but with different breakpoints:

I was wondering if we could think of a solution to set proper viewports values so then we can create util functions/mixins to standardise breakpoints and guarantee consistency on different design requirements.

I like the values defined by Tailwind CSS for their viewports, it might be a nice inspiration if we all agree to build some kind of util function set: https://tailwindcss.com/docs/responsive-design
Also I liked how foozie implements these mixins and I think this is a very clever way to handle this.

Share your thoughts! Have you faced similar challenges, and how did you handle them?

[ashleynolan]

This has been at the back of my head for a little while, so I'm glad you brought it up 😄

The reason we didn't use the same mixin as in fozzie was because the tool we used hadn't upgraded to dart-sass syntax at the time – but it has now. The package is called include-media and handles media queries in the same way as fozzie does – it's a really elegant approach, so would be cool to integrate it into our components again for media queries and breakpoint handling.

If you're happy with that, I'll look to make a ticket for us to look at doing that shortly?

[thejfreitas]

That's a nice package and it would be great if you make a ticket for a POC in addition to that it is a nice topic to talk in our next catch up 🚀

[ashleynolan]

I've just added PR #1480 that I'm testing which adds the include-media mixins to pie-css – happy to chat about in our next catchup too 👍 I've just got to test this in our aperture apps and it'll be ready to merge then.

Once we have breakpoints fully in our design tokens, can remove those being hardcoded too and use those variables instead 😄