ebayui 812 & 813 - dropdown options UI fixes

[msendlakowski]

Description

Added background color to DS6 focused dropdown options.

Buttons content is naturally centered. When used in a dropdown the text needs to be aligned left.

Context

For issue 812, I referenced the base dropdown mixin from the DS specific dropdown mixins, and then added the override.

References

eBay/ebayui-core#812
eBay/ebayui-core#813

Screenshots

[ianmcburnie]

I believe I removed the background colour in order to fix a keyboard focus issue in the non-dropdown version, may be relevant here, let me dig up the commit...

Here: 27f1e5d

[agliga]

I looked at the old changes, this was missing from menu

button.fake-menu__item {
    background-color: @dropdown-fake-button-background-color;
    border: 0;
    color: @dropdown-fake-button-color;
    display: block;
    font-family: inherit;
    text-align: left;
}

So I would add this whole section as

button.fake-menu-button__item {
    background-color: @dropdown-fake-button-background-color;
    border: 0;
    color: @dropdown-fake-button-color;
    display: block;
    font-family: inherit;
    text-align: left;
}

[msendlakowski]

I believe I removed the background colour in order to fix a keyboard focus issue in the non-dropdown version, may be relevant here, let me dig up the commit...

Here: 27f1e5d

@ianmcburnie I think I addressed this by only applying the background color when the item is focused. But I'm not quite sure what you mean in the referenced commit about "non overlay state"

[ianmcburnie]

It's a little confusing, because some of these rules are being used not just in the dropdown/overlay version (i.e. menu-button, listbox-button), but also in the version that is not in a dropdown/overlay (i.e. menu, listbox). Some of these mixins need to be renamed.

[ianmcburnie]

Aha, @agliga's comment makes sense. If that entire block is missing (probably due to bad copy & paste on my part) then just restoring it is the right thing to do.

[msendlakowski]

Oh. I see. The other missing button styles aren't being seen as an issue because our test page defaults aren't exposing them. The values from the user agent is visibly the same as the overrides. Only the text-align is a visible problem on our tests.
@ianmcburnie @agliga Out of the 6 styles Andrew shared above, border and display don't look like they apply anymore. border for the link and button is already 1px solid #fff and display for the link and button is already inline-flex.

Are you OK if I do:

button.fake-menu-button__item {
    background-color: @dropdown-fake-button-background-color;
    color: @dropdown-fake-button-color;
    font-family: inherit;
    text-align: left;
}