Fluentui: Underlined and borderless Dropdown

[step-lee]

Describe the feature that you would like added

I would like to add an underlined and borderless version of the Dropdown component

What component or utility would this be added to

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

We are building out a form with basic inputs. We use the underlined and borderless TextField for text input like name and email. For country and DoB, we use the Dropdown component. However, we try to match the design between the two inputs but Dropdown doesn't have an underlined and borderless variant.

Underlined and borderless TextField:

Underlined and borderless Dropdown:

If the dev team doesn't see any problem of adding a new variant to the Dropdown. I'm more than happy to start a PR to add it in.

[khmakoto]

Hi @step-lee, thanks for filing this issue! I wonder if this really should be a variant or the Dropdown that we should add to Fabric or if this scenario is simply a matter of styling that maybe would be better if you hosted it inside your app. Wonder what @joschect thinks about this.

[step-lee]

Hello @khmakoto. Thank you for responding so quickly. To me it's a matter of consistency and feature parity:

1. Most of the component libraries have underlined and borderless dropdown. (Material-ui, React Toolbox, and Ant design etc)
2. Form elements such as TextField and Dropdown (frequently use together) should have consistent style in my opinion. I suspect a lot of people uses these two elements together in different scenarios.
   Above are the reasoning for my proposal. However, I understand this also touches design language. I'm more than happy to provide more reason.

[khmakoto]

I had an offline conversation with @joschect and we decided that we're putting this feature in the backlog for now while we work on more pressing issues.

[step-lee]

@khmakoto I'm more than happy to start a PR to drive this new feature to take some burden off the fabric dev team. Are there any concern or "got you" I should talk to the team before coding?

[khmakoto]

Well, the biggest thing is that there was a refactor planned for the ComboBox/Dropdown components so we need to marry how this fits into that work and if it's even worth doing the work now. You should probably speak with @joschect about this since he is the owner of this component.

[joschect]

@step-lee This should all be styling and there shouldn't be any big concerns, especially since it will be an opt-in. Only challenge that I can really is that then combobox will be the odd one out. We might want to make another issue to style it similarly to keep it consistent.

[joschect]

Also @step-lee thanks for offering to put the fix in!

[xugao]

@step-lee , we had a similar feature request #11345. Could you pls give a update on your progress so far? or whether you are actively working on this?

@joschect @khmakoto, FYI - #11345 is asking for having both Dropdown and ComboBox to support underlined

[step-lee]

@xugao I got caught up with other projects and didn't get a chance to work on this further. I'll prob try to submit a PR by the end of the week.

[xugao]

@step-lee - is this still working in progress ? :)

[jekaspekas]

I think that the design of ComboBox and Dropdown components should be based on a TextField, similarly DatePicker.

[joschect]

@step-lee Any updates on this one?

[step-lee]

@joschect First time contributing. Please let me know if I need to fix my PR.