Reverse route value

[erikalanghauser]

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

For Flight Search team's planbook initiative, we want to create a reverse route button that would be an icon-only button (UI and Figma not finalized yet - will be worked on by Kayla and coordinated with @leeejune ).

In discussion, it was mentioned that the reverse route button would be a good candidate for auro as this functionality could be used in a lot of pages like homepage, deals, employee travel, as well as planbook.

Describe the solution you'd like

For our use case, it will be a button similar to on google flights that reverses the inputs of 2 comboboxes.

Not sure if the approach would be specifically a button for reverse route, or just a variant of button that allows for an icon only.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

[blackfalcon]

The conversation agreed that we should NOT build a specific component for this interaction. We have a great opportunity to create an example in the doc site so that we can illustrate an easily repeatable solution.

Specification

Create an example of two input elements with a button option that will swap the value between each element in the auro-input portion of the Auro docsite

Exit criteria

This issue will be considered complete once we have shipped a working example that is easily repeatable by other teams.

[blackfalcon]

Initial scope of work is just to make a working example. @jason-capsule42 will have to work with @erikalanghauser and @leeejune to finalize design.

@leeejune will also consult with designers regarding a possible auro-iconbutton element.

accessibility

We need to ensure that an icon button is fully accessible and there is notification of value swapping between inputs.

[lindseyo1123]

updating to add clarification:

no icons on destination / to like google has the button does not need animation like google has

[blackfalcon]

@jason-capsule42 is working through a POC of how this can work with existing Auro tools and creating a demo to illustrate. @leeejune will work with for a UI to deliver.

[jason-capsule42]

Draft PR added and ticket marked as blocked pending resolution of the UI design from @leeejune.

[leeejune]

Context

When starting this work, the idea to use an icon only button for the reverse button came up. As the designer, I picked up the idea because there were requests from other teams wanting an icon only button.

Current situation with design

I am working on the icon only button and will be getting feedback on it next week. The reverse icon button will be using this new icon only button.

Options for next steps

• Publish an example without design and update it once the button design is complete (meanwhile the team who needs this will design a temporary button for their goals)
• Wait for button design to be complete and publish example

We will also need to discuss how where we will add these specific use cases if we continue to add them on the doc site in the future.

[jason-capsule42]

Given team discussion on what we should do as an initial release the PR is presented for review with a functional version that does not incorporate the icon only button design work described earlier in this ticket.

Initial release will include a functional only version with limited custom CSS to layout the default auro-input and auro-button elements.

[blackfalcon]

For reference. The completed demo can be found here. https://auro.alaskaair.com/components/auro/input