Add combobox UI

[donokuda]

Destination branch: don/stub-ui

This PR stubs out a filterable combobox ui for selecting branches and assignees. I originally went with a UI very similar to what we have in Desktop; however, it felt out of place with Visual Studio's UI. I ended up trying out a different approach with a look and feel closer to a native context menu.

Desktopish (Mock-up)
(I have a branch with this style but it has become so stale that it won't build on my machine without a bit of troubleshooting 😭)

Context menu-ish

There's still some refinement, polish, and theming, that needs to be done; but I would love some thoughts on this direction.

/cc @shana, @simurai, @niik for 👀 and 💭 (although feedback from anyone is encouraged)

[simurai]

The light grey makes it a bit stand out more. 👍

Not sure about the border for selected items:

Feels a bit crammed. I guess that's the default style? Maybe a bit more padding? Or no border, like for the assignee dropdown.

[shana]

Agree with @simurai on the border. The assignee dropdown has no border, only the checkbox, should probably make both dropdowns consistent?

EDIT: And by border I mean the border + darker background.

[donokuda]

@simurai @shana Agree on the border. Going to 🔥 that and see if it helps with the cramped feeling.

[donokuda]

Not exactly sure how I "fixed" the gray box, but it's 🔥 now:

Assignee combo box

Here's the default hover state for a row. Not 100% sold on it so I'll most likely noodle on it while doing the different themes.

[donokuda]

@shana I was hoping to be able to move this to the style declarations around line 62 but it doesn't seem to set the foreground in FilterTextBox.xaml.

Any insights as to why this isn't happening?

[shana]

Hmmm, no clue 😕

[shana]

I haz clue! Take out https://github.com/github/VisualStudio/blob/add-combobox-ui/src/GitHub.UI/Assets/Controls/FilterTextBox.xaml#L126, it's resetting the foreground in such a way that it overrides dynamic resource'd settings.

[donokuda]

✨ That did it! ✨

Thanks for looking into it!

[donokuda]

Added themes for the combo box. The light and blue themes share the same colors while the dark theme is it's own thing.

Blue:

Dark:

Light:

There's an issue where the prompt TextBox text is vertically off-centered which I plan on fixing next:

Would still love some 💭 and 👀

@shana This UI be moved to GitHub.UI instead of keeping it in the PullRequestCreationView.xaml file, right?

[shana]

This UI be moved to GitHub.UI instead of keeping it in the PullRequestCreationView.xaml file, right?

Let's put it in GitHub.VisualStudio.UI. That's going to require moving the style files as well, so just put the style in its own file in the Styles directory, and we'll move all of it later.

[donokuda]

Let's put it in GitHub.VisualStudio.UI. That's going to require moving the style files as well, so just put the style in its own file in the Styles directory, and we'll move all of it later.

👍 Excellent, I'll go ahead and do that.

[donokuda]

This line triggers a XAML parse error:

{"Cannot find resource named 'GitHub.UI.OcticonImage'. Resource names are case sensitive."}

I'm assuming I'm not resourcing correctly in Visual Studio on Line 3 😛

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:ui="clr-namespace:GitHub.UI;assembly=GitHub.UI">

Any chance of pointing me in the right direction of understanding how to get the right resource? I've been trying to follow how we're doing it in PullRequestCreationView.xaml.

[shana]

Hmmm, the xmlns:ui declaration is correct, the OcticonImage type is in the GitHub.UI namespace as declared here: https://github.com/github/VisualStudio/blob/master/src/GitHub.UI/Controls/Octicons/OcticonImage.cs#L5.
It might need the GitHubUI SharedDictionary.xaml file where the OcticonImage.xaml is included from (where the style is eventually declared).

Try adding to the top:

<ResourceDictionary.MergedDictionaries>
   <cache:SharedDictionaryManager Source="pack://application:,,,/GitHub.UI;component/SharedDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>

[donokuda]

🙇 That did it! Added in 7a334de

[shana]

Does this affect the UI in the Login/RepositoryCreation/RepositoryClone controls? Are they using this as well?

[donokuda]

This is a good question! I'll double check right now

[donokuda]

I believe those controls do so their text gets centered as well:

[shana]

purrrrfect!

[shana]

@donokuda I added a comment about the margin changes you did. Otherwise, things look ✨ ! I'll do a final pass and merge if you're happy with this branch 😄