feat: switch to condensed view based on container width

[geoffrich]

Alaska Airlines Pull Request

Fixes https://github.com/AlaskaAirlines/auro-flight/issues/19

Summary:

• When an individual flightline's width drops below 414px, it switches to the condensed view seen on mobile. This breakpoint is customizable via the breakpoint property on the flightline.
• Use ResizeObserver to detect changes to element size. The RO is shared between all flightline instances on a page.
• Refactor: remove --layover class. This was always added, so we didn't need a separate declaration.

Dale suggested looking into the cqfill package to polyfill CSS container queries. However, I was unable to get that package to work with web components (see discussion in linked auro-flight issue). I couldn't find any other stable polyfill, options, so I opted to keep my original ResizeObserver solution instead. This should be relatively easy to swap out for container queries when they're available in browsers -- instead of setting a condensed class, use a media query instead and remove the observer code.

If anyone has suggestions for alternate solutions for me to investigate, let me know.

Before (675px screen width):

After:

As a demonstration, add the following HTML to the demo and resize the screen.

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
</style>

<div class="grid">
  <auro-flightline id="flight1">
    <auro-flight-segment stopover iata="YAK"></auro-flight-segment>
    <auro-flight-segment stopover iata="WRG"></auro-flight-segment>
    <auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
    <auro-flight-segment iata="BOS" duration="1h 40m"></auro-flight-segment>
    <auro-flight-segment iata="DUB" duration="13h 40m"></auro-flight-segment>
  </auro-flightline>
  <auro-flightline id="flight2">
    <auro-flight-segment stopover iata="YAK"></auro-flight-segment>
    <auro-flight-segment stopover iata="WRG"></auro-flight-segment>
    <auro-flight-segment iata="SEA" duration="0h 40m"></auro-flight-segment>
    <auro-flight-segment iata="BOS" duration="1h 40m"></auro-flight-segment>
    <auro-flight-segment iata="DUB" duration="13h 40m"></auro-flight-segment>
  </auro-flightline>
</div>

Type of change:

Please delete options that are not relevant.

• [x] New capability

Checklist:

• [x] My update follows the CONTRIBUTING guidelines of this project
• [x] I have performed a self-review of my own update

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

Pull Requests will be evaluated by their quality of update and whether it is consistent with the goals and values of this project. Any submission is to be considered a conversation between the submitter and the maintainers of this project and may require changes to your submission.

Thank you for your submission!
-- Auro Design System Team

[blackfalcon]

Given this draft PR, how do you feel about working with this polyfill that is based on the emerging spec?

https://github.com/AlaskaAirlines/auro-flight/issues/19#issuecomment-932537409

[geoffrich]

I'm finally getting back to this today. I'm going to take a look at using the CQ polyfill.

[geoffrich]

Talked to @blackfalcon on a call. I'll need to make the following changes:

• Reduce condensed breakpoint to 414px and introduce a prop for customization
• Reverse resize logic to be mobile-first
• Remove existing media queries and rely on ResizeObserver to show condensed/expanded view

[geoffrich]

@blackfalcon finally got back to this. I think I addressed all your comments -- please take another look. Going mobile-first made things a lot cleaner.

Also, I think you linked the wrong issue to this PR -- this addresses https://github.com/AlaskaAirlines/auro-flight/issues/19. The canceled flightline will be addressed separately.

[geoffrich]

Refactored according to suggested name changes. See my comments above. Also updated the tests to ignore the "ResizeObserver limit exceeded" error, which only happened in the tests. Previously, I had wrapped the call in requestAnimationFrame to fix this, but this was inexplicable causing several tests to be skipped. I removed the requestAnimationFrame and told Mocha to treat the error as a warning instead.

@blackfalcon let me know what you think of the name changes (though I know you're off for the holidays soon, so no rush)

[blackfalcon]

I am approving this work given the scope is directly tied to this element's use. Abstracting this into an individual utility will be discussed in the future with a different proposal of work.

Given the current maturity of the @content selector and its current availability behind a chrome flag, it's safe to say that by the time we get to the work needed to make this a shareable utility the official spec will be in the wild.