Fluentui: Contextual menu selected items are not to spec

[betrue-final-final]

Are you willing to submit a PR to fix? (Yes)

Requested priority: (Normal)

Products/sites affected: (if applicable)
OneDrive and SharePoint. Soon to be Outlook

The selected items currently have a grey background and blue check. There should be no background and neutral check.
Build:

Spec:

[lynamemi]

@betrue-final-final do selected items have the same background colors for hover and focus states that are shown above for the unchecked items?

I'm assuming yes, but the change I just did undid that so thought I'd double check before fixing :)

[betrue-final-final]

Yes selected and unselected use the same states.

[phkuo]

@betrue-final-final combo boxes have a similar visual paradigm, do the styles there change as well?

[betrue-final-final]

Combo box should be based on dropdown, so thought I would fix that first.

[phkuo]

Reopening to track fixing combo box styles as well.

[lynamemi]

Sorry, got distracted by bundle size issues and forgot to do this!

[suztocco]

Just curious when this may be fixed and updated in Fabric? I see this bug all over OWA and it looks pretty bad.

[phkuo]

@lynamemi fixed dropdowns already last week, but somebody still needs to fix combo boxes

[lynamemi]

I can take a look at making the same change to combo boxes today and tomorrow.

[suztocco]

@betrue-final-final @lynamemi - Just a comment that the main items on the context menus don't usually have a "selected" state bg color other than "checkmark" (except for if a submenu is selected). At least to my knowledge. Just want to make sure things don't get overwritten in certain areas that shouldn't be. Ben knows the specs but just wanted to call it out as I am not sure what all is being affected here.

[betrue-final-final]

Yes, that's what we're fixing.

[lynamemi]

Someone else has been assigned to the issue in #3252

[suztocco]

Just wanted to check on an ETA on this.

We are launching our Outlook Calendar React Beta within the month and this component is used across the site.

adding @melvsparks (our dev) for visibility

[lynamemi]

I have been getting blocked by a couple code issues, but I am mostly there. I can go ahead and checkin what I have now and file a separate issue for the specific focus bug that is still outstanding.

[suztocco]

Thanks for replying.
Also, not sure if noted somewhere but there is also a "press" state that is showing up in the control that isn't there in the design file. The hover and press are the same color from what I see.

@betrue-final-final can clarify. I know if there is a submenu and it is selected that the bg is darker

[betrue-final-final]

Suz is correct about not having a pressed state. It should be same as hover. The origin of a submenu would be selected.

[suztocco]

@betrue-final-final @lynamemi - Not sure if it was noted here but I have mentioned quite a few times that the submenu selected text is not semi-bold in the XD files but appears as so in code. Color looks pretty dark for the BG as well.

[lynamemi]

I am looking into fixing this (the fix is straight forward), but I'm getting a weird scroll issue in my master branch that I need to figure out first. If someone else takes the font and background issue on, let me know.

[lynamemi]

Found the scroll bug! Someone replaced an example in a recent PR by mistake - should be able to get this fix in soon.

[lynamemi]

@suztocco , you can see the update if you follow the PR link referenced above.

[suztocco]

@lynamemi I am looking around the page but not sure what/where to click.
In the past I could not SEE the actual design working either. It was just code.

[lynamemi]

I added screenshots to the description showing before and after. Unfortunately that's the best I can really get you from here. You would have to pull my code down onto your local computer to actually see it in action.

Alternatively, I can add gifs instead of static images if you want to see more of the experience.

[suztocco]

Ok thanks. I'm sure @betrue-final-final can test. He has the code system down. Looks like the bold is gone which was the item that felt the most off. Have a good holiday

[lynamemi]

Thanks, likewise!

I will go over it with Ben if I can catch him this afternoon.