auro-flightline: UI updates for canceled segment

[geoffrich]

Is your feature request related to a problem? Please describe.

I want to show that a flight segment has been cancelled.

Describe the solution you'd like

The flightline will appear as a dashed red line when the segment has been cancelled.

Proposed design from Erica Breed (in disruptions context):

Potential API (suggestions welcome):

<auro-flightline status="cancelled"></auro-flightline>

Describe alternatives you've considered

n/a

Additional context

n/a

[blackfalcon]

This feature seems viable.

I am assuming that @erikalanghauser is the design sponsor for this update?

Is there a Figma link that can be attached to this issue?

[erikalanghauser]

@blackfalcon - syncing up with Erica Breed tmrw to have her walk me through her proposed updates. Will report back here and add her Figma link if it's ready.

[erikalanghauser]

I reviewed with Erica, the design update for the cancelled segment looks good to go. She is getting a github account created so that she can add her Figma here. Thanks!

[designingcircles]

@geoffrich Signed-in.

[designingcircles]

Here's the link for the cancelled flight component. Please reach out if you have any problems. Thanks.

https://www.figma.com/file/929NVc0Q1bKwKIX299JbA3/Disruptions-Choice-Master-4e0c5a3?node-id=660%3A0

[blackfalcon]

@geoffrich the design seems solid.

For the API, I'd argue that this is a true boolean option, e.g. canceled="canceled". This API reflects state of the content within the element. The only other status is not-canceled, so the absence of this option is the false, unless I am missing something.

This is also consistent with the stopover part of the API. It is or is not a stopover. the default condition is layover.

[geoffrich]

My only question there would be whether we anticipate displaying the flightline differently in other cases, e.g. delayed. If so, then we'd have three states -- unaffected, delayed, and cancelled. At that point is would make more sense as a string, no? A lot of features start out as one of two states, but expand as different variants are added.

[blackfalcon]

Outside the scope of this issue, we need to have solid guidelines for choosing a custom element's API type of attribute.

Is canceled a state or a type? Hindsight is 20/20 and I can see that stopover is a type versus a state.

It can be said that stopover is a type versus layover and the two cannot be used at the same time. Then the element has no default assumption and the API should be type="{stopover/layover}"

@erikalanghauser and @designingcircles I throw this back to you.

... we'd have three states -- unaffected, delayed, and canceled.

If this is a possibility, can we address that in the design now?

[SaiKarthikaT]

@blackfalcon and @geoffrich.

Given a flight it might have 4 statuses : unaffected, delayed, diverted and cancelled.

In context for auro-flightline, only cancelled status matters as we are changing the colour of the line.
If its a diversion, the change will on departure/arrival airport in the flight segment component. Similarly, if the flight is delayed the change will be on the arrival/departure time. All other 3 statuses(except cancelled) won't impact auro-flight line component with current designs we have on the site.

If design wan't to come up with different color coding for delayed and diverted statuses then we have to make a new type called status. Otherwise we can stick to boolean state variable canceled. I'm inclined to make canceled as a boolean and make changes later if necessary. Please let me know if everyone is okay with this.

[blackfalcon]

Thanks for the feedback @SaiKarthikaT

Here is what I am thinking. For the scope of this update and the reply from @SaiKarthikaT it is more clear that canceled is a state of the flight line versus a type. Given that, this would be implemented as a boolean value of the element.

Regarding the auro-flight element, I would argue that the current boolean attributes are incorrect and really represent types of a flight stop. #35

If everyone is in agreement with that, I will update the scope of the work.

[blackfalcon]

@geoffrich is there a companion story in the future for auro-flight to address a canceled UI? Is there a badge or something that will accompany this color change to state CANCELED, something that screen readers will pick up on?

[geoffrich]

@blackfalcon forgot to respond earlier. I don't think there are updates to auro-flight needed. The cancelled flight status will appear above the auro-flight component for screen readers to pick on. As far as I can tell, flight status is not currently within the scope of auro-flight. See the below screenshot: