alaskaairlines / auro-combobox Goto Github PK
View Code? Open in Web Editor NEWAn auroLabs custom element w/an experimental API. You've been warned.
Home Page: https://auro.alaskaair.com/components/auroLabs
License: Apache License 2.0
An auroLabs custom element w/an experimental API. You've been warned.
Home Page: https://auro.alaskaair.com/components/auroLabs
License: Apache License 2.0
This repo is currently in aurolabs and it needs to be in aurodesignsystem.
We implemented the combobox with a dynamic menu after which whenever one types the first character the menu seems miss-aligned (See picture). We believe it is something to do with the firstUpdate() function not loading the style properly.
Steps to reproduce the behavior:
Our Code
This change was implemented in order to let us handle the menu options dynamically.
As a developer I want to have my code tested so that I can confidently add new features without breaking existing functionality.
AC: Unit tests are up to at least 80%
Design & Planning
Development
Documentation
Do Not
section outlines implementation scenarios to avoidPublishing
Remove old code that is no longer necessary. See this work for the list.
Link all states (error, disabled, etc) between auro-input and auro-suggest.
Exit Criteria: All states defined in auro combox figma are present in auro-combox
Combobox should not have a color change for the hover state.
Steps to reproduce the behavior:
The background should be auro-color-background-lightest
for all states.
White background (default state) vs transparent background (hover state)
This is not a problem in dropdown; dropdown has the correct hover behavior. Combobox's hover state must be treated differently as it is an "text input" interaction.
None of the examples in the doc site illustrate the chosen option when selected.
Steps to reproduce the behavior:
Selected option should appear in the trigger of the element.
"Set Value to Undefined" button on API value
example is not working.
Steps to reproduce the behavior:
value
example.When "Set Value to Undefined" button is clicked, the combobox should have no input.
Trigger should support all the formats of the input field, like date, credit card, etc.
Fired our own custom event (e.g. auroInput-ready
) so that we have total control over the logic as to when a component was truly ready.
I wonder if, by relying on firstUpdated, we are leaving the door open for a future issue where something isn't completed as part of firstUpdated but needs to be before readiness is asserted.
Currently the suggest matches only validate against the innerText of each menuOption. We need to be able to define additional non-displayed text that would cause a match.
e.g. airport names may be displayed without the code but the suggest should still return the airport when the airport code is entered into the input.
A custom attribute on the auro-menuoption (perhaps suggest
) will also be used in addition to 'innerText` which determining whether to hide a menuoption or not.
We would like the datepicker input box to re-render once the value change. In our case, we want to set the value for the second datepicker once we click on the first one. It is happening but the datepicker is not re-rendering.
we would like the datepicker to re-render once the value of the "value" parameter changes. We believe a listener could be added to this parameter or the firstUpdate function could be modify in order to achieve this.
support new auro-dropdown matchWidth attribute
Steps to reproduce the behavior:
Bib width should match
When the combobox is the first element in a form, it would be nice to be able to call a focus() method to focus the input so the user does not have to click on it. This is available on auro-input, and would bring this control up to feature parity.
Either add or document an event for when the user selects an option. Currently there is no way to immediately be notified the user has selected an option (that I have found...)
Add an event that can be subscribed to for on selected
Not use this control
Steps to reproduce the behavior:
No match string should display while typing as appropriate
Support auro-input noValidate attribute
Adding the noValidate attribute to combobox should apply the attribute to auro-input.
Handle error state communication between dropdown and suggest.
The chevron on the right should not be there according to the blueprint. https://www.figma.com/file/N7GhlX4My3vXWSVzwBeoFq/Combobox?node-id=1203%3A967
See blueprint.
Write Component Description and Use Cases
Exit Criteria: Hand off documentation to Engineering so the doc site can be updated.
Research has surfaced information that educates us to the fact that suggest
is not the best name.
Rename element and repo to auro-combobox
Auro-menu now supports an optional checkmark. Per design the, default to no checkmark but keep it optional in auro-combobox.
Default to no checkmark, add a checkmark
attribute that returns it.
There are two main bug with the filtering and value attribute.
With the first bug, the combobox filters by value attribute after clicking on the suggested name.
For example, take the code:
<auro-menuoption value="WA" suggest="wa washington"> Washington </auro-menuoption>
When you type in Washington and click on the filtered option everything works as intended. However, when you click on the combobox one more time, it no longer filters by the text value and instead filters by the value attribute.
With the second bug, when you click on the suggested name twice in a row, the value attribute overrides text value.
For example: in the combo box the text value Washington
would be overridden with WA
Steps to reproduce the behavior:
idaho falls
and click on idaho falls regional airport
idaho falls regional airport
turned into idaNote: The moment you start typing again, it filters by the text value of the combo box.
When you click on the combo box after having selected your location, I expect the combo box drop-down to filter by the text value instead of the value attribute.
I also expect to have the text value stay the same after clicking on it twice instead of it being replaced with the value attribute.
None
Update all styles to match figma
The demo page of this element no longer supports a focus-visible
UI state due to updates to WCSS. But what is also interesting is that the polyfill for focus-visible still appears to be operating on the page? Where is that coming from and why?
Steps to reproduce the behavior:
Steps to reproduce the behavior:
auro-combobox
element locallyNo polyfill should be operating and the focus-visible
UI should appear when tabbing to an element.
When I am typing in the combobox, I am frustrated when my results is far down and I need to arrow key down to it when in ascom I am used to it changing my tab/focus location to the closest match
If you search for a city in ascom today there is a grey highlight indicating what will be selected when you hit enter.
Say I am searching for 'San Diego' which is SAN
I start typing 'SA' and this is what I get
So if I was going to San Fransisco, this would be super nice because I could just hot enter and move on, but it is also nice because then I type 'SAN' and get
So it bounced the focus down to San Diego because SAN perfectly match the IATA code SAN
Currently there is only the bolding of typed characters which is very useful like so:
and 'SAN' here
But there is no hover/selection of the most matched one like there is in current ascom. This will be nice so the user does not need to arrow key all the way down.
If this is a very specific problem to city searching then we are down to implement something on our side that checks for the most closely matched option and going to that location, but I am unsure if that is even possible with the current combobox? But if there is a way to pass a prop to an option as the 'selected' or 'hovered' item then we could do something on our side!
Ping me for a lower env of the flight search site if you want to give the city search combobox a try!
Steps to reproduce the behavior:
Value examples should work
Support latest released auro-dropdown
Support released version of auro-menu
Exit Criteria: Needs to use the latest version of published auro-menu
The auro-combobox does not have a borderless style, so it looks bad when it is combined with other auro components when using borderless styling.
Add a borderless attribute so it's design can match other auro components
Limiting designs that use auro to only ever use bordered components.
Entering a character after selecting all text within the input box clears the text, but does not input the entered character.
Steps to reproduce the behavior:
Entering a character after selecting all text within the input box should clear the input while inputting the character.
Current implementation is that combobox will pass the input value to menu to attempt to make a selection on blur. This works fine when the value and displayValue are the same. With an example like airport search where the value is the airport code and displayValue is the airport name this causes combobox to show an error.
Steps to reproduce the behavior:
The error state should not occur here.
The problem is occurring because when clicking on a menu option you are also triggering the blur event on the input which is then passing a value that doesn't exist. Even though you also selected one by clicking, the input blur event is superseding the other.
We are trying to fill the combobox with the results of the citySearch API for a dynamic response of the suggested cities. At the moment, it seems that the options are not getting marked as selected when clicked on it. We suspect it has something to do with the way that we are dynamically populating the menus.
A way for us to not have to click on the bolded area of the menu in order to get the city selected.
have the cities statically in the menu-options which is not ideally what we want.
Menu is missing checkbox for selected option.
Steps to reproduce the behavior:
There should be a checkbox next to the selected option as an indication of a selection.
Currently when you change the value of the dropdown, the active index isn't updated. This creates a scenario where the active index may become hidden by the suggestion matching logic and hitting the Enter
key will select the hidden menu option.
Gray background on hover - this is not in spec and doesn't match auro-input.
There should be no hover color.
Use the comments from @erikalanghauser from AlaskaAirlines/aurolabs-suggest#8 as acceptance criteria for this version of the component
Since we are doing a refactor using auro components some of these may not apply anymore.
Please refer to this document for background on how this component will be architected.
Can't start until we have these completed.
Full a11y support
Exit Criteria: Create individual issues for full a11y support.
These are the bugs Erika found when doing a UI review of the auroized fly website page. June and I have a branch with a fix to #34 but these are the remaining ones that are showing in combobox...
The one below is weird because it works perfect for me but not on Erika or June's screen.
For this let's implement flight search's city API so we can validate with real data.
Let's refine this list next week and break up any into separate issues if necessary.
auro-combobox currently has very poor/little integration with the built in helptext and validation workflow that exists in auro-input.
combobox needs to respond appropriately when input changes its helpText or changes the error state / isValid state.
auro-input has a change pending to send notification events when helptext and validation changes. These should be listened for and handled appropriately based on the new state.
"active" state doesn't move correctly through all of the nested menu options.
Looking around the Auro docsite we are missing a demo using combobox with auro-menu options to select from.
There is an example of typing into the combobox and getting a smaller list, but there are no examples for how this would be used in the scenario for displaying all menu options when clicking on the trigger.
Add a demo to illustrate this use case.
The carrot appears to be too far to the right?
Steps to reproduce the behavior:
Should be like auro-dropdown https://auro.alaskaair.com/components/auro/dropdown#:~:text=Alaska%27s%20accessibility%20policies.-,Common%20use,-with%20auro%2Dlabel
combobox needs to have (per figma) content displayed saying when there are no matching suggestions based on the value entered into the input.
Support a 'nomatch' attribute on a menuoption. When this.availableOptions
is updated we will check the length and then hide/show the nomatch
menuoption based on that check. The nomatch
menuoption can also optionally use the new static
attribute in auro-menu to make the option non-interactive.
Examples with JS code need better implementation
Create a new examples.js
file that that contains can run all examples. This one file will be used in AuroDocSite https://github.com/AlaskaAirlines/AuroDocsSite/issues/92
This new examples.js file should insure the component is ready to run the example before executing the JS.
Required combobox fields error on a click into the field and click out, prior to any text being entered. This feels like bad practice to error on the user prior to even attempting to enter any text as they might just be directing their attention elsewhere temporarily.
Steps to reproduce the behavior:
I don't expect the required combobox to error until the user has entered text into the field OR submitted the form without entering any text into the field.
There is no example present in the demo for resetting a value in combobox.
Steps to reproduce the behavior:
Should also show changing value programmatically to either:
Auro Input allows one to set the error text. Auro Combobox only allows one to set whether or not to persistently show a generic message.
Expose the error message as a property that can be set.
Not use this control
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.